ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/edit/w-edit-select/w-edit-select.component.spec.ts

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

package/src/lib/edit/w-edit-select/w-edit-select.component.ts

@@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-select',
+  templateUrl: './w-edit-select.component.html',
+  styleUrls: ['./w-edit-select.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditSelectComponent),
+      multi: true
+    }
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class WEditSelectComponent implements OnInit, ControlValueAccessor{
+  @Input('label') label!: string;
+  @Input('placeholder') placeholder = "";
+  @Input('disabled') disabled: boolean = false;
+  @Input('required') required: boolean = false;
+  @Input('size') size: string = "small";
+  @Input('options') options: any;
+  @Input('filter') filter: boolean = false;
+  @Input('optionLabel') optionLabel!: string;
+  @Input('optionValue') optionValue!: string;
+  @Input('appendTo') appendTo!: string; 
+  @Input('showClear') showClear: boolean = true;
+  @Input('formControl') formControl!: FormControl | null;
+  @Input('requiredErrorDescription') errorDescription: string = "Select an option is required";
+  @Input('removePaddingTop') removePaddingTop: boolean = false; 
+
+  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
+
+  sizeType: typeof SizeType = SizeType;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  ngModelValue: any;
+
+  ngOnInit(): void {
+  }
+  
+  writeValue(value: any): void {
+    this.ngModelValue = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onOptionSelected(){
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+
+  onOptionSelectForm(event: any){
+    this.onChangeEvent.emit(event.value);
+  }
+
+  getSizeName(value: number): string {
+    return SizeType[value];
+  }
+
+  onInputBlur(event: Event){
+    const newValue = (event.target as HTMLInputElement).value;
+    this.ngModelValue = newValue;
+    this.onChange(this.ngModelValue);
+    this.onTouch();
+
+    this.onChangeEvent.emit(this.ngModelValue);
+  }
+}

package/src/lib/edit/w-edit-toggle/w-edit-toggle.component.html

@@ -0,0 +1,55 @@
+
+<div *ngIf="formControl; else noNgControl" class="flex align-content-center" 
+    [ngClass]="{'w-edit-toggle-medium-field': getSize(sizeType.medium) == size,
+                'w-edit-toggle-small-field': getSize(sizeType.small) == size,
+                'w-edit-toggle-medium-heigth': hasAlign &&  getSize(sizeType.medium) == size,
+                'w-edit-toggle-small-heigth': hasAlign && getSize(sizeType.small) == size}">
+    <label *ngIf="(getSize(sizeType.medium) == size && (label != undefined && label.length > 0));" for="toggle"
+            class="flex align-items-center"
+            [ngClass]="{'w-edit-toggle-medium-label': !isDisabled,
+                        'w-edit-toggle-medium-label-disabled': isDisabled}">
+            {{label}}
+    </label>
+    <label *ngIf="(getSize(sizeType.small) == size && (label != undefined && label.length > 0));" for="toggle"
+            class="flex align-items-center"
+            [ngClass]="{'w-edit-toggle-small-label': !isDisabled,
+                        'w-edit-toggle-small-label-disabled': isDisabled}">
+            {{label}}
+    </label>
+
+    <p-inputSwitch id="toggle"
+                [ngClass]="{'w-edit-toggle-medium': getSize(sizeType.medium) == size,
+                            'w-edit-toggle-small': getSize(sizeType.small) == size}"
+                class="flex align-items-center"
+                [formControl]="formControl">
+    </p-inputSwitch>
+</div>
+
+<ng-template #noNgControl>
+    <div class="flex align-content-center" 
+                [ngClass]="{'w-edit-toggle-medium-field': getSize(sizeType.medium) == size,
+                            'w-edit-toggle-small-field': getSize(sizeType.small) == size,
+                            'w-edit-toggle-medium-heigth': hasAlign &&  getSize(sizeType.medium) == size,
+                            'w-edit-toggle-small-heigth': hasAlign && getSize(sizeType.small) == size }">
+        <label *ngIf="(getSize(sizeType.medium) == size && (label != undefined && label.length > 0));" for="toggle"
+                class="flex align-items-center"
+                [ngClass]="{'w-edit-toggle-medium-label': !isDisabled,
+                            'w-edit-toggle-medium-label-disabled': isDisabled}">
+            {{label}}
+        </label>
+        <label *ngIf="(getSize(sizeType.small) == size && (label != undefined && label.length > 0));" for="toggle"
+                class="flex align-items-center"
+                [ngClass]="{'w-edit-toggle-small-label': !isDisabled,
+                            'w-edit-toggle-small-label-disabled': isDisabled}">
+            {{label}}
+        </label>
+    
+        <p-inputSwitch  id="toggle"
+                        [ngClass]="{'w-edit-toggle-medium': getSize(sizeType.medium) == size,
+                                    'w-edit-toggle-small': getSize(sizeType.small) == size}"
+                        class="flex align-items-center"
+                        (ngModelChange)="onInput($event)"
+                        [(ngModel)]="value">
+        </p-inputSwitch>
+    </div>
+</ng-template>

package/src/lib/edit/w-edit-toggle/w-edit-toggle.component.scss

@@ -0,0 +1,86 @@
+@import '../../../styles/variables.scss';
+
+/* SMALL */
+::ng-deep {
+    .w-edit-toggle-small .p-inputswitch {
+        height: 16px;
+        width: 28px;
+        margin-left: $spacingXS;
+        
+        .p-inputswitch-slider {
+            &:before {
+                width: 12px;
+                height: 12px;
+                margin-top: -6px;
+            }
+        }
+    }
+
+    .w-edit-toggle-small .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
+        transform: translateX(10px);
+    }
+}
+
+::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{
+    background: $secondary400;
+}
+
+.w-edit-toggle-small-label{
+    @extend .w-input-small-label-text;
+}
+
+.w-edit-toggle-small-field { 
+    height: 16px;
+}
+
+.w-edit-toggle-small-heigth {
+    height: 76px;
+    justify-content: start;
+    align-content: center;
+    align-items: center;
+    display: grid;
+}
+
+/* MEDIUM */
+::ng-deep .w-edit-toggle-medium .p-inputswitch {
+    height: 24px;
+    width: 44px;
+    margin-left: $spacingS;
+}
+
+.w-edit-toggle-medium-label{
+    @extend .w-input-small-label-text;
+}
+
+.w-edit-toggle-medium-field { 
+    height: 24px;
+}
+
+.w-edit-toggle-medium-heigth {
+    height: 76px;
+    justify-content: start;
+    align-content: center;
+    align-items: center;
+    display: grid;
+}
+
+::ng-deep {
+    .w-edit-toggle-medium .p-inputswitch {
+        height: 24x;
+        width: 44px;
+        margin-left: $spacingXS;
+        
+        .p-inputswitch-slider{
+            &:before {
+                width: 20px;
+                height: 20px;
+                margin-top: -10px;
+                left: 3px;
+            }
+        }
+    }
+
+    .w-edit-toggle-medium .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
+        transform: translateX(18px);
+    }
+}

package/src/lib/edit/w-edit-toggle/w-edit-toggle.component.spec.ts

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

package/src/lib/edit/w-edit-toggle/w-edit-toggle.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SizeType } from '../../shared/enums/enum';
+
+@Component({
+  selector: 'w-edit-toggle',
+  templateUrl: './w-edit-toggle.component.html',
+  styleUrls: ['./w-edit-toggle.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => WEditToggleComponent),
+      multi: true
+    }
+  ]
+})
+export class WEditToggleComponent {
+  @Input('label') label: string = '';
+  @Input('helpDescription') helpDescription: string = '';
+  @Input('disabled') isDisabled: boolean = false;
+  @Input('isRequired') isRequired: boolean = false;
+  @Input('size') size: string = 'small';
+  @Input('hasAlign') hasAlign: boolean = true;
+
+  @Input('formControl') formControl!: FormControl | null;
+
+  @Output('toggleState')
+  toggleState: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  value: boolean = false;
+  isTouched : boolean = false;
+  
+  onChange = (_:any) => { }
+  onTouch = () => { }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+  
+  onInput(obj: any){
+    this.value = obj;
+    this.toggleState.emit(this.value);
+    this.onTouch();
+    this.onChange(this.value);
+  }
+
+  onValueChanged() {
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  getSize(value: number): string {
+    return SizeType[value];
+  }
+
+  get sizeType(): typeof SizeType {
+    return SizeType;
+  }
+}

package/src/lib/edit/w-edit-treeselect/w-edit-treeselect.component.html

@@ -0,0 +1,72 @@
+<div *ngIf="formControl; else noNgControl" class="w-edit-treeselect-field p-fluid field">
+    <label *ngIf="(label != undefined && label.length > 0)"  
+        [ngClass]="{'w-edit-treeselect-small-label' : getSizeName(sizeType.small) == size && !disabled,
+                    'w-edit-treeselect-small-label-disabled' : getSizeName(sizeType.small) == size && disabled,
+                    'w-edit-treeselect-medium-label' : getSizeName(sizeType.medium) == size && !disabled,
+                    'w-edit-treeselect-medium-label-disabled' : getSizeName(sizeType.medium) == size && disabled, 
+                    'no-top': removePaddingTop == true}">
+        {{label}}
+    </label>
+    <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+    <p-treeSelect *ngIf="getSizeName(sizeType.medium) == size" class="w-edit-treeselect-medium" 
+        [ngClass]="{'ng-invalid ng-dirty': formControl.dirty && formControl.hasError('required')}"
+        [options]="options" 
+        [placeholder]="placeholder" 
+        [showClear]="showClear" 
+        [filter]="true"
+        [filterBy]="filterBy" 
+        [required]="required"
+        [formControl]="formControl" 
+        [appendTo]="appendTo" 
+        (onNodeSelect)="onOptionSelectedForm($event)">
+    </p-treeSelect>
+    <p-treeSelect *ngIf="getSizeName(sizeType.small) == size" class="w-edit-treeselect-small" 
+        [ngClass]="{'ng-invalid ng-dirty': formControl.dirty && formControl.hasError('required')}"
+        [options]="options" 
+        [placeholder]="placeholder" 
+        [showClear]="showClear" 
+        [filter]="true"
+        [filterBy]="filterBy"
+        [required]="required"
+        [formControl]="formControl" 
+        [appendTo]="appendTo" 
+        (onNodeSelect)="onOptionSelectedForm($event)">
+    </p-treeSelect>
+    <small *ngIf="getSizeName(sizeType.medium) == size && formControl.dirty && formControl.hasError('required')" 
+    class="w-error-message-container w-full w-error-message p-error block">{{errorDescription}}</small> 
+</div>
+<ng-template #noNgControl>
+    <div class="w-edit-treeselect-field p-fluid field">
+        <label *ngIf="(label != undefined && label.length > 0)"  
+            [ngClass]="{'w-edit-treeselect-small-label' : getSizeName(sizeType.small) == size && !disabled,
+                        'w-edit-treeselect-small-label-disabled' : getSizeName(sizeType.small) == size && disabled,
+                        'w-edit-treeselect-medium-label' : getSizeName(sizeType.medium) == size && !disabled,
+                        'w-edit-treeselect-medium-label-disabled' : getSizeName(sizeType.medium) == size && disabled, 
+                        'no-top': removePaddingTop == true}">
+            {{label}}
+        </label>
+        <div *ngIf="(label != undefined && label == '')" class="w-input-no-label-height"></div>
+        <p-treeSelect *ngIf="getSizeName(sizeType.medium) == size" class="w-edit-treeselect-medium" 
+            [options]="options" 
+            [placeholder]="placeholder" 
+            [showClear]="showClear" 
+            [disabled]="disabled"
+            [filter]="true"
+            [filterBy]="filterBy" 
+            [(ngModel)]="ngModelValue" 
+            (ngModelChange)="onOptionSelected()" 
+            [appendTo]="appendTo">
+        </p-treeSelect>
+        <p-treeSelect *ngIf="getSizeName(sizeType.small) == size" class="w-edit-treeselect-small" 
+            [options]="options" 
+            [placeholder]="placeholder" 
+            [showClear]="showClear" 
+            [disabled]="disabled"
+            [filter]="true"
+            [filterBy]="filterBy"
+            [(ngModel)]="ngModelValue" 
+            (ngModelChange)="onOptionSelected()" 
+            [appendTo]="appendTo">
+        </p-treeSelect>
+    </div>
+</ng-template>

package/src/lib/edit/w-edit-treeselect/w-edit-treeselect.component.scss

@@ -0,0 +1,205 @@
+@import '../../../styles/_variables.scss';
+
+.w-edit-treeselect-field{
+    margin: 0px;
+}
+
+/* SMALL */
+.w-edit-treeselect-small-label{
+    @extend .w-input-small-label-text;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+.w-edit-treeselect-small-label-disabled{
+    @extend .w-input-small-label-disabled;
+    @extend .w-input-small-label-text-content;
+
+    &.no-top{
+        @extend .w-input-small-label-text-content-no-top;
+    }
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect{
+    border-width: $borderWidth;
+    border-radius: $borderRadius;
+    border-color: $black200;   
+}
+
+:host ::ng-deep p-treeselect.w-edit-treeselect-small.p-treeselect-clearable {
+    .p-treeselect-label-container {
+        padding-right: calc($spacingXS + $spacingS);
+    }
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect:not(.p-disabled):hover{
+    border: $borderWidth solid $secondary400;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect:not(.p-disabled).p-focus{
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect .p-treeselect-label{
+    @extend .w-input-small-placeholder-text;
+    padding: calc($spacingXS - $borderWidth) 0px calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth);
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect .p-treeselect-label.p-placeholder{
+    @extend .w-input-small-placeholder-text;
+}
+
+:host ::ng-depp .w-edit-treeselect-small .p-treeselect-panel{
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect-panel .p-treeselect-items-wrapper .p-tree{
+    padding: calc($spacingXS - $borderWidth);
+}
+
+:host ::ng-deep p-treeselect.w-edit-treeselect-small.ng-invalid.ng-dirty > .p-treeselect{
+    border-color: $statusError3;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-tree .p-tree-container .p-treenode .p-treenode-content{
+    @extend .w-input-small-select-options-text;
+    padding: $spacingXS;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    @extend .w-input-small-placeholder-text;
+    padding: calc($spacingXS - $borderWidth) calc($spacingS + $spacingS + ($spacingS - $borderWidth)) calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth);
+    align-self: center;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{
+    width: 16px;
+    height: 16px;
+    margin-right: $spacingS;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+    color: $black;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon{
+    margin-right: $spacingS;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-disabled{
+    @extend .w-input-disabled;
+}
+
+:host ::ng-deep .w-edit-treeselect-small .p-disabled .p-treeselect-label.p-placeholder {
+    @extend .w-input-small-placeholder-text-disabled-only-color;
+}
+
+/* MEDIUM */
+
+.w-edit-treeselect-medium-label{
+    @extend .w-input-medium-label-text;
+    @extend .w-input-small-label-text-content;
+}
+
+.w-edit-treeselect-medium-label-disabled{
+    @extend .w-input-medium-label-disabled;
+    @extend .w-input-small-label-text-content;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-treeselect{
+    border-width: $borderWidth;
+    border-radius: $borderRadius;
+    border-color: $black200;   
+}
+
+:host ::ng-deep p-treeselect.w-edit-treeselect-medium.p-treeselect-clearable .p-treeselect-label-container{
+    padding-right: 0px;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-treeselect:not(.p-disabled):hover{
+    border: $borderWidth solid $secondary400;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-treeselect:not(.p-disabled).p-focus{
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-treeselect .p-treeselect-label{
+    @extend .w-input-medium-placeholder-text;
+    padding: calc($spacingXS - $borderWidth) 0px ($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-treeselect .p-treeselect-label.p-placeholder{
+    @extend .w-input-medium-placeholder-text;
+    padding: calc($spacingXS - $borderWidth) 0px ($spacingXS - $borderWidth) calc($spacingM - $borderWidth);
+}
+
+:host ::ng-depp .w-edit-treeselect-medium .p-treeselect-panel{
+    border: $borderWidth solid $black200;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-treeselect-panel .p-treeselect-items-wrapper .p-tree{
+    padding: calc($spacingXS - $borderWidth) calc($spacingXS - $borderWidth) calc($spacingM - $borderWidth) calc($spacingXS - $borderWidth);
+}
+
+:host ::ng-deep p-treeselect.w-edit-treeselect-medium.ng-invalid.ng-dirty > .p-treeselect{
+    border-color: $statusError3;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-tree .p-tree-container .p-treenode .p-treenode-content{
+    @extend .w-input-medium-select-options-text;
+    padding: $spacingXS $spacingM;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{
+    width: 24px;
+    height: 24px;
+    margin-right: $spacingXS;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+    color: $black;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon{
+    margin-right: $spacingXS;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-disabled{
+    @extend .w-input-disabled;
+}
+
+:host ::ng-deep .w-edit-treeselect-medium .p-disabled .p-treeselect-label.p-placeholder {
+    @extend .w-input-medium-placeholder-text-disabled-only-color;
+}
+
+// message
+.w-error-message-container{
+    height: $spacingXXXL;
+}
+
+.w-error-message{
+    @extend .caption;
+    color: $statusError1;
+    padding: $spacingXS;
+    margin-top: $spacingZero;
+}

package/src/lib/edit/w-edit-treeselect/w-edit-treeselect.component.spec.ts

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