ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/shared/skeletons/w-skeleton-input-generic/w-skeleton-input-generic.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-input-generic',
+  templateUrl: './w-skeleton-input-generic.component.html',
+  styleUrls: ['./w-skeleton-input-generic.component.css']
+})
+export class WSkeletonInputGenericComponent {
+  @Input('height') height: any = '32px';
+  @Input('width') width: any = '100%';
+  @Input('hasAlign') hasAlign: any = true;
+  @Input('label') label: any;
+}

package/src/lib/shared/skeletons/w-skeleton-list/w-skeleton-list.component.html

@@ -0,0 +1,12 @@
+<w-body-container>
+    <w-header-panel *ngIf="headerPanel" class="col-12">
+        <div class="main-actions">
+            <p-skeleton height="32px" width="190px"></p-skeleton>
+            <p-skeleton height="32px" width="190px"></p-skeleton>
+        </div>
+    </w-header-panel>
+    <w-panel class="col-12" [reduced]="contentReduced">
+        <w-skeleton-input-generic class="col-12" [hasAlign]="false"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-12" [hasAlign]="false" height="300px"></w-skeleton-input-generic>
+    </w-panel>
+</w-body-container>

package/src/lib/shared/skeletons/w-skeleton-list/w-skeleton-list.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-list/w-skeleton-list.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-list',
+  templateUrl: './w-skeleton-list.component.html',
+  styleUrls: ['./w-skeleton-list.component.css']
+})
+export class WSkeletonListComponent {
+
+  @Input('headerPanel') headerPanel: boolean = true;
+  @Input('contentReduced') contentReduced: boolean = false;
+  
+}

package/src/lib/shared/skeletons/w-skeleton-powerbi-report/w-skeleton-powerbi-report.component.html

@@ -0,0 +1,10 @@
+<div class="flex justify-content-between flex-wrap mb-3">
+    <div class="flex align-items-center justify-content-center">
+        <p-skeleton width="15rem" height="3rem"></p-skeleton>
+    </div>
+    <div class="flex align-items-center justify-content-center">
+        <p-skeleton shape="circle" size="3rem" styleClass="mr-2"></p-skeleton>
+        <p-skeleton shape="circle" size="3rem" styleClass="mr-2"></p-skeleton>
+    </div>
+</div>
+<p-skeleton width="100%" height="100vh" styleClass="mb-2"></p-skeleton>

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

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

package/src/lib/shared/skeletons/w-skeleton-powerbi-report/w-skeleton-powerbi-report.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-powerbi-report',
+  templateUrl: './w-skeleton-powerbi-report.component.html',
+  styleUrls: ['./w-skeleton-powerbi-report.component.css']
+})
+export class WSkeletonPowerbiReportComponent {
+
+}

package/src/lib/shared/skeletons/w-skeleton-profile-sidebar/w-skeleton-profile-sidebar.component.html

@@ -0,0 +1,14 @@
+<div class="flex justify-content-center flex-wrap">
+    <p-skeleton shape="circle" size="4rem" styleClass="mb-3"></p-skeleton>
+  </div>
+  <div class="flex justify-content-center flex-wrap">
+    <p-skeleton width="10rem" styleClass="mb-3"></p-skeleton>
+    <p-skeleton width="20rem" styleClass="mb-5"></p-skeleton>
+  </div>
+  <div class="flex justify-content-center flex-wrap mb-3">
+    <p-skeleton width="20rem" height="5rem"></p-skeleton>
+  </div>
+  <div class="flex justify-content-center flex-wrap mb-3">
+    <p-skeleton width="20rem" height="4rem"></p-skeleton>
+  </div>
+  

package/src/lib/shared/skeletons/w-skeleton-profile-sidebar/w-skeleton-profile-sidebar.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-profile-sidebar/w-skeleton-profile-sidebar.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-profile-sidebar',
+  templateUrl: './w-skeleton-profile-sidebar.component.html',
+  styleUrls: ['./w-skeleton-profile-sidebar.component.css']
+})
+export class WSkeletonProfileSidebarComponent {
+
+}

package/src/lib/shared/skeletons/w-skeleton-query-builder/w-skeleton-query-builder.component.html

@@ -0,0 +1,41 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="flex justify-content-between flex-wrap card-container">
+            <div class="flex align-items-center justify-content-center m-2">
+                <button pButton pRipple type="button" icon="pi pi-chevron-down" class="p-button-rounded p-button-text"></button>
+                <p-selectButton [options]="stateOptions" optionLabel="label" optionValue="value"></p-selectButton>
+            </div>
+            <div class="flex align-items-center justify-content-center m-2"></div>
+            <div class="flex align-items-center justify-content-center m-2 gap-3">
+                <p-button [label]="rule" styleClass="p-button-outlined" icon="pi pi-plus"></p-button>
+                <p-button [label]="ruleSet" styleClass="p-button-outlined" icon="pi pi-plus"></p-button>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 pl-6">
+        <div class="flex justify-content-between flex-wrap card-container wapp-query-builder-skeleton-rule pl-3">
+            <div class="flex align-items-center justify-content-center gap-3">
+                <div class="p-3 p-0 p-dropdown list-none bg-white"><p-skeleton width="8rem"></p-skeleton></div>
+                <div class="p-3 p-0 p-dropdown list-none bg-white"><p-skeleton width="8rem"></p-skeleton></div>
+                <div class="p-3 p-0 p-dropdown list-none bg-white"><p-skeleton width="4rem"></p-skeleton></div>
+            </div>
+            <div class="flex align-items-center justify-content-center m-2"></div>
+            <div class="flex align-items-center justify-content-center m-2">
+                <p-button styleClass="p-button-outlined p-button-danger" icon="pi pi-times"></p-button>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 pl-6">
+        <div class="flex justify-content-between flex-wrap card-container wapp-query-builder-skeleton-rule pl-3">
+            <div class="flex align-items-center justify-content-center gap-3">
+                <div class="p-3 p-0 p-dropdown list-none bg-white"><p-skeleton width="8rem"></p-skeleton></div>
+                <div class="p-3 p-0 p-dropdown list-none bg-white"><p-skeleton width="8rem"></p-skeleton></div>
+                <div class="p-3 p-0 p-dropdown list-none bg-white"><p-skeleton width="4rem"></p-skeleton></div>
+            </div>
+            <div class="flex align-items-center justify-content-center m-2"></div>
+            <div class="flex align-items-center justify-content-center m-2">
+                <p-button styleClass="p-button-outlined p-button-danger" icon="pi pi-times"></p-button>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/shared/skeletons/w-skeleton-query-builder/w-skeleton-query-builder.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-query-builder/w-skeleton-query-builder.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-query-builder',
+  templateUrl: './w-skeleton-query-builder.component.html',
+  styleUrls: ['./w-skeleton-query-builder.component.css']
+})
+export class WSkeletonQueryBuilderComponent {
+  @Input('rule') rule: string = "Rule";
+  @Input('ruleSet') ruleSet: string = "Rule set";
+
+  stateOptions: any[] = [{label: 'And', value: 'and'}, {label: 'Or', value: 'or'}];
+}

package/src/lib/shared/skeletons/w-skeleton-sidebar/w-skeleton-sidebar.component.html

@@ -0,0 +1,8 @@
+<div *ngFor="let item of items" class="w-view-text-content grid flex align-content-center">
+    <div class="col-4 body">
+        <p class="w-view-text-label-color"> <p-skeleton></p-skeleton> </p>
+    </div>
+    <div class="col-8 body">
+        <p> <p-skeleton></p-skeleton> </p>
+    </div>
+</div>

package/src/lib/shared/skeletons/w-skeleton-sidebar/w-skeleton-sidebar.component.scss

@@ -0,0 +1,26 @@
+@import './../../../../styles/_variables.scss';
+
+.w-view-text-label-color {
+    color: $black400;
+}
+
+.w-view-text-content {
+    height: 40px;
+}
+
+:host ::ng-deep .w-view-text-content .col-4 {
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-view-text-content .col-8 {
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-view-text-content.grid {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -$spacingL !important;
+    margin-left: -$spacingL !important;
+    margin-top: $spacingXXS !important;
+    margin-bottom: -$spacingXXS !important;
+}

package/src/lib/shared/skeletons/w-skeleton-sidebar/w-skeleton-sidebar.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-sidebar/w-skeleton-sidebar.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-sidebar',
+  templateUrl: './w-skeleton-sidebar.component.html',
+  styleUrls: ['./w-skeleton-sidebar.component.scss']
+})
+export class WSkeletonSidebarComponent implements OnInit {
+  @Input('itemsNumber') items: any = 6;
+
+  ngOnInit(): void {
+    this.items = Array(this.items);
+  }
+}

package/src/lib/shared/skeletons/w-skeleton-timeline/w-skeleton-timeline.component.html

@@ -0,0 +1,11 @@
+<p-timeline [value]="events" [align]="'alternate'" styleClass="customized-timeline">
+    <ng-template pTemplate="marker" let-event>
+        <p-skeleton shape="circle" size="2rem"></p-skeleton>
+    </ng-template>
+    <ng-template pTemplate="content" let-event>
+        <w-panel [reduced]="true">
+            <p-skeleton class="col-12" width="100%" height="20px"></p-skeleton>
+            <p-skeleton class="col-12" width="100%" height="100px"></p-skeleton>
+        </w-panel>
+    </ng-template>
+</p-timeline>

package/src/lib/shared/skeletons/w-skeleton-timeline/w-skeleton-timeline.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-timeline/w-skeleton-timeline.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-timeline',
+  templateUrl: './w-skeleton-timeline.component.html',
+  styleUrls: ['./w-skeleton-timeline.component.css']
+})
+export class WSkeletonTimelineComponent implements OnInit {
+  @Input('eventsNumber') eventsNumber: number = 3;
+
+  events: any[] = []
+
+  ngOnInit(): void {
+    this.events.length = this.eventsNumber;
+  }
+}

package/src/lib/shared/skeletons/w-skeleton-tree/w-skeleton-tree.component.html

@@ -0,0 +1,10 @@
+<div class="border-round border-1 surface-border p-4 surface-card">
+    <ul class="m-0 p-0 list-none">
+        <li *ngFor="let row of rowsArray">
+            <p-skeleton width="100%" height="{{rowHeight}}" styleClass="mb-4"></p-skeleton>
+        </li>
+        <li>
+            <p-skeleton width="100%" height="{{rowHeight}}"></p-skeleton>
+        </li>
+    </ul>
+</div>

package/src/lib/shared/skeletons/w-skeleton-tree/w-skeleton-tree.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-tree/w-skeleton-tree.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-tree',
+  templateUrl: './w-skeleton-tree.component.html',
+  styleUrls: ['./w-skeleton-tree.component.css']
+})
+export class WSkeletonTreeComponent implements OnInit {
+  @Input('rowsToShow') rowsToShow: number = 4;
+  @Input('rowHeight') rowHeight: string = '24px';
+  rowsArray: any = [];
+
+  constructor(){}
+
+  ngOnInit(): void{
+    this.rowsArray.length = this.rowsToShow-1;
+  }
+}

package/src/lib/shared/skeletons/w-skeleton-user-profile-info-sidebar/w-skeleton-user-profile-info-sidebar.component.html

@@ -0,0 +1,55 @@
+<div class="flex mb-3">
+    <div class="mb-2 justify-content-center">
+      <div class="inline-block w-2rem h-8rem p-4 mx-5">
+        <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
+      </div>
+      <div class="inline-block w-25rem h-8rem p-4 ml-3">
+        <p-skeleton width="20rem" styleClass="mb-2"></p-skeleton>
+        <p-skeleton width="15rem" styleClass="mb-4"></p-skeleton>
+        <p-skeleton width="10rem"></p-skeleton>
+      </div>
+      <div class="px-5 pb-2">
+        <div class="grid">
+          <div class="col-4">
+            <p-skeleton width="8rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-8">
+            <p-skeleton width="16rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-4">
+            <p-skeleton width="8rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-8">
+            <p-skeleton width="16rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-4">
+            <p-skeleton width="8rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-8">
+            <p-skeleton width="16rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-4">
+            <p-skeleton width="8rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-8">
+            <p-skeleton width="16rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-4">
+            <p-skeleton width="8rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-8">
+            <p-skeleton width="16rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-4">
+            <p-skeleton width="8rem" styleClass="mb-3"></p-skeleton>
+          </div>
+          <div class="col-8">
+            <p-skeleton width="16rem" styleClass="mb-3"></p-skeleton>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+    </div>
+  </div>
+  

package/src/lib/shared/skeletons/w-skeleton-user-profile-info-sidebar/w-skeleton-user-profile-info-sidebar.component.spec.ts

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

package/src/lib/shared/skeletons/w-skeleton-user-profile-info-sidebar/w-skeleton-user-profile-info-sidebar.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-user-profile-info-sidebar',
+  templateUrl: './w-skeleton-user-profile-info-sidebar.component.html',
+  styleUrls: ['./w-skeleton-user-profile-info-sidebar.component.css']
+})
+export class WSkeletonUserProfileInfoSidebarComponent {
+
+}

package/src/lib/sidebar/w-sidebar/w-sidebar.component.html

@@ -0,0 +1,26 @@
+<p-sidebar [(visible)]="visible" position="right" [showCloseIcon]="showCloseIcon" [modal]="true" [blockScroll]="true" [dismissible]="closeOnOverlay" [styleClass]="styleClass" class="wapp-sidebar">
+    <ng-template pTemplate="header">
+        <span *ngIf="icon && getIconType() == iconType.pIcon" class="w-sidebar-icon icon-large-size text846" [ngClass]="icon"></span>
+        <w-icons *ngIf="icon && getIconType() == iconType.wIcon" class="w-sidebar-icon" [name]="icon" color="var(--text-color)" [width]="24" [height]="24"></w-icons>
+        <div *ngIf="icon && getIconType() == iconType.urlIcon" class="flex align-content-start flex-wrap">
+            <div class="flex align-items-center justify-content-center w-sidebar-img-container">
+                <span class="w-sidebar-span-img-container w-sidebar-icon flex align-items-center justify-content-center" [ngStyle]="{'width.px': iconWidth, 'height.px': iconHeight}">
+                    <img class="w-sidebar-img-responsive" [src]="icon">
+                </span>
+            </div>
+            <div class="flex align-items-center justify-content-center">
+                <span class="w-sidebar-title-text m-0">{{headerTitle}}</span>
+            </div>
+        </div>
+        
+        <span *ngIf="icon == null || getIconType() != iconType.urlIcon" class="w-sidebar-title-text m-0">{{headerTitle}}</span>
+    </ng-template>
+    
+    <ng-template pTemplate="content">
+        <div [ngClass]="{'w-sidebar-content grid' : activeGrid}">
+            <ng-content></ng-content>
+        </div>
+    </ng-template>
+
+    <ng-template pTemplate="footer"></ng-template>
+</p-sidebar>