ngx-wapp-components 1.8.2 → 1.8.4

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

@@ -0,0 +1,50 @@
+<div *ngIf="activeToggleButton" class="w-tree-buttontoggle flex justify-content-end flex-wrap card-container green-container">
+    <div *ngIf="collapsedNodes else collapse">
+        <w-button  
+            size="small"    
+            type="secondary" 
+            icon="pi pi-plus" 
+            [label]="expandButtonLabel" 
+            (onClick)="expandAll()">
+        </w-button>
+    </div>
+    <ng-template #collapse>
+        <w-button   
+            size="small"
+            type="secondary"
+            icon="pi pi-minus"
+            [label]="collapseButtonLabel" 
+            (onClick)="collapseAll()">
+        </w-button>
+    </ng-template>
+</div>
+
+<p-tree class="w-full w-tree" #wTree
+    [value]="nodes" 
+    [(selection)]="selection"
+    (selectionChange)="onSelectionChange($event)" 
+    [selectionMode]="selectionMode" 
+    [loading]="loading"
+    [filter]="activeFilter" 
+    [filterPlaceholder]="filterPlaceholder" 
+    [propagateSelectionDown]="propagateSelectionDown"
+    [propagateSelectionUp]="propagateSelectionUp" 
+    [emptyMessage]="emptyMessage" 
+    [draggableNodes]="draggableNodes" 
+    [draggableScope]="draggableScope" 
+    [droppableNodes]="droppableNodes" 
+    [droppableScope]="droppableScope" 
+    (onNodeDrop)="onNodeDrope($event)" 
+    [virtualScroll]="activeVirtualScroll" 
+    [virtualScrollItemSize]="virtualScrollItemSize"
+    [scrollHeight]="scrollHeight" 
+    (onFilter)="onFilter($event)" 
+    styleClass="w-tree">
+    <ng-template let-node [pTemplate]="nodeItemTemplateName">
+        <div class="flex p-elemnt">
+                <span class="w-tree-icon flex align-items-center justify-content-center" *ngIf="node.icon && isPrimeIcon(node.icon)" [class]="getIcon(node.icon)"></span>
+                <w-icons class="w-tree-icon flex align-items-center" *ngIf="node.icon && isPrimeIcon(node.icon) == false" [name]="node.icon" [height]="16" [width]="18" [color]="'#2e3134'"></w-icons>
+                <div class="flex align-items-center">{{node.label}}</div>
+        </div>
+    </ng-template>
+</p-tree>

package/src/lib/tree/w-tree/w-tree.component.scss

@@ -0,0 +1,114 @@
+@import "../../../styles/_variables.scss";
+@import "../../search/w-input-search/w-input-search.component.scss";
+
+.w-tree-buttontoggle{
+    margin-bottom: $spacingXS;
+}
+
+:host ::ng-deep .w-tree.p-tree { 
+    padding: 0px;
+    border: none !important;
+    .p-tree-filter-container{
+        margin-bottom: $spacingXS;
+        padding-left: 70%;
+        width: 100%;
+    }
+
+    .p-tree-container{
+        padding: 0px, 20px, 16px 20px;
+    }
+}
+
+::ng-deep .w-tree .p-inputtext:enabled {
+    height: 32px;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $black200;
+    @extend .w-input-small-placeholder-text;
+    gap: 16px;
+
+    &:hover{
+        @extend .hover;
+    }
+
+    &:focus{
+        @extend .focus; 
+        border: $borderWidth solid $secondary50;
+    }
+}
+
+:host ::ng-deep .w-tree .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 8px;
+    padding: $spacingXS $spacingM;
+    @extend .w-input-medium-select-options-text; 
+    color: $text846;
+}
+
+:host ::ng-deep .w-tree .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover{
+    background-color: $highlightBg;
+}
+
+:host ::ng-deep .w-tree .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    color: $text846;
+}
+
+:host ::ng-deep .w-tree .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
+    color: $text846;
+}
+
+.w-tree-icon{
+    margin-right: $spacingS;
+}
+
+::ng-deep .w-tree{
+    .p-checkbox{
+        width: 24px;
+        height: 24px;
+        margin-right: calc($spacingS - $borderWidth) !important;
+        border-width: $borderWidth;
+        
+        .p-checkbox-box {
+            border: $borderWidth solid $black300;
+            border-radius: $checkboxBorderRadius;
+            align-self: center;
+            
+            .p-checkbox-icon {
+                font-size: 12px;
+                font-weight: bold;
+            }
+            
+            &.p-highlight {
+                border-color: $secondary400;
+                background: $secondary400;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+
+                &.p-focus {
+                    background-color: $secondary400;
+                    @extend .focus;
+                    border: $borderWidth solid $secondary50;
+                }
+
+                &:not(.p-highlight).p-focus {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+    
+                &.p-highlight:hover {    
+                    border-color: $secondary400;
+                    background: $secondary400;
+                }
+            }
+        }
+    }
+}
+
+::ng-deep .w-tree .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon{
+    display: none;
+}

package/src/lib/tree/w-tree/w-tree.component.spec.ts

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

package/src/lib/tree/w-tree/w-tree.component.ts

@@ -0,0 +1,84 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { TreeDragDropService, TreeNode } from 'primeng/api';
+
+@Component({
+  selector: 'w-tree',
+  templateUrl: './w-tree.component.html',
+  styleUrls: ['./w-tree.component.scss'],
+  providers: [TreeDragDropService]
+})
+export class WTreeComponent implements OnInit{
+  @Input('nodes') nodes!: any;
+  @Input('selection') selection!: any;
+  @Input('selectionMode') selectionMode: string = "checkbox";
+  @Input('activeToggleButton') activeToggleButton: boolean = false;
+  @Input('collapsedNodes') collapsedNodes: boolean = true;
+  @Input('collapseButtonLabel') collapseButtonLabel : string = "Collapse";
+  @Input('expandButtonLabel') expandButtonLabel : string = "Expand";
+  @Input('propagateSelectionDown') propagateSelectionDown: boolean = true;
+  @Input('propagateSelectionUp') propagateSelectionUp: boolean = true;
+  @Input('activeFilter') activeFilter: boolean = false;
+  @Input('filterPlaceholder') filterPlaceholder!: string;
+  @Input('filterBy') filterBy!: string; 
+  @Input('emptyMessage') emptyMessage: string = "Empty records";
+  @Input('loading') loading: boolean = false; 
+  @Input('draggableNodes') draggableNodes: boolean = false;
+  @Input('draggableScope') draggableScope!: string;
+  @Input('droppableNodes') droppableNodes: boolean = false;
+  @Input('droppableScope') droppableScope!: string ;
+  @Input('scrollHeight') scrollHeight!: string;
+  @Input('activeVirtualScroll') activeVirtualScroll: boolean = false;
+  @Input('virtualScrollItemSize') virtualScrollItemSize!: number;
+  @Input('nodeItemTemplateName') nodeItemTemplateName: string = "nodeItemTemplateName";
+  
+  @Output() selectionChange = new EventEmitter<any>();
+  @Output('onFilter') onFilterEmit: EventEmitter<any> = new EventEmitter();
+  @Output('onNodeDrope') onNodeDropeEmit: EventEmitter<any> = new EventEmitter();
+
+  ngOnInit(): void {
+  }
+  
+  onSelectionChange(event: any){
+    this.selectionChange.emit(event)
+  }
+
+  onFilter(event: any){
+    this.onFilterEmit.emit(event);
+  }
+
+  onNodeDrope(event: any){
+    this.onNodeDropeEmit.emit(event);
+  }
+
+  expandAll(){
+    this.nodes.forEach((node: any) => {
+        this.expandRecursive(node, true);
+    } );
+    this.collapsedNodes = false;
+  }
+
+  collapseAll(){
+    this.nodes.forEach((node: any) => {
+        this.expandRecursive(node, false);
+    } );
+    this.collapsedNodes = true;
+  }
+
+  private expandRecursive(node:TreeNode, isExpand:boolean){
+    node.expanded = isExpand;
+    if (node.children){
+      node.children.forEach( childNode => {
+          this.expandRecursive(childNode, isExpand);
+      } );
+    }
+  }
+
+  isPrimeIcon(icon: string){
+    if(icon.includes('pi')) return true;
+    return false;
+  }
+
+  getIcon(icon: string){
+    return 'pi pi-fw ' + icon;
+  }
+}

package/src/lib/view/w-view-boolean/w-view-boolean.component.html

@@ -0,0 +1,27 @@
+<div *ngIf="layout == 'horizontal'; else vertical" class="w-view-text-content grid flex align-content-center">
+    <div class="col-4 w-view-text-label">
+        <span> {{label}} </span>
+    </div>
+    <div class="col-8 w-view-text-value">
+        <ng-container *ngTemplateOutlet="icons"></ng-container>
+    </div>
+</div>
+<ng-template #vertical>
+    <div class="p-fluid field">
+        <div class="w-view-text-label-vertical">
+            <span> {{label}} </span>
+        </div>
+        <div class="w-view-text-value">
+            <ng-container *ngTemplateOutlet="icons"></ng-container>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #icons>
+    <span *ngIf="value == true && getIconType(trueIcon) == iconType.pIcon" [class]="trueIcon" [style.color]="trueIconColor"></span>
+    <span *ngIf="value == false && getIconType(falseIcon) == iconType.pIcon" [class]="falseIcon" [style.color]="falseIconColor"></span>
+    <span *ngIf="value == null && getIconType(nullIcon) == iconType.pIcon" [class]="nullIcon" [style.color]="nullIconColor"></span>
+    <w-icons *ngIf="value == true && getIconType(trueIcon) == iconType.wIcon" class="w-sidebar-icon" [name]="trueIcon" [color]="trueIconColor" [width]="12" [height]="12"></w-icons>
+    <w-icons *ngIf="value == false && getIconType(falseIcon) == iconType.wIcon" class="w-sidebar-icon" [name]="falseIcon" [color]="falseIconColor" [width]="12" [height]="12"></w-icons>
+    <w-icons *ngIf="value == null && getIconType(nullIcon) == iconType.wIcon" class="w-sidebar-icon" [name]="nullIcon" [color]="nullIconColor" [width]="12" [height]="12"></w-icons>
+</ng-template>

package/src/lib/view/w-view-boolean/w-view-boolean.component.scss

@@ -0,0 +1,38 @@
+@import '../../../styles/_variables.scss';
+@import 'primeflex/primeflex.scss';
+
+.w-view-text-label {
+    @extend .w-view-small-label-text; 
+    @include styleclass('flex align-items-center');
+    height: 32px;
+    padding: $spacingXXS $spacingZero;
+}
+
+.w-view-text-label-vertical{
+    @extend .w-view-text-label; 
+    height: 36px;   
+}
+
+.w-view-text-value {
+    @extend .w-view-small-value-text;
+    @include styleclass('flex align-items-center');
+    height: 32px;
+    padding: $spacingXXS $spacingZero;
+}
+
+: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/view/w-view-boolean/w-view-boolean.component.spec.ts

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

package/src/lib/view/w-view-boolean/w-view-boolean.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IconType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-view-boolean',
+  templateUrl: './w-view-boolean.component.html',
+  styleUrls: ['./w-view-boolean.component.scss']
+})
+export class WViewBooleanComponent implements OnInit {
+  @Input('label') label!: string;
+  @Input('value') value!: boolean | null;
+  @Input('trueIcon') trueIcon: string = "pi pi-circle-fill";
+  @Input('trueIconColor') trueIconColor: string = "var(--w-status-success-1)";
+  @Input('falseIcon') falseIcon: string = "pi pi-circle-fill"; 
+  @Input('falseIconColor') falseIconColor: string = "var(--w-status-error-1)"; 
+  @Input('nullIcon') nullIcon: string = "pi pi-minus-circle"; 
+  @Input('nullIconColor') nullIconColor: string = "var(--w-text-500)"; 
+  @Input('layout') layout: string = 'horizontal';
+
+  iconType: typeof IconType = IconType;
+
+  ngOnInit(): void {}
+
+  getIconType(icon: string){
+    if(icon.includes("pi pi-")){
+      return IconType.pIcon;
+    }else {
+      return IconType.wIcon;
+    }
+  }
+}

package/src/lib/view/w-view-card-title-text/w-view-card-title-text.component.html

@@ -0,0 +1 @@
+<span class="w-view-card-title-text-style">{{cardTitle}}</span>

package/src/lib/view/w-view-card-title-text/w-view-card-title-text.component.scss

@@ -0,0 +1,5 @@
+@import '../../../styles/_variables.scss';
+
+.w-view-card-title-text-style {
+    @extend .heading6;
+}

package/src/lib/view/w-view-card-title-text/w-view-card-title-text.component.spec.ts

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

package/src/lib/view/w-view-card-title-text/w-view-card-title-text.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'w-view-card-title-text',
+  templateUrl: './w-view-card-title-text.component.html',
+  styleUrls: ['./w-view-card-title-text.component.scss']
+})
+export class WViewCardTitleTextComponent implements OnInit {
+
+  @Input('cardTitle') cardTitle!: string;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/view/w-view-text/w-view-text.component.html

@@ -0,0 +1,18 @@
+<div *ngIf="layout == 'horizontal'; else vertical" class="w-view-text-content grid flex align-content-center">
+    <div class="col-4 w-view-text-label">
+        <span class="flex"> {{label}} </span>
+    </div>
+    <div class="col-8 w-view-text-value">
+        <span class="flex"> {{value}} </span>
+    </div>
+</div>
+<ng-template #vertical>
+    <div class="p-fluid field">
+        <div class="w-view-text-label-vertical">
+            <span class="flex"> {{label}} </span>
+        </div>
+        <div class="w-view-text-value">
+            <span class="flex"> {{value}} </span>
+        </div>
+    </div>
+</ng-template>

package/src/lib/view/w-view-text/w-view-text.component.scss

@@ -0,0 +1,42 @@
+@import '../../../styles/_variables.scss';
+@import 'primeflex/primeflex.scss';
+
+.w-view-text-label {
+    @extend .w-view-small-label-text; 
+    @include styleclass('flex align-items-center');
+    height: 32px;
+    padding: $spacingXXS $spacingZero;
+}
+
+.w-view-text-label-vertical{
+    @extend .w-view-text-label; 
+    height: 36px;   
+}
+
+.w-view-text-value {
+    @extend .w-view-small-value-text;
+    @include styleclass('flex align-items-center');
+    height: 32px;
+    padding: $spacingXXS $spacingZero;
+}
+
+.w-view-text-content {
+    height: 32px;
+}
+
+: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/view/w-view-text/w-view-text.component.spec.ts

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

package/src/lib/view/w-view-text/w-view-text.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'w-view-text',
+  templateUrl: './w-view-text.component.html',
+  styleUrls: ['./w-view-text.component.scss']
+})
+export class WViewTextComponent {
+  @Input('label') label!: string;
+  @Input('value') value!: any;
+  @Input('layout') layout: string = 'horizontal';
+}

package/src/lib/w-clipboard/w-clipboard.component.css

@@ -0,0 +1,12 @@
+.p-button-icon {
+    color: white !important;
+}
+
+.hljs {
+	background: transparent;
+}
+
+pre code.hljs {
+	overflow-x: auto;
+    padding: 0rem !important;
+}

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

@@ -0,0 +1,10 @@
+<div class="card relative">
+    <div class="absolute top-0 right-0 pr-3 pt-3">
+        <w-button [icon]="icon" type="secondary"
+            (onClick)="copyToClipboard()">
+        </w-button>
+    </div>
+    <pre id="text" class="-mb-2 ml-3">
+        <code [highlight]="codeText" [languages]="languages"></code>
+    </pre>
+</div>

package/src/lib/w-clipboard/w-clipboard.component.spec.ts

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

package/src/lib/w-clipboard/w-clipboard.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+  selector: 'w-clipboard',
+  templateUrl: './w-clipboard.component.html',
+  styleUrls: ['./w-clipboard.component.css']
+})
+export class WClipboardComponent {
+
+  @Input('codeText') codeText!: string; 
+  @Input('languages') languages!: string[]; 
+  icon: string = 'pi pi-copy';
+
+  constructor(private clipboard: Clipboard) {}
+
+  copyToClipboard(){
+    const successful = this.clipboard.copy(this.codeText);
+    if(successful){
+      this.icon = 'pi-check'
+      setTimeout(() => {
+        this.icon = 'pi-copy';
+      }, 1500)
+    }else{
+      this.icon = 'pi-times'
+      setTimeout(() => {
+        this.icon = 'pi-copy';
+      }, 1500)
+    }
+  }
+
+}

package/src/lib/wapp-components.component.spec.ts

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

package/src/lib/wapp-components.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-wapp-components',
+  template: `
+    <p>
+      wapp-components works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class WappComponentsComponent {
+
+}