ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/shared/service/api/api.service.ts

@@ -0,0 +1,116 @@
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, forkJoin, map, of, switchMap, tap } from "rxjs";
+import { QbPanelFilter } from "../../models/filter-panel/qb-panel-filter.model";
+import { QbPanelToFields } from "../../models/filter-panel/qb-panel-to-fields.model";
+import { GMCountry } from "../../models/filter-panel/gmcountry-model";
+import { MessageService } from "primeng/api";
+import { GMLocality } from "../../models/filter-panel/gmlocality.model";
+import { GMPostalCode } from "../../models/filter-panel/gmpostalcode.model";
+import { GMAreaLevel2 } from "../../models/filter-panel/gmarealevel2.model";
+import { GMAreaLevel1 } from "../../models/filter-panel/gmarealevel1.model";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  
+  constructor(
+    private http: HttpClient,
+    private messageService: MessageService,  
+  ) { }
+
+  getFilterPanel(apiUrl: string, token: string, commonDataApiUrl: string, commonDataApiToken: string, filterId?: string): Observable<QbPanelFilter> {
+    let url = filterId ? `${apiUrl}/${filterId}` : `${apiUrl}`;
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${token}` });    
+    let fieldsModified: any; 
+    
+    return this.http.get<any>(url, {headers: headers}).pipe(
+      switchMap((filtersPanel: QbPanelFilter) => {
+        const fields = filtersPanel.qbpanelToFields;
+        return forkJoin(
+          fields.map((field: QbPanelToFields) => {
+            fieldsModified = field;
+            if(field.qbfilterField.hasListOfValues) {
+              return this.getFieldValues(commonDataApiUrl, commonDataApiToken, field.qbfilterField.sqlGetListValues).pipe(
+                map(values => {
+                  const arrayOfValues = Object.keys(values).map((key: any) => ({
+                    name: values[key],
+                    value: +key
+                  }));
+                  field.qbfilterField.listOfValues = arrayOfValues;
+                  return field;
+                })
+              );
+            } else {
+              return of(field);
+            }
+          })).pipe(
+                map(modifiedItems => {
+                  filtersPanel.qbpanelToFields = modifiedItems;
+                  return filtersPanel;
+                })
+              );
+            }
+          )
+    );
+  }
+
+  getFieldValues(commonDataApiUrl: string, commonDataApiToken: string, sqlValueList: string): Observable<string[]> {
+    let url = `${commonDataApiUrl}/fields/${sqlValueList}/values`;
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${commonDataApiToken}` });    
+    return this.http.get<string[]>(url, {headers})
+      .pipe(
+        tap(_ => { })
+      );
+  }
+
+  getCountries(segmentationApi: string, segmentationApiToken: string):Observable<GMCountry[]>{
+    let url = `${segmentationApi}/countries`;
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${segmentationApiToken}` });    
+    return this.http.get<GMCountry[]>(url, {headers})
+      .pipe(
+        tap(_ => { }),
+      );
+  }
+
+  getAreaLevels1(countryIds: number[], segmentationApi: string, segmentationApiToken: string): Observable<GMAreaLevel1[]>{
+    let params = countryIds.map(id => id.toString()).join('&gmCountryIds=')
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${segmentationApiToken}` });    
+    let url = `${segmentationApi}/arealevels1?gmCountryIds=`+params;
+    return this.http.get<GMAreaLevel1[]>(url, {headers})
+      .pipe(
+        tap(_ => { }),
+      );
+  }
+
+  getAreaLevels2(areaLevel1Ids: number[], segmentationApi: string, segmentationApiToken: string): Observable<GMAreaLevel2[]>{
+    let params = areaLevel1Ids.map(id => id.toString()).join('&gmAreaLevel1Ids=')
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${segmentationApiToken}` });    
+    let url = `${segmentationApi}/arealevels2?gmAreaLevel1Ids=`+params;
+    return this.http.get<GMAreaLevel2[]>(url, {headers})
+      .pipe(
+        tap(_ => { }),
+      );
+  }
+
+  getLocalities(areaLevel2Ids: number[], segmentationApi: string, segmentationApiToken: string): Observable<GMLocality[]>{
+    let params = areaLevel2Ids.map(id => id.toString()).join('&gmAreaLevel2Ids=')
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${segmentationApiToken}` });    
+    let url = `${segmentationApi}/localities?gmAreaLevel2Ids=`+params;
+    return this.http.get<GMLocality[]>(url, {headers})
+      .pipe(
+        tap(_ => { }),
+      );
+  }
+
+  getPostalCodes(localityIds: number[], segmentationApi: string, segmentationApiToken: string): Observable<GMPostalCode[]>{
+    let params = localityIds.map(id => id.toString()).join('&gmLocalityIds=')
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json', Authorization: `Bearer ${segmentationApiToken}` });    
+    let url = `${segmentationApi}/postalcodes?gmLocalityIds=`+params;
+    return this.http.get<GMPostalCode[]>(url, {headers})
+      .pipe(
+        tap(_ => { }),
+      );
+  }
+}

package/src/lib/shared/services/form-control.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FormControlService } from './form-control.service';
+
+describe('FormControlService', () => {
+  let service: FormControlService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FormControlService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/shared/services/form-control.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormControl } from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FormControlService {
+
+  constructor() { }
+
+  convertToFormControl(absCtrl: AbstractControl | null): FormControl {
+    const ctrl = absCtrl as FormControl;
+    return ctrl;
+  }
+}

package/src/lib/shared/services/modal.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ModalService } from './modal.service';
+
+describe('ModalService', () => {
+  let service: ModalService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ModalService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/shared/services/modal.service.ts

@@ -0,0 +1,71 @@
+import { Injectable, Type } from '@angular/core';
+import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+export interface ModalSize {
+  width: string;
+  height?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalService {
+
+  constructor(private dialogService: DialogService, private breakpointObserver: BreakpointObserver) { }
+
+  dialogRef: any;
+  smallDialogSubscription: any;
+  dialogData: any;
+
+  open(componentOrTemplateRef: Type<any>, modalConfig?: DynamicDialogConfig, modalSize?: ModalSize,): DynamicDialogRef {
+    if (!modalConfig) {
+      modalConfig = new DynamicDialogConfig;
+    }
+
+    if (modalConfig.data) {
+      this.dialogData = modalConfig.data;
+    }
+
+    // TODO dejo esto comentado como guía para completarlo más adelante
+    //modalConfig.maxWidth = '100vw';
+
+    this.dialogRef = this.dialogService.open(componentOrTemplateRef, modalConfig);
+
+    this.smallDialogSubscription = this.breakpointObserver.observe([Breakpoints.XSmall])
+      .subscribe(size => {
+        if (size.matches) {
+          //this.dialogRef.updateSize('100%', '100%');
+          //this.dialogRef.hasBackdrop = false;
+        } else {
+          if (!modalSize) {
+            //this.dialogRef.updateSize('auto', 'auto');
+          }
+          else {
+            //this.dialogRef.updateSize(modalSize.width, modalSize.height);
+          }
+        }
+      });
+
+    return this.dialogRef;
+  }
+
+  close(): void {
+    this.smallDialogSubscription.unsubscribe();
+    this.dialogRef.close();
+  }
+  
+  getComponentInstance<T>() {
+    let dialogComponentRef = this.dialogService.dialogComponentRefMap.get(this.dialogRef);
+    dialogComponentRef!.changeDetectorRef.detectChanges();
+
+    return dialogComponentRef?.instance.componentRef.instance as T;
+  }
+
+  getComponentRef() {
+    let dialogComponentRef = this.dialogService.dialogComponentRefMap.get(this.dialogRef);
+    dialogComponentRef!.changeDetectorRef.detectChanges();
+
+    return dialogComponentRef?.instance.componentRef;
+  }
+}

package/src/lib/shared/services/session-storage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SessionStorageService } from './session-storage.service';
+
+describe('SessionStorageService', () => {
+  let service: SessionStorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SessionStorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/shared/services/session-storage.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { StoredFilterPanelQuery } from '../models/stored-filter-panel-query.model';
+import { ComponentsTenantStorage } from '../models/components-tenant-storage.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SessionStorageService {
+
+  constructor() { }
+
+  setComponentsTenantStorage(tenantId: string, tenantStorage: ComponentsTenantStorage) {
+    sessionStorage.setItem(tenantId, JSON.stringify(tenantStorage));
+  }
+
+  getComponentsTenantStorage(tenantId: string): ComponentsTenantStorage {
+    return JSON.parse(sessionStorage.getItem(tenantId)!);
+  }
+
+  setLastFilterPanelQuery(tenantId: string, storedQuery: StoredFilterPanelQuery | null) {
+
+    if(storedQuery != undefined) {
+      let allFilters:ComponentsTenantStorage = this.getAllLastFilterPanelQueries(tenantId);
+      if(allFilters) {
+        allFilters[storedQuery.id] = storedQuery;
+        sessionStorage.setItem(tenantId, JSON.stringify(allFilters));
+      } else {
+        let tenantStorage: ComponentsTenantStorage = {
+          [storedQuery.id]: storedQuery
+        }
+        sessionStorage.setItem(tenantId, JSON.stringify(tenantStorage));
+      }
+    }
+  }
+
+  getAllLastFilterPanelQueries(tenantId: string): ComponentsTenantStorage {
+    return this.getComponentsTenantStorage(tenantId);
+  }
+
+  getLastFilterPanelQuery(tenantId: string, filterId: string): StoredFilterPanelQuery {
+    return this.getComponentsTenantStorage(tenantId)?.[filterId]!;
+  }
+
+  removeLastFilterPanelQuery(tenantId: string, filterId: string) {
+    let tenantStorage: ComponentsTenantStorage = JSON.parse(sessionStorage.getItem(tenantId)!);
+    tenantStorage[filterId] = null;
+    this.setComponentsTenantStorage(tenantId, tenantStorage);
+  }
+}

package/src/lib/shared/services/tree.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from "@angular/core";
+import { TreeNode } from "primeng/api";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TreeService {
+
+  constructor() { }
+
+  elementToTreeNodeMap<T>(elements: T[], getChildFn: (element: T) => T[] | null, parent?: TreeNode): TreeNode[] {
+    return elements.map((element:any) => {
+      let treeNode: TreeNode = {
+        label: element.name,
+        data: element,
+        children: [],
+        expanded: false,
+        parent: parent
+      };
+
+      const childElements = getChildFn(element);
+
+      if (childElements) {
+        treeNode.children = this.elementToTreeNodeMap(childElements, getChildFn, treeNode);
+      }
+
+      return treeNode;
+    });
+  }
+}

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

@@ -0,0 +1,26 @@
+<w-body-container>
+    <w-header-panel 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>
+    <ng-container *ngFor="let item of columnsArray">
+        <w-panel *ngIf="columnsNumber == 1" class="col-12">
+            <p-skeleton class="col-12" width="100%" height="20px"></p-skeleton>
+            <p-skeleton class="col-12" height="500px"></p-skeleton>
+        </w-panel>
+        <w-panel *ngIf="columnsNumber == 3" class="col-4">
+            <p-skeleton class="col-12" width="100%" height="20px"></p-skeleton>
+            <p-skeleton class="col-12" height="500px"></p-skeleton>
+        </w-panel>
+        <w-panel *ngIf="columnsNumber == 2" class="col-6">
+            <p-skeleton class="col-12" width="100%" height="20px"></p-skeleton>
+            <p-skeleton class="col-12" height="500px"></p-skeleton>
+        </w-panel>
+    </ng-container>
+    <w-panel class="col-12">
+        <p-skeleton class="col-12" width="100%" height="20px"></p-skeleton>
+        <p-skeleton class="col-12" height="500px"></p-skeleton>
+    </w-panel>
+</w-body-container>

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

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

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

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-edit',
+  templateUrl: './w-skeleton-edit.component.html',
+  styleUrls: ['./w-skeleton-edit.component.css']
+})
+export class WSkeletonEditComponent {
+  @Input('columnsNumber') columnsNumber: number = 3;
+  columnsArray: any[] = new Array(this.columnsNumber);
+
+  ngOnInit(): void{
+    this.columnsArray.length = this.columnsNumber;
+  }
+}

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

@@ -0,0 +1,37 @@
+<w-body-container>
+    <w-header-panel class="col-12">
+        <div class="main-actions" >
+            <p-skeleton height="32px" width="129px"></p-skeleton>
+        </div>
+    </w-header-panel>
+
+    <w-panel class="col-12 xl:col-8">
+        <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-12" label="''" height="140px"></w-skeleton-input-generic>
+
+        <w-skeleton-input-generic class="col-6 xl:col-3" label="''"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-6 xl:col-3" label="''"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-6 xl:col-3" label="''"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-6 xl:col-3" label="''"></w-skeleton-input-generic>
+
+        <w-skeleton-input-generic class="col-6 xl:col-4" label="''"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-6 xl:col-4" label="''"></w-skeleton-input-generic>
+        <w-skeleton-input-generic class="col-6 xl:col-4" label="''"></w-skeleton-input-generic>
+    </w-panel>
+    <w-panel class="col-12 xl:col-4">
+        <w-panel-grid class="col-12">
+            <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+            <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+            <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+            <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+            <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+            <w-skeleton-input-generic class="col-12" label="''"></w-skeleton-input-generic>
+        </w-panel-grid>
+    </w-panel>
+    <w-panel class="col-12 xl:col-12">
+        <w-skeleton-input-generic class="col-4" label="''"></w-skeleton-input-generic>
+    </w-panel>
+    <w-panel class="col-12 xl:col-12">
+        <w-skeleton-input-generic class="col-12" label="''" height="140px"></w-skeleton-input-generic>
+    </w-panel>
+</w-body-container>

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

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

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

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

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

@@ -0,0 +1,3 @@
+<w-panel-grid>
+    <w-skeleton-input-generic *ngFor="let row of rowsArray" class="col-12" [label]="'Label'"></w-skeleton-input-generic>
+</w-panel-grid>

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

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

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

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-form',
+  templateUrl: './w-skeleton-form.component.html',
+  styleUrls: ['./w-skeleton-form.component.css']
+})
+export class WSkeletonFormComponent implements OnInit {
+  @Input('rowsToShow') rowsToShow: number = 3;
+  rowsArray: any = [];
+
+  constructor(){}
+
+  ngOnInit(): void{
+    this.rowsArray.length = this.rowsToShow;
+  }
+}

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

@@ -0,0 +1,3 @@
+<w-panel-grid>
+    <w-skeleton-input-generic class="col-12" [hasAlign]="false" [height]="height"></w-skeleton-input-generic>
+</w-panel-grid>

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

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

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

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-skeleton-generic',
+  templateUrl: './w-skeleton-generic.component.html',
+  styleUrls: ['./w-skeleton-generic.component.css']
+})
+export class WSkeletonGenericComponent {
+  @Input('height') height: string = "300px"; 
+}

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

@@ -0,0 +1,3 @@
+<p-skeleton width="100%" height="4rem" styleClass="mb-2"></p-skeleton>
+<p-skeleton width="100%" height="30rem" styleClass="mb-2"></p-skeleton>
+<p-skeleton width="100%" height="4rem"></p-skeleton>

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

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

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

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

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

@@ -0,0 +1,4 @@
+.w-height-label { 
+    padding-top: 12px;
+    padding-bottom: 8px;
+}

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

@@ -0,0 +1,6 @@
+<div *ngIf="hasAlign" class="flex align-items-center w-height-label">
+    <label *ngIf="label != undefined" for="input-skeleton-generic">
+        <p-skeleton height="16px" width="70px"></p-skeleton>
+    </label>
+</div>
+<p-skeleton id='input-skeleton-generic' [height]="height" width="width"></p-skeleton>

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

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