valtech-components 4.0.216 → 4.0.218

package/fesm2022/valtech-components.mjs

@@ -50105,28 +50105,6 @@ class AccountViewComponent {
                 onAccountDeleted: merged.onAccountDeleted,
             };
         });
-        this.orgs = signal([]);
-        this.orgsLoading = signal(false);
-        this.orgsError = signal(null);
-        this.orgsErrorState = computed(() => {
-            this.i18n.lang();
-            const err = this.orgsError();
-            if (!err)
-                return null;
-            return createErrorStateProps(err, {
-                title: {
-                    offline: this.tt('orgsOfflineTitle'),
-                    error: this.tt('orgsErrorTitle'),
-                },
-                description: {
-                    offline: this.tt('orgsOfflineHint'),
-                    error: this.tt('orgsErrorHint'),
-                },
-                retryLabel: this.tt('orgsRetry'),
-                onRetry: () => this.loadOrgs(),
-                retrying: this.orgsLoading(),
-            });
-        });
         this.createOrgOpen = signal(false);
         this.deleteAccountOpen = signal(false);
         this.activeOrgLogoFailed = signal(false);
@@ -50170,14 +50148,13 @@ class AccountViewComponent {
         this.dangerDeleteHint = computed(() => this.tt('dangerDeleteHint'));
         this.activeOrgId = computed(() => {
             const u = this.auth.user();
-            const explicit = u?.activeOrgId ?? u?.activeOrg;
-            return explicit || this.orgs()[0]?.id || '';
+            return u?.activeOrgId ?? u?.activeOrg ?? '';
         });
         this.activeOrgRole = computed(() => {
             const roles = this.auth.roles?.() ?? [];
             return roles[0] ?? null;
         });
-        this.activeOrg = computed(() => this.orgs().find(o => o.id === this.activeOrgId()) ?? this.orgs()[0] ?? null);
+        this.activeOrg = signal(null);
         this.logoutButtonProps = computed(() => ({
             text: this.tt('logout'),
             color: 'dark',
@@ -50199,11 +50176,23 @@ class AccountViewComponent {
         const ns = this.ns;
         this.i18n.registerDefaults(ns, ACCOUNT_VIEW_I18N);
         this.nav.setBackHeader('pageTitle', ns, { withMenu: true });
-        this.loadOrgs();
         this.loadPendingInvites();
-        connectPageRefresh(async () => {
-            await Promise.all([this.loadOrgs(), this.loadPendingInvites()]);
+        effect(() => {
+            const orgId = this.activeOrgId();
+            if (!orgId) {
+                this.activeOrg.set(null);
+                return;
+            }
+            this.activeOrgLogoFailed.set(false);
+            this.orgService
+                .getOrg(orgId)
+                .pipe(take(1))
+                .subscribe({
+                next: org => this.activeOrg.set(org),
+                error: () => this.activeOrg.set(null),
+            });
         });
+        connectPageRefresh(() => this.loadPendingInvites());
     }
     orgTypeLabel(type) {
         const map = {
@@ -50225,7 +50214,6 @@ class AccountViewComponent {
         this.createOrgOpen.set(true);
     }
     onOrgCreated(newOrg) {
-        this.loadOrgs();
         this.resolvedConfig().onOrgCreated?.(newOrg);
     }
     onMoreInfo() {
@@ -50291,7 +50279,6 @@ class AccountViewComponent {
                     duration: 3500,
                 });
                 this.pendingInvites.update(list => list.filter(i => i.orgId !== invite.orgId));
-                this.loadOrgs();
             },
             error: err => {
                 this.errors.handle(err, { context: 'account.acceptPendingInvite' });
@@ -50323,26 +50310,6 @@ class AccountViewComponent {
             complete: () => this.inviteAccepting.set(null),
         });
     }
-    loadOrgs() {
-        this.orgsLoading.set(true);
-        this.orgsError.set(null);
-        return new Promise(resolve => {
-            this.orgService.listMyOrgs().subscribe({
-                next: orgs => {
-                    const activeId = this.activeOrgId();
-                    this.orgs.set([...orgs].sort((a, b) => (a.id === activeId ? -1 : b.id === activeId ? 1 : 0)));
-                    this.activeOrgLogoFailed.set(false);
-                    this.orgsLoading.set(false);
-                    resolve();
-                },
-                error: err => {
-                    this.orgsError.set(err);
-                    this.orgsLoading.set(false);
-                    resolve();
-                },
-            });
-        });
-    }
     tt(key) {
         return this.i18n.t(key, this.ns);
     }
@@ -50402,66 +50369,59 @@ class AccountViewComponent {
             />
           </div>
           <div class="section-body">
-            @if (orgsLoading()) {
-              <val-skeleton-layout [props]="{ preset: 'list', rows: 3 }" />
-            } @else if (orgsErrorState()) {
-              <val-empty-state [props]="orgsErrorState()!" />
-            } @else {
-              @if (activeOrg(); as org) {
-                <div class="orgs-list">
-                  <div class="org-card org-card--active">
-                    <div class="org-card__icon">
-                      @if (activeOrg()?.logoUrl && !activeOrgLogoFailed()) {
-                        <img
-                          [src]="activeOrg()!.logoUrl!"
-                          [alt]="activeOrg()?.name ?? ''"
-                          (error)="activeOrgLogoFailed.set(true)"
-                        />
-                      } @else {
-                        <ion-icon name="business-outline" />
-                      }
-                    </div>
-                    <div class="org-card__body">
-                      <span class="org-card__name">{{ org.name }}</span>
-                      <div class="org-card__meta">
-                        <span class="org-card__meta-item">
-                          <span class="org-card__meta-label">{{ tt('orgsLabelType') }}</span>
-                          {{ orgTypeLabel(org.type) }}
-                        </span>
-                        @if (activeOrgRole()) {
-                          <span class="org-card__meta-item">
-                            <span class="org-card__meta-label">{{ tt('orgsLabelRole') }}</span>
-                            {{ activeOrgRole() | titlecase }}
-                          </span>
-                        }
+            @if (activeOrg(); as org) {
+              <div class="orgs-list">
+                <div class="org-card org-card--active">
+                  <div class="org-card__icon">
+                    @if (activeOrg()?.logoUrl && !activeOrgLogoFailed()) {
+                      <img
+                        [src]="activeOrg()!.logoUrl!"
+                        [alt]="activeOrg()?.name ?? ''"
+                        (error)="activeOrgLogoFailed.set(true)"
+                      />
+                    } @else {
+                      <ion-icon name="business-outline" />
+                    }
+                  </div>
+                  <div class="org-card__body">
+                    <span class="org-card__name">{{ org.name }}</span>
+                    <div class="org-card__meta">
+                      <span class="org-card__meta-item">
+                        <span class="org-card__meta-label">{{ tt('orgsLabelType') }}</span>
+                        {{ orgTypeLabel(org.type) }}
+                      </span>
+                      @if (activeOrgRole()) {
                         <span class="org-card__meta-item">
-                          <span class="org-card__meta-label">{{ tt('orgsLabelStatus') }}</span>
-                          {{ tt('orgsStatusActive') }}
+                          <span class="org-card__meta-label">{{ tt('orgsLabelRole') }}</span>
+                          {{ activeOrgRole() | titlecase }}
                         </span>
-                      </div>
-                    </div>
-                    <div class="org-card__end">
-                      <ion-button fill="outline" color="dark" shape="round" size="small" (click)="onManageOrg()">
-                        {{ tt('orgsManage') }}
-                      </ion-button>
+                      }
+                      <span class="org-card__meta-item">
+                        <span class="org-card__meta-label">{{ tt('orgsLabelStatus') }}</span>
+                        {{ tt('orgsStatusActive') }}
+                      </span>
                     </div>
                   </div>
-                </div>
-              } @else if (orgs().length === 0) {
-                <div class="orgs-empty-card">
-                  <div class="orgs-empty-card__main">
-                    <ion-icon name="people-outline" class="orgs-empty-card__icon" />
-                    <span class="orgs-empty-card__text">{{ orgsEmpty() }}</span>
+                  <div class="org-card__end">
+                    <ion-button fill="outline" color="dark" shape="round" size="small" (click)="onManageOrg()">
+                      {{ tt('orgsManage') }}
+                    </ion-button>
                   </div>
-                  <button class="orgs-empty-card__link" (click)="onMoreInfo()">
-                    {{ orgsMoreInfo() }}
-                  </button>
                 </div>
-              }
-              @if (resolvedConfig().showNewOrgCta) {
-                <!-- Nueva organizacion: CTA card con titulo, subtitulo y boton -->
-                <val-cta-card class="org-new-cta-card" [props]="newOrgCtaProps()" (onAction)="onNewOrg()" />
-              }
+              </div>
+            } @else if (!activeOrgId()) {
+              <div class="orgs-empty-card">
+                <div class="orgs-empty-card__main">
+                  <ion-icon name="people-outline" class="orgs-empty-card__icon" />
+                  <span class="orgs-empty-card__text">{{ orgsEmpty() }}</span>
+                </div>
+                <button class="orgs-empty-card__link" (click)="onMoreInfo()">
+                  {{ orgsMoreInfo() }}
+                </button>
+              </div>
+            }
+            @if (resolvedConfig().showNewOrgCta) {
+              <val-cta-card class="org-new-cta-card" [props]="newOrgCtaProps()" (onAction)="onNewOrg()" />
             }
           </div>
         </section>
@@ -50528,14 +50488,12 @@ class AccountViewComponent {
         (dismissed)="deleteAccountOpen.set(false)"
       />
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary);overflow:hidden;img{width:100%;height:100%;object-fit:cover;border-radius:50%}}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}.section-title-danger{display:flex;align-items:center;gap:8px;margin-bottom:12px}.section-title-danger val-title{display:block;margin:0}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}.settings-section--danger{background:color-mix(in srgb,var(--ion-color-danger) 4%,transparent);border-radius:14px;padding:16px;margin:0 -4px}:host-context(body.dark) .settings-section--danger,:host-context(html.ion-palette-dark) .settings-section--danger,:host-context([data-theme=\"dark\"]) .settings-section--danger{background:color-mix(in srgb,var(--ion-color-danger) 8%,transparent)}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: InvitationCardComponent, selector: "val-invitation-card", inputs: ["props"], outputs: ["onAccept", "onDecline"] }, { kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: DeleteAccountModalComponent, selector: "val-delete-account-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary);overflow:hidden;img{width:100%;height:100%;object-fit:cover;border-radius:50%}}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}.section-title-danger{display:flex;align-items:center;gap:8px;margin-bottom:12px}.section-title-danger val-title{display:block;margin:0}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}.settings-section--danger{background:color-mix(in srgb,var(--ion-color-danger) 4%,transparent);border-radius:14px;padding:16px;margin:0 -4px}:host-context(body.dark) .settings-section--danger,:host-context(html.ion-palette-dark) .settings-section--danger,:host-context([data-theme=\"dark\"]) .settings-section--danger{background:color-mix(in srgb,var(--ion-color-danger) 8%,transparent)}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: InvitationCardComponent, selector: "val-invitation-card", inputs: ["props"], outputs: ["onAccept", "onDecline"] }, { kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: DeleteAccountModalComponent, selector: "val-delete-account-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccountViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-account-view', standalone: true, imports: [
                         DisplayComponent,
-                        EmptyStateComponent,
-                        SkeletonLayoutComponent,
                         TitleComponent,
                         TextComponent,
                         ButtonComponent,
@@ -50601,66 +50559,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             />
           </div>
           <div class="section-body">
-            @if (orgsLoading()) {
-              <val-skeleton-layout [props]="{ preset: 'list', rows: 3 }" />
-            } @else if (orgsErrorState()) {
-              <val-empty-state [props]="orgsErrorState()!" />
-            } @else {
-              @if (activeOrg(); as org) {
-                <div class="orgs-list">
-                  <div class="org-card org-card--active">
-                    <div class="org-card__icon">
-                      @if (activeOrg()?.logoUrl && !activeOrgLogoFailed()) {
-                        <img
-                          [src]="activeOrg()!.logoUrl!"
-                          [alt]="activeOrg()?.name ?? ''"
-                          (error)="activeOrgLogoFailed.set(true)"
-                        />
-                      } @else {
-                        <ion-icon name="business-outline" />
-                      }
-                    </div>
-                    <div class="org-card__body">
-                      <span class="org-card__name">{{ org.name }}</span>
-                      <div class="org-card__meta">
-                        <span class="org-card__meta-item">
-                          <span class="org-card__meta-label">{{ tt('orgsLabelType') }}</span>
-                          {{ orgTypeLabel(org.type) }}
-                        </span>
-                        @if (activeOrgRole()) {
-                          <span class="org-card__meta-item">
-                            <span class="org-card__meta-label">{{ tt('orgsLabelRole') }}</span>
-                            {{ activeOrgRole() | titlecase }}
-                          </span>
-                        }
+            @if (activeOrg(); as org) {
+              <div class="orgs-list">
+                <div class="org-card org-card--active">
+                  <div class="org-card__icon">
+                    @if (activeOrg()?.logoUrl && !activeOrgLogoFailed()) {
+                      <img
+                        [src]="activeOrg()!.logoUrl!"
+                        [alt]="activeOrg()?.name ?? ''"
+                        (error)="activeOrgLogoFailed.set(true)"
+                      />
+                    } @else {
+                      <ion-icon name="business-outline" />
+                    }
+                  </div>
+                  <div class="org-card__body">
+                    <span class="org-card__name">{{ org.name }}</span>
+                    <div class="org-card__meta">
+                      <span class="org-card__meta-item">
+                        <span class="org-card__meta-label">{{ tt('orgsLabelType') }}</span>
+                        {{ orgTypeLabel(org.type) }}
+                      </span>
+                      @if (activeOrgRole()) {
                         <span class="org-card__meta-item">
-                          <span class="org-card__meta-label">{{ tt('orgsLabelStatus') }}</span>
-                          {{ tt('orgsStatusActive') }}
+                          <span class="org-card__meta-label">{{ tt('orgsLabelRole') }}</span>
+                          {{ activeOrgRole() | titlecase }}
                         </span>
-                      </div>
-                    </div>
-                    <div class="org-card__end">
-                      <ion-button fill="outline" color="dark" shape="round" size="small" (click)="onManageOrg()">
-                        {{ tt('orgsManage') }}
-                      </ion-button>
+                      }
+                      <span class="org-card__meta-item">
+                        <span class="org-card__meta-label">{{ tt('orgsLabelStatus') }}</span>
+                        {{ tt('orgsStatusActive') }}
+                      </span>
                     </div>
                   </div>
-                </div>
-              } @else if (orgs().length === 0) {
-                <div class="orgs-empty-card">
-                  <div class="orgs-empty-card__main">
-                    <ion-icon name="people-outline" class="orgs-empty-card__icon" />
-                    <span class="orgs-empty-card__text">{{ orgsEmpty() }}</span>
+                  <div class="org-card__end">
+                    <ion-button fill="outline" color="dark" shape="round" size="small" (click)="onManageOrg()">
+                      {{ tt('orgsManage') }}
+                    </ion-button>
                   </div>
-                  <button class="orgs-empty-card__link" (click)="onMoreInfo()">
-                    {{ orgsMoreInfo() }}
-                  </button>
                 </div>
-              }
-              @if (resolvedConfig().showNewOrgCta) {
-                <!-- Nueva organizacion: CTA card con titulo, subtitulo y boton -->
-                <val-cta-card class="org-new-cta-card" [props]="newOrgCtaProps()" (onAction)="onNewOrg()" />
-              }
+              </div>
+            } @else if (!activeOrgId()) {
+              <div class="orgs-empty-card">
+                <div class="orgs-empty-card__main">
+                  <ion-icon name="people-outline" class="orgs-empty-card__icon" />
+                  <span class="orgs-empty-card__text">{{ orgsEmpty() }}</span>
+                </div>
+                <button class="orgs-empty-card__link" (click)="onMoreInfo()">
+                  {{ orgsMoreInfo() }}
+                </button>
+              </div>
+            }
+            @if (resolvedConfig().showNewOrgCta) {
+              <val-cta-card class="org-new-cta-card" [props]="newOrgCtaProps()" (onAction)="onNewOrg()" />
             }
           </div>
         </section>