@litigiovirtual/ius-design-components 1.0.205 → 1.0.207

package/fesm2022/litigiovirtual-ius-design-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, HostListener, HostBinding, inject, ViewContainerRef, ElementRef, Directive, signal, computed, ViewChild, ViewChildren, forwardRef, LOCALE_ID } from '@angular/core';
+import { Input, Component, EventEmitter, Output, HostListener, ViewChild, HostBinding, inject, ViewContainerRef, ElementRef, Directive, signal, computed, ViewChildren, forwardRef, LOCALE_ID } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DatePipe, NgClass, registerLocaleData } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
@@ -8,9 +8,9 @@ import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$4 from '@angular/router';
 import { RouterLink, RouterLinkActive } from '@angular/router';
-import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import localeEs from '@angular/common/locales/es';
 
 const ICONS = {
@@ -2647,12 +2647,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class InputSelectComponent {
-    constructor() {
+    get showList() {
+        return this._overlayRef !== null;
+    }
+    constructor(_el, _overlay, _vcr) {
+        this._el = _el;
+        this._overlay = _overlay;
+        this._vcr = _vcr;
         this.isFocused = false;
         this.isAlertText = false;
-        this.showList = false;
-        this.hasClickedInside = false; //Bandera para detectar que ya dieron el primer click en el componente
+        this.hasClickedInside = false;
         this.selected = false;
+        this._overlayRef = null;
         this.componentId = ''; //Debe mandar un componenteID para llamar el input varias veces
         this.required = false;
         this.disabled = false;
@@ -2662,36 +2668,30 @@ class InputSelectComponent {
         this.onChangesValueEvent = new EventEmitter();
         this.onEnterKey = new EventEmitter();
     }
-    //Esta funcion permite que se cierre el listado si el usuario da click en otro lado fuera del componente
     onClickOutside(event) {
         if (!this.hasClickedInside) {
             return;
         }
         const target = event.target;
+        // Si el click es dentro del panel overlay del input-select, no cerrar
+        if (this._overlayRef?.overlayElement.contains(target)) {
+            return;
+        }
         const container = document.getElementById(this.componentId);
-        const containerTextfield = container?.querySelector('.container-textfield');
-        const containerList = container?.querySelector('.container-list');
-        // 1. Cierra la lista si el click está completamente fuera del componente
-        if (container && !container.contains(target)) {
+        // Si container es null significa que ya no está en el DOM
+        // (p.ej. el button-filter cerró y eliminó el host del DOM) → cerrar
+        // Si está en el DOM y el click fue fuera → cerrar
+        if (!container || !container.contains(target)) {
             this.closeList();
         }
-        // 2. Si el click está dentro del componente pero
-        //    NO está ni en el textfield ni en la lista, también cierra
-        else if (containerTextfield && containerList) {
-            const clickEnTextfield = containerTextfield.contains(target);
-            const clickEnLista = containerList.contains(target);
-            if (!clickEnTextfield && !clickEnLista) {
-                this.closeList();
-            }
-        }
     }
     closeList(event) {
         if (event) {
             event.stopImmediatePropagation();
         }
         this.isFocused = false;
-        this.showList = false;
-        if (!this.selected && !this.showList && this.required) {
+        this._closePanel();
+        if (!this.selected && this.required) {
             this.isAlertText = true;
         }
         else {
@@ -2709,8 +2709,10 @@ class InputSelectComponent {
             return;
         }
         this.isFocused = true;
-        this.showList = true;
         this.hasClickedInside = true;
+        if (!this.showList) {
+            this._openPanel();
+        }
     }
     onBlur() {
         this.isFocused = false;
@@ -2733,7 +2735,7 @@ class InputSelectComponent {
     onSelectOption() {
         this.selected = true;
         this.isFocused = false;
-        this.showList = false;
+        this._closePanel();
         this.isAlertText = false;
     }
     onDropBlock(event) {
@@ -2744,13 +2746,42 @@ class InputSelectComponent {
         // Evita que se permita arrastrar texto sobre el input
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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\">\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    }\" (click)=\"onFocus()\">\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\" (input)=\"onInput()\"\r\n      [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n      (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n    <div class=\"cnt-icon-right\">\r\n      @if(!showList){\r\n      <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n      }@else{\r\n      <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n        <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n      </div>\r\n      }\r\n    </div>\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  @if (showList) {\r\n  <div class=\"container-list scrollable-small\">\r\n    <div (click)=\"onSelectOption()\">\r\n      <ng-content selector=\"ius-option\"></ng-content>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    _openPanel() {
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._el)
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            width: this._el.nativeElement.getBoundingClientRect().width,
+        });
+        this._overlayRef.attach(new TemplatePortal(this.listPanel, this._vcr));
+    }
+    _closePanel() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this._closePanel();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    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)" } }, viewQueries: [{ propertyName: "listPanel", first: true, predicate: ["listPanel"], descendants: true }], ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\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    }\" (click)=\"onFocus()\">\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\" (input)=\"onInput()\"\r\n      [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n      (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n    <div class=\"cnt-icon-right\">\r\n      @if(!showList){\r\n      <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n      }@else{\r\n      <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n        <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n      </div>\r\n      }\r\n    </div>\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  <ng-template #listPanel>\r\n    <div class=\"container-list scrollable-small\">\r\n      <div (click)=\"onSelectOption()\">\r\n        <ng-content selector=\"ius-option\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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{max-height:144px;width:100%;display:flex;flex-direction:column;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\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    }\" (click)=\"onFocus()\">\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\" (input)=\"onInput()\"\r\n      [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n      (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n    <div class=\"cnt-icon-right\">\r\n      @if(!showList){\r\n      <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n      }@else{\r\n      <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n        <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n      </div>\r\n      }\r\n    </div>\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  @if (showList) {\r\n  <div class=\"container-list scrollable-small\">\r\n    <div (click)=\"onSelectOption()\">\r\n      <ng-content selector=\"ius-option\"></ng-content>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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"] }]
-        }], propDecorators: { componentId: [{
+            args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\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    }\" (click)=\"onFocus()\">\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\" (input)=\"onInput()\"\r\n      [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n      (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n    <div class=\"cnt-icon-right\">\r\n      @if(!showList){\r\n      <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n      }@else{\r\n      <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n        <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n      </div>\r\n      }\r\n    </div>\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  <ng-template #listPanel>\r\n    <div class=\"container-list scrollable-small\">\r\n      <div (click)=\"onSelectOption()\">\r\n        <ng-content selector=\"ius-option\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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{max-height:144px;width:100%;display:flex;flex-direction:column;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { listPanel: [{
+                type: ViewChild,
+                args: ['listPanel']
+            }], componentId: [{
                 type: Input,
                 args: [{ required: true }]
             }], required: [{
@@ -3114,7 +3145,7 @@ class DrawerContainerRightComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DrawerContainerRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DrawerContainerRightComponent, isStandalone: true, selector: "ius-drawer-container-right", inputs: { titleDrawer: "titleDrawer", percentProgressBar: "percentProgressBar" }, outputs: { onPressedBackEvent: "onPressedBackEvent", onDrawerClosed: "onDrawerClosed" }, ngImport: i0, template: "<div class=\"background-drawer\">\r\n  @if (isVisible) {\r\n  <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n    <div class=\"header-drawer\">\r\n      <div class=\"button-header-drawer\">\r\n        <ius-button-circle-tertiary\r\n          (buttonClicked)=\"close()\"\r\n          iconName=\"icon-arrow-left-alt\"\r\n        ></ius-button-circle-tertiary>\r\n      </div>\r\n      <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n    </div>\r\n    <ius-linear-progress-bar\r\n      [porcentaje]=\"percentProgressBar\"\r\n    ></ius-linear-progress-bar>\r\n    <div\r\n      class=\"scrollable-small\"\r\n      style=\"height: calc(100% - 69px); overflow-y:auto;\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:900}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:8px;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: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["porcentaje"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DrawerContainerRightComponent, isStandalone: true, selector: "ius-drawer-container-right", inputs: { titleDrawer: "titleDrawer", percentProgressBar: "percentProgressBar" }, outputs: { onPressedBackEvent: "onPressedBackEvent", onDrawerClosed: "onDrawerClosed" }, ngImport: i0, template: "<div class=\"background-drawer\">\r\n  @if (isVisible) {\r\n  <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n    <div class=\"header-drawer\">\r\n      <div class=\"button-header-drawer\">\r\n        <ius-button-circle-tertiary\r\n          (buttonClicked)=\"close()\"\r\n          iconName=\"icon-arrow-left-alt\"\r\n        ></ius-button-circle-tertiary>\r\n      </div>\r\n      <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n    </div>\r\n    <ius-linear-progress-bar\r\n      [porcentaje]=\"percentProgressBar\"\r\n    ></ius-linear-progress-bar>\r\n    <div\r\n      class=\"scrollable\"\r\n      style=\"height: calc(100% - 69px); overflow-y:auto;\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:900}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}\n"], dependencies: [{ kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["porcentaje"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }], animations: [
             trigger('slideInOut', [
                 state('void', style({
                     transform: 'translateX(100%)',
@@ -3152,7 +3183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 animate('300ms ease-out')
                             ])
                         ])
-                    ], template: "<div class=\"background-drawer\">\r\n  @if (isVisible) {\r\n  <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n    <div class=\"header-drawer\">\r\n      <div class=\"button-header-drawer\">\r\n        <ius-button-circle-tertiary\r\n          (buttonClicked)=\"close()\"\r\n          iconName=\"icon-arrow-left-alt\"\r\n        ></ius-button-circle-tertiary>\r\n      </div>\r\n      <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n    </div>\r\n    <ius-linear-progress-bar\r\n      [porcentaje]=\"percentProgressBar\"\r\n    ></ius-linear-progress-bar>\r\n    <div\r\n      class=\"scrollable-small\"\r\n      style=\"height: calc(100% - 69px); overflow-y:auto;\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:900}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:8px;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"] }]
+                    ], template: "<div class=\"background-drawer\">\r\n  @if (isVisible) {\r\n  <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n    <div class=\"header-drawer\">\r\n      <div class=\"button-header-drawer\">\r\n        <ius-button-circle-tertiary\r\n          (buttonClicked)=\"close()\"\r\n          iconName=\"icon-arrow-left-alt\"\r\n        ></ius-button-circle-tertiary>\r\n      </div>\r\n      <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n    </div>\r\n    <ius-linear-progress-bar\r\n      [porcentaje]=\"percentProgressBar\"\r\n    ></ius-linear-progress-bar>\r\n    <div\r\n      class=\"scrollable\"\r\n      style=\"height: calc(100% - 69px); overflow-y:auto;\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:900}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}\n"] }]
         }], propDecorators: { titleDrawer: [{
                 type: Input
             }], percentProgressBar: [{
@@ -3763,11 +3794,11 @@ class ProgressBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressBarComponent, isStandalone: true, selector: "ius-progress-bar", inputs: { total: "total", v1: "v1", v2: "v2", v3: "v3", titleV1: "titleV1", titleV2: "titleV2", titleV3: "titleV3", titleV4: "titleV4" }, ngImport: i0, template: "<div\r\n  class=\"sb\"\r\n  role=\"progressbar\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"t()\"\r\n  [attr.aria-valuenow]=\"used()\"\r\n>\r\n  <div class=\"seg s1\" [style.width.%]=\"pct().p1\" (mouseenter)=\"onMouseEnter('s1')\" (mouseleave)=\"onMouseLeave('s1')\">\r\n    <ius-popover *ngIf=\"showPopover1\" content=\"{{ a1() }}\" [label]=\"titleV1\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s2\" [style.width.%]=\"pct().p2\" (mouseenter)=\"onMouseEnter('s2')\" (mouseleave)=\"onMouseLeave('s2')\">\r\n    <ius-popover *ngIf=\"showPopover2\" content=\"{{ a2() }}\" [label]=\"titleV2\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s3\" [style.width.%]=\"pct().p3\" (mouseenter)=\"onMouseEnter('s3')\" (mouseleave)=\"onMouseLeave('s3')\">\r\n    <ius-popover *ngIf=\"showPopover3\" content=\"{{ a3() }}\" [label]=\"titleV3\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <!-- <div class=\"seg s4\" [style.width.%]=\"pct().p4\" (mouseenter)=\"onMouseEnter('s4')\" (mouseleave)=\"onMouseLeave('s4')\">\r\n    <ius-popover *ngIf=\"showPopover4\" content=\"{{ a4() }}\" [label]=\"titleV4\" positionClass=\"tail-top\"></ius-popover>\r\n  </div> -->\r\n  <div class=\"seg gray\" [style.width.%]=\"pct().pg\" (mouseenter)=\"onMouseEnter('gray')\" (mouseleave)=\"onMouseLeave('gray')\">\r\n    <ius-popover *ngIf=\"showPopoverGray\" content=\"{{ available() }}\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.sb{width:100%;height:20px;border-radius:10px;display:flex;background:#e5e7eb;position:relative;overflow:hidden}.seg{height:100%}.s1{background:#103ab7;border-radius:10px 0 0 10px}.s2{background:#2167ff}.s3{background:#5892ff}.s4{background:#79acff;border-radius:0 10px 10px 0}.gray{background:#e5e7eb;border-radius:0 10px 10px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["label", "content", "positionClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressBarComponent, isStandalone: true, selector: "ius-progress-bar", inputs: { total: "total", v1: "v1", v2: "v2", v3: "v3", titleV1: "titleV1", titleV2: "titleV2", titleV3: "titleV3", titleV4: "titleV4" }, ngImport: i0, template: "<div\r\n  class=\"sb\"\r\n  role=\"progressbar\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"t()\"\r\n  [attr.aria-valuenow]=\"used()\"\r\n>\r\n  <div class=\"seg s1\" [style.width.%]=\"pct().p1\" (mouseenter)=\"onMouseEnter('s1')\" (mouseleave)=\"onMouseLeave('s1')\">\r\n    <ius-popover *ngIf=\"showPopover1\" content=\"{{ a1() }}\" [label]=\"titleV1\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s2\" [style.width.%]=\"pct().p2\" (mouseenter)=\"onMouseEnter('s2')\" (mouseleave)=\"onMouseLeave('s2')\">\r\n    <ius-popover *ngIf=\"showPopover2\" content=\"{{ a2() }}\" [label]=\"titleV2\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s3\" [style.width.%]=\"pct().p3\" (mouseenter)=\"onMouseEnter('s3')\" (mouseleave)=\"onMouseLeave('s3')\">\r\n    <ius-popover *ngIf=\"showPopover3\" content=\"{{ a3() }}\" [label]=\"titleV3\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <!-- <div class=\"seg s4\" [style.width.%]=\"pct().p4\" (mouseenter)=\"onMouseEnter('s4')\" (mouseleave)=\"onMouseLeave('s4')\">\r\n    <ius-popover *ngIf=\"showPopover4\" content=\"{{ a4() }}\" [label]=\"titleV4\" positionClass=\"tail-top\"></ius-popover>\r\n  </div> -->\r\n  <div class=\"seg gray\" [style.width.%]=\"pct().pg\" (mouseenter)=\"onMouseEnter('gray')\" (mouseleave)=\"onMouseLeave('gray')\">\r\n    <ius-popover *ngIf=\"showPopoverGray\" content=\"{{ available() }}\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.sb{width:100%;height:20px;border-radius:10px;display:flex;background:#e5e7eb;position:relative}.seg{height:100%}.s1{background:#103ab7;border-radius:10px 0 0 10px}.s2{background:#2167ff}.s3{background:#5892ff}.gray{background:#e5e7eb;border-radius:0 10px 10px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["label", "content", "positionClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ius-progress-bar', standalone: true, imports: [CommonModule, PopoverComponent], template: "<div\r\n  class=\"sb\"\r\n  role=\"progressbar\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"t()\"\r\n  [attr.aria-valuenow]=\"used()\"\r\n>\r\n  <div class=\"seg s1\" [style.width.%]=\"pct().p1\" (mouseenter)=\"onMouseEnter('s1')\" (mouseleave)=\"onMouseLeave('s1')\">\r\n    <ius-popover *ngIf=\"showPopover1\" content=\"{{ a1() }}\" [label]=\"titleV1\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s2\" [style.width.%]=\"pct().p2\" (mouseenter)=\"onMouseEnter('s2')\" (mouseleave)=\"onMouseLeave('s2')\">\r\n    <ius-popover *ngIf=\"showPopover2\" content=\"{{ a2() }}\" [label]=\"titleV2\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s3\" [style.width.%]=\"pct().p3\" (mouseenter)=\"onMouseEnter('s3')\" (mouseleave)=\"onMouseLeave('s3')\">\r\n    <ius-popover *ngIf=\"showPopover3\" content=\"{{ a3() }}\" [label]=\"titleV3\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <!-- <div class=\"seg s4\" [style.width.%]=\"pct().p4\" (mouseenter)=\"onMouseEnter('s4')\" (mouseleave)=\"onMouseLeave('s4')\">\r\n    <ius-popover *ngIf=\"showPopover4\" content=\"{{ a4() }}\" [label]=\"titleV4\" positionClass=\"tail-top\"></ius-popover>\r\n  </div> -->\r\n  <div class=\"seg gray\" [style.width.%]=\"pct().pg\" (mouseenter)=\"onMouseEnter('gray')\" (mouseleave)=\"onMouseLeave('gray')\">\r\n    <ius-popover *ngIf=\"showPopoverGray\" content=\"{{ available() }}\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.sb{width:100%;height:20px;border-radius:10px;display:flex;background:#e5e7eb;position:relative;overflow:hidden}.seg{height:100%}.s1{background:#103ab7;border-radius:10px 0 0 10px}.s2{background:#2167ff}.s3{background:#5892ff}.s4{background:#79acff;border-radius:0 10px 10px 0}.gray{background:#e5e7eb;border-radius:0 10px 10px 0}\n"] }]
+            args: [{ selector: 'ius-progress-bar', standalone: true, imports: [CommonModule, PopoverComponent], template: "<div\r\n  class=\"sb\"\r\n  role=\"progressbar\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"t()\"\r\n  [attr.aria-valuenow]=\"used()\"\r\n>\r\n  <div class=\"seg s1\" [style.width.%]=\"pct().p1\" (mouseenter)=\"onMouseEnter('s1')\" (mouseleave)=\"onMouseLeave('s1')\">\r\n    <ius-popover *ngIf=\"showPopover1\" content=\"{{ a1() }}\" [label]=\"titleV1\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s2\" [style.width.%]=\"pct().p2\" (mouseenter)=\"onMouseEnter('s2')\" (mouseleave)=\"onMouseLeave('s2')\">\r\n    <ius-popover *ngIf=\"showPopover2\" content=\"{{ a2() }}\" [label]=\"titleV2\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <div class=\"seg s3\" [style.width.%]=\"pct().p3\" (mouseenter)=\"onMouseEnter('s3')\" (mouseleave)=\"onMouseLeave('s3')\">\r\n    <ius-popover *ngIf=\"showPopover3\" content=\"{{ a3() }}\" [label]=\"titleV3\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n  <!-- <div class=\"seg s4\" [style.width.%]=\"pct().p4\" (mouseenter)=\"onMouseEnter('s4')\" (mouseleave)=\"onMouseLeave('s4')\">\r\n    <ius-popover *ngIf=\"showPopover4\" content=\"{{ a4() }}\" [label]=\"titleV4\" positionClass=\"tail-top\"></ius-popover>\r\n  </div> -->\r\n  <div class=\"seg gray\" [style.width.%]=\"pct().pg\" (mouseenter)=\"onMouseEnter('gray')\" (mouseleave)=\"onMouseLeave('gray')\">\r\n    <ius-popover *ngIf=\"showPopoverGray\" content=\"{{ available() }}\" positionClass=\"tail-top\"></ius-popover>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.sb{width:100%;height:20px;border-radius:10px;display:flex;background:#e5e7eb;position:relative}.seg{height:100%}.s1{background:#103ab7;border-radius:10px 0 0 10px}.s2{background:#2167ff}.s3{background:#5892ff}.gray{background:#e5e7eb;border-radius:0 10px 10px 0}\n"] }]
         }], propDecorators: { total: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3849,11 +3880,11 @@ class ToolbarUserMenuComponent {
         this.requestClose.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToolbarUserMenuComponent, isStandalone: true, selector: "ius-toolbar-user-menu", inputs: { object: "object", subscripcionDetalle: "subscripcionDetalle", detallesConsumo: "detallesConsumo", accountList: "accountList" }, outputs: { clickPerfilPreferencias: "clickPerfilPreferencias", clickUsuariosRoles: "clickUsuariosRoles", clickConfiguracion: "clickConfiguracion", clickPagos: "clickPagos", clickSubsServicios: "clickSubsServicios", clickCambiarCuenta: "clickCambiarCuenta", clickCerrarSesion: "clickCerrarSesion", clickReferir: "clickReferir", requestClose: "requestClose", clickAccountSelected: "clickAccountSelected", clickAccountPredeterminada: "clickAccountPredeterminada", clickEditAccount: "clickEditAccount", clickDesvincularAccount: "clickDesvincularAccount", clickAgregarAccount: "clickAgregarAccount" }, ngImport: i0, template: "<div class=\"tbl-menu\">\r\n  <div class=\"body-menu scrollable\">\r\n    <div class=\"colum-mn-1 text-head-mn\">\r\n      <span>Estas navegando en</span>\r\n      <div class=\"tx-row-1\">\r\n        <ius-icon-sm\r\n          iconName=\"icon-account-circle\"\r\n          class=\"icon-acc-circle\"\r\n        ></ius-icon-sm>\r\n        <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 id-ct\">\r\n        <span>ID Cuenta</span>\r\n        <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 tx-rol\">\r\n        <span>Tu rol</span>\r\n        <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n      </div>\r\n    </div>\r\n    @if (!showFormSwitchAccount) {\r\n      <div class=\"colum-mn-1\">\r\n        <div class=\"email-inf\">\r\n          <ius-icon-xs\r\n            iconName=\"icon-alternate-email\"\r\n            class=\"icon-alt-email\"\r\n          ></ius-icon-xs>\r\n          <span>{{ object.correo }}</span>\r\n        </div>\r\n        <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\"\r\n          >Perfil, preferencias y seguridad</ius-dropdown-option-item\r\n        >\r\n      </div>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n        <div class=\"inf-plan\">\r\n          <div class=\"row-plan-1\">\r\n            <div class=\"col-plan-1\">\r\n              <span class=\"tx-small tx-tipo-plan\">{{\r\n                subscripcionDetalle?.tipoServicio\r\n              }}</span>\r\n              <div class=\"tx-row-1\">\r\n                <span class=\"tx-base tx-name-plan\">{{\r\n                  subscripcionDetalle?.namePlan\r\n                }}</span>\r\n                <ius-icon-md\r\n                  iconName=\"icon-help\"\r\n                  class=\"icon-help\"\r\n                ></ius-icon-md>\r\n              </div>\r\n              <div class=\"tx-row-2 tx-small\">\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Total global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantTotal\r\n                  }}</span>\r\n                </div>\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Disponible global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantDisponible\r\n                  }}</span>\r\n                </div>\r\n              </div>\r\n              <span class=\"tx-base tx-estado-plan\">{{\r\n                subscripcionDetalle?.estado\r\n              }}</span>\r\n            </div>\r\n            <ius-button-circle-tertiary\r\n              iconName=\"icon-discover-tune\"\r\n            ></ius-button-circle-tertiary>\r\n          </div>\r\n          <div style=\"width: 100%\">\r\n            <ius-progress-bar\r\n              [total]=\"subscripcionDetalle?.cantTotal ?? 0\"\r\n              [titleV1]=\"'Insolvencia'\"\r\n              [v1]=\"subscripcionDetalle?.cantProcesos2 ?? 0\"\r\n              [titleV2]=\"'Judicial'\"\r\n              [v2]=\"subscripcionDetalle?.cantJudicial ?? 0\"\r\n              [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\"\r\n            >\r\n            </ius-progress-bar>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-set\"\r\n                class=\"icon-storage-set\"\r\n              ></ius-icon-xs>\r\n              <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n            </div>\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-plus\"\r\n                class=\"icon-storage-plus\"\r\n              ></ius-icon-xs>\r\n              <span>{{\r\n                subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ius-simple-divider></ius-simple-divider>\r\n        @if (detallesConsumo) {\r\n          @for (detail of detallesConsumo; track $index) {\r\n            <div class=\"inf-plan\">\r\n              <div class=\"row-plan-1\">\r\n                <div class=\"col-plan-1\">\r\n                  <span class=\"tx-small tx-tipo-plan\">{{\r\n                    detail.tipoServicio\r\n                  }}</span>\r\n                  <div class=\"tx-row-1\">\r\n                    <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n                    <ius-icon-md\r\n                      iconName=\"icon-help\"\r\n                      class=\"icon-help\"\r\n                    ></ius-icon-md>\r\n                  </div>\r\n                  <div class=\"tx-row-2 tx-small\">\r\n                    <div class=\"tx-row-1\">\r\n                      <span class=\"tx-contador-1\">Consumo este mes</span>\r\n                      <span class=\"tx-contador-2\">{{\r\n                        detail.cantConsumida\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <span class=\"tx-base tx-estado-plan\">{{\r\n                    detail.estado\r\n                  }}</span>\r\n                </div>\r\n                <ius-button-circle-tertiary\r\n                  iconName=\"icon-discover-tune\"\r\n                ></ius-button-circle-tertiary>\r\n              </div>\r\n            </div>\r\n            <ius-simple-divider></ius-simple-divider>\r\n          }\r\n        }\r\n      </div>\r\n      <ius-button-standard-tertiary\r\n        class=\"btn-list\"\r\n        [iconName]=\"\r\n          showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n        \"\r\n        (buttonClicked)=\"clickShowMore()\"\r\n      >\r\n        {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n      </ius-button-standard-tertiary>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"ctn-items\">\r\n        <ius-menu-item\r\n          iconName=\"icon-groups\"\r\n          (buttonClicked)=\"onClickUsuariosRoles()\"\r\n          >Usuarios y roles</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-build\"\r\n          (buttonClicked)=\"onClickConfiguracion()\"\r\n          >Configuraci\u00F3n de la cuenta</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-finance-chip\"\r\n          (buttonClicked)=\"onClickPagos()\"\r\n          >Pagos y facturaci\u00F3n</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-enterprise\"\r\n          (buttonClicked)=\"onClickSubsServicios()\"\r\n          >Suscripciones y servicios</ius-menu-item\r\n        >\r\n        <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\"\r\n          >Referir servicio</ius-menu-item\r\n        >\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n    } @else {\r\n      <div class=\"container-bottom\">\r\n        <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n        <div class=\"container-list\">\r\n          @for (account of accountList; track account; let i = $index) {\r\n            <ius-button-accounts\r\n              (accountSelected)=\"onClickAccount(account)\"\r\n              (onPressedPredeterminado)=\"\r\n                clickAccountPredeterminada.emit(account)\r\n              \"\r\n              ,\r\n              (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n              ,\r\n              (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n              [account]=\"account\"\r\n            ></ius-button-accounts>\r\n          }\r\n        </div>\r\n        <!-- <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n                nueva cuenta</ius-button-standard-tertiary> -->\r\n      </div>\r\n    }\r\n  </div>\r\n  <div class=\"ctn-items mgt-8\">\r\n    <ius-menu-item\r\n      iconName=\"{{\r\n        !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n      }}\"\r\n      (buttonClicked)=\"onClickCambiarCuenta()\"\r\n      >{{\r\n        !showFormSwitchAccount\r\n          ? \"Cambiar de cuenta\"\r\n          : \"Volver al menu de usuario\"\r\n      }}</ius-menu-item\r\n    >\r\n    <ius-menu-item\r\n      iconName=\"icon-exit-to-app\"\r\n      (buttonClicked)=\"onClickCerrarSesion()\"\r\n      >Cerrar sesi\u00F3n</ius-menu-item\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: DropdownOptionItemComponent, selector: "ius-dropdown-option-item", inputs: ["iconName", "route"], outputs: ["click"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { 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: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["isActive", "iconName", "numberAlerts"], outputs: ["buttonClicked"] }, { kind: "component", type: ProgressBarComponent, selector: "ius-progress-bar", inputs: ["total", "v1", "v2", "v3", "titleV1", "titleV2", "titleV3", "titleV4"] }, { kind: "component", type: ButtonAccountsComponent, selector: "ius-button-accounts", inputs: ["account"], outputs: ["accountSelected", "onPressedPredeterminado", "onPressedDesvincular", "onPressedEditar"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToolbarUserMenuComponent, isStandalone: true, selector: "ius-toolbar-user-menu", inputs: { object: "object", subscripcionDetalle: "subscripcionDetalle", detallesConsumo: "detallesConsumo", accountList: "accountList" }, outputs: { clickPerfilPreferencias: "clickPerfilPreferencias", clickUsuariosRoles: "clickUsuariosRoles", clickConfiguracion: "clickConfiguracion", clickPagos: "clickPagos", clickSubsServicios: "clickSubsServicios", clickCambiarCuenta: "clickCambiarCuenta", clickCerrarSesion: "clickCerrarSesion", clickReferir: "clickReferir", requestClose: "requestClose", clickAccountSelected: "clickAccountSelected", clickAccountPredeterminada: "clickAccountPredeterminada", clickEditAccount: "clickEditAccount", clickDesvincularAccount: "clickDesvincularAccount", clickAgregarAccount: "clickAgregarAccount" }, ngImport: i0, template: "<div class=\"tbl-menu\">\r\n  <div class=\"body-menu scrollable\">\r\n    <div class=\"colum-mn-1 text-head-mn\">\r\n      <span>Estas navegando en</span>\r\n      <div class=\"tx-row-1\">\r\n        <ius-icon-sm\r\n          iconName=\"icon-account-circle\"\r\n          class=\"icon-acc-circle\"\r\n        ></ius-icon-sm>\r\n        <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 id-ct\">\r\n        <span>ID Cuenta</span>\r\n        <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 tx-rol\">\r\n        <span>Tu rol</span>\r\n        <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n      </div>\r\n    </div>\r\n    @if (!showFormSwitchAccount) {\r\n      <div class=\"colum-mn-1\">\r\n        <div class=\"email-inf\">\r\n          <ius-icon-xs\r\n            iconName=\"icon-alternate-email\"\r\n            class=\"icon-alt-email\"\r\n          ></ius-icon-xs>\r\n          <span>{{ object.correo }}</span>\r\n        </div>\r\n        <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\"\r\n          >Perfil, preferencias y seguridad</ius-dropdown-option-item\r\n        >\r\n      </div>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n        <div class=\"inf-plan\">\r\n          <div class=\"row-plan-1\">\r\n            <div class=\"col-plan-1\">\r\n              <span class=\"tx-small tx-tipo-plan\">{{\r\n                subscripcionDetalle?.tipoServicio\r\n              }}</span>\r\n              <div class=\"tx-row-1\">\r\n                <span class=\"tx-base tx-name-plan\">{{\r\n                  subscripcionDetalle?.namePlan\r\n                }}</span>\r\n                <ius-icon-md\r\n                  iconName=\"icon-help\"\r\n                  class=\"icon-help\"\r\n                ></ius-icon-md>\r\n              </div>\r\n              <div class=\"tx-row-2 tx-small\">\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Total global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantTotal\r\n                  }}</span>\r\n                </div>\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Disponible global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantDisponible\r\n                  }}</span>\r\n                </div>\r\n              </div>\r\n              <span class=\"tx-base tx-estado-plan\">{{\r\n                subscripcionDetalle?.estado\r\n              }}</span>\r\n            </div>\r\n            <ius-button-circle-tertiary\r\n              iconName=\"icon-discover-tune\"\r\n            ></ius-button-circle-tertiary>\r\n          </div>\r\n          <div style=\"width: 100%\">\r\n            <ius-progress-bar\r\n              [total]=\"subscripcionDetalle?.cantTotal ?? 0\"\r\n              [titleV1]=\"'Judicial'\"\r\n              [v1]=\"subscripcionDetalle?.cantJudicial ?? 0\"\r\n              [titleV2]=\"'SuperSociedades'\"\r\n              [v2]=\"subscripcionDetalle?.cantProcesos2 ?? 0\"\r\n              [titleV3]=\"'Procuraduria'\"\r\n              [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\"\r\n            >\r\n            </ius-progress-bar>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-set\"\r\n                class=\"icon-storage-set\"\r\n              ></ius-icon-xs>\r\n              <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n            </div>\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-plus\"\r\n                class=\"icon-storage-plus\"\r\n              ></ius-icon-xs>\r\n              <span>{{\r\n                subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ius-simple-divider></ius-simple-divider>\r\n        @if (detallesConsumo) {\r\n          @for (detail of detallesConsumo; track $index) {\r\n            <div class=\"inf-plan\">\r\n              <div class=\"row-plan-1\">\r\n                <div class=\"col-plan-1\">\r\n                  <span class=\"tx-small tx-tipo-plan\">{{\r\n                    detail.tipoServicio\r\n                  }}</span>\r\n                  <div class=\"tx-row-1\">\r\n                    <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n                    <ius-icon-md\r\n                      iconName=\"icon-help\"\r\n                      class=\"icon-help\"\r\n                    ></ius-icon-md>\r\n                  </div>\r\n                  <div class=\"tx-row-2 tx-small\">\r\n                    <div class=\"tx-row-1\">\r\n                      <span class=\"tx-contador-1\">Consumo este mes</span>\r\n                      <span class=\"tx-contador-2\">{{\r\n                        detail.cantConsumida\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <span class=\"tx-base tx-estado-plan\">{{\r\n                    detail.estado\r\n                  }}</span>\r\n                </div>\r\n                <ius-button-circle-tertiary\r\n                  iconName=\"icon-discover-tune\"\r\n                ></ius-button-circle-tertiary>\r\n              </div>\r\n            </div>\r\n            <ius-simple-divider></ius-simple-divider>\r\n          }\r\n        }\r\n      </div>\r\n      <ius-button-standard-tertiary\r\n        class=\"btn-list\"\r\n        [iconName]=\"\r\n          showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n        \"\r\n        (buttonClicked)=\"clickShowMore()\"\r\n      >\r\n        {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n      </ius-button-standard-tertiary>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"ctn-items\">\r\n        <ius-menu-item\r\n          iconName=\"icon-groups\"\r\n          (buttonClicked)=\"onClickUsuariosRoles()\"\r\n          >Usuarios y roles</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-build\"\r\n          (buttonClicked)=\"onClickConfiguracion()\"\r\n          >Configuraci\u00F3n de la cuenta</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-finance-chip\"\r\n          (buttonClicked)=\"onClickPagos()\"\r\n          >Pagos y facturaci\u00F3n</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-enterprise\"\r\n          (buttonClicked)=\"onClickSubsServicios()\"\r\n          >Suscripciones y servicios</ius-menu-item\r\n        >\r\n        <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\"\r\n          >Referir servicio</ius-menu-item\r\n        >\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n    } @else {\r\n      <div class=\"container-bottom\">\r\n        <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n        <div class=\"container-list\">\r\n          @for (account of accountList; track account; let i = $index) {\r\n            <ius-button-accounts\r\n              (accountSelected)=\"onClickAccount(account)\"\r\n              (onPressedPredeterminado)=\"\r\n                clickAccountPredeterminada.emit(account)\r\n              \"\r\n              ,\r\n              (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n              ,\r\n              (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n              [account]=\"account\"\r\n            ></ius-button-accounts>\r\n          }\r\n        </div>\r\n        <!-- <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n                nueva cuenta</ius-button-standard-tertiary> -->\r\n      </div>\r\n    }\r\n  </div>\r\n  <div class=\"ctn-items mgt-8\">\r\n    <ius-menu-item\r\n      iconName=\"{{\r\n        !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n      }}\"\r\n      (buttonClicked)=\"onClickCambiarCuenta()\"\r\n      >{{\r\n        !showFormSwitchAccount\r\n          ? \"Cambiar de cuenta\"\r\n          : \"Volver al menu de usuario\"\r\n      }}</ius-menu-item\r\n    >\r\n    <ius-menu-item\r\n      iconName=\"icon-exit-to-app\"\r\n      (buttonClicked)=\"onClickCerrarSesion()\"\r\n      >Cerrar sesi\u00F3n</ius-menu-item\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconXsComponent, selector: "ius-icon-xs", inputs: ["iconName", "color"] }, { kind: "component", type: DropdownOptionItemComponent, selector: "ius-dropdown-option-item", inputs: ["iconName", "route"], outputs: ["click"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { 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: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["isActive", "iconName", "numberAlerts"], outputs: ["buttonClicked"] }, { kind: "component", type: ProgressBarComponent, selector: "ius-progress-bar", inputs: ["total", "v1", "v2", "v3", "titleV1", "titleV2", "titleV3", "titleV4"] }, { kind: "component", type: ButtonAccountsComponent, selector: "ius-button-accounts", inputs: ["account"], outputs: ["accountSelected", "onPressedPredeterminado", "onPressedDesvincular", "onPressedEditar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarUserMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ius-toolbar-user-menu', standalone: true, imports: [CommonModule, IconSmComponent, IconXsComponent, DropdownOptionItemComponent, SimpleDividerComponent, IconMdComponent, ButtonCircleTertiaryComponent, ButtonStandardTertiaryComponent, MenuItemComponent, ProgressBarComponent, ButtonAccountsComponent], template: "<div class=\"tbl-menu\">\r\n  <div class=\"body-menu scrollable\">\r\n    <div class=\"colum-mn-1 text-head-mn\">\r\n      <span>Estas navegando en</span>\r\n      <div class=\"tx-row-1\">\r\n        <ius-icon-sm\r\n          iconName=\"icon-account-circle\"\r\n          class=\"icon-acc-circle\"\r\n        ></ius-icon-sm>\r\n        <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 id-ct\">\r\n        <span>ID Cuenta</span>\r\n        <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 tx-rol\">\r\n        <span>Tu rol</span>\r\n        <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n      </div>\r\n    </div>\r\n    @if (!showFormSwitchAccount) {\r\n      <div class=\"colum-mn-1\">\r\n        <div class=\"email-inf\">\r\n          <ius-icon-xs\r\n            iconName=\"icon-alternate-email\"\r\n            class=\"icon-alt-email\"\r\n          ></ius-icon-xs>\r\n          <span>{{ object.correo }}</span>\r\n        </div>\r\n        <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\"\r\n          >Perfil, preferencias y seguridad</ius-dropdown-option-item\r\n        >\r\n      </div>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n        <div class=\"inf-plan\">\r\n          <div class=\"row-plan-1\">\r\n            <div class=\"col-plan-1\">\r\n              <span class=\"tx-small tx-tipo-plan\">{{\r\n                subscripcionDetalle?.tipoServicio\r\n              }}</span>\r\n              <div class=\"tx-row-1\">\r\n                <span class=\"tx-base tx-name-plan\">{{\r\n                  subscripcionDetalle?.namePlan\r\n                }}</span>\r\n                <ius-icon-md\r\n                  iconName=\"icon-help\"\r\n                  class=\"icon-help\"\r\n                ></ius-icon-md>\r\n              </div>\r\n              <div class=\"tx-row-2 tx-small\">\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Total global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantTotal\r\n                  }}</span>\r\n                </div>\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Disponible global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantDisponible\r\n                  }}</span>\r\n                </div>\r\n              </div>\r\n              <span class=\"tx-base tx-estado-plan\">{{\r\n                subscripcionDetalle?.estado\r\n              }}</span>\r\n            </div>\r\n            <ius-button-circle-tertiary\r\n              iconName=\"icon-discover-tune\"\r\n            ></ius-button-circle-tertiary>\r\n          </div>\r\n          <div style=\"width: 100%\">\r\n            <ius-progress-bar\r\n              [total]=\"subscripcionDetalle?.cantTotal ?? 0\"\r\n              [titleV1]=\"'Insolvencia'\"\r\n              [v1]=\"subscripcionDetalle?.cantProcesos2 ?? 0\"\r\n              [titleV2]=\"'Judicial'\"\r\n              [v2]=\"subscripcionDetalle?.cantJudicial ?? 0\"\r\n              [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\"\r\n            >\r\n            </ius-progress-bar>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-set\"\r\n                class=\"icon-storage-set\"\r\n              ></ius-icon-xs>\r\n              <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n            </div>\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-plus\"\r\n                class=\"icon-storage-plus\"\r\n              ></ius-icon-xs>\r\n              <span>{{\r\n                subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ius-simple-divider></ius-simple-divider>\r\n        @if (detallesConsumo) {\r\n          @for (detail of detallesConsumo; track $index) {\r\n            <div class=\"inf-plan\">\r\n              <div class=\"row-plan-1\">\r\n                <div class=\"col-plan-1\">\r\n                  <span class=\"tx-small tx-tipo-plan\">{{\r\n                    detail.tipoServicio\r\n                  }}</span>\r\n                  <div class=\"tx-row-1\">\r\n                    <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n                    <ius-icon-md\r\n                      iconName=\"icon-help\"\r\n                      class=\"icon-help\"\r\n                    ></ius-icon-md>\r\n                  </div>\r\n                  <div class=\"tx-row-2 tx-small\">\r\n                    <div class=\"tx-row-1\">\r\n                      <span class=\"tx-contador-1\">Consumo este mes</span>\r\n                      <span class=\"tx-contador-2\">{{\r\n                        detail.cantConsumida\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <span class=\"tx-base tx-estado-plan\">{{\r\n                    detail.estado\r\n                  }}</span>\r\n                </div>\r\n                <ius-button-circle-tertiary\r\n                  iconName=\"icon-discover-tune\"\r\n                ></ius-button-circle-tertiary>\r\n              </div>\r\n            </div>\r\n            <ius-simple-divider></ius-simple-divider>\r\n          }\r\n        }\r\n      </div>\r\n      <ius-button-standard-tertiary\r\n        class=\"btn-list\"\r\n        [iconName]=\"\r\n          showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n        \"\r\n        (buttonClicked)=\"clickShowMore()\"\r\n      >\r\n        {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n      </ius-button-standard-tertiary>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"ctn-items\">\r\n        <ius-menu-item\r\n          iconName=\"icon-groups\"\r\n          (buttonClicked)=\"onClickUsuariosRoles()\"\r\n          >Usuarios y roles</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-build\"\r\n          (buttonClicked)=\"onClickConfiguracion()\"\r\n          >Configuraci\u00F3n de la cuenta</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-finance-chip\"\r\n          (buttonClicked)=\"onClickPagos()\"\r\n          >Pagos y facturaci\u00F3n</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-enterprise\"\r\n          (buttonClicked)=\"onClickSubsServicios()\"\r\n          >Suscripciones y servicios</ius-menu-item\r\n        >\r\n        <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\"\r\n          >Referir servicio</ius-menu-item\r\n        >\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n    } @else {\r\n      <div class=\"container-bottom\">\r\n        <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n        <div class=\"container-list\">\r\n          @for (account of accountList; track account; let i = $index) {\r\n            <ius-button-accounts\r\n              (accountSelected)=\"onClickAccount(account)\"\r\n              (onPressedPredeterminado)=\"\r\n                clickAccountPredeterminada.emit(account)\r\n              \"\r\n              ,\r\n              (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n              ,\r\n              (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n              [account]=\"account\"\r\n            ></ius-button-accounts>\r\n          }\r\n        </div>\r\n        <!-- <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n                nueva cuenta</ius-button-standard-tertiary> -->\r\n      </div>\r\n    }\r\n  </div>\r\n  <div class=\"ctn-items mgt-8\">\r\n    <ius-menu-item\r\n      iconName=\"{{\r\n        !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n      }}\"\r\n      (buttonClicked)=\"onClickCambiarCuenta()\"\r\n      >{{\r\n        !showFormSwitchAccount\r\n          ? \"Cambiar de cuenta\"\r\n          : \"Volver al menu de usuario\"\r\n      }}</ius-menu-item\r\n    >\r\n    <ius-menu-item\r\n      iconName=\"icon-exit-to-app\"\r\n      (buttonClicked)=\"onClickCerrarSesion()\"\r\n      >Cerrar sesi\u00F3n</ius-menu-item\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"] }]
+            args: [{ selector: 'ius-toolbar-user-menu', standalone: true, imports: [CommonModule, IconSmComponent, IconXsComponent, DropdownOptionItemComponent, SimpleDividerComponent, IconMdComponent, ButtonCircleTertiaryComponent, ButtonStandardTertiaryComponent, MenuItemComponent, ProgressBarComponent, ButtonAccountsComponent], template: "<div class=\"tbl-menu\">\r\n  <div class=\"body-menu scrollable\">\r\n    <div class=\"colum-mn-1 text-head-mn\">\r\n      <span>Estas navegando en</span>\r\n      <div class=\"tx-row-1\">\r\n        <ius-icon-sm\r\n          iconName=\"icon-account-circle\"\r\n          class=\"icon-acc-circle\"\r\n        ></ius-icon-sm>\r\n        <span class=\"h4 tx-abog\">{{ object.nombreCompany }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 id-ct\">\r\n        <span>ID Cuenta</span>\r\n        <span class=\"tx-id-ct\">{{ object.cuentaID }}</span>\r\n      </div>\r\n      <div class=\"tx-row-1 tx-rol\">\r\n        <span>Tu rol</span>\r\n        <span class=\"tx-name-rl\">{{ object.rol }}</span>\r\n      </div>\r\n    </div>\r\n    @if (!showFormSwitchAccount) {\r\n      <div class=\"colum-mn-1\">\r\n        <div class=\"email-inf\">\r\n          <ius-icon-xs\r\n            iconName=\"icon-alternate-email\"\r\n            class=\"icon-alt-email\"\r\n          ></ius-icon-xs>\r\n          <span>{{ object.correo }}</span>\r\n        </div>\r\n        <ius-dropdown-option-item (click)=\"onClickPerfilPreferencias()\"\r\n          >Perfil, preferencias y seguridad</ius-dropdown-option-item\r\n        >\r\n      </div>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"container-plan\" [ngClass]=\"{ 'show-more': showMore }\">\r\n        <div class=\"inf-plan\">\r\n          <div class=\"row-plan-1\">\r\n            <div class=\"col-plan-1\">\r\n              <span class=\"tx-small tx-tipo-plan\">{{\r\n                subscripcionDetalle?.tipoServicio\r\n              }}</span>\r\n              <div class=\"tx-row-1\">\r\n                <span class=\"tx-base tx-name-plan\">{{\r\n                  subscripcionDetalle?.namePlan\r\n                }}</span>\r\n                <ius-icon-md\r\n                  iconName=\"icon-help\"\r\n                  class=\"icon-help\"\r\n                ></ius-icon-md>\r\n              </div>\r\n              <div class=\"tx-row-2 tx-small\">\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Total global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantTotal\r\n                  }}</span>\r\n                </div>\r\n                <div class=\"tx-row-1\">\r\n                  <span class=\"tx-contador-1\">Disponible global</span>\r\n                  <span class=\"tx-contador-2\">{{\r\n                    subscripcionDetalle?.cantDisponible\r\n                  }}</span>\r\n                </div>\r\n              </div>\r\n              <span class=\"tx-base tx-estado-plan\">{{\r\n                subscripcionDetalle?.estado\r\n              }}</span>\r\n            </div>\r\n            <ius-button-circle-tertiary\r\n              iconName=\"icon-discover-tune\"\r\n            ></ius-button-circle-tertiary>\r\n          </div>\r\n          <div style=\"width: 100%\">\r\n            <ius-progress-bar\r\n              [total]=\"subscripcionDetalle?.cantTotal ?? 0\"\r\n              [titleV1]=\"'Judicial'\"\r\n              [v1]=\"subscripcionDetalle?.cantJudicial ?? 0\"\r\n              [titleV2]=\"'SuperSociedades'\"\r\n              [v2]=\"subscripcionDetalle?.cantProcesos2 ?? 0\"\r\n              [titleV3]=\"'Procuraduria'\"\r\n              [v3]=\"subscripcionDetalle?.cantProcesos3 ?? 0\"\r\n            >\r\n            </ius-progress-bar>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-set\"\r\n                class=\"icon-storage-set\"\r\n              ></ius-icon-xs>\r\n              <span>{{ subscripcionDetalle?.asignados ?? 0 }}</span>\r\n            </div>\r\n            <div class=\"item-counter tx-small\">\r\n              <ius-icon-xs\r\n                iconName=\"icon-storage-plus\"\r\n                class=\"icon-storage-plus\"\r\n              ></ius-icon-xs>\r\n              <span>{{\r\n                subscripcionDetalle?.cantAsignadaDisponible ?? 0\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ius-simple-divider></ius-simple-divider>\r\n        @if (detallesConsumo) {\r\n          @for (detail of detallesConsumo; track $index) {\r\n            <div class=\"inf-plan\">\r\n              <div class=\"row-plan-1\">\r\n                <div class=\"col-plan-1\">\r\n                  <span class=\"tx-small tx-tipo-plan\">{{\r\n                    detail.tipoServicio\r\n                  }}</span>\r\n                  <div class=\"tx-row-1\">\r\n                    <span class=\"tx-base tx-name-plan\">Por consumo</span>\r\n                    <ius-icon-md\r\n                      iconName=\"icon-help\"\r\n                      class=\"icon-help\"\r\n                    ></ius-icon-md>\r\n                  </div>\r\n                  <div class=\"tx-row-2 tx-small\">\r\n                    <div class=\"tx-row-1\">\r\n                      <span class=\"tx-contador-1\">Consumo este mes</span>\r\n                      <span class=\"tx-contador-2\">{{\r\n                        detail.cantConsumida\r\n                      }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <span class=\"tx-base tx-estado-plan\">{{\r\n                    detail.estado\r\n                  }}</span>\r\n                </div>\r\n                <ius-button-circle-tertiary\r\n                  iconName=\"icon-discover-tune\"\r\n                ></ius-button-circle-tertiary>\r\n              </div>\r\n            </div>\r\n            <ius-simple-divider></ius-simple-divider>\r\n          }\r\n        }\r\n      </div>\r\n      <ius-button-standard-tertiary\r\n        class=\"btn-list\"\r\n        [iconName]=\"\r\n          showMore ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n        \"\r\n        (buttonClicked)=\"clickShowMore()\"\r\n      >\r\n        {{ showMore ? \"Mostrar menos\" : \"Mostrar m\u00E1s\" }}\r\n      </ius-button-standard-tertiary>\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <div class=\"ctn-items\">\r\n        <ius-menu-item\r\n          iconName=\"icon-groups\"\r\n          (buttonClicked)=\"onClickUsuariosRoles()\"\r\n          >Usuarios y roles</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-build\"\r\n          (buttonClicked)=\"onClickConfiguracion()\"\r\n          >Configuraci\u00F3n de la cuenta</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-finance-chip\"\r\n          (buttonClicked)=\"onClickPagos()\"\r\n          >Pagos y facturaci\u00F3n</ius-menu-item\r\n        >\r\n        <ius-menu-item\r\n          iconName=\"icon-enterprise\"\r\n          (buttonClicked)=\"onClickSubsServicios()\"\r\n          >Suscripciones y servicios</ius-menu-item\r\n        >\r\n        <ius-menu-item iconName=\"icon-stream\" (buttonClicked)=\"onClickReferir()\"\r\n          >Referir servicio</ius-menu-item\r\n        >\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n    } @else {\r\n      <div class=\"container-bottom\">\r\n        <span class=\"tx-row-1 tx-rol\">Cambiar a</span>\r\n        <div class=\"container-list\">\r\n          @for (account of accountList; track account; let i = $index) {\r\n            <ius-button-accounts\r\n              (accountSelected)=\"onClickAccount(account)\"\r\n              (onPressedPredeterminado)=\"\r\n                clickAccountPredeterminada.emit(account)\r\n              \"\r\n              ,\r\n              (onPressedEditar)=\"clickEditAccount.emit(account)\"\r\n              ,\r\n              (onPressedDesvincular)=\"clickDesvincularAccount.emit(account)\"\r\n              [account]=\"account\"\r\n            ></ius-button-accounts>\r\n          }\r\n        </div>\r\n        <!-- <ius-button-standard-tertiary [iconName]=\"'icon-add'\" (buttonClicked)=\"addAccount()\">Agregar\r\n                nueva cuenta</ius-button-standard-tertiary> -->\r\n      </div>\r\n    }\r\n  </div>\r\n  <div class=\"ctn-items mgt-8\">\r\n    <ius-menu-item\r\n      iconName=\"{{\r\n        !showFormSwitchAccount ? 'icon-cases' : 'icon-arrow-left-alt'\r\n      }}\"\r\n      (buttonClicked)=\"onClickCambiarCuenta()\"\r\n      >{{\r\n        !showFormSwitchAccount\r\n          ? \"Cambiar de cuenta\"\r\n          : \"Volver al menu de usuario\"\r\n      }}</ius-menu-item\r\n    >\r\n    <ius-menu-item\r\n      iconName=\"icon-exit-to-app\"\r\n      (buttonClicked)=\"onClickCerrarSesion()\"\r\n      >Cerrar sesi\u00F3n</ius-menu-item\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.tbl-menu{display:flex;width:390px;height:85vh;padding:16px;flex-direction:column}.body-menu{display:flex;flex:1 0 0;flex-direction:column;padding-right:6px;gap:8px;font-family:Rubik,sans-serif;overflow-y:auto;min-height:0}.colum-mn-1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.text-head-mn{color:#8c8c8c;font-size:.75rem;line-height:16px;letter-spacing:.24px}.icon-acc-circle{color:#595959}.tx-row-1{display:flex;align-items:center;gap:4px}.tx-abog{color:#333;letter-spacing:.2px}.id-ct{padding:4px;border-radius:4px;border:1px solid #d9d9d9}.tx-id-ct{font-weight:500}.tx-rol{font-size:.875rem;color:#595959;line-height:20px}.tx-name-rl{color:#333;letter-spacing:.28px;font-weight:500}.email-inf{display:flex;padding:8px;align-items:center;gap:4px;color:#595959;font-size:.875rem;line-height:20px;letter-spacing:.28px}.icon-alt-email{color:#7caf25}ius-dropdown-option-item{width:100%}.container-plan{overflow:hidden;max-height:200px;transition:max-height .5s cubic-bezier(.4,0,.2,1);flex-shrink:0}.inf-plan{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px}.show-more{max-height:10000px;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.tx-small{font-size:.75rem;line-height:16px;letter-spacing:.24px}.tx-base{font-size:.875rem;line-height:20px;letter-spacing:.28px}.row-plan-1{display:flex;gap:12px;width:100%}.col-plan-1{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.icon-help{color:#8c8c8c}.tx-tipo-plan{color:#595959;font-weight:500}.tx-name-plan{color:#333;font-weight:500}.tx-row-2{display:flex;align-items:center;gap:8px}.tx-contador-1{color:#8c8c8c;font-weight:500}.tx-contador-2{color:#333}.tx-estado-plan{color:#7caf25}.mgt-8{margin-top:8px}.progress-container{width:100%;border-radius:100px;height:23px;overflow:hidden;background:#f0f0f0}.progress-bar{display:flex;height:100%}.segment{height:100%}.tipo-1-color-bar{background:#5892ff}.tipo-1-color{color:#5892ff}.tipo-2-color-bar{background:#103ab7}.tipo-2-color{color:#103ab7}.legend{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap}.legend .icon-storage-set{color:#103ab7}.legend .icon-storage-plus{color:#629219}.item-counter{display:flex;align-items:center;gap:4px;color:#333}.tx-name-serv{color:#595959;font-weight:500}.btn-list{margin-bottom:8px}.ctn-items{display:flex;flex-direction:column;gap:4px}.scrollable{overflow-y:auto;overflow-x:hidden}.scrollable::-webkit-scrollbar{-webkit-appearance:none}.scrollable::-webkit-scrollbar:vertical{width:7px}.scrollable::-webkit-scrollbar-thumb{background-color:#d8d6d6;border-radius:20px}.container-bottom{padding:0 16px;display:flex;flex-direction:column;gap:8px}.container-list{display:flex;flex-direction:column;gap:4px;width:90%}\n"] }]
         }], propDecorators: { object: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5700,12 +5731,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class InputSelectFilterComponent {
-    constructor() {
+    get showList() {
+        return this._overlayRef !== null;
+    }
+    constructor(_el, _overlay, _vcr) {
+        this._el = _el;
+        this._overlay = _overlay;
+        this._vcr = _vcr;
         this.isFocused = false;
         this.isAlertText = false;
-        this.showList = false;
-        this.hasClickedInside = false; //Bandera para detectar que ya dieron el primer click en el componente
+        this.hasClickedInside = false;
         this.selected = false;
+        this._overlayRef = null;
         this.componentId = ''; //Debe mandar un componenteID para llamar el input varias veces
         this.disabled = false;
         this.showHelpText = false;
@@ -5727,32 +5764,29 @@ class InputSelectFilterComponent {
             this.textInput = selectedItems.map(i => i.text).join(', ');
         }
     }
-    //Esta funcion permite que el se cierre el listado si el usuario da click en otro lado fuera del componente
     onClickOutside(event) {
         if (!this.hasClickedInside) {
             return;
         }
         const target = event.target;
+        // Si el click es dentro del panel overlay del input-select-filter, no cerrar
+        if (this._overlayRef?.overlayElement.contains(target)) {
+            return;
+        }
         const container = document.getElementById(this.componentId);
-        const containerTextfield = container?.querySelector('.container-textfield');
-        const containerList = container?.querySelector('.container-list');
-        // Cierra la lista solo si el click está fuera del componente completo
-        if (container && !container.contains(target)) {
+        // Si container es null significa que ya no está en el DOM
+        // (p.ej. el button-filter cerró y eliminó el host del DOM) → cerrar
+        // Si está en el DOM y el click fue fuera → cerrar
+        if (!container || !container.contains(target)) {
             this.closeList();
         }
-        // Si el click está dentro del componente pero fuera de textfield y lista, cierra
-        else if (containerTextfield && containerList) {
-            if (!containerTextfield.contains(target) && !containerList.contains(target)) {
-                this.closeList();
-            }
-        }
     }
     closeList(event) {
         if (event) {
             event.stopImmediatePropagation();
         }
         this.isFocused = false;
-        this.showList = false;
+        this._closePanel();
     }
     onInput() {
         if (this.selected) {
@@ -5766,8 +5800,10 @@ class InputSelectFilterComponent {
             return;
         }
         this.isFocused = true;
-        this.showList = true;
         this.hasClickedInside = true;
+        if (!this.showList) {
+            this._openPanel();
+        }
     }
     onBlur() {
         this.isFocused = false;
@@ -5815,14 +5851,43 @@ class InputSelectFilterComponent {
         }
         return selectedItems;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectFilterComponent, isStandalone: true, selector: "ius-input-select-filter", inputs: { filterData: "filterData", componentId: "componentId", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", 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\">\r\n    @if (labelSuperior) {\r\n    <div class=\"container-label-sup\" [ngClass]=\"{\r\n        'disabled': disabled\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    }\" (click)=\"onFocus()\">\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\" readonly [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n            [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n            (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n        <div class=\"cnt-icon-right\">\r\n            @if(!showList){\r\n            <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n            }@else{\r\n            <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n                <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (showList) {\r\n    <div class=\"container-list \">\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (data of filterData; track $index) {\r\n            <button class=\"item-list\" (click)=\"selectedData(data)\">\r\n                <span class=\"tx-item body-b color-pry\">{{data.title}}</span>\r\n                <ius-icon-sm iconName=\"icon-arrow-forward-ios\" class=\"color-pry\"></ius-icon-sm>\r\n            </button>\r\n            }\r\n        </div>\r\n        @if(filterDataSelected){\r\n        <div class=\"separator\"></div>\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (item of filterDataSelected.values; track $index) {\r\n            <div class=\"item-check\" (click)=\"selectedItem(item)\">\r\n                <ius-checkbox [checked]=\"item.checked\" (click)=\"$event.stopPropagation(); selectedItem(item)\"></ius-checkbox>\r\n                <span class=\"tx-item body-b color-pry\">{{item.text}}</span>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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){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 .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}.container-list{position:absolute;height:176px;display:flex;gap:4px;margin-top:4px;padding:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000}.ctn-items{display:flex;width:300px;height:100%;flex-direction:column;overflow-y:auto;overflow-x:hidden}.item-list{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;cursor:pointer;border:none;padding:0 8px 0 16px;gap:8px;border-radius:4px;background:#fff}.item-list:active:not(:disabled){background:#c4dfff!important}.item-list:hover:not(:disabled){background:#f5f5f5}.item-check{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;border:none;cursor:pointer;padding-right:8px;gap:8px;border-radius:4px;background:#fff}.item-check:active:not(:disabled){background:#c4dfff!important}.item-check:hover:not(:disabled){background:#f5f5f5}.tx-item{flex:1 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;min-width:0;text-align:left}.body-b{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.color-pry{color:#333}.separator{width:.5px;background:#d9d9d9}.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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["checked", "disabled"], outputs: ["checkedChange"] }] }); }
+    _openPanel() {
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._el)
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+        });
+        this._overlayRef.attach(new TemplatePortal(this.listPanel, this._vcr));
+    }
+    _closePanel() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this._closePanel();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectFilterComponent, isStandalone: true, selector: "ius-input-select-filter", inputs: { filterData: "filterData", componentId: "componentId", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput", maxlenght: "maxlenght", inputType: "inputType" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "listPanel", first: true, predicate: ["listPanel"], descendants: true }], ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\r\n    @if (labelSuperior) {\r\n    <div class=\"container-label-sup\" [ngClass]=\"{\r\n        'disabled': disabled\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    }\" (click)=\"onFocus()\">\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\" readonly [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n            [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n            (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n        <div class=\"cnt-icon-right\">\r\n            @if(!showList){\r\n            <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n            }@else{\r\n            <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n                <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    <ng-template #listPanel>\r\n    <div class=\"container-list\">\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (data of filterData; track $index) {\r\n            <button class=\"item-list\" (click)=\"selectedData(data)\">\r\n                <span class=\"tx-item body-b color-pry\">{{data.title}}</span>\r\n                <ius-icon-sm iconName=\"icon-arrow-forward-ios\" class=\"color-pry\"></ius-icon-sm>\r\n            </button>\r\n            }\r\n        </div>\r\n        @if(filterDataSelected){\r\n        <div class=\"separator\"></div>\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (item of filterDataSelected.values; track $index) {\r\n            <div class=\"item-check\" (click)=\"selectedItem(item)\">\r\n                <ius-checkbox [checked]=\"item.checked\" (click)=\"$event.stopPropagation(); selectedItem(item)\"></ius-checkbox>\r\n                <span class=\"tx-item body-b color-pry\">{{item.text}}</span>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n    </ng-template>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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){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 .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}.container-list{height:176px;display:flex;gap:4px;padding:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.ctn-items{display:flex;width:300px;height:100%;flex-direction:column;overflow-y:auto;overflow-x:hidden}.item-list{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;cursor:pointer;border:none;padding:0 8px 0 16px;gap:8px;border-radius:4px;background:#fff}.item-list:active:not(:disabled){background:#c4dfff!important}.item-list:hover:not(:disabled){background:#f5f5f5}.item-check{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;border:none;cursor:pointer;padding-right:8px;gap:8px;border-radius:4px;background:#fff}.item-check:active:not(:disabled){background:#c4dfff!important}.item-check:hover:not(:disabled){background:#f5f5f5}.tx-item{flex:1 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;min-width:0;text-align:left}.body-b{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.color-pry{color:#333}.separator{width:.5px;background:#d9d9d9}.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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["checked", "disabled"], outputs: ["checkedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ius-input-select-filter', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule, IconSmComponent, CheckboxComponent], template: "<div class=\"container-general\" [id]=\"componentId\">\r\n    @if (labelSuperior) {\r\n    <div class=\"container-label-sup\" [ngClass]=\"{\r\n        'disabled': disabled\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    }\" (click)=\"onFocus()\">\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\" readonly [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n            [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n            (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n        <div class=\"cnt-icon-right\">\r\n            @if(!showList){\r\n            <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n            }@else{\r\n            <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n                <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (showList) {\r\n    <div class=\"container-list \">\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (data of filterData; track $index) {\r\n            <button class=\"item-list\" (click)=\"selectedData(data)\">\r\n                <span class=\"tx-item body-b color-pry\">{{data.title}}</span>\r\n                <ius-icon-sm iconName=\"icon-arrow-forward-ios\" class=\"color-pry\"></ius-icon-sm>\r\n            </button>\r\n            }\r\n        </div>\r\n        @if(filterDataSelected){\r\n        <div class=\"separator\"></div>\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (item of filterDataSelected.values; track $index) {\r\n            <div class=\"item-check\" (click)=\"selectedItem(item)\">\r\n                <ius-checkbox [checked]=\"item.checked\" (click)=\"$event.stopPropagation(); selectedItem(item)\"></ius-checkbox>\r\n                <span class=\"tx-item body-b color-pry\">{{item.text}}</span>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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){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 .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}.container-list{position:absolute;height:176px;display:flex;gap:4px;margin-top:4px;padding:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000}.ctn-items{display:flex;width:300px;height:100%;flex-direction:column;overflow-y:auto;overflow-x:hidden}.item-list{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;cursor:pointer;border:none;padding:0 8px 0 16px;gap:8px;border-radius:4px;background:#fff}.item-list:active:not(:disabled){background:#c4dfff!important}.item-list:hover:not(:disabled){background:#f5f5f5}.item-check{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;border:none;cursor:pointer;padding-right:8px;gap:8px;border-radius:4px;background:#fff}.item-check:active:not(:disabled){background:#c4dfff!important}.item-check:hover:not(:disabled){background:#f5f5f5}.tx-item{flex:1 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;min-width:0;text-align:left}.body-b{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.color-pry{color:#333}.separator{width:.5px;background:#d9d9d9}.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"] }]
-        }], propDecorators: { filterData: [{
+            args: [{ selector: 'ius-input-select-filter', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule, IconSmComponent, CheckboxComponent], template: "<div class=\"container-general\" [id]=\"componentId\">\r\n    @if (labelSuperior) {\r\n    <div class=\"container-label-sup\" [ngClass]=\"{\r\n        'disabled': disabled\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    }\" (click)=\"onFocus()\">\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\" readonly [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n            [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n            (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n        <div class=\"cnt-icon-right\">\r\n            @if(!showList){\r\n            <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n            }@else{\r\n            <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n                <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    <ng-template #listPanel>\r\n    <div class=\"container-list\">\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (data of filterData; track $index) {\r\n            <button class=\"item-list\" (click)=\"selectedData(data)\">\r\n                <span class=\"tx-item body-b color-pry\">{{data.title}}</span>\r\n                <ius-icon-sm iconName=\"icon-arrow-forward-ios\" class=\"color-pry\"></ius-icon-sm>\r\n            </button>\r\n            }\r\n        </div>\r\n        @if(filterDataSelected){\r\n        <div class=\"separator\"></div>\r\n        <div class=\"ctn-items scrollable-small\">\r\n            @for (item of filterDataSelected.values; track $index) {\r\n            <div class=\"item-check\" (click)=\"selectedItem(item)\">\r\n                <ius-checkbox [checked]=\"item.checked\" (click)=\"$event.stopPropagation(); selectedItem(item)\"></ius-checkbox>\r\n                <span class=\"tx-item body-b color-pry\">{{item.text}}</span>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n    </ng-template>\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;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){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 .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}.container-list{height:176px;display:flex;gap:4px;padding:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.ctn-items{display:flex;width:300px;height:100%;flex-direction:column;overflow-y:auto;overflow-x:hidden}.item-list{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;cursor:pointer;border:none;padding:0 8px 0 16px;gap:8px;border-radius:4px;background:#fff}.item-list:active:not(:disabled){background:#c4dfff!important}.item-list:hover:not(:disabled){background:#f5f5f5}.item-check{display:flex;height:42px;min-height:42px;flex-shrink:0;align-items:center;border:none;cursor:pointer;padding-right:8px;gap:8px;border-radius:4px;background:#fff}.item-check:active:not(:disabled){background:#c4dfff!important}.item-check:hover:not(:disabled){background:#f5f5f5}.tx-item{flex:1 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;min-width:0;text-align:left}.body-b{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.color-pry{color:#333}.separator{width:.5px;background:#d9d9d9}.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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { filterData: [{
                 type: Input
+            }], listPanel: [{
+                type: ViewChild,
+                args: ['listPanel']
             }], componentId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6446,6 +6511,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+class ItemDocumentComponent {
+    constructor() {
+        this.fileName = '';
+        this.fileSize = 0; // in bytes
+        this.fileType = '';
+        this.showDelete = true;
+        this.showDownload = true;
+        this.deleteClicked = new EventEmitter();
+        this.downloadClicked = new EventEmitter();
+    }
+    get isPdf() {
+        return this.fileType.includes('pdf');
+    }
+    get fileSizeLabel() {
+        if (this.fileSize >= 1024 * 1024) {
+            const mb = this.fileSize / (1024 * 1024);
+            return `${parseFloat(mb.toFixed(1))} MB`;
+        }
+        const kb = Math.round(this.fileSize / 1024);
+        return `${kb} KB`;
+    }
+    onDelete() {
+        this.deleteClicked.emit();
+    }
+    onDownload() {
+        this.downloadClicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemDocumentComponent, isStandalone: true, selector: "ius-item-document", inputs: { fileName: "fileName", fileSize: "fileSize", fileType: "fileType", showDelete: "showDelete", showDownload: "showDownload" }, outputs: { deleteClicked: "deleteClicked", downloadClicked: "downloadClicked" }, ngImport: i0, template: "<div class=\"ius-item-document\">\r\n  <div class=\"item-document__icon\">\r\n    @if (isPdf) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"38\" viewBox=\"0 0 30 38\" fill=\"none\">\r\n        <path d=\"M0 10.3236V33.8362C0 36.1349 1.8378 38 4.10562 38H25.8921C28.1622 38 30 36.1349 30 33.8362V4.165C30 1.86628 28.1622 0 25.8921 0H10.1871L2.13203 8.16252L0 10.3236Z\" fill=\"white\"/>\r\n        <path d=\"M0 10.3236L2.13203 8.16252L10.1871 0H25.8921C28.1622 0 30 1.86513 30 4.16385V13.8405H0V10.3224V10.3236Z\" fill=\"#DB676A\"/>\r\n        <g style=\"mix-blend-mode:multiply\">\r\n          <path d=\"M0 10.3225L5.02791 11.4478C7.24934 11.9135 9.42324 10.4624 9.88155 8.21073L10.092 7.04187C10.0253 7.36764 9.91777 7.67849 9.77744 7.97214C9.11317 9.36238 7.70653 10.3202 6.08035 10.3202H0V10.3225Z\" fill=\"#D7D7D7\"/>\r\n        </g>\r\n        <g opacity=\"0.4\">\r\n          <path d=\"M0 10.3224H6.08035C7.70653 10.3224 9.11317 9.3635 9.77744 7.9744C9.91777 7.68075 10.0253 7.3699 10.092 7.04413C10.1554 6.75966 10.186 6.46257 10.186 6.1586V0L2.13203 8.16252L0 10.3224Z\" fill=\"#EFEFEF\"/>\r\n        </g>\r\n        <path d=\"M10.1192 34.1986C9.86567 34.1986 9.48091 34.1092 9.16066 33.6526C8.81777 33.164 8.40359 32.1626 9.47186 30.941C10.1339 30.1839 11.1999 29.5324 12.3078 29.0036C13.3014 26.6601 14.1614 24.3247 14.6922 22.5192C14.7137 22.4469 14.734 22.3758 14.7544 22.3047C13.7936 20.3019 13.4055 18.8922 13.8287 18.0032C13.9792 17.6878 14.3017 17.2874 14.9875 17.1762C15.5103 17.0913 15.9607 17.2565 16.255 17.6419C16.6273 18.1305 16.9294 19.0941 16.0988 22.1797C16.556 23.0973 17.0381 23.9634 17.3323 24.4933C17.8257 25.38 18.5092 26.2219 19.2165 26.9079C20.7714 26.6739 22.204 26.6544 22.9577 27.0696C23.5122 27.3759 23.7465 27.915 23.5824 28.5126C23.373 29.2743 22.874 29.7411 22.1769 29.8272C21.0871 29.9602 19.8253 29.1148 18.9585 28.3819C18.9132 28.344 18.8679 28.305 18.8227 28.2649C18.3915 28.344 17.9196 28.4438 17.4047 28.5711C15.9121 28.937 14.4737 29.428 13.2719 29.966C13.255 30.005 13.2391 30.0428 13.2221 30.0795C11.9966 32.9082 11.1297 34.1011 10.2278 34.194C10.195 34.1975 10.1588 34.1998 10.118 34.1998L10.1192 34.1986ZM11.4296 30.9478C11.1976 31.1004 10.9905 31.253 10.8129 31.4044C9.82154 32.2429 10.0377 32.6891 10.1656 32.8795C10.3308 32.7602 10.7336 32.3484 11.4307 30.949L11.4296 30.9478ZM20.6084 28.0343C21.1799 28.4025 21.6869 28.601 22.0241 28.5585C22.1135 28.547 22.2629 28.5287 22.3613 28.1903C22.1791 28.0733 21.6111 27.9701 20.6084 28.0332V28.0343ZM15.5794 23.9221C15.0758 25.4809 14.4794 27.0398 13.9668 28.3027C14.9547 27.9299 15.8227 27.673 16.2776 27.5457C16.7461 27.4149 17.2361 27.2922 17.7318 27.1832C17.1388 26.5213 16.6148 25.8044 16.2346 25.1196C16.0026 24.7021 15.7842 24.3029 15.5794 23.9198V23.9221ZM15.2501 18.4322C15.2353 18.4322 15.215 18.4334 15.1867 18.4379C15.0068 18.4678 14.9785 18.5263 14.9638 18.5584C14.8155 18.8692 14.9592 19.5059 15.2421 20.2629C15.4854 18.875 15.3044 18.4964 15.2625 18.4322C15.2591 18.4322 15.2546 18.4322 15.2501 18.4322Z\" fill=\"#DB676A\"/>\r\n        <path d=\"M16.065 11.0497V13.1178H15.6157V8.74635C15.6157 8.1969 15.6157 7.81034 15.6033 7.56601H16.0469C16.0559 7.68072 16.0639 7.99387 16.065 8.22214C16.2562 7.78625 16.6263 7.49146 17.2249 7.49146C18.0556 7.49146 18.5761 8.19461 18.5761 9.49653C18.5761 10.8661 17.9537 11.6266 17.0891 11.6266C16.5244 11.6266 16.2212 11.3697 16.065 11.0497ZM18.1065 9.51832C18.1065 8.50546 17.7591 7.90899 17.1027 7.90899C16.2868 7.90899 16.0457 8.56626 16.0457 9.57109C16.0457 10.514 16.1872 11.2102 17.0563 11.2102C17.7172 11.2102 18.1053 10.569 18.1053 9.51832H18.1065Z\" fill=\"white\"/>\r\n        <path d=\"M22.1647 5.81445V10.5587C22.1647 10.9074 22.1647 11.3123 22.1772 11.5601H21.7336C21.7245 11.4557 21.7155 11.1862 21.7155 10.9384C21.5321 11.403 21.2266 11.6324 20.6019 11.6324C19.6502 11.6324 19.2009 10.8145 19.2009 9.55274C19.2009 8.36323 19.7441 7.49261 20.7139 7.49261C21.3318 7.49261 21.6079 7.76217 21.7143 7.99847V5.81445H22.1647ZM19.6717 9.53554C19.6717 10.6711 20.0915 11.2125 20.6958 11.2125C21.5321 11.2125 21.7245 10.5255 21.7245 9.47245C21.7245 8.23247 21.4088 7.90785 15.1881 7.90785C14.5205 7.90785 14.1187 8.46653 14.1187 9.53445V9.5356Z\" fill=\"white\"/>\r\n        <path d=\"M23.405 11.5601V7.96752H22.803V7.5672H23.405V6.98678C23.405 6.3559 23.5872 5.75598 24.3579 5.75598C24.4586 5.75598 24.5966 5.7686 24.6826 5.80301V6.2194C24.6068 6.19875 24.4982 6.18154 24.3624 6.18154C23.9969 6.18154 23.8543 6.42701 23.8543 6.94549V7.5672H24.5831V7.96752H23.8543V11.5601H23.405Z\" fill=\"white\"/>\r\n      </svg>\r\n    } @else {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"38\" viewBox=\"0 0 30 38\" fill=\"none\">\r\n        <path d=\"M0 10.3236V33.8362C0 36.1349 1.8378 38 4.10562 38H25.8921C28.1622 38 30 36.1349 30 33.8362V4.165C30 1.86628 28.1622 0 25.8921 0H10.1871L2.13203 8.16252L0 10.3236Z\" fill=\"white\"/>\r\n        <path d=\"M0 10.3236L2.13203 8.16252L10.1871 0H25.8921C28.1622 0 30 1.86513 30 4.16385V13.8405H0V10.3224V10.3236Z\" fill=\"#6972B1\"/>\r\n        <g style=\"mix-blend-mode:multiply\">\r\n          <path d=\"M0 10.3224L5.02791 11.4477C7.24934 11.9134 9.42324 10.4624 9.88155 8.21067L10.092 7.04181C10.0253 7.36758 9.91777 7.67843 9.77744 7.97208C9.11317 9.36232 7.70653 10.3201 6.08035 10.3201H0V10.3224Z\" fill=\"#D7D7D7\"/>\r\n        </g>\r\n        <g opacity=\"0.4\">\r\n          <path d=\"M0 10.3224H6.08035C7.70653 10.3224 9.11317 9.3635 9.77744 7.9744C9.91777 7.68075 10.0253 7.3699 10.092 7.04413C10.1554 6.75966 10.186 6.46257 10.186 6.1586V0L2.13203 8.16252L0 10.3224Z\" fill=\"#EFEFEF\"/>\r\n        </g>\r\n        <path d=\"M14.6516 20.6965H5.96509V21.9744H14.6516V20.6965Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M24.0352 20.6965H18.4199V21.9744H24.0352V20.6965Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M17.7928 30.3433H5.96484V31.6212H17.7928V30.3433Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M24.0352 25.5199H15.3486V26.7977H24.0352V25.5199Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M11.5801 25.5199H5.96484V26.7977H11.5801V25.5199Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M16.6117 5.81451V10.5588C16.6117 10.9075 16.6117 11.3124 16.6242 11.5602H16.1806C16.1715 11.4558 16.1625 11.1862 16.1625 10.9385C15.9791 11.403 15.6736 11.6324 15.0489 11.6324C14.0972 11.6324 13.6479 10.8146 13.6479 9.5528C13.6479 8.3633 14.1911 7.49267 15.161 7.49267C15.7788 7.49267 16.055 7.76223 16.1613 7.99853V5.81451H16.6117ZM14.1187 9.5356C14.1187 10.6712 14.5386 11.2126 15.1429 11.2126C15.9791 11.2126 16.1715 10.5255 16.1715 9.47251C16.1715 8.23253 15.8558 7.90791 15.1881 7.90791C14.5205 7.90791 14.1187 8.46653 14.1187 9.53445V9.5356Z\" fill=\"white\"/>\r\n        <path d=\"M20.5722 9.50003C20.5722 10.7354 20.1082 11.6278 19.0139 11.6278C17.9196 11.6278 17.4907 10.7239 17.4907 9.51379C17.4907 8.30364 18.0407 7.49152 19.0501 7.49152C20.0596 7.49152 20.5722 8.2612 20.5722 9.49888V9.50003ZM17.9615 9.51838C17.9615 10.553 18.3372 11.2218 19.0388 11.2218C19.7755 11.2218 20.0992 10.5611 20.0992 9.50232C20.0992 8.53764 19.7382 7.89987 19.0275 7.89987C18.3168 7.89987 17.9615 8.49864 17.9615 9.51953V9.51838Z\" fill=\"white\"/>\r\n        <path d=\"M24.0977 10.3615C23.9777 10.9167 23.6337 11.6359 22.6922 11.6359C21.6556 11.6359 21.2007 10.8318 21.2007 9.55279C21.2007 8.43555 21.6658 7.49152 22.7307 7.49152C23.7209 7.49152 24.0479 8.27726 24.0932 8.79229H23.6292C23.567 8.41376 23.3576 7.89528 22.7228 7.89528C21.9838 7.89528 21.6692 8.59385 21.6692 9.5505C21.6692 10.6104 22.0189 11.231 22.708 11.231C23.3135 11.231 23.5217 10.7664 23.636 10.3592H24.0966L24.0977 10.3615Z\" fill=\"white\"/>\r\n      </svg>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"item-document__info\" (click)=\"onDownload()\">\r\n    <span class=\"item-document__name\" [iusPopoverContent]=\"fileName\">{{ fileName }}</span>\r\n    <span class=\"item-document__size\">({{ fileSizeLabel }})</span>\r\n  </div>\r\n\r\n  <div class=\"item-document__actions\">\r\n    @if (showDownload) {\r\n      <ius-button-squared-tertiary\r\n        [iconName]=\"'icon-download'\"\r\n        (buttonClicked)=\"onDownload()\"\r\n      ></ius-button-squared-tertiary>\r\n    }\r\n    @if (showDelete) {\r\n      <ius-button-squared-tertiary\r\n        [iconName]=\"'icon-delete'\"\r\n        (buttonClicked)=\"onDelete()\"\r\n      ></ius-button-squared-tertiary>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ius-item-document{display:flex;padding:6px 6px 6px 12px;align-items:center;gap:8px;align-self:stretch;border-radius:6px;border:1px solid #c9c6c5;justify-content:space-between;width:100%;box-sizing:border-box}.item-document__icon{display:flex;width:30px;height:38px;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0}.item-document__info{display:flex;flex-direction:column;flex:1;padding:5px;cursor:pointer;overflow:hidden}.item-document__name{color:#000;font-family:Rubik,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:120%;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-document__size{color:#000;font-family:Rubik,sans-serif;font-size:9px;font-style:normal;font-weight:400;line-height:120%;letter-spacing:.1px}.item-document__actions{display:flex;align-items:center;gap:4px;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonSquaredTertiaryComponent, selector: "ius-button-squared-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }, { kind: "directive", type: PopoverDirective, selector: "[iusPopover], [iusPopoverTitle], [iusPopoverContent]", inputs: ["iusPopover", "iusPopoverTitle", "iusPopoverContent", "iusPopoverPosition", "iusPopoverOpenDelay", "iusPopoverCloseDelay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemDocumentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ius-item-document', standalone: true, imports: [CommonModule, ButtonSquaredTertiaryComponent, PopoverDirective], template: "<div class=\"ius-item-document\">\r\n  <div class=\"item-document__icon\">\r\n    @if (isPdf) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"38\" viewBox=\"0 0 30 38\" fill=\"none\">\r\n        <path d=\"M0 10.3236V33.8362C0 36.1349 1.8378 38 4.10562 38H25.8921C28.1622 38 30 36.1349 30 33.8362V4.165C30 1.86628 28.1622 0 25.8921 0H10.1871L2.13203 8.16252L0 10.3236Z\" fill=\"white\"/>\r\n        <path d=\"M0 10.3236L2.13203 8.16252L10.1871 0H25.8921C28.1622 0 30 1.86513 30 4.16385V13.8405H0V10.3224V10.3236Z\" fill=\"#DB676A\"/>\r\n        <g style=\"mix-blend-mode:multiply\">\r\n          <path d=\"M0 10.3225L5.02791 11.4478C7.24934 11.9135 9.42324 10.4624 9.88155 8.21073L10.092 7.04187C10.0253 7.36764 9.91777 7.67849 9.77744 7.97214C9.11317 9.36238 7.70653 10.3202 6.08035 10.3202H0V10.3225Z\" fill=\"#D7D7D7\"/>\r\n        </g>\r\n        <g opacity=\"0.4\">\r\n          <path d=\"M0 10.3224H6.08035C7.70653 10.3224 9.11317 9.3635 9.77744 7.9744C9.91777 7.68075 10.0253 7.3699 10.092 7.04413C10.1554 6.75966 10.186 6.46257 10.186 6.1586V0L2.13203 8.16252L0 10.3224Z\" fill=\"#EFEFEF\"/>\r\n        </g>\r\n        <path d=\"M10.1192 34.1986C9.86567 34.1986 9.48091 34.1092 9.16066 33.6526C8.81777 33.164 8.40359 32.1626 9.47186 30.941C10.1339 30.1839 11.1999 29.5324 12.3078 29.0036C13.3014 26.6601 14.1614 24.3247 14.6922 22.5192C14.7137 22.4469 14.734 22.3758 14.7544 22.3047C13.7936 20.3019 13.4055 18.8922 13.8287 18.0032C13.9792 17.6878 14.3017 17.2874 14.9875 17.1762C15.5103 17.0913 15.9607 17.2565 16.255 17.6419C16.6273 18.1305 16.9294 19.0941 16.0988 22.1797C16.556 23.0973 17.0381 23.9634 17.3323 24.4933C17.8257 25.38 18.5092 26.2219 19.2165 26.9079C20.7714 26.6739 22.204 26.6544 22.9577 27.0696C23.5122 27.3759 23.7465 27.915 23.5824 28.5126C23.373 29.2743 22.874 29.7411 22.1769 29.8272C21.0871 29.9602 19.8253 29.1148 18.9585 28.3819C18.9132 28.344 18.8679 28.305 18.8227 28.2649C18.3915 28.344 17.9196 28.4438 17.4047 28.5711C15.9121 28.937 14.4737 29.428 13.2719 29.966C13.255 30.005 13.2391 30.0428 13.2221 30.0795C11.9966 32.9082 11.1297 34.1011 10.2278 34.194C10.195 34.1975 10.1588 34.1998 10.118 34.1998L10.1192 34.1986ZM11.4296 30.9478C11.1976 31.1004 10.9905 31.253 10.8129 31.4044C9.82154 32.2429 10.0377 32.6891 10.1656 32.8795C10.3308 32.7602 10.7336 32.3484 11.4307 30.949L11.4296 30.9478ZM20.6084 28.0343C21.1799 28.4025 21.6869 28.601 22.0241 28.5585C22.1135 28.547 22.2629 28.5287 22.3613 28.1903C22.1791 28.0733 21.6111 27.9701 20.6084 28.0332V28.0343ZM15.5794 23.9221C15.0758 25.4809 14.4794 27.0398 13.9668 28.3027C14.9547 27.9299 15.8227 27.673 16.2776 27.5457C16.7461 27.4149 17.2361 27.2922 17.7318 27.1832C17.1388 26.5213 16.6148 25.8044 16.2346 25.1196C16.0026 24.7021 15.7842 24.3029 15.5794 23.9198V23.9221ZM15.2501 18.4322C15.2353 18.4322 15.215 18.4334 15.1867 18.4379C15.0068 18.4678 14.9785 18.5263 14.9638 18.5584C14.8155 18.8692 14.9592 19.5059 15.2421 20.2629C15.4854 18.875 15.3044 18.4964 15.2625 18.4322C15.2591 18.4322 15.2546 18.4322 15.2501 18.4322Z\" fill=\"#DB676A\"/>\r\n        <path d=\"M16.065 11.0497V13.1178H15.6157V8.74635C15.6157 8.1969 15.6157 7.81034 15.6033 7.56601H16.0469C16.0559 7.68072 16.0639 7.99387 16.065 8.22214C16.2562 7.78625 16.6263 7.49146 17.2249 7.49146C18.0556 7.49146 18.5761 8.19461 18.5761 9.49653C18.5761 10.8661 17.9537 11.6266 17.0891 11.6266C16.5244 11.6266 16.2212 11.3697 16.065 11.0497ZM18.1065 9.51832C18.1065 8.50546 17.7591 7.90899 17.1027 7.90899C16.2868 7.90899 16.0457 8.56626 16.0457 9.57109C16.0457 10.514 16.1872 11.2102 17.0563 11.2102C17.7172 11.2102 18.1053 10.569 18.1053 9.51832H18.1065Z\" fill=\"white\"/>\r\n        <path d=\"M22.1647 5.81445V10.5587C22.1647 10.9074 22.1647 11.3123 22.1772 11.5601H21.7336C21.7245 11.4557 21.7155 11.1862 21.7155 10.9384C21.5321 11.403 21.2266 11.6324 20.6019 11.6324C19.6502 11.6324 19.2009 10.8145 19.2009 9.55274C19.2009 8.36323 19.7441 7.49261 20.7139 7.49261C21.3318 7.49261 21.6079 7.76217 21.7143 7.99847V5.81445H22.1647ZM19.6717 9.53554C19.6717 10.6711 20.0915 11.2125 20.6958 11.2125C21.5321 11.2125 21.7245 10.5255 21.7245 9.47245C21.7245 8.23247 21.4088 7.90785 15.1881 7.90785C14.5205 7.90785 14.1187 8.46653 14.1187 9.53445V9.5356Z\" fill=\"white\"/>\r\n        <path d=\"M23.405 11.5601V7.96752H22.803V7.5672H23.405V6.98678C23.405 6.3559 23.5872 5.75598 24.3579 5.75598C24.4586 5.75598 24.5966 5.7686 24.6826 5.80301V6.2194C24.6068 6.19875 24.4982 6.18154 24.3624 6.18154C23.9969 6.18154 23.8543 6.42701 23.8543 6.94549V7.5672H24.5831V7.96752H23.8543V11.5601H23.405Z\" fill=\"white\"/>\r\n      </svg>\r\n    } @else {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"38\" viewBox=\"0 0 30 38\" fill=\"none\">\r\n        <path d=\"M0 10.3236V33.8362C0 36.1349 1.8378 38 4.10562 38H25.8921C28.1622 38 30 36.1349 30 33.8362V4.165C30 1.86628 28.1622 0 25.8921 0H10.1871L2.13203 8.16252L0 10.3236Z\" fill=\"white\"/>\r\n        <path d=\"M0 10.3236L2.13203 8.16252L10.1871 0H25.8921C28.1622 0 30 1.86513 30 4.16385V13.8405H0V10.3224V10.3236Z\" fill=\"#6972B1\"/>\r\n        <g style=\"mix-blend-mode:multiply\">\r\n          <path d=\"M0 10.3224L5.02791 11.4477C7.24934 11.9134 9.42324 10.4624 9.88155 8.21067L10.092 7.04181C10.0253 7.36758 9.91777 7.67843 9.77744 7.97208C9.11317 9.36232 7.70653 10.3201 6.08035 10.3201H0V10.3224Z\" fill=\"#D7D7D7\"/>\r\n        </g>\r\n        <g opacity=\"0.4\">\r\n          <path d=\"M0 10.3224H6.08035C7.70653 10.3224 9.11317 9.3635 9.77744 7.9744C9.91777 7.68075 10.0253 7.3699 10.092 7.04413C10.1554 6.75966 10.186 6.46257 10.186 6.1586V0L2.13203 8.16252L0 10.3224Z\" fill=\"#EFEFEF\"/>\r\n        </g>\r\n        <path d=\"M14.6516 20.6965H5.96509V21.9744H14.6516V20.6965Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M24.0352 20.6965H18.4199V21.9744H24.0352V20.6965Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M17.7928 30.3433H5.96484V31.6212H17.7928V30.3433Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M24.0352 25.5199H15.3486V26.7977H24.0352V25.5199Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M11.5801 25.5199H5.96484V26.7977H11.5801V25.5199Z\" fill=\"#6972B1\"/>\r\n        <path d=\"M16.6117 5.81451V10.5588C16.6117 10.9075 16.6117 11.3124 16.6242 11.5602H16.1806C16.1715 11.4558 16.1625 11.1862 16.1625 10.9385C15.9791 11.403 15.6736 11.6324 15.0489 11.6324C14.0972 11.6324 13.6479 10.8146 13.6479 9.5528C13.6479 8.3633 14.1911 7.49267 15.161 7.49267C15.7788 7.49267 16.055 7.76223 16.1613 7.99853V5.81451H16.6117ZM14.1187 9.5356C14.1187 10.6712 14.5386 11.2126 15.1429 11.2126C15.9791 11.2126 16.1715 10.5255 16.1715 9.47251C16.1715 8.23253 15.8558 7.90791 15.1881 7.90791C14.5205 7.90791 14.1187 8.46653 14.1187 9.53445V9.5356Z\" fill=\"white\"/>\r\n        <path d=\"M20.5722 9.50003C20.5722 10.7354 20.1082 11.6278 19.0139 11.6278C17.9196 11.6278 17.4907 10.7239 17.4907 9.51379C17.4907 8.30364 18.0407 7.49152 19.0501 7.49152C20.0596 7.49152 20.5722 8.2612 20.5722 9.49888V9.50003ZM17.9615 9.51838C17.9615 10.553 18.3372 11.2218 19.0388 11.2218C19.7755 11.2218 20.0992 10.5611 20.0992 9.50232C20.0992 8.53764 19.7382 7.89987 19.0275 7.89987C18.3168 7.89987 17.9615 8.49864 17.9615 9.51953V9.51838Z\" fill=\"white\"/>\r\n        <path d=\"M24.0977 10.3615C23.9777 10.9167 23.6337 11.6359 22.6922 11.6359C21.6556 11.6359 21.2007 10.8318 21.2007 9.55279C21.2007 8.43555 21.6658 7.49152 22.7307 7.49152C23.7209 7.49152 24.0479 8.27726 24.0932 8.79229H23.6292C23.567 8.41376 23.3576 7.89528 22.7228 7.89528C21.9838 7.89528 21.6692 8.59385 21.6692 9.5505C21.6692 10.6104 22.0189 11.231 22.708 11.231C23.3135 11.231 23.5217 10.7664 23.636 10.3592H24.0966L24.0977 10.3615Z\" fill=\"white\"/>\r\n      </svg>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"item-document__info\" (click)=\"onDownload()\">\r\n    <span class=\"item-document__name\" [iusPopoverContent]=\"fileName\">{{ fileName }}</span>\r\n    <span class=\"item-document__size\">({{ fileSizeLabel }})</span>\r\n  </div>\r\n\r\n  <div class=\"item-document__actions\">\r\n    @if (showDownload) {\r\n      <ius-button-squared-tertiary\r\n        [iconName]=\"'icon-download'\"\r\n        (buttonClicked)=\"onDownload()\"\r\n      ></ius-button-squared-tertiary>\r\n    }\r\n    @if (showDelete) {\r\n      <ius-button-squared-tertiary\r\n        [iconName]=\"'icon-delete'\"\r\n        (buttonClicked)=\"onDelete()\"\r\n      ></ius-button-squared-tertiary>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ius-item-document{display:flex;padding:6px 6px 6px 12px;align-items:center;gap:8px;align-self:stretch;border-radius:6px;border:1px solid #c9c6c5;justify-content:space-between;width:100%;box-sizing:border-box}.item-document__icon{display:flex;width:30px;height:38px;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0}.item-document__info{display:flex;flex-direction:column;flex:1;padding:5px;cursor:pointer;overflow:hidden}.item-document__name{color:#000;font-family:Rubik,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:120%;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-document__size{color:#000;font-family:Rubik,sans-serif;font-size:9px;font-style:normal;font-weight:400;line-height:120%;letter-spacing:.1px}.item-document__actions{display:flex;align-items:center;gap:4px;flex-shrink:0}\n"] }]
+        }], propDecorators: { fileName: [{
+                type: Input
+            }], fileSize: [{
+                type: Input
+            }], fileType: [{
+                type: Input
+            }], showDelete: [{
+                type: Input
+            }], showDownload: [{
+                type: Input
+            }], deleteClicked: [{
+                type: Output
+            }], downloadClicked: [{
+                type: Output
+            }] } });
+
 class CardTicketComponent {
     constructor() {
         this.hover = false;
@@ -7192,5 +7306,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AvatarIconComponent, BadgeComponent, BreadcrumbComponent, ButtonAccountsComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonFilterComponent, ButtonMenuLinkComponent, ButtonOrderComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CalificationComponent, CardActividadEventoComponent, CardAgendaJudicialComponent, CardBlockComponent, CardButtonCheckboxComponent, CardCollapseDetalleProcesoComponent, CardDynamicContentComponent, CardEtapaSubetapaComponent, CardGestionCupoComponent, CardImpulsoProcesalComponent, CardInfoFacturacionComponent, CardListConsumoComponent, CardListDragOnComponent, CardListMovimientosComponent, CardListProcesoComponent, CardLogComponent, CardPlanSmallComponent, CardPlanSubscriptionComponent, CardTicketComponent, CardTipoProcesoComponent, CardUsoPlanComponent, CardVigilanciaJudicialComponent, CategoriesComponent, ChartsDonutComponent, CheckboxComponent, CheckboxRadioComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownContextualMenuComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, FilterItemComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InfiniteScrollDirective, InputCardComponent, InputLargeComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectFilterComponent, InputSelectNumberComponent, InputTextfieldComponent, IusChartsBarGroupedComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, NotificationCardComponent, NotificationsComponent, OptionComponent, OptionItemComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SegmentComponent, SimpleCardContadorComponent, SimpleChipComponent, SimpleDividerComponent, SimpleUserCardComponent, SlideToggleComponent, SnackbarComponent, SupportPanelComponent, ToolbarComponent, ToolbarUserMenuComponent, UserCardComponent };
+export { AlertComponent, AvatarIconComponent, BadgeComponent, BreadcrumbComponent, ButtonAccountsComponent, ButtonAuthComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonFilterComponent, ButtonMenuLinkComponent, ButtonOrderComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CalificationComponent, CardActividadEventoComponent, CardAgendaJudicialComponent, CardBlockComponent, CardButtonCheckboxComponent, CardCollapseDetalleProcesoComponent, CardDynamicContentComponent, CardEtapaSubetapaComponent, CardGestionCupoComponent, CardImpulsoProcesalComponent, CardInfoFacturacionComponent, CardListConsumoComponent, CardListDragOnComponent, CardListMovimientosComponent, CardListProcesoComponent, CardLogComponent, CardPlanSmallComponent, CardPlanSubscriptionComponent, CardTicketComponent, CardTipoProcesoComponent, CardUsoPlanComponent, CardVigilanciaJudicialComponent, CategoriesComponent, ChartsDonutComponent, CheckboxComponent, CheckboxRadioComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownContextualMenuComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, FilterItemComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InfiniteScrollDirective, InputCardComponent, InputLargeComponent, InputOtpComponent, InputPasswordComponent, InputSelectComponent, InputSelectFilterComponent, InputSelectNumberComponent, InputTextfieldComponent, ItemDocumentComponent, IusChartsBarGroupedComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, NotificationCardComponent, NotificationsComponent, OptionComponent, OptionItemComponent, PopoverDirective, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SegmentComponent, SimpleCardContadorComponent, SimpleChipComponent, SimpleDividerComponent, SimpleUserCardComponent, SlideToggleComponent, SnackbarComponent, SupportPanelComponent, ToolbarComponent, ToolbarUserMenuComponent, UserCardComponent };
 //# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map