ngx-wapp-components 1.0.7 → 1.0.9

package/fesm2020/ngx-wapp-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, forwardRef, Input, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, Pipe, NgModule } from '@angular/core';
+import { Injectable, Component, forwardRef, Input, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, Pipe, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/common';
@@ -49,6 +49,8 @@ import * as i13 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i12 from 'angular2-query-builder';
 import { QueryBuilderModule, QueryBuilderComponent } from 'angular2-query-builder';
+import * as i3$3 from 'powerbi-client-angular';
+import { PowerBIReportEmbedComponent, PowerBIEmbedModule } from 'powerbi-client-angular';
 import * as i1$1 from '@angular/cdk/clipboard';
 import * as i2$2 from 'ngx-highlightjs';
 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@@ -56,6 +58,7 @@ import * as i1$2 from 'primeng/api';
 import { ConfirmationService } from 'primeng/api';
 import { BehaviorSubject, switchMap, forkJoin, map, of, tap } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { models } from 'powerbi-client';
 
 class WappComponentsService {
     constructor() { }
@@ -409,26 +412,6 @@ const wappingIcons = {
 };
 
 class WappIconsComponent {
-    /* @Input()
-      set name(iconName: string) {
-        this.element.nativeElement.innerHTML = wappingIcons[iconName] || null;
-      }
-  
-    @Input()
-      set width(width: number) {
-        var p = document.getElementById('icon');
-        p!.style.width = width + 'px';
-    }
-  
-    @Input()
-      set height(height: number) {
-        var p = document.getElementById('icon');
-        p!.style.height = height + 'px';
-    }
-  
-    @Input() set color(fillColor: string) {
-      this.applyColorToPaths(fillColor);
-    } */
     constructor(element) {
         this.element = element;
     }
@@ -2247,6 +2230,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['clearClicked']
             }] } });
 
+class WPowerbiReportComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.hasReportFilters = false;
+        this.showReportFilters = false;
+        this.filterPanelPosition = "bottom";
+        this.showPageNavigation = true;
+        this.showPrintButton = true;
+        this.showFullScreenButton = true;
+        this.showVisualHeaders = false;
+        this.showRefreshButton = false;
+        this.zoomRatio = 0.00175;
+        this.refreshNotAllowed = new EventEmitter();
+        this.reportClass = 'report-container';
+        this.reportConfig = {
+            type: 'report',
+            embedUrl: undefined,
+            tokenType: models.TokenType.Embed,
+            accessToken: undefined,
+            filters: undefined,
+            settings: {
+                layoutType: models.LayoutType.Custom,
+                customLayout: {
+                    displayOption: models.DisplayOption.FitToWidth
+                }
+            }
+        };
+        this.eventHandlersMap = new Map([
+            ['loaded', () => {
+                    const report = this.reportObj.getReport();
+                    report.setComponentTitle('Embedded report');
+                },
+            ],
+            ['rendered', () => { }],
+            ['error', (event) => {
+                    if (event) {
+                        console.error(event.detail);
+                    }
+                },
+            ],
+            ['visualClicked', () => { }],
+            ['pageChanged', (event) => { }],
+        ]);
+    }
+    set zoom(value) {
+        this._zoom = value;
+        this.setReportZoom(this._zoom);
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    onResize(event) {
+        this.getReportDivWidth();
+    }
+    ngOnInit() {
+        this.embedReport();
+    }
+    getReportDivWidth() {
+        this.powerbiReportWidth = this.elementRef.nativeElement.querySelector('#powerbiContainer').offsetWidth;
+        this.setReportZoom(this.powerbiReportWidth * this.zoomRatio);
+    }
+    async embedReport() {
+        try {
+            this.reportConfig = {
+                ...this.reportConfig,
+                id: this.embedConfig.id,
+                embedUrl: this.embedConfig.embedUrl,
+                accessToken: this.embedConfig.embedToken.token,
+                filters: this.parameterReportFilters ? [JSON.parse(this.parameterReportFilters)] : undefined,
+                settings: {
+                    panes: {
+                        filters: {
+                            visible: this.showReportFilters
+                        },
+                        pageNavigation: {
+                            visible: this.showPageNavigation
+                        },
+                    },
+                    visualSettings: {
+                        visualHeaders: [
+                            {
+                                settings: {
+                                    visible: this.showVisualHeaders
+                                }
+                            }
+                        ]
+                    }
+                }
+            };
+        }
+        catch (error) {
+            console.log(`Failed to fetch config for report. Status: ${error.status} ${error.statusText}`);
+            return;
+        }
+    }
+    async refresh() {
+        const report = this.reportObj.getReport();
+        try {
+            await report.refresh();
+        }
+        catch (errors) {
+            console.log(errors);
+            if (errors.message = "refreshNotAllowed")
+                this.onRefreshNotAllowed();
+        }
+    }
+    async updateFilters(filter) {
+        try {
+            const report = this.reportObj.getReport();
+            await report.removeFilters();
+            await report.updateFilters(models.FiltersOperations.Add, [filter]);
+        }
+        catch (error) {
+            console.error(error);
+            if (error.message = "refreshNotAllowed")
+                this.onRefreshNotAllowed();
+            return;
+        }
+    }
+    async setReportZoom(zoom) {
+        try {
+            const report = this.reportObj.getReport();
+            await report.setZoom(zoom);
+        }
+        catch (error) {
+            console.log("Error setting report zoom: " + error);
+        }
+    }
+    print() {
+        const report = this.reportObj.getReport();
+        report.print();
+    }
+    enterFullScreen() {
+        const report = this.reportObj.getReport();
+        report.fullscreen();
+    }
+    onRefreshNotAllowed() {
+        this.refreshNotAllowed.emit(true);
+    }
+}
+WPowerbiReportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WPowerbiReportComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WPowerbiReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WPowerbiReportComponent, selector: "w-powerbi-report", inputs: { embedConfig: "embedConfig", reportTitle: "reportTitle", hasReportFilters: "hasReportFilters", parameterReportFilters: "parameterReportFilters", showReportFilters: "showReportFilters", filterPanelPosition: "filterPanelPosition", showPageNavigation: "showPageNavigation", showPrintButton: "showPrintButton", showFullScreenButton: "showFullScreenButton", showVisualHeaders: "showVisualHeaders", showRefreshButton: "showRefreshButton", zoomRatio: "zoomRatio", zoom: "zoom" }, outputs: { refreshNotAllowed: "refreshNotAllowed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "reportObj", first: true, predicate: PowerBIReportEmbedComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"reportTitle || showPrintButton || showFullScreenButton\" class=\"flex justify-content-between flex-wrap\">\r\n    <div class=\"flex align-items-center justify-content-center\">\r\n        <h4>{{reportTitle}}</h4>\r\n    </div>\r\n    <div class=\"flex align-items-center justify-content-center\">\r\n        <div class=\"text-right\">\r\n            <p-button *ngIf=\"showRefreshButton\" icon=\"pi pi-refresh\" \r\n                      styleClass=\"p-button-rounded p-button-secondary p-button-text\"\r\n                      (onClick)=\"refresh()\">\r\n            </p-button>\r\n            <p-button *ngIf=\"showPrintButton\" icon=\"pi pi-print\" \r\n                      styleClass=\"p-button-rounded p-button-secondary p-button-text\"\r\n                      (onClick)=\"print()\">\r\n            </p-button>\r\n            <p-button *ngIf=\"showFullScreenButton\" icon=\"pi pi-arrows-alt\" \r\n                      styleClass=\"p-button-rounded p-button-secondary p-button-text\"\r\n                      (onClick)=\"enterFullScreen()\">\r\n            </p-button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"filterPanelPosition == 'right'\" class=\"grid\">\r\n    <div class=\"col-12 md:col-12 lg:col-8\">\r\n        <ng-container *ngTemplateOutlet=\"powerbiReport\"></ng-container>\r\n    </div>\r\n    <div class=\"col-12 md:col-12 lg:col-4\">\r\n        <ng-content *ngIf=\"hasReportFilters\" select=\".report-filters-right\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"filterPanelPosition == 'left'\" class=\"grid\">\r\n    <div class=\"col-12 md:col-12 lg:col-8\">\r\n        <ng-content *ngIf=\"hasReportFilters\" select=\".report-filters-left\"></ng-content>\r\n    </div>\r\n    <div class=\"col-12 md:col-12 lg:col-4\">\r\n        <ng-container *ngTemplateOutlet=\"powerbiReport\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"filterPanelPosition == 'bottom'\">\r\n    <ng-container *ngTemplateOutlet=\"powerbiReport\"></ng-container>\r\n    <ng-content *ngIf=\"hasReportFilters\" select=\".report-filters-bottom\"></ng-content>\r\n</div>\r\n\r\n<ng-template #powerbiReport>\r\n    <div class=\"powerbi-report-container\">\r\n        <div id=\"powerbiContainer\" class=\"card mt-10 text-center\">\r\n            <powerbi-report [embedConfig]=\"reportConfig\" \r\n                            [cssClassName]=\"reportClass\" \r\n                            [eventHandlers]=\"eventHandlersMap\">\r\n            </powerbi-report>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".powerbi-report-container{display:flex;flex-direction:column;height:100%}::ng-deep iframe{border:none}::ng-deep .hidden{height:0!important;width:0!important}::ng-deep .report-container{height:100vh;margin:8px auto;width:100%}::ng-deep .powerbi-report-container .card{padding:5px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$3.PowerBIReportEmbedComponent, selector: "powerbi-report[embedConfig]", inputs: ["embedConfig", "phasedEmbedding", "eventHandlers"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WPowerbiReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'w-powerbi-report', template: "<div *ngIf=\"reportTitle || showPrintButton || showFullScreenButton\" class=\"flex justify-content-between flex-wrap\">\r\n    <div class=\"flex align-items-center justify-content-center\">\r\n        <h4>{{reportTitle}}</h4>\r\n    </div>\r\n    <div class=\"flex align-items-center justify-content-center\">\r\n        <div class=\"text-right\">\r\n            <p-button *ngIf=\"showRefreshButton\" icon=\"pi pi-refresh\" \r\n                      styleClass=\"p-button-rounded p-button-secondary p-button-text\"\r\n                      (onClick)=\"refresh()\">\r\n            </p-button>\r\n            <p-button *ngIf=\"showPrintButton\" icon=\"pi pi-print\" \r\n                      styleClass=\"p-button-rounded p-button-secondary p-button-text\"\r\n                      (onClick)=\"print()\">\r\n            </p-button>\r\n            <p-button *ngIf=\"showFullScreenButton\" icon=\"pi pi-arrows-alt\" \r\n                      styleClass=\"p-button-rounded p-button-secondary p-button-text\"\r\n                      (onClick)=\"enterFullScreen()\">\r\n            </p-button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"filterPanelPosition == 'right'\" class=\"grid\">\r\n    <div class=\"col-12 md:col-12 lg:col-8\">\r\n        <ng-container *ngTemplateOutlet=\"powerbiReport\"></ng-container>\r\n    </div>\r\n    <div class=\"col-12 md:col-12 lg:col-4\">\r\n        <ng-content *ngIf=\"hasReportFilters\" select=\".report-filters-right\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"filterPanelPosition == 'left'\" class=\"grid\">\r\n    <div class=\"col-12 md:col-12 lg:col-8\">\r\n        <ng-content *ngIf=\"hasReportFilters\" select=\".report-filters-left\"></ng-content>\r\n    </div>\r\n    <div class=\"col-12 md:col-12 lg:col-4\">\r\n        <ng-container *ngTemplateOutlet=\"powerbiReport\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"filterPanelPosition == 'bottom'\">\r\n    <ng-container *ngTemplateOutlet=\"powerbiReport\"></ng-container>\r\n    <ng-content *ngIf=\"hasReportFilters\" select=\".report-filters-bottom\"></ng-content>\r\n</div>\r\n\r\n<ng-template #powerbiReport>\r\n    <div class=\"powerbi-report-container\">\r\n        <div id=\"powerbiContainer\" class=\"card mt-10 text-center\">\r\n            <powerbi-report [embedConfig]=\"reportConfig\" \r\n                            [cssClassName]=\"reportClass\" \r\n                            [eventHandlers]=\"eventHandlersMap\">\r\n            </powerbi-report>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".powerbi-report-container{display:flex;flex-direction:column;height:100%}::ng-deep iframe{border:none}::ng-deep .hidden{height:0!important;width:0!important}::ng-deep .report-container{height:100vh;margin:8px auto;width:100%}::ng-deep .powerbi-report-container .card{padding:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { embedConfig: [{
+                type: Input,
+                args: ['embedConfig']
+            }], reportTitle: [{
+                type: Input,
+                args: ['reportTitle']
+            }], hasReportFilters: [{
+                type: Input,
+                args: ['hasReportFilters']
+            }], parameterReportFilters: [{
+                type: Input,
+                args: ['parameterReportFilters']
+            }], showReportFilters: [{
+                type: Input,
+                args: ['showReportFilters']
+            }], filterPanelPosition: [{
+                type: Input,
+                args: ['filterPanelPosition']
+            }], showPageNavigation: [{
+                type: Input,
+                args: ['showPageNavigation']
+            }], showPrintButton: [{
+                type: Input,
+                args: ['showPrintButton']
+            }], showFullScreenButton: [{
+                type: Input,
+                args: ['showFullScreenButton']
+            }], showVisualHeaders: [{
+                type: Input,
+                args: ['showVisualHeaders']
+            }], showRefreshButton: [{
+                type: Input,
+                args: ['showRefreshButton']
+            }], zoomRatio: [{
+                type: Input,
+                args: ['zoomRatio']
+            }], refreshNotAllowed: [{
+                type: Output,
+                args: ['refreshNotAllowed']
+            }], zoom: [{
+                type: Input
+            }], reportObj: [{
+                type: ViewChild,
+                args: [PowerBIReportEmbedComponent]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
 class WappComponentsModule {
 }
 WappComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2276,7 +2453,8 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         WInputSearchComponent,
         WFilterPanelComponent,
         WListFieldComponent,
-        WappViewCardTitleTextComponent], imports: [InputTextModule,
+        WappViewCardTitleTextComponent,
+        WPowerbiReportComponent], imports: [InputTextModule,
         FormsModule,
         ReactiveFormsModule,
         CommonModule,
@@ -2306,7 +2484,8 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         CalendarModule,
         ToggleButtonModule,
         QueryBuilderModule,
-        SelectButtonModule], exports: [WappComponentsComponent,
+        SelectButtonModule,
+        PowerBIEmbedModule], exports: [WappComponentsComponent,
         WEditInputTextComponent,
         WClipboardComponent,
         HighlightModule,
@@ -2332,7 +2511,8 @@ WappComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         WInputSearchComponent,
         QueryBuilderModule,
         QueryBuilderComponent,
-        WFilterPanelComponent] });
+        WFilterPanelComponent,
+        WPowerbiReportComponent] });
 WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, providers: [
         {
             provide: HIGHLIGHT_OPTIONS,
@@ -2370,7 +2550,8 @@ WappComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         CalendarModule,
         ToggleButtonModule,
         QueryBuilderModule,
-        SelectButtonModule, HighlightModule,
+        SelectButtonModule,
+        PowerBIEmbedModule, HighlightModule,
         QueryBuilderModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WappComponentsModule, decorators: [{
             type: NgModule,
@@ -2402,7 +2583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         WInputSearchComponent,
                         WFilterPanelComponent,
                         WListFieldComponent,
-                        WappViewCardTitleTextComponent
+                        WappViewCardTitleTextComponent,
+                        WPowerbiReportComponent,
                     ],
                     imports: [
                         InputTextModule,
@@ -2435,7 +2617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         CalendarModule,
                         ToggleButtonModule,
                         QueryBuilderModule,
-                        SelectButtonModule
+                        SelectButtonModule,
+                        PowerBIEmbedModule
                     ],
                     exports: [
                         WappComponentsComponent,
@@ -2465,6 +2648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         QueryBuilderModule,
                         QueryBuilderComponent,
                         WFilterPanelComponent,
+                        WPowerbiReportComponent
                     ],
                     providers: [
                         {
@@ -2501,5 +2685,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColorTextPipe, DataTypeEnum, FormControlService, OperatorEnum, QBDataTypeEnum, TableColumnFilterTypes, TableColumnTypes, WBodyComponent, WBodyContainerComponent, WButtonComponent, WClipboardComponent, WContainerComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditMultiselectComponent, WEditSelectComponent, WEditTreeselectComponent, WFilterPanelComponent, WFooterComponent, WHeaderPanelComponent, WInputSearchComponent, WNavbarComponent, WPanelComponent, WPanelTitleComponent, WTableComponent, WTableLazyComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService, WappIconsComponent, WappLogosComponent };
+export { ColorTextPipe, DataTypeEnum, FormControlService, OperatorEnum, QBDataTypeEnum, TableColumnFilterTypes, TableColumnTypes, WBodyComponent, WBodyContainerComponent, WButtonComponent, WClipboardComponent, WContainerComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditMultiselectComponent, WEditSelectComponent, WEditTreeselectComponent, WFilterPanelComponent, WFooterComponent, WHeaderPanelComponent, WInputSearchComponent, WNavbarComponent, WPanelComponent, WPanelTitleComponent, WPowerbiReportComponent, WTableComponent, WTableLazyComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService, WappIconsComponent, WappLogosComponent };
 //# sourceMappingURL=ngx-wapp-components.mjs.map