intelica-library-ui 0.1.230 → 0.1.231

package/fesm2022/intelica-library-ui.mjs

@@ -263,6 +263,17 @@ const DateModeOptions = {
     Year: { value: "year", format: "y" },
 };
 
+const QuicksightEventName = {
+    ERROR_OCCURRED: "ERROR_OCCURRED",
+    CONTENT_LOADED: "CONTENT_LOADED",
+    PARAMETERS_CHANGED: "PARAMETERS_CHANGED",
+    SIZE_CHANGED: "SIZE_CHANGED",
+    SELECTED_SHEET_CHANGED: "SELECTED_SHEET_CHANGED",
+    MODAL_OPENED: "MODAL_OPENED",
+    EXPERIENCE_INITIALIZED: "EXPERIENCE_INITIALIZED",
+};
+const QUICKSIGHT_AUTH_ERROR_CODES = ["Forbidden", "Unauthorized", "EmbeddingNotAuthorized", "TokenExpired"];
+
 class FeatureFlagService {
     _http = inject(HttpClient);
     _configService = inject(ConfigService);
@@ -6645,15 +6656,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 class Shared {
     http = inject(HttpClient);
     configService = inject(ConfigService);
-    path = `${this.configService.environment?.sharedPath}/Quicksight`;
+    path = `${this.configService.environment?.sharedPath}`;
     getEmbedUrl(command) {
-        return this.http.post(`${this.path}/embed-url`, command);
+        return this.http.post(`${this.path}/quicksight-embed-url`, command);
     }
     getEmbedVisualUrl(command) {
-        return this.http.post(`${this.path}/embed-visual-url`, command);
+        return this.http.post(`${this.path}/quicksight-embed-visual-url`, command);
     }
     getEmbedVisualUrlsAnonymous(command) {
-        return this.http.post(`${this.path}/embed-visual-anonymous`, command);
+        return this.http.post(`${this.path}/quicksight-embed-visual-anonymous`, command);
     }
     async createEmbedContext(embedUrl, container, options) {
         const embeddingContext = await createEmbeddingContext();
@@ -6662,6 +6673,8 @@ class Shared {
             container,
             ...(options?.height && { height: options.height }),
             ...(options?.width && { width: options.width }),
+        }, {
+            ...(options?.onMessage && { onMessage: this.toSdkMessageListener(options.onMessage) }),
         });
     }
     async embedDashboard(command, container, options) {
@@ -6673,15 +6686,26 @@ class Shared {
         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;
+        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);
+        }, {
+            ...(sdkParameters ? { parameters: sdkParameters } : {}),
+            ...(options?.onMessage && { onMessage: this.toSdkMessageListener(options.onMessage) }),
+        });
+    }
+    toSdkMessageListener(emit) {
+        return (changeEvent) => {
+            emit({
+                eventName: changeEvent?.eventName,
+                eventLevel: changeEvent?.eventLevel,
+                message: changeEvent?.message,
+                data: changeEvent?.data,
+            });
+        };
     }
     async setDashboardParameters(dashboard, parameters) {
         const sdkParameters = Object.entries(parameters).map(([Name, Values]) => ({ Name, Values }));
@@ -6708,16 +6732,18 @@ class Shared {
     }
     async embedSequentialVisualsInteractive(command, configs, onVisualLoaded) {
         const refs = new Map();
-        const sdkParameters = command.parameters
-            ? Object.entries(command.parameters).map(([Name, Values]) => ({ Name, Values }))
-            : undefined;
+        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 } : {}) });
+            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);
         }
@@ -6741,9 +6767,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 }]
         }] });
 
+function isQuicksightSessionExpiredEvent(event) {
+    if (event.eventName !== QuicksightEventName.ERROR_OCCURRED)
+        return false;
+    const code = event.data?.errorCode ?? event.data?.code ?? "";
+    return typeof code === "string" && QUICKSIGHT_AUTH_ERROR_CODES.some(c => code.includes(c));
+}
+function dispatchQuicksightEvent(event, outputs) {
+    outputs.sdkEvent.emit(event);
+    if (event.eventName === QuicksightEventName.CONTENT_LOADED)
+        outputs.contentLoaded?.emit(event);
+    if (event.eventName === QuicksightEventName.ERROR_OCCURRED) {
+        outputs.errorOccurred?.emit(event);
+        if (isQuicksightSessionExpiredEvent(event))
+            outputs.sessionExpired?.emit(event);
+    }
+}
+
 class DashboardQsComponent {
     sharedService = inject(Shared);
+    sweetAlertService = inject(SweetAlertService);
+    termPipe = inject(TermPipe);
+    GlobalTermService = inject(GlobalTermService);
     route = inject(ActivatedRoute);
+    sessionExpiredShown = false;
     containers;
     dashboardIdInput = input(undefined, { alias: 'dashboardId' });
     parametersInput = input(undefined, { alias: 'parameters' });
@@ -6754,6 +6801,10 @@ class DashboardQsComponent {
     height = computed(() => this.heightInput() ?? this.routeData()['height']);
     isLoading = signal(true);
     isLoadingChange = output();
+    sdkEvent = output();
+    contentLoaded = output();
+    errorOccurred = output();
+    sessionExpired = output();
     viewReady = signal(false);
     constructor() {
         effect(() => {
@@ -6776,17 +6827,34 @@ class DashboardQsComponent {
             return;
         this.isLoading.set(true);
         try {
-            await this.sharedService.embedDashboard({ dashboardId, parameters }, container, { height: this.height() ?? `${window.innerHeight - 50}px` });
+            await this.sharedService.embedDashboard({ dashboardId, parameters }, container, {
+                height: this.height() ?? `${window.innerHeight - 50}px`,
+                onMessage: event => {
+                    dispatchQuicksightEvent(event, this);
+                    if (event.eventName === QuicksightEventName.CONTENT_LOADED || event.eventName === QuicksightEventName.ERROR_OCCURRED)
+                        this.isLoading.set(false);
+                    if (isQuicksightSessionExpiredEvent(event))
+                        this.handleSessionExpired();
+                },
+            });
         }
         catch (error) {
             console.error('Error embedding dashboard:', error);
-        }
-        finally {
             this.isLoading.set(false);
         }
     }
+    async handleSessionExpired() {
+        if (this.sessionExpiredShown)
+            return;
+        this.sessionExpiredShown = true;
+        const result = await this.sweetAlertService.confirmBox(this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_MESSAGE', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_CONFIRM', this.GlobalTermService.languageCode), this.termPipe.transform('CANCEL', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_TITLE', this.GlobalTermService.languageCode));
+        if (result.isConfirmed)
+            window.location.reload();
+        else
+            this.sessionExpiredShown = false;
+    }
     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: "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"] }] });
+    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", sdkEvent: "sdkEvent", contentLoaded: "contentLoaded", errorOccurred: "errorOccurred", sessionExpired: "sessionExpired" }, 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,
@@ -6796,6 +6864,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['visualContainer']
             }] } });
 
+class DashboardQsInteractiveComponent {
+    sharedService = inject(Shared);
+    sweetAlertService = inject(SweetAlertService);
+    termPipe = inject(TermPipe);
+    GlobalTermService = inject(GlobalTermService);
+    route = inject(ActivatedRoute);
+    sessionExpiredShown = false;
+    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.dashboardIdInput() ?? this.routeData()['dashboardId']);
+    parameters = computed(() => this.parametersInput() ?? this.routeData()['parameters']);
+    height = computed(() => this.heightInput() ?? this.routeData()['height']);
+    isLoading = signal(true);
+    isLoadingChange = output();
+    sdkEvent = output();
+    contentLoaded = output();
+    errorOccurred = output();
+    sessionExpired = output();
+    viewReady = signal(false);
+    dashboardRef = null;
+    lastEmbeddedId = undefined;
+    constructor() {
+        effect(() => {
+            this.isLoadingChange.emit(this.isLoading());
+        });
+        effect(() => {
+            const id = this.dashboardId();
+            if (!this.viewReady() || !id)
+                return;
+            if (id === this.lastEmbeddedId)
+                return;
+            this.lastEmbeddedId = id;
+            this.firstEmbed(id);
+        });
+        effect(() => {
+            const params = this.parameters();
+            if (!this.dashboardRef || !params)
+                return;
+            this.isLoading.set(true);
+            this.sharedService.setDashboardParameters(this.dashboardRef, params)
+                .catch(() => this.isLoading.set(false));
+        });
+    }
+    ngAfterViewInit() {
+        this.viewReady.set(true);
+    }
+    async firstEmbed(dashboardId) {
+        const container = this.containers.first?.nativeElement;
+        if (!container)
+            return;
+        this.isLoading.set(true);
+        try {
+            this.dashboardRef = await this.sharedService.embedDashboardInteractive({ dashboardId, parameters: this.parameters() }, container, {
+                height: this.height() ?? `${window.innerHeight - 50}px`,
+                onMessage: event => {
+                    dispatchQuicksightEvent(event, this);
+                    if (event.eventName === QuicksightEventName.CONTENT_LOADED || event.eventName === QuicksightEventName.ERROR_OCCURRED || event.eventName === QuicksightEventName.PARAMETERS_CHANGED)
+                        this.isLoading.set(false);
+                    if (isQuicksightSessionExpiredEvent(event))
+                        this.handleSessionExpired();
+                },
+            });
+        }
+        catch (error) {
+            console.error('Error embedding dashboard:', error);
+            this.isLoading.set(false);
+        }
+    }
+    async handleSessionExpired() {
+        if (this.sessionExpiredShown)
+            return;
+        this.sessionExpiredShown = true;
+        const result = await this.sweetAlertService.confirmBox(this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_MESSAGE', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_CONFIRM', this.GlobalTermService.languageCode), this.termPipe.transform('CANCEL', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_TITLE', this.GlobalTermService.languageCode));
+        if (result.isConfirmed)
+            window.location.reload();
+        else
+            this.sessionExpiredShown = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DashboardQsInteractiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DashboardQsInteractiveComponent, isStandalone: true, selector: "intelica-dashboard-qs-interactive", 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", sdkEvent: "sdkEvent", contentLoaded: "contentLoaded", errorOccurred: "errorOccurred", sessionExpired: "sessionExpired" }, 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: DashboardQsInteractiveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'intelica-dashboard-qs-interactive', 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']
+            }] } });
+
 class CheckboxFilterDirective extends FilterDirective {
     constructor() {
         super(FilterTypeEnum.Checkbox);
@@ -10719,5 +10879,5 @@ const IntelicaTheme = definePreset(Aura, {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, CheckboxFilterDirective, Color, ColumnComponent, ColumnGroupComponent, CompareByField, CompressService, ConfigService, CookieAttributesGeneral, DashboardQsComponent, DataDirective, DateFilterDirective, DateModeOptions, DynamicInputValidation, EchartComponent, EchartService, ElementService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FilterChipsComponent, FiltersComponent, FormatAmountPipe, GetCookieAttributes, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaCellCheckboxDirective, IntelicaTheme, ItemSplitDirective, LanguageService, MatrixColumnComponent, MatrixColumnGroupComponent, MatrixTableComponent, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, RecordPerPageComponent, RefreshTokenInterceptor, ResponseHeadersInterceptor, RouteGuard, RowResumenComponent, RowResumenTreeComponent, SearchComponent, SelectDetailFilterDirective, SelectFilterDirective, Shared, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TableFetchComponent, TableSortOrder, TemplateDirective, TemplateMenuComponent, TermGuard, TermPipe, TermService, TextAreaFilterDirective, TextFilterDirective, TextRangeFilterDirective, TitlesComponent, TreeColumnComponent, TreeColumnGroupComponent, TreeTableComponent, TreeTableFetchComponent, TruncatePipe, decryptData, encryptData, getColor };
+export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, CheckboxFilterDirective, Color, ColumnComponent, ColumnGroupComponent, CompareByField, CompressService, ConfigService, CookieAttributesGeneral, DashboardQsComponent, DashboardQsInteractiveComponent, DataDirective, DateFilterDirective, DateModeOptions, DynamicInputValidation, EchartComponent, EchartService, ElementService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FilterChipsComponent, FiltersComponent, FormatAmountPipe, GetCookieAttributes, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaCellCheckboxDirective, IntelicaTheme, ItemSplitDirective, LanguageService, MatrixColumnComponent, MatrixColumnGroupComponent, MatrixTableComponent, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, QUICKSIGHT_AUTH_ERROR_CODES, QuicksightEventName, RecordPerPageComponent, RefreshTokenInterceptor, ResponseHeadersInterceptor, RouteGuard, RowResumenComponent, RowResumenTreeComponent, SearchComponent, SelectDetailFilterDirective, SelectFilterDirective, Shared, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TableFetchComponent, TableSortOrder, TemplateDirective, TemplateMenuComponent, TermGuard, TermPipe, TermService, TextAreaFilterDirective, TextFilterDirective, TextRangeFilterDirective, TitlesComponent, TreeColumnComponent, TreeColumnGroupComponent, TreeTableComponent, TreeTableFetchComponent, TruncatePipe, decryptData, dispatchQuicksightEvent, encryptData, getColor, isQuicksightSessionExpiredEvent };
 //# sourceMappingURL=intelica-library-ui.mjs.map