@litigiovirtual/ius-design-components 1.0.204 → 1.0.205

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

@@ -3681,7 +3681,7 @@ class ProgressBarComponent {
         this._v1 = signal(0);
         this._v2 = signal(0);
         this._v3 = signal(0);
-        this._v4 = signal(0);
+        // @Input() set v4(v: number) { this._v4.set(this.n(v)); }
         this.titleV1 = '';
         this.titleV2 = '';
         this.titleV3 = '';
@@ -3689,14 +3689,14 @@ class ProgressBarComponent {
         this.showPopover1 = false;
         this.showPopover2 = false;
         this.showPopover3 = false;
-        this.showPopover4 = false;
+        // showPopover4 = false;
         this.showPopoverGray = false;
         this.t = computed(() => this._total());
         this.a1 = computed(() => this._v1());
         this.a2 = computed(() => this._v2());
         this.a3 = computed(() => this._v3());
-        this.a4 = computed(() => this._v4());
-        this.used = computed(() => this.a1() + this.a2() + this.a3() + this.a4());
+        // readonly a4 = computed(() => this._v4());
+        this.used = computed(() => this.a1() + this.a2() + this.a3());
         this.available = computed(() => Math.max(0, this.t() - this.used()));
         //evita desbordes
         this.pct = computed(() => {
@@ -3706,20 +3706,20 @@ class ProgressBarComponent {
             const p1 = (this.a1() / total) * 100;
             const p2 = (this.a2() / total) * 100;
             const p3 = (this.a3() / total) * 100;
-            const p4 = (this.a4() / total) * 100;
-            const sum = p1 + p2 + p3 + p4;
+            // const p4 = (this.a4() / total) * 100;
+            const sum = p1 + p2 + p3;
             if (sum <= 100) {
-                return { p1, p2, p3, p4, pg: 100 - sum };
+                return { p1, p2, p3, pg: 100 - sum };
             }
             const k = sum === 0 ? 0 : 100 / sum;
-            return { p1: p1 * k, p2: p2 * k, p3: p3 * k, p4: p4 * k, pg: 0 };
+            return { p1: p1 * k, p2: p2 * k, p3: p3 * k, pg: 0 };
         });
     }
+    // private _v4 = signal(0);
     set total(v) { this._total.set(this.n(v)); }
     set v1(v) { this._v1.set(this.n(v)); }
     set v2(v) { this._v2.set(this.n(v)); }
     set v3(v) { this._v3.set(this.n(v)); }
-    set v4(v) { this._v4.set(this.n(v)); }
     n(v) {
         const x = Number(v);
         return Number.isFinite(x) ? Math.max(0, x) : 0;
@@ -3735,9 +3735,9 @@ class ProgressBarComponent {
             case 's3':
                 this.showPopover3 = true;
                 break;
-            case 's4':
-                this.showPopover4 = true;
-                break;
+            // case 's4':
+            //   this.showPopover4 = true;
+            // break;
             case 'gray':
                 this.showPopoverGray = true;
                 break;
@@ -3754,20 +3754,20 @@ class ProgressBarComponent {
             case 's3':
                 this.showPopover3 = false;
                 break;
-            case 's4':
-                this.showPopover4 = false;
-                break;
+            // case 's4':
+            //   this.showPopover4 = false;
+            //   break;
             case 'gray':
                 this.showPopoverGray = false;
                 break;
         }
     }
     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", v4: "v4", 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}.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;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"] }] }); }
 }
 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}.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;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"] }]
         }], propDecorators: { total: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3777,8 +3777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], v3: [{
                 type: Input
-            }], v4: [{
-                type: Input
             }], titleV1: [{
                 type: Input
             }], titleV2: [{
@@ -3851,11 +3849,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              [v4]=\"subscripcionDetalle?.cantProcesos4 ?? 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", "v4", "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]=\"'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"] }] }); }
 }
 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              [v4]=\"subscripcionDetalle?.cantProcesos4 ?? 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]=\"'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"] }]
         }], propDecorators: { object: [{
                 type: Input,
                 args: [{ required: true }]