valtech-components 2.0.1015 → 2.0.1017

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, InjectionToken, makeEnvironmentProviders, APP_INITIALIZER, ErrorHandler, Injectable, DestroyRef, Inject, signal, computed, PLATFORM_ID, isDevMode, Optional, runInInjectionContext, effect, Pipe, TemplateRef, ViewContainerRef, input, Directive, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostBinding, HostListener, NgZone, ViewChild, ChangeDetectorRef, output, ContentChild, ElementRef, viewChild, untracked, Injector, isSignal, ViewEncapsulation } from '@angular/core';
+import { inject, InjectionToken, makeEnvironmentProviders, APP_INITIALIZER, ErrorHandler, Injectable, DestroyRef, Inject, signal, computed, PLATFORM_ID, isDevMode, Optional, runInInjectionContext, effect, Pipe, TemplateRef, ViewContainerRef, input, Directive, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostBinding, HostListener, NgZone, ViewChild, ChangeDetectorRef, output, ContentChild, model, ElementRef, viewChild, untracked, Injector, isSignal, ViewEncapsulation } from '@angular/core';
 import { BehaviorSubject, throwError, Subject, map, distinctUntilChanged, filter as filter$1, take as take$1, firstValueFrom, of, from, EMPTY, Observable, interval, debounceTime, switchMap as switchMap$1, catchError as catchError$1, takeUntil, isObservable, forkJoin, race, timer, shareReplay } from 'rxjs';
 import { catchError, switchMap, finalize, filter, take, map as map$1, tap, distinctUntilChanged as distinctUntilChanged$1, retry, timeout, debounceTime as debounceTime$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i1$3 from '@angular/common/http';
@@ -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.1017';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -18915,13 +18915,7 @@ class SelectSearchComponent {
 
     <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
 
-    <ion-modal
-      #modal
-      trigger="open-modal"
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="resetState()"
-    >
+    <ion-modal #modal [initialBreakpoint]="1" [breakpoints]="[0, 0.5, 0.75, 1]" (didDismiss)="resetState()">
       <ng-template>
         <ion-header>
           <ion-toolbar>
@@ -18962,13 +18956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
     <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
 
-    <ion-modal
-      #modal
-      trigger="open-modal"
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="resetState()"
-    >
+    <ion-modal #modal [initialBreakpoint]="1" [breakpoints]="[0, 0.5, 0.75, 1]" (didDismiss)="resetState()">
       <ng-template>
         <ion-header>
           <ion-toolbar>
@@ -22052,8 +22040,13 @@ class MultiSelectSearchComponent {
         }
         // Parse comma-separated values for multi-select
         const values = typeof controlValue === 'string'
-            ? controlValue.split(',').map(v => v.trim()).filter(v => v !== '')
-            : Array.isArray(controlValue) ? controlValue : [controlValue];
+            ? controlValue
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v !== '')
+            : Array.isArray(controlValue)
+                ? controlValue
+                : [controlValue];
         if (this.props.options && this.props.options.length > 0) {
             const map = new Map(this.props.options.map(opt => [String(opt[this.valueProperty]), opt]));
             this.selectedItems = values.map(val => map.get(String(val))).filter(Boolean);
@@ -22215,13 +22208,7 @@ class MultiSelectSearchComponent {
 
     <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
 
-    <ion-modal
-      #modal
-      trigger="open-modal"
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="resetState()"
-    >
+    <ion-modal #modal [initialBreakpoint]="1" [breakpoints]="[0, 0.5, 0.75, 1]" (didDismiss)="resetState()">
       <ng-template>
         <ion-header>
           <ion-toolbar>
@@ -22237,12 +22224,7 @@ class MultiSelectSearchComponent {
         <ion-content>
           <!-- Action buttons for multi-select -->
           <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="selectAll()"
-              [disabled]="filteredItems.length === 0"
-            >
+            <ion-button fill="clear" size="small" (click)="selectAll()" [disabled]="filteredItems.length === 0">
               {{ getSelectAllText() }}
             </ion-button>
             <ion-button
@@ -22258,10 +22240,7 @@ class MultiSelectSearchComponent {
 
           <ion-list>
             <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
-              <ion-checkbox
-                slot="start"
-                [checked]="isItemSelected(item)"
-              ></ion-checkbox>
+              <ion-checkbox slot="start" [checked]="isItemSelected(item)"></ion-checkbox>
               <ion-label>{{ item[labelProperty] }}</ion-label>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
@@ -22293,13 +22272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
     <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
 
-    <ion-modal
-      #modal
-      trigger="open-modal"
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="resetState()"
-    >
+    <ion-modal #modal [initialBreakpoint]="1" [breakpoints]="[0, 0.5, 0.75, 1]" (didDismiss)="resetState()">
       <ng-template>
         <ion-header>
           <ion-toolbar>
@@ -22315,12 +22288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ion-content>
           <!-- Action buttons for multi-select -->
           <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="selectAll()"
-              [disabled]="filteredItems.length === 0"
-            >
+            <ion-button fill="clear" size="small" (click)="selectAll()" [disabled]="filteredItems.length === 0">
               {{ getSelectAllText() }}
             </ion-button>
             <ion-button
@@ -22336,10 +22304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
           <ion-list>
             <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
-              <ion-checkbox
-                slot="start"
-                [checked]="isItemSelected(item)"
-              ></ion-checkbox>
+              <ion-checkbox slot="start" [checked]="isItemSelected(item)"></ion-checkbox>
               <ion-label>{{ item[labelProperty] }}</ion-label>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
@@ -28205,6 +28170,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+const DEFAULT_NAMESPACE$j = 'PermissionSelector';
+const PERMISSION_SELECTOR_I18N = {
+    es: {
+        selectAll: 'Todos',
+        empty: 'No hay permisos disponibles para asignar.',
+    },
+    en: {
+        selectAll: 'All',
+        empty: 'No permissions available to assign.',
+    },
+};
+/**
+ * `val-permission-selector` — selector de permisos agrupado por recurso.
+ *
+ * Presentacional: recibe el catálogo (YA filtrado por el consumer — sin `internal`,
+ * sin otras apps) y emite los códigos `resource:action` seleccionados. Agrupa por
+ * recurso con su label legible (del backend), una fila por recurso con checkbox
+ * "Todos" (tri-estado) y un chip por acción. Bilingüe vía `locale` + los labels del
+ * catálogo; las pocas etiquetas propias (Todos / vacío) se auto-registran (es/en).
+ *
+ * Pensado para el modal de creación de API Key (asignar permisos a la key) y
+ * reusable en cualquier UI que asigne permisos (roles custom, etc.).
+ */
+class PermissionSelectorComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        /** Catálogo YA filtrado (sin internal, sin otras apps). */
+        this.permissions = input([]);
+        /** Labels de acción (es/en) por código de acción — del catálogo del backend. */
+        this.actionLabels = input({});
+        /** Idioma activo (es/en). Si no se pasa, usa el de `I18nService`. */
+        this.locale = input('');
+        /** Permisos seleccionados (`resource:action`). Two-way (`model`). */
+        this.selected = model([]);
+        this.activeLocale = computed(() => this.locale() || this.i18n.lang());
+        this.groups = computed(() => {
+            const sel = new Set(this.selected());
+            const loc = this.activeLocale();
+            const actionLabels = this.actionLabels();
+            return this.permissions().map(r => {
+                const actions = r.actions.map(a => {
+                    const code = `${r.resource}:${a}`;
+                    return { action: a, code, label: actionLabels[a]?.[loc] ?? a, checked: sel.has(code) };
+                });
+                const checkedCount = actions.filter(a => a.checked).length;
+                return {
+                    resource: r.resource,
+                    label: r.label?.[loc] ?? r.resource,
+                    actions,
+                    checkedCount,
+                    all: actions.length > 0 && checkedCount === actions.length,
+                    some: checkedCount > 0 && checkedCount < actions.length,
+                };
+            });
+        });
+        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$j)) {
+            this.i18n.registerContent(DEFAULT_NAMESPACE$j, PERMISSION_SELECTOR_I18N);
+        }
+    }
+    toggleAction(code) {
+        const sel = new Set(this.selected());
+        if (sel.has(code))
+            sel.delete(code);
+        else
+            sel.add(code);
+        this.selected.set([...sel]);
+    }
+    toggleGroup(resource) {
+        const group = this.groups().find(g => g.resource === resource);
+        if (!group)
+            return;
+        const sel = new Set(this.selected());
+        if (group.all)
+            group.actions.forEach(a => sel.delete(a.code));
+        else
+            group.actions.forEach(a => sel.add(a.code));
+        this.selected.set([...sel]);
+    }
+    tt(key) {
+        this.i18n.lang();
+        return this.i18n.t(key, DEFAULT_NAMESPACE$j);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PermissionSelectorComponent, isStandalone: true, selector: "val-permission-selector", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, actionLabels: { classPropertyName: "actionLabels", publicName: "actionLabels", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: `
+    @if (groups().length === 0) {
+      <val-text [props]="{ content: tt('empty'), size: 'medium', color: 'medium', bold: false }" />
+    } @else {
+      <div class="perm-selector">
+        @for (g of groups(); track g.resource) {
+          <div class="perm-group" [class.perm-group--active]="g.checkedCount > 0">
+            <div class="perm-group__head">
+              <label class="perm-group__all">
+                <input type="checkbox" [checked]="g.all" [indeterminate]="g.some" (change)="toggleGroup(g.resource)" />
+                <span class="perm-group__title">{{ g.label }}</span>
+              </label>
+              <span class="perm-group__count">{{ g.checkedCount }}/{{ g.actions.length }}</span>
+            </div>
+            <div class="perm-group__actions">
+              @for (a of g.actions; track a.code) {
+                <button
+                  type="button"
+                  class="perm-chip"
+                  [class.perm-chip--on]="a.checked"
+                  [attr.aria-pressed]="a.checked"
+                  (click)="toggleAction(a.code)"
+                >
+                  {{ a.label }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block}.perm-selector{display:flex;flex-direction:column;gap:10px}.perm-group{border:1.5px solid var(--ion-color-light, #e7e4ea);border-radius:12px;padding:12px 14px;transition:border-color .15s ease}.perm-group--active{border-color:var(--ion-color-primary, #7026df)}.perm-group__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.perm-group__all{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;color:var(--ion-color-dark)}.perm-group__all input{width:18px;height:18px;accent-color:var(--ion-color-primary, #7026df);cursor:pointer}.perm-group__title{font-size:.95rem}.perm-group__count{font-size:.75rem;color:var(--ion-color-medium, #6b6675);flex-shrink:0}.perm-group__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.perm-chip{appearance:none;border:1.5px solid var(--ion-color-medium, #6b6675);background:transparent;color:var(--ion-color-dark);border-radius:999px;padding:5px 14px;font-size:.8125rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.perm-chip:hover{border-color:var(--ion-color-primary, #7026df)}.perm-chip--on{background:var(--ion-color-primary, #7026df);border-color:var(--ion-color-primary, #7026df);color:var(--ion-color-primary-contrast, #fff)}:host-context(body.dark) .perm-group,:host-context(html.ion-palette-dark) .perm-group{border-color:#ffffff1f}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-permission-selector', standalone: true, imports: [TextComponent], template: `
+    @if (groups().length === 0) {
+      <val-text [props]="{ content: tt('empty'), size: 'medium', color: 'medium', bold: false }" />
+    } @else {
+      <div class="perm-selector">
+        @for (g of groups(); track g.resource) {
+          <div class="perm-group" [class.perm-group--active]="g.checkedCount > 0">
+            <div class="perm-group__head">
+              <label class="perm-group__all">
+                <input type="checkbox" [checked]="g.all" [indeterminate]="g.some" (change)="toggleGroup(g.resource)" />
+                <span class="perm-group__title">{{ g.label }}</span>
+              </label>
+              <span class="perm-group__count">{{ g.checkedCount }}/{{ g.actions.length }}</span>
+            </div>
+            <div class="perm-group__actions">
+              @for (a of g.actions; track a.code) {
+                <button
+                  type="button"
+                  class="perm-chip"
+                  [class.perm-chip--on]="a.checked"
+                  [attr.aria-pressed]="a.checked"
+                  (click)="toggleAction(a.code)"
+                >
+                  {{ a.label }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block}.perm-selector{display:flex;flex-direction:column;gap:10px}.perm-group{border:1.5px solid var(--ion-color-light, #e7e4ea);border-radius:12px;padding:12px 14px;transition:border-color .15s ease}.perm-group--active{border-color:var(--ion-color-primary, #7026df)}.perm-group__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.perm-group__all{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;color:var(--ion-color-dark)}.perm-group__all input{width:18px;height:18px;accent-color:var(--ion-color-primary, #7026df);cursor:pointer}.perm-group__title{font-size:.95rem}.perm-group__count{font-size:.75rem;color:var(--ion-color-medium, #6b6675);flex-shrink:0}.perm-group__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.perm-chip{appearance:none;border:1.5px solid var(--ion-color-medium, #6b6675);background:transparent;color:var(--ion-color-dark);border-radius:999px;padding:5px 14px;font-size:.8125rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.perm-chip:hover{border-color:var(--ion-color-primary, #7026df)}.perm-chip--on{background:var(--ion-color-primary, #7026df);border-color:var(--ion-color-primary, #7026df);color:var(--ion-color-primary-contrast, #fff)}:host-context(body.dark) .perm-group,:host-context(html.ion-palette-dark) .perm-group{border-color:#ffffff1f}\n"] }]
+        }], ctorParameters: () => [] });
+
 addIcons({ checkmarkCircle, closeCircle, alertCircle });
 /**
  * Username Input Component
@@ -46129,6 +46246,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 +46281,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 +46296,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 +46367,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 +46417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], closeLabel: [{
                 type: Input
+            }], showFeatures: [{
+                type: Input
             }], closeProps: [{
                 type: Input
             }], _modalRef: [{
@@ -47812,7 +47941,11 @@ class InviteMemberModalComponent {
                 return [];
             }
             const cleanQ = (q.startsWith('@') ? q.slice(1) : q).toLowerCase();
-            const q$ = query$1(collection(this.firestore, 'profiles'), orderBy('handle'), startAt(cleanQ), endAt(cleanQ + ''), limit(8));
+            // Prefijo: el sentinel alto `` cierra el rango (antes `cleanQ + ''`
+            // era exact-match → solo encontraba el handle idéntico). NOTA: solo busca
+            // por `handle`; la búsqueda por nombre requiere un campo normalizado en
+            // /profiles (pendiente, ver TODO de búsqueda por nombre).
+            const q$ = query$1(collection(this.firestore, 'profiles'), orderBy('handle'), startAt(cleanQ), endAt(cleanQ + '\uf8ff'), limit(8));
             return from(getDocs(q$)).pipe(map$1(snap => ({
                 users: snap.docs.map(d => ({
                     userId: d.id,
@@ -47825,10 +47958,7 @@ class InviteMemberModalComponent {
             next: res => {
                 if (res && 'users' in res) {
                     const currentUserId = this.auth.user()?.userId;
-                    const excluded = new Set([
-                        ...(currentUserId ? [currentUserId] : []),
-                        ...this.existingMemberIds,
-                    ]);
+                    const excluded = new Set([...(currentUserId ? [currentUserId] : []), ...this.existingMemberIds]);
                     this.searchResults.set(res.users.filter(u => !excluded.has(u.userId)));
                 }
                 this.searching.set(false);
@@ -49328,6 +49458,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [VALTECH_AUTH_CONFIG]
                 }] }, { type: i1$3.HttpClient }] });
 
+/**
+ * Consume el catálogo de permisos del backend (`GET /org/{orgId}/permissions-catalog`).
+ * El backend es la fuente de verdad de qué permisos existen y de su alcance
+ * (globales de plataforma vs. propios de una app). La respuesta incluye el
+ * `appId` del request para que la vista distinga la app actual.
+ *
+ * Promovido desde `showcase` a la lib bajo el proceso de ADR-021. Usa
+ * `VALTECH_AUTH_CONFIG.apiUrl` (como `OrgService`) en vez del `environment` de la
+ * app — la lib no importa el environment del consumer.
+ */
+class PermissionCatalogService {
+    constructor(config, http) {
+        this.config = config;
+        this.http = http;
+    }
+    getCatalog(orgId) {
+        return this.http.get(`${this.config.apiUrl}/org/${orgId}/permissions-catalog`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_AUTH_CONFIG]
+                }] }, { type: i1$3.HttpClient }] });
+
 /**
  * Defaults i18n (es/en) embebidos en `val-api-keys-modal` (ADR-023).
  * Auto-registrados si el consumer no proveyó el namespace `Settings.ApiKeysModal`.
@@ -49403,10 +49562,17 @@ class ApiKeysModalComponent {
     constructor() {
         this.i18n = inject(I18nService);
         this.apiKeys = inject(ApiKeyService);
+        this.catalog = inject(PermissionCatalogService);
+        this.auth = inject(AuthService);
         /** Namespace i18n. */
         this.i18nNamespace = DEFAULT_NAMESPACE$5;
+        /** Permisos del catálogo YA filtrados (sin internal, sin otras apps). */
+        this.catalogPermissions = signal([]);
+        /** Labels de acción (es/en) del backend, para el selector. */
+        this.actionLabels = signal({});
+        /** Permisos seleccionados para la nueva key (`resource:action`). */
+        this.selectedPerms = signal([]);
         this.keys = signal([]);
-        this.availablePermissions = signal([]);
         this.loading = signal(true);
         this.showCreate = signal(false);
         this.submitting = signal(false);
@@ -49434,24 +49600,6 @@ class ApiKeysModalComponent {
                 value: '',
                 state: ComponentStates.ENABLED,
             };
-            const permsField = {
-                token: 'apikey-perms',
-                name: 'permissions',
-                label: this.t('permissionsLabel'),
-                hint: '',
-                placeholder: '',
-                type: InputType.MULTI_SELECT,
-                order: 2,
-                validators: [Validators.required],
-                errors: { required: this.t('noPerms') },
-                value: '',
-                options: this.availablePermissions().map((p, i) => ({
-                    id: p,
-                    name: p,
-                    order: i + 1,
-                })),
-                state: ComponentStates.ENABLED,
-            };
             const expiresField = {
                 token: 'apikey-expires',
                 name: 'expiresInDays',
@@ -49479,7 +49627,7 @@ class ApiKeysModalComponent {
             return {
                 name: '',
                 state: working ? ComponentStates.WORKING : ComponentStates.ENABLED,
-                sections: [{ name: '', order: 1, fields: [nameField, permsField, expiresField] }],
+                sections: [{ name: '', order: 1, fields: [nameField, expiresField] }],
                 actions: submitButton,
             };
         });
@@ -49492,11 +49640,34 @@ class ApiKeysModalComponent {
             this.i18n.registerContent(this.i18nNamespace, API_KEYS_MODAL_I18N);
         }
         this.refresh();
-        this.apiKeys.availablePermissions().subscribe({
-            next: perms => this.availablePermissions.set(perms),
-            error: () => { },
+        this.loadCatalog();
+    }
+    /**
+     * Carga el catálogo de permisos y lo filtra a lo asignable a una API Key de la
+     * org: descarta `scope:internal` (el backend ya los omite para no-staff) y los
+     * permisos de OTRAS apps (`appId !== appId del catálogo`). Quedan los permisos de
+     * org (users/roles/rbac) + los de la app actual.
+     */
+    loadCatalog() {
+        const orgId = this.activeOrgId();
+        if (!orgId)
+            return;
+        this.catalog.getCatalog(orgId).subscribe({
+            next: res => {
+                const appId = res.appId;
+                const filtered = (res.permissions ?? []).filter(p => p.scope !== 'internal' && (p.scope !== 'app' || p.appId === appId));
+                this.catalogPermissions.set(filtered);
+                this.actionLabels.set(res.actionLabels ?? {});
+            },
+            error: () => {
+                // Sin catálogo: el selector queda vacío (el form valida ≥1 permiso).
+            },
         });
     }
+    activeOrgId() {
+        const u = this.auth.user();
+        return u?.activeOrgId ?? u?.activeOrg ?? '';
+    }
     refresh() {
         this.loading.set(true);
         this.apiKeys.list().subscribe({
@@ -49509,6 +49680,7 @@ class ApiKeysModalComponent {
     }
     openCreate() {
         this.errorMsg.set('');
+        this.selectedPerms.set([]);
         this.showCreate.set(true);
     }
     onCreateSubmit(event) {
@@ -49516,14 +49688,7 @@ class ApiKeysModalComponent {
             return;
         this.errorMsg.set('');
         const name = String(event.fields['name'] ?? '').trim();
-        // MULTI_SELECT puede devolver array o csv según el render — normalizamos.
-        const rawPerms = event.fields['permissions'];
-        const permissions = Array.isArray(rawPerms)
-            ? rawPerms
-            : String(rawPerms ?? '')
-                .split(',')
-                .map(s => s.trim())
-                .filter(Boolean);
+        const permissions = this.selectedPerms();
         const expiresRaw = Number(event.fields['expiresInDays']);
         if (!name) {
             this.errorMsg.set(this.t('noName'));
@@ -49643,9 +49808,16 @@ class ApiKeysModalComponent {
             <p class="apikey-error">{{ errorMsg() }}</p>
           }
 
-          <!-- Crear — val-form (consistencia con el resto de modales del factory). -->
+          <!-- Crear — val-form (nombre + expiración) + selector de permisos. -->
           @if (showCreate()) {
             <div class="apikey-create">
+              <p class="apikey-create__label">{{ t('permissionsLabel') }} ({{ selectedPerms().length }})</p>
+              <val-permission-selector
+                [permissions]="catalogPermissions()"
+                [actionLabels]="actionLabels()"
+                [selected]="selectedPerms()"
+                (selectedChange)="selectedPerms.set($event)"
+              />
               <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
               <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
                 {{ t('cancel') }}
@@ -49661,7 +49833,7 @@ class ApiKeysModalComponent {
         }
       }
     </ion-content>
-  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:12px}.apikey-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.apikey-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:1.5px solid var(--ion-color-light)}.apikey-row__main{display:flex;flex-direction:column}.apikey-row__name{font-weight:600;color:var(--ion-color-dark)}.apikey-row__meta{font-size:12px;color:var(--ion-color-medium-shade, #6b6e76)}.apikey-create{margin-top:8px;padding:16px;border-radius:12px;background:var(--ion-color-light)}.apikey-create__label{margin:12px 0 4px;font-size:13px;font-weight:600;color:var(--ion-color-dark)}.apikey-perms{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px}.apikey-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}.apikey-error{margin:8px 0;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.apikey-secret__warn{font-size:.875rem;color:var(--ion-color-warning-shade, #b88600);margin:0 0 12px}.apikey-secret__box{padding:12px;border-radius:8px;background:var(--ion-color-dark);color:#fff;word-break:break-all;font-family:monospace;font-size:13px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:12px}.apikey-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.apikey-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:1.5px solid var(--ion-color-light)}.apikey-row__main{display:flex;flex-direction:column}.apikey-row__name{font-weight:600;color:var(--ion-color-dark)}.apikey-row__meta{font-size:12px;color:var(--ion-color-medium-shade, #6b6e76)}.apikey-create{margin-top:8px;padding:16px;border-radius:12px;background:var(--ion-color-light)}.apikey-create__label{margin:12px 0 4px;font-size:13px;font-weight:600;color:var(--ion-color-dark)}.apikey-perms{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px}.apikey-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}.apikey-error{margin:8px 0;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.apikey-secret__warn{font-size:.875rem;color:var(--ion-color-warning-shade, #b88600);margin:0 0 12px}.apikey-secret__box{padding:12px;border-radius:8px;background:var(--ion-color-dark);color:#fff;word-break:break-all;font-family:monospace;font-size:13px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PermissionSelectorComponent, selector: "val-permission-selector", inputs: ["permissions", "actionLabels", "locale", "selected"], outputs: ["selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ApiKeysModalComponent, decorators: [{
             type: Component,
@@ -49676,6 +49848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
+                        PermissionSelectorComponent,
                     ], template: `
     <ion-header>
       <ion-toolbar>
@@ -49738,9 +49911,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <p class="apikey-error">{{ errorMsg() }}</p>
           }
 
-          <!-- Crear — val-form (consistencia con el resto de modales del factory). -->
+          <!-- Crear — val-form (nombre + expiración) + selector de permisos. -->
           @if (showCreate()) {
             <div class="apikey-create">
+              <p class="apikey-create__label">{{ t('permissionsLabel') }} ({{ selectedPerms().length }})</p>
+              <val-permission-selector
+                [permissions]="catalogPermissions()"
+                [actionLabels]="actionLabels()"
+                [selected]="selectedPerms()"
+                (selectedChange)="selectedPerms.set($event)"
+              />
               <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
               <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
                 {{ t('cancel') }}
@@ -49823,7 +50003,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 +50086,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 +50479,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);
     }
@@ -50454,9 +50667,22 @@ class OrganizationViewComponent {
             admin: 'roleAdmin',
             super_admin: 'roleSuperAdmin',
         };
-        const key = keyMap[name] ?? name;
-        const label = this.tt(key);
-        return label && !label.startsWith('[') ? label : name;
+        // 1) Rol genérico conocido → label i18n. 2) displayName/descripción del backend.
+        // 3) Fallback: humanizar el nombre crudo (ej. "bingo_admin" → "Bingo Admin")
+        //    para no mostrar el código técnico a app-specific roles.
+        const mapped = keyMap[name];
+        if (mapped) {
+            const label = this.tt(mapped);
+            if (label && !label.startsWith('['))
+                return label;
+        }
+        if (found?.description)
+            return found.description;
+        return name
+            .split(/[_-]/)
+            .filter(Boolean)
+            .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+            .join(' ');
     }
     permissionLabel(perm) {
         if (perm === '*:*')
@@ -50517,6 +50743,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 +50767,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 +50919,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 +51046,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 +51070,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 +51222,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>
@@ -51877,35 +52101,6 @@ function provideValtechNotificationPreferencesRoutes(opts) {
     ];
 }
 
-/**
- * Consume el catálogo de permisos del backend (`GET /org/{orgId}/permissions-catalog`).
- * El backend es la fuente de verdad de qué permisos existen y de su alcance
- * (globales de plataforma vs. propios de una app). La respuesta incluye el
- * `appId` del request para que la vista distinga la app actual.
- *
- * Promovido desde `showcase` a la lib bajo el proceso de ADR-021. Usa
- * `VALTECH_AUTH_CONFIG.apiUrl` (como `OrgService`) en vez del `environment` de la
- * app — la lib no importa el environment del consumer.
- */
-class PermissionCatalogService {
-    constructor(config, http) {
-        this.config = config;
-        this.http = http;
-    }
-    getCatalog(orgId) {
-        return this.http.get(`${this.config.apiUrl}/org/${orgId}/permissions-catalog`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [VALTECH_AUTH_CONFIG]
-                }] }, { type: i1$3.HttpClient }] });
-
 /**
  * Defaults i18n (es/en) embebidos en `val-permissions-view`. Auto-registrados en
  * el constructor del componente si el consumer no proveyó el namespace
@@ -53913,6 +54108,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 +54161,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 +54303,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 +54425,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()" />
@@ -64373,5 +64573,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyService, ApiKeysModalComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CONTENT_CARD_DEFAULTS, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentCardComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INFO_CARD_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoCardComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor$1 as resolveColor, resolveInputDefaultValue, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyService, ApiKeysModalComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CONTENT_CARD_DEFAULTS, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentCardComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INFO_CARD_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoCardComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor$1 as resolveColor, resolveInputDefaultValue, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map