intelica-library-ui 0.1.228 → 0.1.230

package/fesm2022/intelica-library-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, Pipe, Component, HostListener, Directive, EventEmitter, Output, Input, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild, PLATFORM_ID, Inject, ChangeDetectorRef, computed, effect, ViewChildren, Optional, Host } from '@angular/core';
+import { inject, Injectable, signal, Pipe, Component, HostListener, Directive, EventEmitter, Output, Input, forwardRef, TemplateRef, ContentChild, ContentChildren, ViewChild, PLATFORM_ID, Inject, ChangeDetectorRef, input, computed, output, effect, ViewChildren, Optional, Host } from '@angular/core';
 import { getCookie, Cookies, setCookie } from 'typescript-cookie';
-import { HttpClient, HttpHeaders, HttpResponse, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
 import { BehaviorSubject, catchError, throwError, from, switchMap, Subject, Subscription, firstValueFrom, of, tap as tap$1, map } from 'rxjs';
 import Swal from 'sweetalert2';
 import { tap } from 'rxjs/operators';
@@ -49,6 +49,8 @@ import { AccordionModule } from 'primeng/accordion';
 import { ActivatedRoute } from '@angular/router';
 import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';
 import { toSignal } from '@angular/core/rxjs-interop';
+import * as i2$4 from 'primeng/panel';
+import { PanelModule } from 'primeng/panel';
 import * as XLSX from 'xlsx';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -6644,32 +6646,14 @@ class Shared {
     http = inject(HttpClient);
     configService = inject(ConfigService);
     path = `${this.configService.environment?.sharedPath}/Quicksight`;
-    getEmbedUrl(dashboardId) {
-        return this.http.get(`${this.path}/embed-url/${dashboardId}`);
-    }
-    getEmbedVisualUrl(request) {
-        let params = new HttpParams()
-            .set('dashboardId', request.dashboardId)
-            .set('sheetId', request.sheetId)
-            .set('visualId', request.visualId);
-        Object.entries(request.parameters).forEach(([key, values]) => {
-            values.forEach(value => {
-                params = params.append(`parameters[${key}]`, value);
-            });
-        });
-        return this.http.get(`${this.path}/embed-visual-url`, { params });
-    }
-    getEmbedVisualUrlsAnonymous(request) {
-        let params = new HttpParams()
-            .set('dashboardId', request.dashboardId)
-            .set('sheetId', request.sheetId)
-            .set('visualId', request.visualId);
-        Object.entries(request.parameters).forEach(([key, values]) => {
-            values.forEach(value => {
-                params = params.append(`parameters[${key}]`, value);
-            });
-        });
-        return this.http.get(`${this.path}/embed-visual-anonymous`, { params });
+    getEmbedUrl(command) {
+        return this.http.post(`${this.path}/embed-url`, command);
+    }
+    getEmbedVisualUrl(command) {
+        return this.http.post(`${this.path}/embed-visual-url`, command);
+    }
+    getEmbedVisualUrlsAnonymous(command) {
+        return this.http.post(`${this.path}/embed-visual-anonymous`, command);
     }
     async createEmbedContext(embedUrl, container, options) {
         const embeddingContext = await createEmbeddingContext();
@@ -6680,10 +6664,29 @@ class Shared {
             ...(options?.width && { width: options.width }),
         });
     }
-    async embedDashboard(dashboardId, container, options) {
-        const { embedUrl } = await firstValueFrom(this.getEmbedUrl(dashboardId));
+    async embedDashboard(command, container, options) {
+        container.replaceChildren();
+        const embedUrl = await firstValueFrom(this.getEmbedUrl(command));
         await this.createEmbedContext(embedUrl, container, options);
     }
+    async embedDashboardInteractive(command, container, options) {
+        container.replaceChildren();
+        const embedUrl = await firstValueFrom(this.getEmbedUrl({ ...command, parameters: undefined }));
+        const embeddingContext = await createEmbeddingContext();
+        const sdkParameters = command.parameters
+            ? Object.entries(command.parameters).map(([Name, Values]) => ({ Name, Values }))
+            : undefined;
+        return await embeddingContext.embedDashboard({
+            url: embedUrl,
+            container,
+            ...(options?.height && { height: options.height }),
+            ...(options?.width && { width: options.width }),
+        }, sdkParameters ? { parameters: sdkParameters } : undefined);
+    }
+    async setDashboardParameters(dashboard, parameters) {
+        const sdkParameters = Object.entries(parameters).map(([Name, Values]) => ({ Name, Values }));
+        await dashboard.setParameters(sdkParameters);
+    }
     async createEmbedVisualContext(embedUrl, container, options) {
         const embeddingContext = await createEmbeddingContext();
         await embeddingContext.embedVisual({
@@ -6693,16 +6696,41 @@ class Shared {
             ...(options?.width && { width: options.width }),
         }, { scaleToContainer: true, fitToIframeWidth: false });
     }
-    async embedSequentialVisuals(dashboardId, sheetId, parameters, configs, onVisualLoaded) {
+    async embedSequentialVisuals(command, configs, onVisualLoaded) {
         for (const config of configs) {
             config.container?.nativeElement?.replaceChildren();
-            const { visual } = await firstValueFrom(this.getEmbedVisualUrl({ dashboardId, sheetId, visualId: config.visualId, parameters }));
+            const { visual } = await firstValueFrom(this.getEmbedVisualUrl({ dashboardId: command.dashboardId, sheetId: command.sheetId, visualId: config.visualId, parameters: command.parameters }));
             if (!visual)
                 continue;
             await this.createEmbedVisualContext(visual.embedUrl, config.container.nativeElement);
             onVisualLoaded?.(config.visualId);
         }
     }
+    async embedSequentialVisualsInteractive(command, configs, onVisualLoaded) {
+        const refs = new Map();
+        const sdkParameters = command.parameters
+            ? Object.entries(command.parameters).map(([Name, Values]) => ({ Name, Values }))
+            : undefined;
+        for (const config of configs) {
+            config.container?.nativeElement?.replaceChildren();
+            const { visual } = await firstValueFrom(this.getEmbedVisualUrl({ dashboardId: command.dashboardId, sheetId: command.sheetId, visualId: config.visualId, parameters: {} }));
+            if (!visual)
+                continue;
+            const embeddingContext = await createEmbeddingContext();
+            const visualRef = await embeddingContext.embedVisual({ url: visual.embedUrl, container: config.container.nativeElement }, { scaleToContainer: true, fitToIframeWidth: false, ...(sdkParameters ? { parameters: sdkParameters } : {}) });
+            refs.set(config.visualId, visualRef);
+            onVisualLoaded?.(config.visualId, visualRef);
+        }
+        return refs;
+    }
+    async setVisualParameters(visual, parameters) {
+        const sdkParameters = Object.entries(parameters).map(([Name, Values]) => ({ Name, Values }));
+        await visual.setParameters(sdkParameters);
+    }
+    async setVisualsParameters(visuals, parameters) {
+        const sdkParameters = Object.entries(parameters).map(([Name, Values]) => ({ Name, Values }));
+        await Promise.all([...visuals].map(v => v.setParameters(sdkParameters)));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: Shared, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: Shared, providedIn: 'root' });
 }
@@ -6717,29 +6745,38 @@ class DashboardQsComponent {
     sharedService = inject(Shared);
     route = inject(ActivatedRoute);
     containers;
+    dashboardIdInput = input(undefined, { alias: 'dashboardId' });
+    parametersInput = input(undefined, { alias: 'parameters' });
+    heightInput = input(undefined, { alias: 'height' });
     routeData = toSignal(this.route.data, { initialValue: this.route.snapshot.data });
-    dashboardId = computed(() => this.routeData()['dashboardId']);
-    height = computed(() => this.routeData()['height'] ?? '700px');
+    dashboardId = computed(() => this.dashboardIdInput() ?? this.routeData()['dashboardId']);
+    parameters = computed(() => this.parametersInput() ?? this.routeData()['parameters']);
+    height = computed(() => this.heightInput() ?? this.routeData()['height']);
     isLoading = signal(true);
+    isLoadingChange = output();
     viewReady = signal(false);
     constructor() {
+        effect(() => {
+            this.isLoadingChange.emit(this.isLoading());
+        });
         effect(() => {
             const id = this.dashboardId();
+            const parameters = this.parameters();
             if (!this.viewReady() || !id)
                 return;
-            this.EmbedDashboard(id);
+            this.EmbedDashboard(id, parameters);
         });
     }
     ngAfterViewInit() {
         this.viewReady.set(true);
     }
-    async EmbedDashboard(dashboardId) {
+    async EmbedDashboard(dashboardId, parameters) {
         const container = this.containers.first?.nativeElement;
         if (!container)
             return;
         this.isLoading.set(true);
         try {
-            await this.sharedService.embedDashboard(dashboardId, container);
+            await this.sharedService.embedDashboard({ dashboardId, parameters }, container, { height: this.height() ?? `${window.innerHeight - 50}px` });
         }
         catch (error) {
             console.error('Error embedding dashboard:', error);
@@ -6749,11 +6786,11 @@ class DashboardQsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DashboardQsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: DashboardQsComponent, isStandalone: true, selector: "intelica-dashboard-qs", viewQueries: [{ propertyName: "containers", predicate: ["visualContainer"], descendants: true }], ngImport: i0, template: "<div #visualContainer [style.height]=\"height()\" [class.hidden]=\"isLoading()\"></div>" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DashboardQsComponent, isStandalone: true, selector: "intelica-dashboard-qs", inputs: { dashboardIdInput: { classPropertyName: "dashboardIdInput", publicName: "dashboardId", isSignal: true, isRequired: false, transformFunction: null }, parametersInput: { classPropertyName: "parametersInput", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChange: "isLoadingChange" }, viewQueries: [{ propertyName: "containers", predicate: ["visualContainer"], descendants: true }], ngImport: i0, template: "@if (isLoading()) {\r\n<div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n    <div class=\"u-display-flex u-background-white u-px-1 u-pt-1\">\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 93.02' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(4); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '244.87 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 303.7' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(2); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '517.1 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n<div #visualContainer [style.height]=\"height()\" [hidden]=\"isLoading()\"></div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i2$4.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DashboardQsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'intelica-dashboard-qs', imports: [], template: "<div #visualContainer [style.height]=\"height()\" [class.hidden]=\"isLoading()\"></div>" }]
+            args: [{ selector: 'intelica-dashboard-qs', imports: [SkeletonModule, PanelModule], template: "@if (isLoading()) {\r\n<div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n    <div class=\"u-display-flex u-background-white u-px-1 u-pt-1\">\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 93.02' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(4); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '244.87 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 303.7' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(2); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '517.1 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n<div #visualContainer [style.height]=\"height()\" [hidden]=\"isLoading()\"></div>" }]
         }], ctorParameters: () => [], propDecorators: { containers: [{
                 type: ViewChildren,
                 args: ['visualContainer']