valtech-components 2.0.1015 → 2.0.1016

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1015';
+const VERSION = '2.0.1016';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -46129,6 +46129,12 @@ class OrgInfoSheetComponent {
         this.body = '';
         /** Label del botón cerrar (resuelto por el consumer). Fallback al namespace propio. */
         this.closeLabel = '';
+        /**
+         * Muestra las 3 feature-cards de organizaciones (colaboración / cambio rápido /
+         * invitaciones). `false` → sheet article-style (solo título + subtítulo + cuerpo),
+         * reusable como explainer genérico (ej. integraciones / API keys). Default `true`.
+         */
+        this.showFeatures = true;
         /** Props del botón cerrar del footer (el consumer puede pasar custom). */
         this.closeProps = {
             text: 'Cerrar',
@@ -46158,7 +46164,7 @@ class OrgInfoSheetComponent {
         return this.i18n.t(key, DEFAULT_NAMESPACE$d);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrgInfoSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", showFeatures: "showFeatures", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
@@ -46173,29 +46179,31 @@ class OrgInfoSheetComponent {
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      <div class="info-features">
-        <div class="info-feature">
-          <ion-icon name="people-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+      @if (showFeatures) {
+        <div class="info-features">
+          <div class="info-feature">
+            <ion-icon name="people-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="mail-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="mail-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+            </div>
           </div>
         </div>
-      </div>
+      }
 
       @for (para of paragraphs(); track $index) {
         <val-text
@@ -46242,29 +46250,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      <div class="info-features">
-        <div class="info-feature">
-          <ion-icon name="people-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+      @if (showFeatures) {
+        <div class="info-features">
+          <div class="info-feature">
+            <ion-icon name="people-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="mail-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="mail-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+            </div>
           </div>
         </div>
-      </div>
+      }
 
       @for (para of paragraphs(); track $index) {
         <val-text
@@ -46290,6 +46300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], closeLabel: [{
                 type: Input
+            }], showFeatures: [{
+                type: Input
             }], closeProps: [{
                 type: Input
             }], _modalRef: [{
@@ -49823,7 +49835,11 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysSectionTitle: 'Integraciones (API Keys)',
         apiKeysSectionHint: 'También puedes operar tu organización vía API: crea una Client API Key org-scopeada para integraciones máquina-a-máquina (por ejemplo, dar de alta miembros en masa desde tu propio sistema).',
         apiKeysMoreInfo: 'Más información',
-        orgsMoreInfo: 'Más información',
+        apiKeysInfoTitle: 'Integraciones por API',
+        apiKeysInfoSubtitle: 'Opera tu organización máquina-a-máquina',
+        apiKeysInfoContent: 'Una API Key te permite operar tu organización desde tus propios sistemas, sin entrar a la app: dar de alta usuarios, asignar roles, leer datos y automatizar flujos.\n\nCada key es org-scopeada y lleva solo los permisos que le asignes — concede el mínimo necesario. Puedes revocarla en cualquier momento.\n\nEl secreto se muestra una sola vez al crearla: guárdalo en un lugar seguro. Si lo pierdes, genera una nueva key y revoca la anterior.',
+        apiKeysInfoClose: 'Entendido',
+        orgsMoreInfo: 'Aprender más sobre organizaciones',
         orgsInfoTitle: '¿Qué son las organizaciones?',
         orgsInfoSubtitle: 'Todo lo que necesitas saber',
         orgsInfoClose: 'Cerrar',
@@ -49902,7 +49918,11 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysSectionTitle: 'Integrations (API Keys)',
         apiKeysSectionHint: 'You can also operate your organization via API: create an org-scoped Client API Key for machine-to-machine integrations (for example, bulk-provisioning members from your own system).',
         apiKeysMoreInfo: 'More information',
-        orgsMoreInfo: 'More information',
+        apiKeysInfoTitle: 'API integrations',
+        apiKeysInfoSubtitle: 'Operate your organization machine-to-machine',
+        apiKeysInfoContent: 'An API Key lets you operate your organization from your own systems, without opening the app: provision users, assign roles, read data, and automate flows.\n\nEach key is org-scoped and carries only the permissions you assign — grant the minimum needed. You can revoke it at any time.\n\nThe secret is shown only once at creation: store it somewhere safe. If you lose it, create a new key and revoke the old one.',
+        apiKeysInfoClose: 'Got it',
+        orgsMoreInfo: 'Learn more about organizations',
         orgsInfoTitle: 'What are organizations?',
         orgsInfoSubtitle: 'Everything you need to know',
         orgsInfoClose: 'Close',
@@ -50291,6 +50311,31 @@ class OrganizationViewComponent {
             backdropDismiss: true,
         });
     }
+    // "Más información" de la sección Integraciones — abre un sheet EXPLICATIVO
+    // (article-style, sin las feature-cards de org), NO el modal de gestión de API
+    // keys. La gestión se abre con el botón "Gestionar" (onOpenApiKeys).
+    onApiKeysInfo() {
+        void this.modalService.open({
+            component: OrgInfoSheetComponent,
+            componentProps: {
+                showFeatures: false,
+                title: this.tt('apiKeysInfoTitle'),
+                subtitle: this.tt('apiKeysInfoSubtitle'),
+                body: this.tt('apiKeysInfoContent'),
+                closeLabel: this.tt('apiKeysInfoClose'),
+                closeProps: {
+                    text: this.tt('apiKeysInfoClose'),
+                    fill: 'outline',
+                    color: 'dark',
+                    size: 'default',
+                    expand: 'block',
+                    type: 'button',
+                },
+            },
+            breakpoints: { breakpoints: [0, 0.85], initialBreakpoint: 0.85, showHandle: true },
+            backdropDismiss: true,
+        });
+    }
     onViewPermissions() {
         this.nav.navigateByUrl(this.resolvedConfig().viewPermissionsRoute);
     }
@@ -50517,6 +50562,11 @@ class OrganizationViewComponent {
             content: pageDescription(),
           }"
         />
+        <!-- "Aprender más sobre organizaciones" — bajo el título+subtítulo
+             principal de la vista (abre el explainer org-info-sheet). -->
+        <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
+          {{ tt('orgsMoreInfo') }}
+        </button>
       </header>
 
       @if (resolvedConfig().showInfo) {
@@ -50536,12 +50586,6 @@ class OrganizationViewComponent {
             }
           </div>
 
-          <!-- "Más información" sobre organizaciones — disponible siempre (todo
-               user tiene org por defecto y no ve el empty-state de account). -->
-          <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
-            {{ tt('orgsMoreInfo') }}
-          </button>
-
           <div class="section-body">
             @if (loading()) {
               <val-skeleton-layout [props]="{ preset: 'detail', rows: 4 }" />
@@ -50694,7 +50738,7 @@ class OrganizationViewComponent {
           <div class="invite-cta__text">
             <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: tt('apiKeysSectionTitle') }" />
             <val-text [props]="{ size: 'medium', color: 'dark', bold: false, content: tt('apiKeysSectionHint') }" />
-            <button class="org-more-info-link" type="button" (click)="onOpenApiKeys()">
+            <button class="org-more-info-link" type="button" (click)="onApiKeysInfo()">
               {{ tt('apiKeysMoreInfo') }}
             </button>
           </div>
@@ -50821,6 +50865,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             content: pageDescription(),
           }"
         />
+        <!-- "Aprender más sobre organizaciones" — bajo el título+subtítulo
+             principal de la vista (abre el explainer org-info-sheet). -->
+        <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
+          {{ tt('orgsMoreInfo') }}
+        </button>
       </header>
 
       @if (resolvedConfig().showInfo) {
@@ -50840,12 +50889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
           </div>
 
-          <!-- "Más información" sobre organizaciones — disponible siempre (todo
-               user tiene org por defecto y no ve el empty-state de account). -->
-          <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
-            {{ tt('orgsMoreInfo') }}
-          </button>
-
           <div class="section-body">
             @if (loading()) {
               <val-skeleton-layout [props]="{ preset: 'detail', rows: 4 }" />
@@ -50998,7 +51041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div class="invite-cta__text">
             <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: tt('apiKeysSectionTitle') }" />
             <val-text [props]="{ size: 'medium', color: 'dark', bold: false, content: tt('apiKeysSectionHint') }" />
-            <button class="org-more-info-link" type="button" (click)="onOpenApiKeys()">
+            <button class="org-more-info-link" type="button" (click)="onApiKeysInfo()">
               {{ tt('apiKeysMoreInfo') }}
             </button>
           </div>
@@ -53913,6 +53956,11 @@ addIcons({
 const DEFAULT_NAMESPACE = 'Settings.About';
 const DEFAULT_BRAND_NAME = 'Valtech';
 const DEFAULT_LOGO_SRC = 'assets/images/main-icon.png';
+// Por default el HERO usa la CSS var de marca del factory (`--main-logo-mini`),
+// que cada app define en su `theme/variables.scss` (theme-aware). Si la app no
+// la define, el `var(...)` cae al `logoSrc` (ver template). El consumer puede
+// pasar `brand.logoVar: ''` para forzar el `<img src=logoSrc>` clásico.
+const DEFAULT_LOGO_VAR = '--main-logo-mini';
 const DEFAULT_RATING_ENTITY_ID = 'experience';
 /**
  * `val-about-view` — vista About full-feature autocontenida (organism).
@@ -53961,7 +54009,7 @@ class AboutViewComponent {
                 brand: {
                     name: merged.brand?.name ?? DEFAULT_BRAND_NAME,
                     logoSrc: merged.brand?.logoSrc ?? DEFAULT_LOGO_SRC,
-                    logoVar: merged.brand?.logoVar ?? '',
+                    logoVar: merged.brand?.logoVar ?? DEFAULT_LOGO_VAR,
                 },
                 version: merged.version ?? '',
                 socialLinks: merged.socialLinks ?? [],
@@ -54103,7 +54151,7 @@ class AboutViewComponent {
             class="about-hero__logo about-hero__logo--var"
             role="img"
             [attr.aria-label]="brandName()"
-            [style.background-image]="'var(' + logoVar() + ')'"
+            [style.background-image]="'var(' + logoVar() + ', url(' + logoSrc() + '))'"
           ></div>
         } @else {
           <img class="about-hero__logo" [src]="logoSrc()" [alt]="brandName()" />
@@ -54225,7 +54273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             class="about-hero__logo about-hero__logo--var"
             role="img"
             [attr.aria-label]="brandName()"
-            [style.background-image]="'var(' + logoVar() + ')'"
+            [style.background-image]="'var(' + logoVar() + ', url(' + logoSrc() + '))'"
           ></div>
         } @else {
           <img class="about-hero__logo" [src]="logoSrc()" [alt]="brandName()" />