ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

package/src/lib/misc/w-wizard/w-wizard.component.html

@@ -1,136 +0,0 @@
-<w-body-grid>
-  <w-panel class="col-12 w-wizard-steps-panel" [activeGrid]="false">
-    <p-steps [model]="stepsItems" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)" [readonly]="isReadOnly"></p-steps>
-  </w-panel>
-
-  <w-panel class="col-12 w-wizard-main-panel" [activeGrid]="false">
-
-    <div class="flex flex-column align-items-center sm:align-items-start w-wizard-headings">
-      @if (stepsHeadings && stepsHeadings[activeIndex]) {
-        <span class="w-wizard-heading">
-          {{stepsHeadings[activeIndex]}}
-        </span>
-      }
-      @if (stepsSubheadings && stepsSubheadings[activeIndex]) {
-        <span class="w-wizard-subheading">
-          {{stepsSubheadings[activeIndex]}}
-        </span>
-      }
-    </div>
-
-    @if (activeIndex == 0) {
-      <ng-content select=".step-1" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 1) {
-      <ng-content select=".step-2" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 2) {
-      <ng-content select=".step-3" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 3) {
-      <ng-content select=".step-4" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 4) {
-      <ng-content select=".step-5" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 5) {
-      <ng-content select=".step-6" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 6) {
-      <ng-content select=".step-7" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 7) {
-      <ng-content select=".step-8" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 8) {
-      <ng-content select=".step-9" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 9) {
-      <ng-content select=".step-10" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 10) {
-      <ng-content select=".step-11" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 11) {
-      <ng-content select=".step-12" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 12) {
-      <ng-content select=".step-13" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 13) {
-      <ng-content select=".step-14" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 14) {
-      <ng-content select=".step-15" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 15) {
-      <ng-content select=".step-16" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 16) {
-      <ng-content select=".step-17" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 17) {
-      <ng-content select=".step-18" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 18) {
-      <ng-content select=".step-19" class="w-wizard-body"></ng-content>
-    }
-    @if (activeIndex == 19) {
-      <ng-content select=".step-20" class="w-wizard-body"></ng-content>
-    }
-
-    <div class="flex justify-content-between flex-wrap m-auto">
-      <div class="flex align-items-center justify-content-center">
-        @if (activeIndex == 0) {
-          <w-button
-            [icon]="'pi-times'"
-            type="secondary"
-            [label]="cancelBtnLabel"
-            (onClick)="cancel()">
-          </w-button>
-        }
-        @if (activeIndex != 0) {
-          <w-button
-            [icon]="'pi-arrow-left'"
-            type="secondary"
-            [label]="previousBtnLabel"
-            [disabled]="disablePreviousPageButton"
-            (onClick)="previousPage()">
-          </w-button>
-        }
-      </div>
-      @if (!(stepsItems.length -1 == activeIndex)) {
-        <div class="flex align-items-center justify-content-center">
-          <w-button type="primary"
-            [icon]="'pi-arrow-right'"
-            [iconPos]="'right'"
-            [label]="nextBtnLabel"
-            [disabled]="disableNextPageButton"
-            (onClick)="nextPage()">
-          </w-button>
-        </div>
-      } @else {
-        <div class="flex align-items-center justify-content-center">
-          @if (secondaryConfirmButtonLabel) {
-            <w-button
-              type="secondary"
-              class="w-wizard-button-gap"
-              [icon]="'pi '+secondaryConfirmButtonIcon"
-              [label]="secondaryConfirmButtonLabel"
-              [disabled]="disableSecondaryConfirmButton"
-              [loading]="secondaryConfirmButtonLoading"
-              (onClick)="secondaryConfirm()">
-            </w-button>
-          }
-          <w-button type="primary"
-            [icon]="'pi '+ confirmButtonIcon"
-            [label]="confirmButtonLabel"
-            [disabled]="disableConfirmButton"
-            [loading]="confirmButtonLoading"
-            (onClick)="confirm()">
-          </w-button>
-        </div>
-      }
-    </div>
-  </w-panel>
-</w-body-grid>

package/src/lib/misc/w-wizard/w-wizard.component.scss

@@ -1,82 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-.w-wizard-button-gap {
-    margin-right: $spacingM;
-}
-
-.w-wizard-heading {
-    @extend .heading4;
-}
-
-.w-wizard-subheading {
-    @extend .subtitle2;
-    margin-top: $spacingM;
-}
-
-.w-wizard-body {
-    @extend .body;
-}
-
-::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title {
-    @extend .body;
-}
-
-::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number {
-	background: $highlightBg;
-	color: $primaryDarkerColor;
-}
-
-::ng-deep .p-steps-current .p-steps-number {
-    height: 32px !important;
-    width: 32px;
-    font-weight: bold;
-    font-size: 14px;
-}
-
-::ng-deep .p-disabled .p-steps-number {
-    height: 32px !important;
-    width: 32px;
-    font-size: 14px;
-    font-weight: bold;
-    color: #9AA0A6;
-
-}
-
-.w-wizard-headings {
-    margin-bottom: $spacingM;
-    gap: 6px;
-
-    .w-wizard-subheading {
-        color: #202124;
-        margin-bottom: 12px;
-        font-weight: 400;
-        margin: 0 !important;
-    }
-
-    .w-wizard-heading {
-        color: #202124;
-    }
-}
-
-
-::ng-deep .w-wizard-steps-panel .w-panel {
-    padding-bottom: 20px !important;
-}
-
-::ng-deep .w-wizard-main-panel .w-panel {
-    padding-bottom: 20px !important;
-}
-
-::ng-deep .w-wizard-main-panel .w-panel > .w-panel-content {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-
-    > div {
-        margin: 0 !important;
-    }
-}
-
-::ng-deep .w-wizard-steps-panel .w-panel .w-panel-content p-steps .p-steps .p-steps-item .p-menuitem-link {
-    overflow: unset !important;
-}

package/src/lib/misc/w-wizard/w-wizard.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WWizardComponent } from './w-wizard.component';
-
-describe('WWizardComponent', () => {
-  let component: WWizardComponent;
-  let fixture: ComponentFixture<WWizardComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WWizardComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(WWizardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/misc/w-wizard/w-wizard.component.ts

@@ -1,85 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { Router } from '@angular/router';
-import { MenuItem, MessageService } from 'primeng/api';
-import { Location } from '@angular/common';
-
-@Component({
-    selector: 'w-wizard',
-    templateUrl: './w-wizard.component.html',
-    styleUrls: ['./w-wizard.component.scss'],
-    providers: [MessageService],
-    standalone: false
-})
-export class WWizardComponent {
-  items!: MenuItem[];
-  private _activeIndex: number = 0;
-
-  @Input() set activeIndex(value: number) {
-    this._activeIndex = value;
-  }
-
-  get activeIndex() {
-    return this._activeIndex;
-  }
-
-  @Input('stepsItems') stepsItems!: MenuItem[];
-  @Input('stepsHeadings') stepsHeadings!: string[];
-  @Input('stepsSubheadings') stepsSubheadings!: string[];
-  @Input('nextBtnLabel') nextBtnLabel: string = "Next";
-  @Input('previousBtnLabel') previousBtnLabel: string = "Previous";
-  @Input('cancelBtnLabel') cancelBtnLabel: string = "Cancel";
-  @Input('confirmButtonLabel') confirmButtonLabel!: string;
-  @Input('confirmButtonIcon') confirmButtonIcon!: string;
-  @Input('confirmButtonLoading') confirmButtonLoading: boolean = false;
-  @Input('secondaryConfirmButtonLabel') secondaryConfirmButtonLabel!: string;
-  @Input('secondaryConfirmButtonIcon') secondaryConfirmButtonIcon!: string;
-  @Input('secondaryConfirmButtonLoading') secondaryConfirmButtonLoading: boolean = false;
-  @Input('isReadOnly') isReadOnly: boolean = true;
-  @Input('cancelCustomRoute') public cancelCustomRoute!: string;
-  @Input('disableConfirmButton') disableConfirmButton: boolean = false;
-  @Input('disableSecondaryConfirmButton') disableSecondaryConfirmButton: boolean = false;
-  @Input('disableNextPageButton') disableNextPageButton: boolean = false;
-  @Input('disablePreviousPageButton') disablePreviousPageButton: boolean = false;
-
-  @Output('confirmButtonActivated') confirmButtonActivated = new EventEmitter<boolean>();
-  @Output('secondaryConfirmButtonActivated') secondaryConfirmButtonActivated = new EventEmitter<boolean>();
-  @Output('activeIndexParent') activeIndexParent = new EventEmitter<number>();
-
-  constructor(
-    public messageService: MessageService,
-    private location: Location,
-    private router: Router
-  ) {}
-
-  onActiveIndexChange(event:any) {
-    this._activeIndex = event;
-  }
-
-  cancel(){
-    if(this.cancelCustomRoute){
-      this.router.navigate([this.cancelCustomRoute])
-      return
-    }
-    this.location.back();
-  }
-
-  nextPage() {
-      this._activeIndex++;
-      this.activeIndexParent.emit(this._activeIndex);
-      return;
-  }
-  
-  previousPage() {
-    this._activeIndex--;
-    this.activeIndexParent.emit(this._activeIndex);
-  }
-  
-  confirm() {
-    this.confirmButtonActivated.emit(true);
-  }
-
-  secondaryConfirm() {
-    this.secondaryConfirmButtonActivated.emit(true);
-  }
-}

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.css

@@ -1,18 +0,0 @@
-::ng-deep iframe {
-    border: none;
-}
-
-::ng-deep .hidden {
-    height: 0 !important;
-    width: 0 !important;
-}
-
-::ng-deep .report-container {
-    height: var(--height);
-    width: auto;
-    margin: 0px auto;
-}
-
-::ng-deep .powerbi-report-container .card {
-	padding: 5px;
-}

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.html

@@ -1,72 +0,0 @@
-@if (reportTitle || showPrintButton || showFullScreenButton) {
-  <div class="flex justify-content-between flex-wrap">
-    <div class="flex align-items-center justify-content-center">
-    </div>
-    <div class="flex align-items-center justify-content-center">
-      <div class="text-right">
-        @if (showRefreshButton) {
-          <p-button icon="pi pi-refresh"
-            styleClass="p-button-rounded p-button-secondary p-button-text"
-            (onClick)="refresh()">
-          </p-button>
-        }
-        @if (showPrintButton) {
-          <p-button icon="pi pi-print"
-            styleClass="p-button-rounded p-button-secondary p-button-text"
-            (onClick)="print()">
-          </p-button>
-        }
-        @if (showFullScreenButton) {
-          <p-button icon="pi pi-arrows-alt"
-            styleClass="p-button-rounded p-button-secondary p-button-text"
-            (onClick)="enterFullScreen()">
-          </p-button>
-        }
-      </div>
-    </div>
-  </div>
-}
-
-@if (filterPanelPosition == 'right') {
-  <div class="grid">
-    <div class="col-12 md:col-12 lg:col-8">
-      <ng-container *ngTemplateOutlet="powerbiReport"></ng-container>
-    </div>
-    <div class="col-12 md:col-12 lg:col-4">
-      @if (hasReportFilters) {
-        <ng-content select=".report-filters-right"></ng-content>
-      }
-    </div>
-  </div>
-}
-
-@if (filterPanelPosition == 'left') {
-  <div class="grid">
-    <div class="col-12 md:col-12 lg:col-8">
-      @if (hasReportFilters) {
-        <ng-content select=".report-filters-left"></ng-content>
-      }
-    </div>
-    <div class="col-12 md:col-12 lg:col-4">
-      <ng-container *ngTemplateOutlet="powerbiReport"></ng-container>
-    </div>
-  </div>
-}
-
-@if (filterPanelPosition == 'bottom') {
-  <div>
-    <ng-container *ngTemplateOutlet="powerbiReport"></ng-container>
-    @if (hasReportFilters) {
-      <ng-content select=".report-filters-bottom"></ng-content>
-    }
-  </div>
-}
-
-<ng-template #powerbiReport>
-  <div id="powerbiContainer">
-    <powerbi-report [embedConfig]="reportConfig"
-      [cssClassName]="reportClass"
-      [eventHandlers]="eventHandlersMap">
-    </powerbi-report>
-  </div>
-</ng-template>

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WPowerbiReportComponent } from './w-powerbi-report.component';
-
-describe('WPowerbiReportComponent', () => {
-  let component: WPowerbiReportComponent;
-  let fixture: ComponentFixture<WPowerbiReportComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WPowerbiReportComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(WPowerbiReportComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.ts

@@ -1,182 +0,0 @@
-import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { EmbedConfig } from '../../shared/models/embed-config.model';
-import { Embed, IReportEmbedConfiguration, Report, models, service } from 'powerbi-client';
-import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';
-
-@Component({
-    selector: 'w-powerbi-report',
-    templateUrl: './w-powerbi-report.component.html',
-    styleUrls: ['./w-powerbi-report.component.css'],
-    standalone: false
-})
-export class WPowerbiReportComponent implements OnInit {
-
-  @Input('embedConfig') embedConfig!: EmbedConfig;
-  @Input('reportTitle') reportTitle!: string;
-  @Input('hasReportFilters') hasReportFilters: boolean = false;
-  @Input('parameterReportFilters') parameterReportFilters!: string;
-  @Input('showReportFilters') showReportFilters: boolean = false;
-  @Input('filterPanelPosition') filterPanelPosition: string = "bottom";
-  @Input('showPageNavigation') showPageNavigation: boolean = false;
-  @Input('showPrintButton') showPrintButton: boolean = false;
-  @Input('showFullScreenButton') showFullScreenButton: boolean = false;
-  @Input('showVisualHeaders') showVisualHeaders: boolean = true;
-  @Input('showRefreshButton') showRefreshButton: boolean = false;
-  @Input('height') height: string = '810px';
-  @Input('filters') filters!: models.IFilter[];
-  @Input('isEmbedTokenType') isEmbedTokenType: boolean = false;
-  // @Input('zoomRatio') zoomRatio: number = 0.00175;
-
-  @Output('refreshNotAllowed') refreshNotAllowed = new EventEmitter<boolean>();
-
-  powerbiReportWidth!: number;
-  private _zoom!: number;
-
-  @Input() set zoom(value: number) {
-    this._zoom = value;
-    this.setReportZoom(this._zoom);
-  }
-
-  get zoom(): number {
-    return this._zoom;
-  }
-  reportClass = 'report-container';
-
-  reportConfig: IReportEmbedConfiguration = {
-    type: 'report',
-    embedUrl: undefined,
-    accessToken: undefined,
-    filters: undefined,
-    settings: {
-      layoutType: models.LayoutType.Custom,
-      customLayout: {
-        displayOption: models.DisplayOption.FitToWidth
-      },
-      background: models.BackgroundType.Transparent
-    }
-  };
-
-  eventHandlersMap = new Map([
-    ['loaded', () => {
-      const report = this.reportObj.getReport();
-      report.setComponentTitle('Embedded report');
-      if (this.filters) {
-        this.updateFilters(this.filters);
-      }      
-    },
-    ],
-    ['rendered', () => {
-    }],
-    ['error', (event?: service.ICustomEvent<any>) => {
-      if (event) {
-        console.error(event.detail);
-      }
-    },
-    ],
-    ['visualClicked', () => { }],
-    ['pageChanged', (event) => { }],
-  ]) as Map<string, (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null>;
-
-  @ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;
-
-  // @HostListener('window:resize', ['$event'])
-  // onResize(event: any) {
-  //   this.getReportDivWidth();
-  // }
-
-  constructor(private elementRef: ElementRef) { }
-
-  ngOnInit(): void {
-    this.embedReport();
-    this.elementRef.nativeElement.style.setProperty("--height", this.height)
-  }
-
-  // getReportDivWidth() {
-  //   this.powerbiReportWidth = this.elementRef.nativeElement.querySelector('#powerbiContainer').offsetWidth;
-  //   this.setReportZoom(this.powerbiReportWidth * this.zoomRatio);
-  // }
-
-  async embedReport(): Promise<void> {
-    try {
-      this.reportConfig = {
-        ...this.reportConfig,
-        id: this.embedConfig!.id,
-        embedUrl: this.embedConfig!.embedUrl,
-        tokenType: this.isEmbedTokenType ? models.TokenType.Embed : models.TokenType.Aad,
-        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
-                }
-              }
-            ]
-          },
-          customLayout: {
-            displayOption: models.DisplayOption.FitToWidth
-          },
-          background: models.BackgroundType.Transparent
-        }
-      };
-    } catch (error: any) {
-      console.log(`Failed to fetch config for report. Status: ${error.status} ${error.statusText}`);
-      return;
-    }
-  }
-
-  async refresh() {
-    const report: Report = this.reportObj.getReport();
-    try {
-      await report.refresh();
-    } catch (errors: any) {
-      console.log(errors);
-      if (errors.message = "refreshNotAllowed") this.onRefreshNotAllowed();
-    }
-  }
-
-  async updateFilters(filters: models.IFilter[]) {
-    try {
-      const report: Report = this.reportObj.getReport();
-      await report.removeFilters();
-      await report.updateFilters(models.FiltersOperations.Add, filters);
-    } catch (error: any) {
-      console.error(error);
-      if (error.message = "refreshNotAllowed") this.onRefreshNotAllowed();
-      return;
-    }
-  }
-
-  async setReportZoom(zoom: number) {
-    try {
-      const report: Report = this.reportObj.getReport();
-      await report.setZoom(zoom);
-    } catch (error) {
-      console.log("Error setting report zoom: " + error)
-    }
-  }
-
-  print() {
-    const report: Report = this.reportObj.getReport();
-    report.print();
-  }
-
-  enterFullScreen() {
-    const report: Report = this.reportObj.getReport();
-    report.fullscreen();
-  }
-
-  onRefreshNotAllowed() {
-    this.refreshNotAllowed.emit(true);
-  }
-}