valtech-components 4.0.40 → 4.0.41

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.40';
+const VERSION = '4.0.41';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -48117,6 +48117,7 @@ const ACCOUNT_VIEW_I18N = {
         pageTitle: 'Cuenta',
         pageDescription: 'Organizaciones y seguridad de la cuenta',
         orgsTitle: 'Tus organizaciones',
+        orgsActiveTitle: 'Organización activa',
         orgsCurrent: 'Actual',
         orgsEmpty: 'Aún no perteneces a otras organizaciones.',
         orgsSwitch: 'Cambiar',
@@ -48161,6 +48162,7 @@ const ACCOUNT_VIEW_I18N = {
         pageTitle: 'Account',
         pageDescription: 'Organizations and account security',
         orgsTitle: 'Your organizations',
+        orgsActiveTitle: 'Active organization',
         orgsCurrent: 'Active',
         orgsEmpty: "You don't belong to other organizations yet.",
         orgsSwitch: 'Switch',
@@ -48242,7 +48244,7 @@ class AccountViewComponent {
             return {
                 showPendingInvites: merged.showPendingInvites ?? true,
                 showOrganizations: merged.showOrganizations ?? true,
-                showNewOrgCta: merged.showNewOrgCta ?? true,
+                showNewOrgCta: merged.showNewOrgCta ?? false,
                 showLogout: merged.showLogout ?? true,
                 showDeleteAccount: merged.showDeleteAccount ?? true,
                 i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$d,
@@ -48277,12 +48279,14 @@ class AccountViewComponent {
         });
         this.createOrgOpen = signal(false);
         this.deleteAccountOpen = signal(false);
+        this.activeOrgLogoFailed = signal(false);
         this.pendingInvites = signal([]);
         this.pendingInvitesLoading = signal(false);
         this.inviteAccepting = signal(null);
         this.pageTitle = computed(() => this.tt('pageTitle'));
         this.pageDescription = computed(() => this.tt('pageDescription'));
         this.orgsTitle = computed(() => this.tt('orgsTitle'));
+        this.orgsActiveTitle = computed(() => this.tt('orgsActiveTitle'));
         this.orgsEmpty = computed(() => this.tt('orgsEmpty'));
         this.orgsMoreInfo = computed(() => this.tt('orgsMoreInfo'));
         this.orgsNewQuestion = computed(() => this.tt('orgsNewQuestion'));
@@ -48506,6 +48510,7 @@ class AccountViewComponent {
                 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();
                 },
@@ -48571,12 +48576,12 @@ class AccountViewComponent {
                 size: 'medium',
                 color: 'dark',
                 bold: true,
-                content: orgsTitle(),
+                content: orgsActiveTitle(),
               }"
             />
             @if (orgs().length > 1) {
               <ion-button fill="outline" color="dark" shape="round" size="small" (click)="onSwitchAccount()">
-                {{ tt('orgsViewAll') }}
+                {{ tt('orgsSwitch') }}
               </ion-button>
             }
           </div>
@@ -48590,7 +48595,11 @@ class AccountViewComponent {
                 <div class="orgs-list">
                   <div class="org-card org-card--active">
                     <div class="org-card__icon">
-                      <ion-icon name="business-outline" />
+                      @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>
@@ -48667,7 +48676,7 @@ class AccountViewComponent {
 
       @if (resolvedConfig().showDeleteAccount) {
         <!-- Delete account -->
-        <section class="settings-section">
+        <section class="settings-section settings-section--danger">
           <div class="section-title-danger">
             <ion-icon name="warning-outline" class="danger-icon" aria-hidden="true"></ion-icon>
             <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: dangerDeleteTitle() }" />
@@ -48699,7 +48708,7 @@ 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)}.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}.danger-icon{font-size:1.15rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\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}.danger-icon{font-size:1.15rem;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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccountViewComponent, decorators: [{
             type: Component,
@@ -48767,12 +48776,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 size: 'medium',
                 color: 'dark',
                 bold: true,
-                content: orgsTitle(),
+                content: orgsActiveTitle(),
               }"
             />
             @if (orgs().length > 1) {
               <ion-button fill="outline" color="dark" shape="round" size="small" (click)="onSwitchAccount()">
-                {{ tt('orgsViewAll') }}
+                {{ tt('orgsSwitch') }}
               </ion-button>
             }
           </div>
@@ -48786,7 +48795,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 <div class="orgs-list">
                   <div class="org-card org-card--active">
                     <div class="org-card__icon">
-                      <ion-icon name="business-outline" />
+                      @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>
@@ -48863,7 +48876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       @if (resolvedConfig().showDeleteAccount) {
         <!-- Delete account -->
-        <section class="settings-section">
+        <section class="settings-section settings-section--danger">
           <div class="section-title-danger">
             <ion-icon name="warning-outline" class="danger-icon" aria-hidden="true"></ion-icon>
             <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: dangerDeleteTitle() }" />
@@ -48895,7 +48908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         (dismissed)="deleteAccountOpen.set(false)"
       />
     </div>
-  `, 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)}.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}.danger-icon{font-size:1.15rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\n"] }]
+  `, 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}.danger-icon{font-size:1.15rem;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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });