ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/layout/w-body-grid/w-body-grid.component.scss

@@ -0,0 +1,59 @@
+
+@import '../../../styles/_variables.scss';
+
+:host ::ng-deep .w-body-grid .col-1{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-2{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-3{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-4{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-5{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-6{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-7{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-8{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-9{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-10{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-11{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid .col-12{
+    padding: 8px 10px;
+}
+
+:host ::ng-deep .w-body-grid.grid{
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -10px;
+    margin-left: -10px;
+    margin-top: -8px;
+    margin-bottom: -8px;
+}

package/src/lib/layout/w-body-grid/w-body-grid.component.spec.ts

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

package/src/lib/layout/w-body-grid/w-body-grid.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'w-body-grid',
+  templateUrl: './w-body-grid.component.html',
+  styleUrls: ['./w-body-grid.component.scss']
+})
+export class WBodyGridComponent {
+
+}

package/src/lib/layout/w-container/w-container.component.scss

@@ -0,0 +1,9 @@
+@import '../../../styles/_variables.scss';
+
+.w-filter-panel-container {
+    padding: $spacingM;
+    background-color: $white;
+    border-radius: $spacingXS;
+    box-shadow: $boxShadowContainer;
+    margin-bottom: $spacingM;
+}

package/src/lib/layout/w-container/w-container.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'w-container',
+  template: `
+    <div class="w-filter-panel-container">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styleUrls: ['./w-container.component.scss']
+})
+export class WContainerComponent {
+
+}

package/src/lib/layout/w-footer/w-footer.component.html

@@ -0,0 +1,11 @@
+
+<div class="w-footer flex justify-content-between flex-wrap  w-full">
+    <div class="w-info-footer flex align-items-center justify-content-center">
+        <w-logos [name]="'wappingIsotype'" [width]="16" [height]="20"></w-logos>
+        <div class="body text846">Wapping Networks S.L. © {{year}} </div>
+    </div>
+    <div class="w-support-footer flex align-items-center justify-content-center">
+        <div class="subtitle2 text846">{{supportLabel}}</div>
+        <w-icons *ngIf="support" name="support" pTooltip="support" [width]="16" [height]="16"></w-icons>
+    </div>
+</div>

package/src/lib/layout/w-footer/w-footer.component.scss

@@ -0,0 +1,17 @@
+@import './../../../styles/_variables.scss';
+
+.w-footer{
+    padding: calc($spacingXS - $borderWidth) 20px $spacingS 20px;
+    padding-top: $spacingXS !important;
+    border-top: $borderWidth solid $black200; 
+    background-color: #f8f9fa;   
+    max-height: 40px;
+}
+
+.w-info-footer{
+    gap: $spacingS;
+}
+
+.w-support-footer{
+    gap: $spacingS;
+}

package/src/lib/layout/w-footer/w-footer.component.spec.ts

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

package/src/lib/layout/w-footer/w-footer.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'w-footer',
+  templateUrl: './w-footer.component.html',
+  styleUrls: ['./w-footer.component.scss']
+})
+export class WFooterComponent implements OnInit{
+  
+  @Input('supportLabel') supportLabel!: string;
+  @Input('support') support: boolean = false;
+
+  year!: any;
+
+  ngOnInit(): void {
+    this.year = new Date().getFullYear();
+  }
+
+}

package/src/lib/layout/w-header-panel/w-header-panel.component.html

@@ -0,0 +1,9 @@
+<div class="w-header-panel flex flex-row-reverse flex-wrap" [ngClass]="{'justify-content-between' : showButtonBack}">
+    <div class="w-action-buttons flex flex-column lg:flex-row-reverse">
+        <ng-content select=".main-actions"></ng-content>
+        <ng-content select=".secondary-actions"></ng-content>
+    </div>
+    <div *ngIf="showButtonBack" class="flex">
+        <w-button class="flex align-items-center justify-content-center" type="text" icon="pi-arrow-left" (onClick)="onButtonBack($event)"></w-button>
+    </div>
+</div>

package/src/lib/layout/w-header-panel/w-header-panel.component.scss

@@ -0,0 +1,29 @@
+@import './../../../styles/_variables.scss';
+@import 'primeflex/primeflex.scss';
+
+.w-header-panel{
+    padding: $spacingS;
+    background-color: $white;
+    box-shadow: $boxShadowContainer;
+    border-radius: $borderRadius;   
+}
+
+.w-action-buttons{
+    gap: $spacingXXXL;
+}
+
+@media screen and (max-width: 992px) {
+    .w-action-buttons{
+        gap: $spacingS;
+    }
+}
+
+:host ::ng-deep .main-actions{
+    @include styleclass('flex flex-row-reverse');
+    gap: $spacingM;
+}
+
+:host ::ng-deep .secondary-actions{
+    @include styleclass('flex flex-row-reverse');
+    gap: $spacingXS;
+}

package/src/lib/layout/w-header-panel/w-header-panel.component.spec.ts

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

package/src/lib/layout/w-header-panel/w-header-panel.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'w-header-panel',
+  templateUrl: './w-header-panel.component.html',
+  styleUrls: ['./w-header-panel.component.scss']
+})
+export class WHeaderPanelComponent {
+  @Input('showButtonBack') showButtonBack: boolean = false;
+  @Input("backToCustomRoute") public backToCustomRoute!: string;
+  @Output('onClickButtonBack') onClcikButtonBack: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+      private location: Location,
+      private router: Router
+  ){}
+
+  onButtonBack(event: any){
+    if(this.backToCustomRoute){
+      this.router.navigate([this.backToCustomRoute])
+      return
+    }
+    this.location.back();
+  }
+}

package/src/lib/layout/w-navbar/w-navbar.component.html

@@ -0,0 +1,26 @@
+<w-container>
+  <div class="flex wrap navbar-margins">
+      <div class="flex flex-column sm:flex-row align-items-center gap-4">
+        <nav class="layout-breadcrumb">
+          <ol>
+              <ng-template ngFor let-item let-last="last" [ngForOf]="breadcrumbs$ | async">
+                  <li>{{item.label}}</li>
+                  <li *ngIf="!last" class="layout-breadcrumb-chevron"> | </li>
+              </ng-template>
+          </ol>
+        </nav>
+      </div>
+      <div class="flex sm:ml-auto">
+        <div class="navbar-button-spacing">
+          <!-- ToDo remplace with w-button -->
+          <w-button icon="pi pi-check" styleClass="p-button-outlined p-button-secondary" icon="pi pi-check"></w-button>
+          <p-button icon="pi pi-check" styleClass="p-button-outlined p-button-seco  ndary" icon="pi pi-check"></p-button>
+        </div>
+        <div class="navbar-button-spacing">
+          <!-- ToDo remplace with w-button -->
+          <p-button label="Submit"></p-button>
+          <p-button label="Submit"></p-button>
+        </div>
+      </div>
+  </div>
+</w-container>

package/src/lib/layout/w-navbar/w-navbar.component.scss

@@ -0,0 +1,26 @@
+@import './../../../styles/_variables.scss';
+
+.breadcrumb-text {
+  text-decoration: none;
+  color: inherit;
+}
+
+::ng-deep .layout-breadcrumb ol {
+	display: flex;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	gap: $spacingXS !important;
+	flex-wrap: wrap;
+	color: var(--text-color-secondary);
+}
+.navbar-margins {
+  margin: $spacingXS $spacingZero $spacingXS $spacingXXS;
+}
+.navbar-button-spacing {
+  display: flex;
+  gap: $spacingM;
+  margin-left: $spacingXXL;
+  margin-right: $spacingXXS;
+}

package/src/lib/layout/w-navbar/w-navbar.component.spec.ts

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

package/src/lib/layout/w-navbar/w-navbar.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+interface Breadcrumb {
+  label: string;
+  url?: string;
+}
+
+@Component({
+  selector: 'w-navbar',
+  templateUrl: './w-navbar.component.html',
+  styleUrls: ['./w-navbar.component.scss']
+})
+export class WNavbarComponent {
+
+  private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+
+    readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+    constructor(private router: Router) {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(event => {
+            const root = this.router.routerState.snapshot.root;
+            const breadcrumbs: Breadcrumb[] = [];
+            this.addBreadcrumb(root, [], breadcrumbs);
+
+            this._breadcrumbs$.next(breadcrumbs);
+        });
+    }
+
+    private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+        const routeUrl = parentUrl.concat(route.url.map(url => url.path));
+        const breadcrumb = route.data['breadcrumb'];
+        const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+        if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+            breadcrumbs.push({
+                label: route.data['breadcrumb'],
+                url: '/' + routeUrl.join('/')
+            });
+        }
+
+        if (route.firstChild) {
+            this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+        }
+    }
+}

package/src/lib/layout/w-panel/w-panel.component.html

@@ -0,0 +1,14 @@
+<div [ngClass]="{ 'w-panel': !reduced, 'w-reduced-panel': reduced}" class="w-full h-full">
+    <div *ngIf="activeMenu == true" class="flex flex-wrap" [ngClass]="{'justify-content-between': title, 'justify-content-end': !title}">
+        <w-panel-title *ngIf="title" class="flex" [title]="title"></w-panel-title>
+        <div class="flex">
+           <p-button icon="pi pi-ellipsis-v" styleClass="w-menu-button-x-small p-button-text" (onClick)="menu.toggle($event)"></p-button>
+            <p-tieredMenu styleClass="w-panel-menu" #menu [model]="menuOptions" [popup]="true"></p-tieredMenu>
+        </div>
+    </div>
+    <w-panel-title *ngIf="title && activeMenu == false" [title]="title"></w-panel-title>
+    <w-panel-subtitle *ngIf="subtitle" [subtitle]="subtitle"></w-panel-subtitle>
+    <div class="w-panel-content" [ngClass]="getCombinedClasses()" [style.height]="heightOverflow" [style.max-height]="maxHeightOverflow">
+        <ng-content></ng-content>
+    </div>
+</div>

package/src/lib/layout/w-panel/w-panel.component.scss

@@ -0,0 +1,122 @@
+@import '../../../styles/_variables.scss';
+
+.w-panel{
+    padding: $spacingM;
+    background-color: var(--bgcolor);
+    border-radius: $borderRadius;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
+}
+
+.w-reduced-panel{
+    padding: $spacingS;
+    background-color: $white;
+    border-radius: $borderRadius;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
+}
+
+.w-panel-justify-gap{
+    gap: $spacingXS;
+}
+
+:host ::ng-deep .w-panel-content .col-1{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-2{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-3{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-4{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-5{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-6{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-7{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-8{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-9{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-10{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-11{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content .col-12{
+    padding: $spacingXXS $spacingL !important;
+}
+
+:host ::ng-deep .w-panel-content.grid{
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -$spacingL !important;
+    margin-left: -$spacingL !important;
+    margin-top: -$spacingXXS !important;
+    margin-bottom: -$spacingXXS !important;
+}
+
+.w-panel-overflow{
+    overflow: auto;
+    box-sizing: border-box;
+
+    &.w-panel-content.grid {
+        margin-top: 0px !important;
+        margin-bottom: 0px !important;
+        margin-right: 0px !important;
+    }
+}
+
+:host ::ng-deep .w-menu-button-x-small.p-button.p-button-icon-only{
+    @extend .w-button-small-text-label-text; 
+    height: 20px;
+    width: 20px;
+    padding: $spacingXXS;
+    border: none;
+}
+
+:host ::ng-deep .w-menu-button-x-small.p-button:enabled:hover{
+    color: $secondary400; 
+    background: none;
+    border: none;
+}
+
+:host ::ng-deep .w-menu-button-x-small.p-button:focus{
+    background: none;
+    border: none;
+    outline: $borderWidth solid $primary50;
+    @extend .focus; 
+}
+
+:host ::ng-deep .w-panel-menu.p-tieredmenu{
+    @extend .w-control-button-small-label-text;
+    color: $text846;
+}
+
+:host ::ng-deep .w-panel-menu.p-tieredmenu .p-menuitem.p-menuitem-active{
+    @extend .w-control-button-small-label-text;
+    color: $text846;
+}
+
+:host ::ng-deep .w-panel-menu.p-tieredmenu .p-menuitem-link .p-menuitem-icon{
+    @extend .w-input-small-text-icon;
+}

package/src/lib/layout/w-panel/w-panel.component.spec.ts

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

package/src/lib/layout/w-panel/w-panel.component.ts

@@ -0,0 +1,47 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'w-panel',
+  templateUrl: './w-panel.component.html',
+  styleUrls: ['./w-panel.component.scss']
+})
+export class WPanelComponent implements OnInit {
+  @Input('width') width: any;
+  @Input('title') title!: string;
+  @Input('subtitle') subtitle!: string;
+  @Input('activeGrid') activeGrid: boolean = true;
+  @Input('reduced') reduced: boolean = false;
+  @Input('justifyContent') justifyContent: string = '';
+  @Input('activeOverflow') activeOverflow: boolean = false;
+  @Input('heightOverflow') heightOverflow!: string;
+  @Input('maxHeightOverflow') maxHeightOverflow!: string;
+  @Input('backgroundColor') backgroundColor: string = '#fff';
+
+  @Input('activeMenu') activeMenu: boolean = false;
+  @Input('menuOptions') menuOptions!: MenuItem[];
+  
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.elementRef.nativeElement.style.setProperty("--bgcolor", this.backgroundColor);
+  }
+  
+  getCombinedClasses() {
+    let classes = [];
+  
+    if (this.activeGrid) {
+      classes.push('w-panel-content grid');
+    }
+  
+    if (this.justifyContent.length > 0) {
+      classes.push('flex flex-wrap '+this.justifyContent);
+    }
+
+    if(this.activeOverflow){
+      classes.push('w-panel-overflow');
+    }
+  
+    return classes.join(' ');
+  }
+}

package/src/lib/layout/w-panel-grid/w-panel-grid.component.html

@@ -0,0 +1,3 @@
+<div class="w-panel-grid grid">
+    <ng-content></ng-content>
+</div>