valtech-components 2.0.972 → 2.0.974

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.972';
+const VERSION = '2.0.974';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -32849,6 +32849,9 @@ class ShareProfileModalComponent {
               [props]="{ name: config().name, avatarUrl: config().avatarUrl, email: config().email, size: 'xlarge' }"
             />
             <val-display [props]="{ content: displayName(), size: 'small', color: 'dark' }" />
+            @if (config().handle) {
+              <p class="share-profile__handle">{{ '@' + config().handle }}</p>
+            }
 
             <div class="share-profile__qr">
               @if (qr(); as qrResult) {
@@ -32876,7 +32879,8 @@ class ShareProfileModalComponent {
                 shareData: { title: config().shareTitle || config().name, text: config().shareText, url: config().url },
                 platforms: config().platforms,
                 layout: 'horizontal',
-                variant: 'icon-only',
+                variant: 'outline',
+                color: 'dark',
                 usePlatformColors: false,
               }"
               (shareComplete)="shared.emit($event)"
@@ -32885,7 +32889,7 @@ class ShareProfileModalComponent {
         </val-modal-shell>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: [".share-profile{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0 1rem;text-align:center}.share-profile__name{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--ion-text-color)}.share-profile__qr{display:flex;justify-content:center}.share-profile__qr-loading{display:flex;align-items:center;justify-content:center;min-width:120px}.share-profile__qr-error{margin:0;padding:1rem;max-width:28ch;word-break:break-all;font-size:.9rem;font-weight:600;color:var(--ion-color-medium-shade)}.share-profile__caption{margin:0;max-width:32ch;font-size:.95rem;line-height:1.45;color:var(--ion-color-medium-shade)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ModalShellComponent, selector: "val-modal-shell", inputs: ["title", "subtitle", "closeLabel", "showClose"], outputs: ["close"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: ShareButtonsComponent, selector: "val-share-buttons", inputs: ["props"], outputs: ["shareComplete"] }] }); }
+  `, isInline: true, styles: [".share-profile{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0 1rem;text-align:center}.share-profile__name{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--ion-text-color)}.share-profile__handle{margin:-.5rem 0 0;font-size:.875rem;font-weight:500;color:var(--ion-color-medium-shade);letter-spacing:.01em}.share-profile__qr{display:flex;justify-content:center}.share-profile__qr-loading{display:flex;align-items:center;justify-content:center;min-width:120px}.share-profile__qr-error{margin:0;padding:1rem;max-width:28ch;word-break:break-all;font-size:.9rem;font-weight:600;color:var(--ion-color-medium-shade)}.share-profile__caption{margin:0;max-width:32ch;font-size:.95rem;line-height:1.45;color:var(--ion-color-medium-shade)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ModalShellComponent, selector: "val-modal-shell", inputs: ["title", "subtitle", "closeLabel", "showClose"], outputs: ["close"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: ShareButtonsComponent, selector: "val-share-buttons", inputs: ["props"], outputs: ["shareComplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShareProfileModalComponent, decorators: [{
             type: Component,
@@ -32907,6 +32911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [props]="{ name: config().name, avatarUrl: config().avatarUrl, email: config().email, size: 'xlarge' }"
             />
             <val-display [props]="{ content: displayName(), size: 'small', color: 'dark' }" />
+            @if (config().handle) {
+              <p class="share-profile__handle">{{ '@' + config().handle }}</p>
+            }
 
             <div class="share-profile__qr">
               @if (qr(); as qrResult) {
@@ -32934,7 +32941,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 shareData: { title: config().shareTitle || config().name, text: config().shareText, url: config().url },
                 platforms: config().platforms,
                 layout: 'horizontal',
-                variant: 'icon-only',
+                variant: 'outline',
+                color: 'dark',
                 usePlatformColors: false,
               }"
               (shareComplete)="shared.emit($event)"
@@ -32943,7 +32951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </val-modal-shell>
       </ng-template>
     </ion-modal>
-  `, styles: [".share-profile{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0 1rem;text-align:center}.share-profile__name{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--ion-text-color)}.share-profile__qr{display:flex;justify-content:center}.share-profile__qr-loading{display:flex;align-items:center;justify-content:center;min-width:120px}.share-profile__qr-error{margin:0;padding:1rem;max-width:28ch;word-break:break-all;font-size:.9rem;font-weight:600;color:var(--ion-color-medium-shade)}.share-profile__caption{margin:0;max-width:32ch;font-size:.95rem;line-height:1.45;color:var(--ion-color-medium-shade)}\n"] }]
+  `, styles: [".share-profile{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0 1rem;text-align:center}.share-profile__name{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--ion-text-color)}.share-profile__handle{margin:-.5rem 0 0;font-size:.875rem;font-weight:500;color:var(--ion-color-medium-shade);letter-spacing:.01em}.share-profile__qr{display:flex;justify-content:center}.share-profile__qr-loading{display:flex;align-items:center;justify-content:center;min-width:120px}.share-profile__qr-error{margin:0;padding:1rem;max-width:28ch;word-break:break-all;font-size:.9rem;font-weight:600;color:var(--ion-color-medium-shade)}.share-profile__caption{margin:0;max-width:32ch;font-size:.95rem;line-height:1.45;color:var(--ion-color-medium-shade)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], props: [{
@@ -41596,6 +41604,9 @@ const PROFILE_VIEW_I18N = {
         offlineTitle: 'Sin conexión',
         offlineHint: 'Revisa tu conexión a internet e intenta nuevamente.',
         retry: 'Reintentar',
+        shareCtaTitle: 'Compartí tu perfil',
+        shareCtaDesc: 'Generá un QR para que te agreguen como contacto al instante.',
+        shareCtaBtn: 'Mostrar QR',
     },
     en: {
         pageTitle: 'Profile',
@@ -41627,6 +41638,9 @@ const PROFILE_VIEW_I18N = {
         offlineTitle: 'Offline',
         offlineHint: 'Check your internet connection and try again.',
         retry: 'Retry',
+        shareCtaTitle: 'Share your profile',
+        shareCtaDesc: 'Generate a QR so people can add you as a contact instantly.',
+        shareCtaBtn: 'Show QR',
     },
 };
 
@@ -41682,6 +41696,8 @@ class ProfileViewComponent {
                 showAvatar: merged.showAvatar ?? true,
                 showHandle: merged.showHandle ?? true,
                 showPhone: merged.showPhone ?? true,
+                showShareCta: merged.showShareCta ?? true,
+                profileBaseUrl: merged.profileBaseUrl ?? '',
                 i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$1,
                 onSaved: merged.onSaved,
                 onAvatarUploaded: merged.onAvatarUploaded,
@@ -41699,6 +41715,41 @@ class ProfileViewComponent {
         this.loading = signal(true);
         this.saving = signal(false);
         this.loadError = signal(null);
+        this.shareOpen = signal(false);
+        this.shareCta = computed(() => {
+            this.i18n.lang();
+            return {
+                title: this.t('shareCtaTitle'),
+                description: this.t('shareCtaDesc'),
+                bordered: true,
+                actions: {
+                    position: 'left',
+                    columned: false,
+                    buttons: [
+                        {
+                            text: this.t('shareCtaBtn'),
+                            color: 'dark',
+                            shape: 'round',
+                            type: 'button',
+                            state: 'ENABLED',
+                            token: 'share',
+                        },
+                    ],
+                },
+            };
+        });
+        this.shareModal = computed(() => {
+            const p = this.profile();
+            const handle = p?.handle ?? 'me';
+            const base = this.resolvedConfig().profileBaseUrl;
+            return {
+                name: p?.name ?? '',
+                handle: p?.handle,
+                avatarUrl: p?.avatarUrl,
+                email: p?.email,
+                url: base ? `${base}/u/${handle}` : `/u/${handle}`,
+            };
+        });
         this._userId = computed(() => this.auth.user()?.userId ?? null);
         this.errorState = computed(() => {
             this.i18n.lang();
@@ -42122,10 +42173,18 @@ class ProfileViewComponent {
           }
 
           <val-form #form [props]="formMeta" (onSubmit)="onSubmit($event)" />
+
+          @if (resolvedConfig().showShareCta && p.handle) {
+            <section class="settings-section share-cta-section">
+              <val-cta-card [props]="shareCta()" (onAction)="shareOpen.set(true)" />
+            </section>
+          }
         }
       }
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.page-header h1{font-size:22px;font-weight:700;margin:0 0 4px}.hint{font-size:13px;opacity:.7;margin:0 0 12px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.avatar-section{display:flex;align-items:center;gap:16px}.avatar-meta{display:flex;flex-direction:column;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AvatarUploadComponent, selector: "val-avatar-upload", inputs: ["props"], outputs: ["uploaded", "error", "uploadStart"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { 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: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }] }); }
+
+    <val-share-profile-modal [isOpen]="shareOpen()" [props]="shareModal()" (dismissed)="shareOpen.set(false)" />
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.page-header h1{font-size:22px;font-weight:700;margin:0 0 4px}.hint{font-size:13px;opacity:.7;margin:0 0 12px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.avatar-section{display:flex;align-items:center;gap:16px}.avatar-meta{display:flex;flex-direction:column;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AvatarUploadComponent, selector: "val-avatar-upload", inputs: ["props"], outputs: ["uploaded", "error", "uploadStart"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { 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: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: ShareProfileModalComponent, selector: "val-share-profile-modal", inputs: ["isOpen", "props"], outputs: ["dismissed", "shared"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfileViewComponent, decorators: [{
             type: Component,
@@ -42139,6 +42198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TextComponent,
                         TitleComponent,
                         SkeletonLayoutComponent,
+                        CtaCardComponent,
+                        ShareProfileModalComponent,
                     ], template: `
     <div class="page">
       <header class="page-header">
@@ -42198,9 +42259,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           }
 
           <val-form #form [props]="formMeta" (onSubmit)="onSubmit($event)" />
+
+          @if (resolvedConfig().showShareCta && p.handle) {
+            <section class="settings-section share-cta-section">
+              <val-cta-card [props]="shareCta()" (onAction)="shareOpen.set(true)" />
+            </section>
+          }
         }
       }
     </div>
+
+    <val-share-profile-modal [isOpen]="shareOpen()" [props]="shareModal()" (dismissed)="shareOpen.set(false)" />
   `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.page-header h1{font-size:22px;font-weight:700;margin:0 0 4px}.hint{font-size:13px;opacity:.7;margin:0 0 12px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.avatar-section{display:flex;align-items:center;gap:16px}.avatar-meta{display:flex;flex-direction:column;gap:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input