intelica-library-project 20.0.9 → 20.0.11

package/fesm2022/intelica-library-project.mjs

@@ -10,7 +10,7 @@ import * as i1$1 from '@angular/common';
 import { CommonModule, DatePipe, isPlatformBrowser, NgClass } from '@angular/common';
 import * as i5 from 'primeng/tooltip';
 import { TooltipModule, Tooltip } from 'primeng/tooltip';
-import { GlobalTermService, TermPipe, FormatDateConstants, ConfigService, GlobalFavoriteService, Color, getColor } from 'intelica-library-base';
+import { GlobalTermService, TermPipe, FormatDateConstants, ConfigService, AlertService, GlobalFavoriteService, Color, getColor } from 'intelica-library-base';
 import * as i4 from 'primeng/button';
 import { ButtonModule, Button } from 'primeng/button';
 import { Subscription, Subject, BehaviorSubject, firstValueFrom, map, distinctUntilChanged, of, tap, shareReplay, throwError } from 'rxjs';
@@ -2304,7 +2304,10 @@ function dispatchQuicksightEvent(event, outputs) {
 
 class DashboardQsComponent {
     sharedService = inject(Shared);
+    alertService = inject(AlertService);
+    term = inject(TermPipe);
     route = inject(ActivatedRoute);
+    sessionExpiredShown = false;
     containers;
     dashboardIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "dashboardIdInput", alias: 'dashboardId' }] : [{ alias: 'dashboardId' }]));
     parametersInput = input(undefined, ...(ngDevMode ? [{ debugName: "parametersInput", alias: 'parameters' }] : [{ alias: 'parameters' }]));
@@ -2347,6 +2350,8 @@ class DashboardQsComponent {
                     dispatchQuicksightEvent(event, this);
                     if (event.eventName === QuicksightEventName.CONTENT_LOADED || event.eventName === QuicksightEventName.ERROR_OCCURRED)
                         this.isLoading.set(false);
+                    if (isQuicksightSessionExpiredEvent(event))
+                        this.handleSessionExpired();
                 },
             });
         }
@@ -2355,6 +2360,20 @@ class DashboardQsComponent {
             this.isLoading.set(false);
         }
     }
+    t(key, fallback) {
+        const value = this.term.transform(key);
+        return value && value !== '-' ? value : fallback;
+    }
+    async handleSessionExpired() {
+        if (this.sessionExpiredShown)
+            return;
+        this.sessionExpiredShown = true;
+        const { isConfirmed } = await this.alertService.confirm(this.t('SESSION_EXPIRED_TITLE', 'Sesión expirada'), this.t('SESSION_EXPIRED_MESSAGE', 'Tu sesión de QuickSight expiró. Actualiza la página para continuar.'), this.t('SESSION_EXPIRED_CONFIRM', 'Actualizar página'), this.t('CANCEL', 'Cancelar'));
+        if (isConfirmed)
+            window.location.reload();
+        else
+            this.sessionExpiredShown = false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DashboardQsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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()) {\n<div class=\"u-display-flex u-flex-column u-gap-sm\">\n    <div class=\"u-display-flex u-background-white u-px-1 u-pt-1\">\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\n        </div>\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\n        </div>\n    </div>\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 1061.57 / 93.02\" />\n        </p-panel>\n    </div>\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\n        @for (_ of [].constructor(4); track $index) {\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 244.87 / 123.12\" />\n        </p-panel>\n        }\n    </div>\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 1061.57 / 303.7\" />\n        </p-panel>\n    </div>\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\n        @for (_ of [].constructor(2); track $index) {\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 517.1 / 123.12\" />\n        </p-panel>\n        }\n    </div>\n</div>\n}\n<div #visualContainer [style.height]=\"height()\" [hidden]=\"isLoading()\"></div>", dependencies: [{ kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });
 }
@@ -2368,7 +2387,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
 
 class DashboardQsInteractiveComponent {
     sharedService = inject(Shared);
+    alertService = inject(AlertService);
+    term = inject(TermPipe);
     route = inject(ActivatedRoute);
+    sessionExpiredShown = false;
     containers;
     dashboardIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "dashboardIdInput", alias: 'dashboardId' }] : [{ alias: 'dashboardId' }]));
     parametersInput = input(undefined, ...(ngDevMode ? [{ debugName: "parametersInput", alias: 'parameters' }] : [{ alias: 'parameters' }]));
@@ -2423,6 +2445,8 @@ class DashboardQsInteractiveComponent {
                     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();
                 },
             });
         }
@@ -2431,6 +2455,20 @@ class DashboardQsInteractiveComponent {
             this.isLoading.set(false);
         }
     }
+    t(key, fallback) {
+        const value = this.term.transform(key);
+        return value && value !== '-' ? value : fallback;
+    }
+    async handleSessionExpired() {
+        if (this.sessionExpiredShown)
+            return;
+        this.sessionExpiredShown = true;
+        const { isConfirmed } = await this.alertService.confirm(this.t('SESSION_EXPIRED_TITLE', 'Sesión expirada'), this.t('SESSION_EXPIRED_MESSAGE', 'Tu sesión de QuickSight expiró. Actualiza la página para continuar.'), this.t('SESSION_EXPIRED_CONFIRM', 'Actualizar página'), this.t('CANCEL', 'Cancelar'));
+        if (isConfirmed)
+            window.location.reload();
+        else
+            this.sessionExpiredShown = false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DashboardQsInteractiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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()) {\n<div class=\"u-display-flex u-flex-column u-gap-sm\">\n    <div class=\"u-display-flex u-background-white u-px-1 u-pt-1\">\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\n        </div>\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\n        </div>\n    </div>\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 1061.57 / 93.02\" />\n        </p-panel>\n    </div>\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\n        @for (_ of [].constructor(4); track $index) {\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 244.87 / 123.12\" />\n        </p-panel>\n        }\n    </div>\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 1061.57 / 303.7\" />\n        </p-panel>\n    </div>\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\n        @for (_ of [].constructor(2); track $index) {\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" style=\"aspect-ratio: 517.1 / 123.12\" />\n        </p-panel>\n        }\n    </div>\n</div>\n}\n<div #visualContainer [style.height]=\"height()\" [hidden]=\"isLoading()\"></div>", dependencies: [{ kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });
 }