@litigiovirtual/ius-design-components 2.1.12 → 2.1.13

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

@@ -4345,7 +4345,7 @@ class UserMenuComponent {
         this.timers = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UserMenuComponent, isStandalone: true, selector: "ius-user-menu", inputs: { account: "account", user: "user", services: "services", collapsedCount: ["collapsedCount", "collapsedCount", numberAttribute], defaultExpanded: ["defaultExpanded", "defaultExpanded", booleanAttribute], menu: "menu", accounts: "accounts", open: ["open", "open", booleanAttribute], inline: ["inline", "inline", booleanAttribute], scrim: ["scrim", "scrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], offsetTop: ["offsetTop", "offsetTop", numberAttribute], origin: "origin" }, outputs: { profile: "profile", selectAccount: "selectAccount", createAccount: "createAccount", switchAccount: "switchAccount", logout: "logout", closed: "closed" }, queries: [{ propertyName: "footerSlot", first: true, predicate: IusUserMenuFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<!-- PRIMERO y al nivel ra\u00EDz: el `ViewChild` est\u00E1tico que lo portalea al overlay\n     no resuelve una plantilla declarada dentro de un bloque de control flow.\n     Solo se instancia al adjuntarse. -->\n<ng-template #tpl>\n  @if (scrim) {\n    <div\n      class=\"ius-oum-scrim\"\n      [attr.data-visible]=\"visible() ? 'true' : null\"\n      [style]=\"estilosScrim\"\n      (click)=\"onScrimClick()\"\n    ></div>\n  }\n  <div\n    class=\"ius-oum\"\n    role=\"menu\"\n    [attr.data-origin]=\"origenEfectivo\"\n    [attr.data-visible]=\"visible() ? 'true' : null\"\n    [attr.data-settled]=\"asentado() ? 'true' : null\"\n    [style]=\"estilosPanel\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n</ng-template>\n\n<!-- Encabezado y cuerpo son los mismos en modo overlay y en modo inline. -->\n<ng-template #panelTpl>\n  <div class=\"ius-oum__head\">\n    <div class=\"ius-oum__account\">\n      <ius-avatar\n        size=\"medium\"\n        shape=\"square\"\n        [src]=\"cuenta.avatar\"\n        [name]=\"nombreMedallon\"\n        [monogram]=\"cuenta.monogram\"\n        [icon]=\"iconoCuenta\"\n        [color]=\"cuenta.color ?? 'info'\"\n        [ariaLabel]=\"cuenta.name\"\n      ></ius-avatar>\n\n      <div class=\"ius-oum__acctgroup\">\n        <span class=\"ius-oum__nav-label\">Est\u00E1s navegando en</span>\n        <span class=\"ius-oum__account-name\">{{ cuenta.name }}</span>\n        @if (cuenta.role != null) {\n          <span class=\"ius-oum__row\">Tu rol <b>{{ cuenta.role }}</b></span>\n        }\n      </div>\n\n      @if (cuenta.id != null) {\n        <button\n          type=\"button\"\n          class=\"ius-oum__id\"\n          [attr.aria-label]=\"copiado() ? 'ID copiado' : 'Copiar ID de cuenta'\"\n          (click)=\"onCopiarId()\"\n        >\n          ID <b>{{ cuenta.id }}</b>\n          <span translate=\"no\" class=\"ius-icon\">{{ copiado() ? 'check' : 'content_copy' }}</span>\n        </button>\n      }\n    </div>\n\n    @if (usuario.email != null) {\n      <div class=\"ius-oum__meta\">\n        <span class=\"ius-oum__email\">\n          <span translate=\"no\" class=\"ius-icon\">alternate_email</span>\n          <span>{{ usuario.email }}</span>\n        </span>\n      </div>\n    }\n  </div>\n\n  <ius-divider></ius-divider>\n\n  @if (vista() === 'switch') {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      <div class=\"ius-oum__switch\">\n        <span class=\"ius-oum__section\">Cambiar a</span>\n        @for (opcion of accounts; track opcion.id ?? $index) {\n          <ius-account-item\n            [name]=\"opcion.name\"\n            [subtitle]=\"opcion.subtitle\"\n            [avatar]=\"opcion.avatar\"\n            [icon]=\"opcion.icon\"\n            [monogram]=\"opcion.monogram\"\n            [color]=\"opcion.color ?? 'auto'\"\n            [shape]=\"opcion.shape ?? 'circle'\"\n            [selected]=\"opcion.selected ?? false\"\n            [disabled]=\"opcion.disabled ?? false\"\n            [actions]=\"opcion.actions ?? []\"\n            (clicked)=\"onElegirCuenta(opcion, $index, $event)\"\n          ></ius-account-item>\n        }\n        @if (createAccount.observed) {\n          <div class=\"ius-oum__create\">\n            <ius-text-button\n              size=\"small\"\n              prefixIcon=\"add\"\n              label=\"Crear nueva cuenta\"\n              (clicked)=\"createAccount.emit($event)\"\n            ></ius-text-button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ius-oum__footer\">\n      <ius-menu-item\n        variant=\"menu\"\n        size=\"small\"\n        icon=\"arrow_back\"\n        label=\"Volver al men\u00FA de usuario\"\n        (clicked)=\"onVolver()\"\n      ></ius-menu-item>\n      @if (logout.observed) {\n        <ius-menu-item\n          variant=\"menu\"\n          size=\"small\"\n          icon=\"logout\"\n          label=\"Cerrar sesi\u00F3n\"\n          (clicked)=\"logout.emit($event)\"\n        ></ius-menu-item>\n      }\n    </div>\n  } @else {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      @if (services.length) {\n        <div class=\"ius-oum__usage\">\n          @for (svc of consumosVisibles; track $index) {\n            <ius-plan-usage-item\n              [divided]=\"true\"\n              [animateDelay]=\"360\"\n              [service]=\"svc.service\"\n              [plan]=\"svc.plan\"\n              [planHelp]=\"svc.planHelp\"\n              [status]=\"svc.status ?? 'active'\"\n              [total]=\"svc.total\"\n              [available]=\"svc.available\"\n              [segments]=\"svc.segments\"\n              [barSize]=\"svc.barSize ?? 'medium'\"\n              [legend]=\"svc.legend ?? 'popover'\"\n              [note]=\"svc.note\"\n            ></ius-plan-usage-item>\n          }\n        </div>\n      }\n\n      @if (puedeExpandir) {\n        <ius-show-more\n          [expanded]=\"expandido()\"\n          [remaining]=\"restantes\"\n          align=\"center\"\n          (toggle)=\"onToggleConsumos()\"\n        ></ius-show-more>\n      }\n\n      @if (menu.length) {\n        <ius-divider></ius-divider>\n        <div class=\"ius-oum__actions\">\n          @for (item of menu; track item.key ?? $index) {\n            <ius-menu-item\n              variant=\"menu\"\n              size=\"small\"\n              [icon]=\"item.icon\"\n              [label]=\"item.label\"\n              [danger]=\"item.danger ?? false\"\n              [disabled]=\"item.disabled ?? false\"\n              (clicked)=\"onItemMenu(item, $event)\"\n            ></ius-menu-item>\n          }\n        </div>\n      }\n    </div>\n\n    @if (hayPie) {\n      <div class=\"ius-oum__footer\">\n        <ng-content select=\"[iusUserMenuFooter]\" />\n\n        @if (!footerSlot && profile.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"manage_accounts\"\n            label=\"Perfil, preferencias y seguridad\"\n            (clicked)=\"profile.emit($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && puedeCambiar) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"swap_horiz\"\n            label=\"Cambiar de cuenta\"\n            (clicked)=\"onCambiarCuenta($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && logout.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"logout\"\n            label=\"Cerrar sesi\u00F3n\"\n            (clicked)=\"logout.emit($event)\"\n          ></ius-menu-item>\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n@if (inline) {\n  <div class=\"ius-oum\" role=\"menu\" data-inline=\"true\" data-visible=\"true\" data-settled=\"true\">\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.ius-oum-scrim{position:fixed;inset:0;background:#26262673;opacity:0;transition:opacity .26s var(--ius-ease-standard);z-index:var(--ius-z-overlay)}.ius-oum-scrim[data-visible=true]{opacity:1}.ius-oum{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:min(380px,100vw);display:flex;flex-direction:column;background:var(--ius-surface-card);font-family:var(--ius-font-body)}.ius-oum:not([data-inline=true]){position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--ius-z-overlay) + 1);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg);box-shadow:var(--ius-elevation-400);transform:translate(100%);transition:transform .26s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));will-change:transform}.ius-oum[data-visible=true]{transform:translate(0)}.ius-oum[data-origin=top-right]:not([data-inline=true]){right:var(--ius-space-xs);bottom:auto;height:calc(100vh - var(--_oum-top, 0px) - var(--ius-space-md));border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);transform-origin:top right;transform:scale(.96) translateY(calc(-1 * var(--ius-space-xs)));opacity:0;transition:transform .18s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1)),opacity .14s var(--ius-ease-standard)}.ius-oum[data-origin=top-right][data-visible=true]:not([data-inline=true]){transform:none;opacity:1}.ius-oum[data-settled=true]:not([data-inline=true]){transform:none;will-change:auto}.ius-oum[data-inline=true]{position:relative;height:100%;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300)}@media(max-width:480px){.ius-oum:not([data-inline=true]):not([data-origin=top-right]){width:100vw;border-radius:0}.ius-oum[data-origin=top-right]:not([data-inline=true]){width:calc(100vw - 2 * var(--ius-space-xs))}}@media(prefers-reduced-motion:reduce){.ius-oum:not([data-inline=true]),.ius-oum-scrim{transition:none}}.ius-oum__head{padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-oum__account{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-oum__acctgroup{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-oum__nav-label{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary)}.ius-oum__account-name{font-family:var(--ius-font-display);font-size:var(--ius-fs-lg);font-weight:var(--ius-fw-semibold);line-height:1.3;color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__id{flex:0 0 auto;align-self:flex-start;margin-top:1px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);white-space:nowrap;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);background:var(--ius-neutral-2);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-sm);padding:var(--ius-space-xxs) var(--ius-space-xs);font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;font-family:var(--ius-font-body);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-oum__id b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-oum__id .ius-icon{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);margin-left:1px}.ius-oum__id:hover{background:var(--ius-neutral-3)}.ius-oum__id:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-oum__meta{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__row{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-oum__row b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-oum__email{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);min-width:0}.ius-oum__email .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-oum__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ius-oum__usage{padding:var(--ius-space-xxs) var(--ius-space-md)}.ius-oum__actions{padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__switch{display:flex;flex-direction:column}.ius-oum__section{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding:var(--ius-space-sm) var(--ius-space-md) var(--ius-space-xs)}.ius-oum__switch ius-account-item{margin:0 var(--ius-space-md);width:auto}.ius-oum__switch ius-account-item+ius-account-item{margin-top:var(--ius-space-xs)}.ius-oum__create{display:flex;justify-content:center;padding:var(--ius-space-sm) var(--ius-space-md)}.ius-oum__footer{flex:0 0 auto;border-top:1px solid var(--ius-stroke);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccountItemComponent, selector: "ius-account-item", inputs: ["name", "subtitle", "avatar", "icon", "monogram", "color", "shape", "selected", "disabled", "actions", "actionsLabel", "state", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DividerComponent, selector: "ius-divider", inputs: ["orientation", "variant", "textAlign"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PlanUsageItemComponent, selector: "ius-plan-usage-item", inputs: ["service", "plan", "planHelp", "status", "total", "available", "segments", "barSize", "legend", "note", "actions", "maxInlineActions", "animateDelay", "divided", "optionsAriaLabel", "optionsTooltip"], outputs: ["options"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UserMenuComponent, isStandalone: true, selector: "ius-user-menu", inputs: { account: "account", user: "user", services: "services", collapsedCount: ["collapsedCount", "collapsedCount", numberAttribute], defaultExpanded: ["defaultExpanded", "defaultExpanded", booleanAttribute], menu: "menu", accounts: "accounts", open: ["open", "open", booleanAttribute], inline: ["inline", "inline", booleanAttribute], scrim: ["scrim", "scrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], offsetTop: ["offsetTop", "offsetTop", numberAttribute], origin: "origin" }, outputs: { profile: "profile", selectAccount: "selectAccount", createAccount: "createAccount", switchAccount: "switchAccount", logout: "logout", closed: "closed" }, queries: [{ propertyName: "footerSlot", first: true, predicate: IusUserMenuFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<!-- PRIMERO y al nivel ra\u00EDz: el `ViewChild` est\u00E1tico que lo portalea al overlay\n     no resuelve una plantilla declarada dentro de un bloque de control flow.\n     Solo se instancia al adjuntarse. -->\n<ng-template #tpl>\n  @if (scrim) {\n    <div\n      class=\"ius-oum-scrim\"\n      [attr.data-visible]=\"visible() ? 'true' : null\"\n      [style]=\"estilosScrim\"\n      (click)=\"onScrimClick()\"\n    ></div>\n  }\n  <div\n    class=\"ius-oum\"\n    role=\"menu\"\n    [attr.data-origin]=\"origenEfectivo\"\n    [attr.data-visible]=\"visible() ? 'true' : null\"\n    [attr.data-settled]=\"asentado() ? 'true' : null\"\n    [style]=\"estilosPanel\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n</ng-template>\n\n<!-- Encabezado y cuerpo son los mismos en modo overlay y en modo inline. -->\n<ng-template #panelTpl>\n  <div class=\"ius-oum__head\">\n    <div class=\"ius-oum__account\">\n      <ius-avatar\n        size=\"medium\"\n        shape=\"square\"\n        [src]=\"cuenta.avatar\"\n        [name]=\"nombreMedallon\"\n        [monogram]=\"cuenta.monogram\"\n        [icon]=\"iconoCuenta\"\n        [color]=\"cuenta.color ?? 'info'\"\n        [ariaLabel]=\"cuenta.name\"\n      ></ius-avatar>\n\n      <div class=\"ius-oum__acctgroup\">\n        <span class=\"ius-oum__nav-label\">Est\u00E1s navegando en</span>\n        <span class=\"ius-oum__account-name\">{{ cuenta.name }}</span>\n        @if (cuenta.role != null) {\n          <span class=\"ius-oum__row\">Tu rol <b>{{ cuenta.role }}</b></span>\n        }\n      </div>\n\n      @if (cuenta.id != null) {\n        <button\n          type=\"button\"\n          class=\"ius-oum__id\"\n          [attr.aria-label]=\"copiado() ? 'ID copiado' : 'Copiar ID de cuenta'\"\n          (click)=\"onCopiarId()\"\n        >\n          ID <b>{{ cuenta.id }}</b>\n          <span translate=\"no\" class=\"ius-icon\">{{ copiado() ? 'check' : 'content_copy' }}</span>\n        </button>\n      }\n    </div>\n\n    @if (usuario.email != null) {\n      <div class=\"ius-oum__meta\">\n        <span class=\"ius-oum__email\">\n          <span translate=\"no\" class=\"ius-icon\">alternate_email</span>\n          <span>{{ usuario.email }}</span>\n        </span>\n      </div>\n    }\n  </div>\n\n  <ius-divider></ius-divider>\n\n  @if (vista() === 'switch') {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      <div class=\"ius-oum__switch\">\n        <span class=\"ius-oum__section\">Cambiar a</span>\n        @for (opcion of accounts; track opcion.id ?? $index) {\n          <ius-account-item\n            [name]=\"opcion.name\"\n            [subtitle]=\"opcion.subtitle\"\n            [avatar]=\"opcion.avatar\"\n            [icon]=\"opcion.icon\"\n            [monogram]=\"opcion.monogram\"\n            [color]=\"opcion.color ?? 'auto'\"\n            [shape]=\"opcion.shape ?? 'circle'\"\n            [selected]=\"opcion.selected ?? false\"\n            [disabled]=\"opcion.disabled ?? false\"\n            [actions]=\"opcion.actions ?? []\"\n            (clicked)=\"onElegirCuenta(opcion, $index, $event)\"\n          ></ius-account-item>\n        }\n        @if (createAccount.observed) {\n          <div class=\"ius-oum__create\">\n            <ius-text-button\n              size=\"small\"\n              prefixIcon=\"add\"\n              label=\"Crear nueva cuenta\"\n              (clicked)=\"createAccount.emit($event)\"\n            ></ius-text-button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ius-oum__footer\">\n      <ius-menu-item\n        variant=\"menu\"\n        size=\"small\"\n        icon=\"arrow_back\"\n        label=\"Volver al men\u00FA de usuario\"\n        (clicked)=\"onVolver()\"\n      ></ius-menu-item>\n      @if (logout.observed) {\n        <ius-menu-item\n          variant=\"menu\"\n          size=\"small\"\n          icon=\"logout\"\n          label=\"Cerrar sesi\u00F3n\"\n          (clicked)=\"logout.emit($event)\"\n        ></ius-menu-item>\n      }\n    </div>\n  } @else {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      @if (services.length) {\n        <div class=\"ius-oum__usage\">\n          @for (svc of consumosVisibles; track $index) {\n            <ius-plan-usage-item\n              [divided]=\"true\"\n              [animateDelay]=\"360\"\n              [service]=\"svc.service\"\n              [plan]=\"svc.plan\"\n              [planHelp]=\"svc.planHelp\"\n              [status]=\"svc.status ?? 'active'\"\n              [total]=\"svc.total\"\n              [available]=\"svc.available\"\n              [segments]=\"svc.segments\"\n              [barSize]=\"svc.barSize ?? 'medium'\"\n              [legend]=\"svc.legend ?? 'popover'\"\n              [note]=\"svc.note\"\n            ></ius-plan-usage-item>\n          }\n        </div>\n      }\n\n      @if (puedeExpandir) {\n        <ius-show-more\n          [expanded]=\"expandido()\"\n          [remaining]=\"restantes\"\n          align=\"center\"\n          (toggle)=\"onToggleConsumos()\"\n        ></ius-show-more>\n      }\n\n      @if (menu.length) {\n        <ius-divider></ius-divider>\n        <div class=\"ius-oum__actions\">\n          @for (item of menu; track item.key ?? $index) {\n            <ius-menu-item\n              variant=\"menu\"\n              size=\"small\"\n              [icon]=\"item.icon\"\n              [label]=\"item.label\"\n              [danger]=\"item.danger ?? false\"\n              [disabled]=\"item.disabled ?? false\"\n              (clicked)=\"onItemMenu(item, $event)\"\n            ></ius-menu-item>\n          }\n        </div>\n      }\n    </div>\n\n    @if (hayPie) {\n      <div class=\"ius-oum__footer\">\n        <ng-content select=\"[iusUserMenuFooter]\" />\n\n        @if (!footerSlot && profile.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"manage_accounts\"\n            label=\"Perfil, preferencias y seguridad\"\n            (clicked)=\"profile.emit($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && puedeCambiar) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"swap_horiz\"\n            label=\"Cambiar de cuenta\"\n            (clicked)=\"onCambiarCuenta($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && logout.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"logout\"\n            label=\"Cerrar sesi\u00F3n\"\n            (clicked)=\"logout.emit($event)\"\n          ></ius-menu-item>\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n@if (inline) {\n  <div class=\"ius-oum\" role=\"menu\" data-inline=\"true\" data-visible=\"true\" data-settled=\"true\">\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-oum-scrim{position:fixed;inset:0;background:#26262673;opacity:0;transition:opacity .26s var(--ius-ease-standard);z-index:var(--ius-z-overlay)}.ius-oum-scrim[data-visible=true]{opacity:1}.ius-oum{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:min(380px,100vw);display:flex;flex-direction:column;background:var(--ius-surface-card);font-family:var(--ius-font-body)}.ius-oum:not([data-inline=true]){position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--ius-z-overlay) + 1);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg);box-shadow:var(--ius-elevation-400);transform:translate(100%);transition:transform .26s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));will-change:transform}.ius-oum[data-visible=true]{transform:translate(0)}.ius-oum[data-origin=top-right]:not([data-inline=true]){right:var(--ius-space-xs);bottom:auto;height:calc(100vh - var(--_oum-top, 0px) - var(--ius-space-md));border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);transform-origin:top right;transform:scale(.96) translateY(calc(-1 * var(--ius-space-xs)));opacity:0;transition:transform .18s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1)),opacity .14s var(--ius-ease-standard)}.ius-oum[data-origin=top-right][data-visible=true]:not([data-inline=true]){transform:none;opacity:1}.ius-oum[data-settled=true]:not([data-inline=true]){transform:none;will-change:auto}.ius-oum[data-inline=true]{position:relative;height:100%;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300)}@media(max-width:480px){.ius-oum:not([data-inline=true]):not([data-origin=top-right]){width:100vw;border-radius:0}.ius-oum[data-origin=top-right]:not([data-inline=true]){width:calc(100vw - 2 * var(--ius-space-xs))}}@media(prefers-reduced-motion:reduce){.ius-oum:not([data-inline=true]),.ius-oum-scrim{transition:none}}.ius-oum__head{padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-oum__account{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-oum__acctgroup{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-oum__nav-label{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary)}.ius-oum__account-name{font-family:var(--ius-font-display);font-size:var(--ius-fs-lg);font-weight:var(--ius-fw-semibold);line-height:1.3;color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__id{flex:0 0 auto;align-self:flex-start;margin-top:1px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);white-space:nowrap;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);background:var(--ius-neutral-2);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-sm);padding:var(--ius-space-xxs) var(--ius-space-xs);font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;font-family:var(--ius-font-body);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-oum__id b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-oum__id .ius-icon{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);margin-left:1px}.ius-oum__id:hover{background:var(--ius-neutral-3)}.ius-oum__id:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-oum__meta{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__row{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-oum__row b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-oum__email{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);min-width:0}.ius-oum__email .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-oum__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ius-oum__usage{padding:var(--ius-space-xxs) var(--ius-space-md)}.ius-oum__actions{padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__switch{display:flex;flex-direction:column}.ius-oum__section{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding:var(--ius-space-sm) var(--ius-space-md) var(--ius-space-xs)}.ius-oum__switch ius-account-item{margin:0 var(--ius-space-md);width:auto}.ius-oum__switch ius-account-item+ius-account-item{margin-top:var(--ius-space-xs)}.ius-oum__create{display:flex;justify-content:center;padding:var(--ius-space-sm) var(--ius-space-md)}.ius-oum__footer{flex:0 0 auto;border-top:1px solid var(--ius-stroke);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccountItemComponent, selector: "ius-account-item", inputs: ["name", "subtitle", "avatar", "icon", "monogram", "color", "shape", "selected", "disabled", "actions", "actionsLabel", "state", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DividerComponent, selector: "ius-divider", inputs: ["orientation", "variant", "textAlign"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PlanUsageItemComponent, selector: "ius-plan-usage-item", inputs: ["service", "plan", "planHelp", "status", "total", "available", "segments", "barSize", "legend", "note", "actions", "maxInlineActions", "animateDelay", "divided", "optionsAriaLabel", "optionsTooltip"], outputs: ["options"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UserMenuComponent, decorators: [{
             type: Component,
@@ -4358,7 +4358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         PlanUsageItemComponent,
                         ShowMoreComponent,
                         TextButtonComponent,
-                    ], template: "<!-- PRIMERO y al nivel ra\u00EDz: el `ViewChild` est\u00E1tico que lo portalea al overlay\n     no resuelve una plantilla declarada dentro de un bloque de control flow.\n     Solo se instancia al adjuntarse. -->\n<ng-template #tpl>\n  @if (scrim) {\n    <div\n      class=\"ius-oum-scrim\"\n      [attr.data-visible]=\"visible() ? 'true' : null\"\n      [style]=\"estilosScrim\"\n      (click)=\"onScrimClick()\"\n    ></div>\n  }\n  <div\n    class=\"ius-oum\"\n    role=\"menu\"\n    [attr.data-origin]=\"origenEfectivo\"\n    [attr.data-visible]=\"visible() ? 'true' : null\"\n    [attr.data-settled]=\"asentado() ? 'true' : null\"\n    [style]=\"estilosPanel\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n</ng-template>\n\n<!-- Encabezado y cuerpo son los mismos en modo overlay y en modo inline. -->\n<ng-template #panelTpl>\n  <div class=\"ius-oum__head\">\n    <div class=\"ius-oum__account\">\n      <ius-avatar\n        size=\"medium\"\n        shape=\"square\"\n        [src]=\"cuenta.avatar\"\n        [name]=\"nombreMedallon\"\n        [monogram]=\"cuenta.monogram\"\n        [icon]=\"iconoCuenta\"\n        [color]=\"cuenta.color ?? 'info'\"\n        [ariaLabel]=\"cuenta.name\"\n      ></ius-avatar>\n\n      <div class=\"ius-oum__acctgroup\">\n        <span class=\"ius-oum__nav-label\">Est\u00E1s navegando en</span>\n        <span class=\"ius-oum__account-name\">{{ cuenta.name }}</span>\n        @if (cuenta.role != null) {\n          <span class=\"ius-oum__row\">Tu rol <b>{{ cuenta.role }}</b></span>\n        }\n      </div>\n\n      @if (cuenta.id != null) {\n        <button\n          type=\"button\"\n          class=\"ius-oum__id\"\n          [attr.aria-label]=\"copiado() ? 'ID copiado' : 'Copiar ID de cuenta'\"\n          (click)=\"onCopiarId()\"\n        >\n          ID <b>{{ cuenta.id }}</b>\n          <span translate=\"no\" class=\"ius-icon\">{{ copiado() ? 'check' : 'content_copy' }}</span>\n        </button>\n      }\n    </div>\n\n    @if (usuario.email != null) {\n      <div class=\"ius-oum__meta\">\n        <span class=\"ius-oum__email\">\n          <span translate=\"no\" class=\"ius-icon\">alternate_email</span>\n          <span>{{ usuario.email }}</span>\n        </span>\n      </div>\n    }\n  </div>\n\n  <ius-divider></ius-divider>\n\n  @if (vista() === 'switch') {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      <div class=\"ius-oum__switch\">\n        <span class=\"ius-oum__section\">Cambiar a</span>\n        @for (opcion of accounts; track opcion.id ?? $index) {\n          <ius-account-item\n            [name]=\"opcion.name\"\n            [subtitle]=\"opcion.subtitle\"\n            [avatar]=\"opcion.avatar\"\n            [icon]=\"opcion.icon\"\n            [monogram]=\"opcion.monogram\"\n            [color]=\"opcion.color ?? 'auto'\"\n            [shape]=\"opcion.shape ?? 'circle'\"\n            [selected]=\"opcion.selected ?? false\"\n            [disabled]=\"opcion.disabled ?? false\"\n            [actions]=\"opcion.actions ?? []\"\n            (clicked)=\"onElegirCuenta(opcion, $index, $event)\"\n          ></ius-account-item>\n        }\n        @if (createAccount.observed) {\n          <div class=\"ius-oum__create\">\n            <ius-text-button\n              size=\"small\"\n              prefixIcon=\"add\"\n              label=\"Crear nueva cuenta\"\n              (clicked)=\"createAccount.emit($event)\"\n            ></ius-text-button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ius-oum__footer\">\n      <ius-menu-item\n        variant=\"menu\"\n        size=\"small\"\n        icon=\"arrow_back\"\n        label=\"Volver al men\u00FA de usuario\"\n        (clicked)=\"onVolver()\"\n      ></ius-menu-item>\n      @if (logout.observed) {\n        <ius-menu-item\n          variant=\"menu\"\n          size=\"small\"\n          icon=\"logout\"\n          label=\"Cerrar sesi\u00F3n\"\n          (clicked)=\"logout.emit($event)\"\n        ></ius-menu-item>\n      }\n    </div>\n  } @else {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      @if (services.length) {\n        <div class=\"ius-oum__usage\">\n          @for (svc of consumosVisibles; track $index) {\n            <ius-plan-usage-item\n              [divided]=\"true\"\n              [animateDelay]=\"360\"\n              [service]=\"svc.service\"\n              [plan]=\"svc.plan\"\n              [planHelp]=\"svc.planHelp\"\n              [status]=\"svc.status ?? 'active'\"\n              [total]=\"svc.total\"\n              [available]=\"svc.available\"\n              [segments]=\"svc.segments\"\n              [barSize]=\"svc.barSize ?? 'medium'\"\n              [legend]=\"svc.legend ?? 'popover'\"\n              [note]=\"svc.note\"\n            ></ius-plan-usage-item>\n          }\n        </div>\n      }\n\n      @if (puedeExpandir) {\n        <ius-show-more\n          [expanded]=\"expandido()\"\n          [remaining]=\"restantes\"\n          align=\"center\"\n          (toggle)=\"onToggleConsumos()\"\n        ></ius-show-more>\n      }\n\n      @if (menu.length) {\n        <ius-divider></ius-divider>\n        <div class=\"ius-oum__actions\">\n          @for (item of menu; track item.key ?? $index) {\n            <ius-menu-item\n              variant=\"menu\"\n              size=\"small\"\n              [icon]=\"item.icon\"\n              [label]=\"item.label\"\n              [danger]=\"item.danger ?? false\"\n              [disabled]=\"item.disabled ?? false\"\n              (clicked)=\"onItemMenu(item, $event)\"\n            ></ius-menu-item>\n          }\n        </div>\n      }\n    </div>\n\n    @if (hayPie) {\n      <div class=\"ius-oum__footer\">\n        <ng-content select=\"[iusUserMenuFooter]\" />\n\n        @if (!footerSlot && profile.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"manage_accounts\"\n            label=\"Perfil, preferencias y seguridad\"\n            (clicked)=\"profile.emit($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && puedeCambiar) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"swap_horiz\"\n            label=\"Cambiar de cuenta\"\n            (clicked)=\"onCambiarCuenta($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && logout.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"logout\"\n            label=\"Cerrar sesi\u00F3n\"\n            (clicked)=\"logout.emit($event)\"\n          ></ius-menu-item>\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n@if (inline) {\n  <div class=\"ius-oum\" role=\"menu\" data-inline=\"true\" data-visible=\"true\" data-settled=\"true\">\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.ius-oum-scrim{position:fixed;inset:0;background:#26262673;opacity:0;transition:opacity .26s var(--ius-ease-standard);z-index:var(--ius-z-overlay)}.ius-oum-scrim[data-visible=true]{opacity:1}.ius-oum{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:min(380px,100vw);display:flex;flex-direction:column;background:var(--ius-surface-card);font-family:var(--ius-font-body)}.ius-oum:not([data-inline=true]){position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--ius-z-overlay) + 1);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg);box-shadow:var(--ius-elevation-400);transform:translate(100%);transition:transform .26s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));will-change:transform}.ius-oum[data-visible=true]{transform:translate(0)}.ius-oum[data-origin=top-right]:not([data-inline=true]){right:var(--ius-space-xs);bottom:auto;height:calc(100vh - var(--_oum-top, 0px) - var(--ius-space-md));border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);transform-origin:top right;transform:scale(.96) translateY(calc(-1 * var(--ius-space-xs)));opacity:0;transition:transform .18s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1)),opacity .14s var(--ius-ease-standard)}.ius-oum[data-origin=top-right][data-visible=true]:not([data-inline=true]){transform:none;opacity:1}.ius-oum[data-settled=true]:not([data-inline=true]){transform:none;will-change:auto}.ius-oum[data-inline=true]{position:relative;height:100%;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300)}@media(max-width:480px){.ius-oum:not([data-inline=true]):not([data-origin=top-right]){width:100vw;border-radius:0}.ius-oum[data-origin=top-right]:not([data-inline=true]){width:calc(100vw - 2 * var(--ius-space-xs))}}@media(prefers-reduced-motion:reduce){.ius-oum:not([data-inline=true]),.ius-oum-scrim{transition:none}}.ius-oum__head{padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-oum__account{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-oum__acctgroup{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-oum__nav-label{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary)}.ius-oum__account-name{font-family:var(--ius-font-display);font-size:var(--ius-fs-lg);font-weight:var(--ius-fw-semibold);line-height:1.3;color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__id{flex:0 0 auto;align-self:flex-start;margin-top:1px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);white-space:nowrap;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);background:var(--ius-neutral-2);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-sm);padding:var(--ius-space-xxs) var(--ius-space-xs);font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;font-family:var(--ius-font-body);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-oum__id b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-oum__id .ius-icon{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);margin-left:1px}.ius-oum__id:hover{background:var(--ius-neutral-3)}.ius-oum__id:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-oum__meta{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__row{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-oum__row b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-oum__email{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);min-width:0}.ius-oum__email .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-oum__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ius-oum__usage{padding:var(--ius-space-xxs) var(--ius-space-md)}.ius-oum__actions{padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__switch{display:flex;flex-direction:column}.ius-oum__section{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding:var(--ius-space-sm) var(--ius-space-md) var(--ius-space-xs)}.ius-oum__switch ius-account-item{margin:0 var(--ius-space-md);width:auto}.ius-oum__switch ius-account-item+ius-account-item{margin-top:var(--ius-space-xs)}.ius-oum__create{display:flex;justify-content:center;padding:var(--ius-space-sm) var(--ius-space-md)}.ius-oum__footer{flex:0 0 auto;border-top:1px solid var(--ius-stroke);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}\n"] }]
+                    ], template: "<!-- PRIMERO y al nivel ra\u00EDz: el `ViewChild` est\u00E1tico que lo portalea al overlay\n     no resuelve una plantilla declarada dentro de un bloque de control flow.\n     Solo se instancia al adjuntarse. -->\n<ng-template #tpl>\n  @if (scrim) {\n    <div\n      class=\"ius-oum-scrim\"\n      [attr.data-visible]=\"visible() ? 'true' : null\"\n      [style]=\"estilosScrim\"\n      (click)=\"onScrimClick()\"\n    ></div>\n  }\n  <div\n    class=\"ius-oum\"\n    role=\"menu\"\n    [attr.data-origin]=\"origenEfectivo\"\n    [attr.data-visible]=\"visible() ? 'true' : null\"\n    [attr.data-settled]=\"asentado() ? 'true' : null\"\n    [style]=\"estilosPanel\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n</ng-template>\n\n<!-- Encabezado y cuerpo son los mismos en modo overlay y en modo inline. -->\n<ng-template #panelTpl>\n  <div class=\"ius-oum__head\">\n    <div class=\"ius-oum__account\">\n      <ius-avatar\n        size=\"medium\"\n        shape=\"square\"\n        [src]=\"cuenta.avatar\"\n        [name]=\"nombreMedallon\"\n        [monogram]=\"cuenta.monogram\"\n        [icon]=\"iconoCuenta\"\n        [color]=\"cuenta.color ?? 'info'\"\n        [ariaLabel]=\"cuenta.name\"\n      ></ius-avatar>\n\n      <div class=\"ius-oum__acctgroup\">\n        <span class=\"ius-oum__nav-label\">Est\u00E1s navegando en</span>\n        <span class=\"ius-oum__account-name\">{{ cuenta.name }}</span>\n        @if (cuenta.role != null) {\n          <span class=\"ius-oum__row\">Tu rol <b>{{ cuenta.role }}</b></span>\n        }\n      </div>\n\n      @if (cuenta.id != null) {\n        <button\n          type=\"button\"\n          class=\"ius-oum__id\"\n          [attr.aria-label]=\"copiado() ? 'ID copiado' : 'Copiar ID de cuenta'\"\n          (click)=\"onCopiarId()\"\n        >\n          ID <b>{{ cuenta.id }}</b>\n          <span translate=\"no\" class=\"ius-icon\">{{ copiado() ? 'check' : 'content_copy' }}</span>\n        </button>\n      }\n    </div>\n\n    @if (usuario.email != null) {\n      <div class=\"ius-oum__meta\">\n        <span class=\"ius-oum__email\">\n          <span translate=\"no\" class=\"ius-icon\">alternate_email</span>\n          <span>{{ usuario.email }}</span>\n        </span>\n      </div>\n    }\n  </div>\n\n  <ius-divider></ius-divider>\n\n  @if (vista() === 'switch') {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      <div class=\"ius-oum__switch\">\n        <span class=\"ius-oum__section\">Cambiar a</span>\n        @for (opcion of accounts; track opcion.id ?? $index) {\n          <ius-account-item\n            [name]=\"opcion.name\"\n            [subtitle]=\"opcion.subtitle\"\n            [avatar]=\"opcion.avatar\"\n            [icon]=\"opcion.icon\"\n            [monogram]=\"opcion.monogram\"\n            [color]=\"opcion.color ?? 'auto'\"\n            [shape]=\"opcion.shape ?? 'circle'\"\n            [selected]=\"opcion.selected ?? false\"\n            [disabled]=\"opcion.disabled ?? false\"\n            [actions]=\"opcion.actions ?? []\"\n            (clicked)=\"onElegirCuenta(opcion, $index, $event)\"\n          ></ius-account-item>\n        }\n        @if (createAccount.observed) {\n          <div class=\"ius-oum__create\">\n            <ius-text-button\n              size=\"small\"\n              prefixIcon=\"add\"\n              label=\"Crear nueva cuenta\"\n              (clicked)=\"createAccount.emit($event)\"\n            ></ius-text-button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ius-oum__footer\">\n      <ius-menu-item\n        variant=\"menu\"\n        size=\"small\"\n        icon=\"arrow_back\"\n        label=\"Volver al men\u00FA de usuario\"\n        (clicked)=\"onVolver()\"\n      ></ius-menu-item>\n      @if (logout.observed) {\n        <ius-menu-item\n          variant=\"menu\"\n          size=\"small\"\n          icon=\"logout\"\n          label=\"Cerrar sesi\u00F3n\"\n          (clicked)=\"logout.emit($event)\"\n        ></ius-menu-item>\n      }\n    </div>\n  } @else {\n    <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\n      @if (services.length) {\n        <div class=\"ius-oum__usage\">\n          @for (svc of consumosVisibles; track $index) {\n            <ius-plan-usage-item\n              [divided]=\"true\"\n              [animateDelay]=\"360\"\n              [service]=\"svc.service\"\n              [plan]=\"svc.plan\"\n              [planHelp]=\"svc.planHelp\"\n              [status]=\"svc.status ?? 'active'\"\n              [total]=\"svc.total\"\n              [available]=\"svc.available\"\n              [segments]=\"svc.segments\"\n              [barSize]=\"svc.barSize ?? 'medium'\"\n              [legend]=\"svc.legend ?? 'popover'\"\n              [note]=\"svc.note\"\n            ></ius-plan-usage-item>\n          }\n        </div>\n      }\n\n      @if (puedeExpandir) {\n        <ius-show-more\n          [expanded]=\"expandido()\"\n          [remaining]=\"restantes\"\n          align=\"center\"\n          (toggle)=\"onToggleConsumos()\"\n        ></ius-show-more>\n      }\n\n      @if (menu.length) {\n        <ius-divider></ius-divider>\n        <div class=\"ius-oum__actions\">\n          @for (item of menu; track item.key ?? $index) {\n            <ius-menu-item\n              variant=\"menu\"\n              size=\"small\"\n              [icon]=\"item.icon\"\n              [label]=\"item.label\"\n              [danger]=\"item.danger ?? false\"\n              [disabled]=\"item.disabled ?? false\"\n              (clicked)=\"onItemMenu(item, $event)\"\n            ></ius-menu-item>\n          }\n        </div>\n      }\n    </div>\n\n    @if (hayPie) {\n      <div class=\"ius-oum__footer\">\n        <ng-content select=\"[iusUserMenuFooter]\" />\n\n        @if (!footerSlot && profile.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"manage_accounts\"\n            label=\"Perfil, preferencias y seguridad\"\n            (clicked)=\"profile.emit($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && puedeCambiar) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"swap_horiz\"\n            label=\"Cambiar de cuenta\"\n            (clicked)=\"onCambiarCuenta($event)\"\n          ></ius-menu-item>\n        }\n        @if (!footerSlot && logout.observed) {\n          <ius-menu-item\n            variant=\"menu\"\n            size=\"small\"\n            icon=\"logout\"\n            label=\"Cerrar sesi\u00F3n\"\n            (clicked)=\"logout.emit($event)\"\n          ></ius-menu-item>\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n@if (inline) {\n  <div class=\"ius-oum\" role=\"menu\" data-inline=\"true\" data-visible=\"true\" data-settled=\"true\">\n    <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-oum-scrim{position:fixed;inset:0;background:#26262673;opacity:0;transition:opacity .26s var(--ius-ease-standard);z-index:var(--ius-z-overlay)}.ius-oum-scrim[data-visible=true]{opacity:1}.ius-oum{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:min(380px,100vw);display:flex;flex-direction:column;background:var(--ius-surface-card);font-family:var(--ius-font-body)}.ius-oum:not([data-inline=true]){position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--ius-z-overlay) + 1);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg);box-shadow:var(--ius-elevation-400);transform:translate(100%);transition:transform .26s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));will-change:transform}.ius-oum[data-visible=true]{transform:translate(0)}.ius-oum[data-origin=top-right]:not([data-inline=true]){right:var(--ius-space-xs);bottom:auto;height:calc(100vh - var(--_oum-top, 0px) - var(--ius-space-md));border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);transform-origin:top right;transform:scale(.96) translateY(calc(-1 * var(--ius-space-xs)));opacity:0;transition:transform .18s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1)),opacity .14s var(--ius-ease-standard)}.ius-oum[data-origin=top-right][data-visible=true]:not([data-inline=true]){transform:none;opacity:1}.ius-oum[data-settled=true]:not([data-inline=true]){transform:none;will-change:auto}.ius-oum[data-inline=true]{position:relative;height:100%;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300)}@media(max-width:480px){.ius-oum:not([data-inline=true]):not([data-origin=top-right]){width:100vw;border-radius:0}.ius-oum[data-origin=top-right]:not([data-inline=true]){width:calc(100vw - 2 * var(--ius-space-xs))}}@media(prefers-reduced-motion:reduce){.ius-oum:not([data-inline=true]),.ius-oum-scrim{transition:none}}.ius-oum__head{padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-oum__account{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-oum__acctgroup{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-oum__nav-label{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary)}.ius-oum__account-name{font-family:var(--ius-font-display);font-size:var(--ius-fs-lg);font-weight:var(--ius-fw-semibold);line-height:1.3;color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__id{flex:0 0 auto;align-self:flex-start;margin-top:1px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);white-space:nowrap;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);background:var(--ius-neutral-2);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-sm);padding:var(--ius-space-xxs) var(--ius-space-xs);font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;font-family:var(--ius-font-body);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-oum__id b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-oum__id .ius-icon{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);margin-left:1px}.ius-oum__id:hover{background:var(--ius-neutral-3)}.ius-oum__id:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-oum__meta{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__row{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-oum__row b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-oum__email{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);min-width:0}.ius-oum__email .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-oum__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ius-oum__usage{padding:var(--ius-space-xxs) var(--ius-space-md)}.ius-oum__actions{padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__switch{display:flex;flex-direction:column}.ius-oum__section{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding:var(--ius-space-sm) var(--ius-space-md) var(--ius-space-xs)}.ius-oum__switch ius-account-item{margin:0 var(--ius-space-md);width:auto}.ius-oum__switch ius-account-item+ius-account-item{margin-top:var(--ius-space-xs)}.ius-oum__create{display:flex;justify-content:center;padding:var(--ius-space-sm) var(--ius-space-md)}.ius-oum__footer{flex:0 0 auto;border-top:1px solid var(--ius-stroke);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}\n"] }]
         }], propDecorators: { tpl: [{
                 type: ViewChild,
                 args: ['tpl']