sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/toggle-switch/s-toggle-switch.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SToggleSwitchComponent } from './s-toggle-switch.component';
+import { FormsModule } from '@angular/forms';
+import { SIconMaterialModule } from '../icon-material';
+
+@NgModule({
+  declarations: [
+    SToggleSwitchComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    SIconMaterialModule
+  ],
+  exports:[
+    SToggleSwitchComponent
+  ]
+})
+export class SToggleSwitchModule { }

package/src/lib/tooltip/directive/s-tooltip-directive.ts

@@ -0,0 +1,26 @@
+import { Directive, Input, OnInit, HostListener } from '@angular/core';
+import { STooltipComponent } from '../s-tooltip.component';
+
+@Directive({
+  selector: '[tooltip]'
+})
+export class CustomTooltipDirective implements OnInit {
+
+  @Input('tooltip') tooltipContent: STooltipComponent | undefined ;
+
+  constructor() { }
+
+  ngOnInit(): void {}
+
+  @HostListener('mouseenter' , ['$event'])
+  private _show(event:any): void {
+    const rect = event.target.getBoundingClientRect();
+    this.tooltipContent?.show(rect.left, rect.top , event.target.offsetHeight , event.target.offsetWidth)
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  private _hide(event:Event): void {
+    this.tooltipContent?.hide()
+  }
+
+}

package/{lib/tooltip/index.d.ts → src/lib/tooltip/index.ts}

@@ -1,3 +1,3 @@
 export * from './s-tooltip.module';
 export * from './s-tooltip.component';
-export * from './directive/s-tooltip-directive';
+export * from './directive/s-tooltip-directive';

package/src/lib/tooltip/s-tooltip-model.ts

@@ -0,0 +1,6 @@
+export class STooltip {
+    public title!: string;
+    public description?: string;
+    public theme?: 'light' | 'dark';
+    public position?: 'left' | 'right' | 'bottom' | 'top' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+}

package/src/lib/tooltip/s-tooltip.component.html

@@ -0,0 +1,4 @@
+   <div #tooltip624 [ngStyle]="stylePosition" class="content-tooltip624 theme624-{{theme}} position-{{position}} display-{{showTooltip}}">
+      <div class="title-tooltip624">{{title}}</div>
+      <div class="description-tooltip624" *ngIf="description">{{description}}</div>
+   </div>

package/src/lib/tooltip/s-tooltip.component.scss

@@ -0,0 +1,112 @@
+.content-tooltip624{
+    position: absolute;
+    width:max-content;
+    max-width: 328px;
+    text-align: left;
+    z-index: 3;
+    top: 0px;
+    left: 0px;
+    padding: 8px 12px;
+    border-radius: 4px;
+
+    .title-tooltip624{
+        font-weight: 700;
+        font-size: 0.75rem;
+    }
+
+    .description-tooltip624{
+        font-weight: 400;
+        font-size: 0.75rem;
+    }
+}
+
+.content-tooltip624.display-false{
+    display: none;
+}
+.content-tooltip624.display-true{
+    display: block;
+}
+
+.content-tooltip624.theme624-dark{
+    background-color: var(--primary-600);
+    .title-tooltip624, .description-tooltip624{
+        color: var(--neutrals-1200);
+    }
+}
+
+.content-tooltip624.theme624-light{
+    background-color: var(--neutrals-1200);
+    .title-tooltip624{
+        color: var(--secondary-600);
+    }
+    .description-tooltip624{
+        color: var(--secondary-500);
+    }
+
+}
+
+//POSICIONAMIENTO
+
+//POSICIONAMIENTO SOMBRA
+.content-tooltip624.position-top{
+    box-shadow: 0px 2px 9px 7px rgba(23, 56, 97, 0.15);
+}
+.content-tooltip624.position-bottom{
+    box-shadow: 0px -2px 9px 7px rgba(23, 56, 97, 0.15);
+}
+.content-tooltip624.position-right{
+    box-shadow: -5px 2px 12px 6px rgba(23, 56, 97, 0.15);
+}
+.content-tooltip624.position-left{
+    box-shadow: 5px 1px 12px 6px rgba(23, 56, 97, 0.15);
+}
+
+//POSICIONAMIENTO DE FLECHITA 
+
+.content-tooltip624.theme624-dark::before{
+    background: var(--primary-600);
+}
+.content-tooltip624.theme624-light::before{
+    background: var(--neutrals-1200);
+    box-shadow: 0px 18px 28px 0px rgba(23, 56, 97, 0.15);
+}
+
+.content-tooltip624.position-right::before {
+    content: "";
+    position: absolute !important;
+    transform: rotate(45deg);
+    height: 10px;
+    width: 10px;
+    top: var(--stilePositionArrow);
+    left: -3px;
+}
+
+.content-tooltip624.position-left::before {
+    content: "";
+    position: absolute !important;
+    transform: rotate(45deg);
+    height: 10px;
+    width: 10px;
+    top: var(--stilePositionArrow);
+    right: -3px;
+}
+
+.content-tooltip624.position-bottom::before {
+    content: "";
+    position: absolute !important;
+    transform: rotate(45deg);
+    height: 10px;
+    width: 10px;
+    top: -3px;
+    left: var(--stilePositionArrow);
+}
+
+.content-tooltip624.position-top::before {
+    content: "";
+    position: absolute !important;
+    transform: rotate(45deg);
+    height: 10px;
+    width: 10px;
+    bottom: -3px;
+    left: var(--stilePositionArrow);
+}

package/src/lib/tooltip/s-tooltip.component.spec.ts

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

package/src/lib/tooltip/s-tooltip.component.ts

@@ -0,0 +1,79 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 's-tooltip',
+  templateUrl: './s-tooltip.component.html',
+  styleUrls: ['./s-tooltip.component.scss']
+})
+
+export class STooltipComponent implements OnInit {
+  
+  @Input() title!: string;
+  @Input() description?: string;
+  @Input() theme?: 'light' | 'dark' = 'light';
+  @Input() position?: 'left' | 'right' | 'bottom' | 'top'  = "top";
+  stylePosition:any = '';
+  showTooltip:boolean = false
+  @ViewChild('tooltip624') tooltip!: ElementRef;
+
+  constructor(){}
+
+  ngOnInit(): void {}
+
+  toogle(){
+    this.showTooltip = !this.showTooltip
+  }
+
+  show(x?:any , y?:any , heightParent?:any , widthParent?:any){
+    this.showTooltip = true
+    setTimeout(() => {
+      this.factoryStyle(this.position , x , y , heightParent , widthParent)
+    });
+  }
+
+  hide(){
+    this.showTooltip = false
+  }
+
+  factoryStyle(position:any , x:any , y:any , heightParent:any , widthParent:any){
+
+    switch (position) {
+      case "top":
+        y=y-5
+        if(this.tooltip.nativeElement.offsetWidth < widthParent){
+          widthParent = this.tooltip.nativeElement.offsetWidth -4
+        }
+        document.documentElement.style.setProperty('--stilePositionArrow' , (widthParent/2)+"px" );
+        this.stylePosition = {"translate": +x+"px "+y+"px" , "transform": "translateY(-100%)" , "position": "fixed"}
+      break;
+      case "bottom":
+        y=y+5
+        if(this.tooltip.nativeElement.offsetWidth < widthParent){
+          widthParent = this.tooltip.nativeElement.offsetWidth -4
+        }
+        document.documentElement.style.setProperty('--stilePositionArrow' , (widthParent/2)+"px" );
+        this.stylePosition = {"translate": +x+"px "+y+"px" , "transform": "translateY("+heightParent+"px)" , "position": "fixed"}
+      break;
+      case "left":
+        x=x-10
+        if(this.tooltip.nativeElement.offsetHeight < heightParent){
+          heightParent = this.tooltip.nativeElement.offsetHeight -4
+        }
+        document.documentElement.style.setProperty('--stilePositionArrow' , ((heightParent-5)/2)+"px" );
+        this.stylePosition = {"translate": +x+"px "+y+"px" , "transform": "translateX(-100%)" , "position": "fixed" , "margin-right": "10px"}
+      break;
+      case "right":
+        x=x+10
+        if(this.tooltip.nativeElement.offsetHeight < heightParent){
+          heightParent = this.tooltip.nativeElement.offsetHeight -4
+        }
+        document.documentElement.style.setProperty('--stilePositionArrow' , ((heightParent-5)/2)+"px" );
+        this.stylePosition = {"translate": +x+"px "+y+"px" , "transform": "translateX("+widthParent+"px)" , "position": "fixed"}
+      break;
+        
+      default:
+        
+      break;
+    }
+  }
+}

package/src/lib/tooltip/s-tooltip.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { STooltipComponent } from './s-tooltip.component';
+import { CustomTooltipDirective } from './directive/s-tooltip-directive';
+
+@NgModule({
+  declarations: [
+    STooltipComponent,
+    CustomTooltipDirective
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [STooltipComponent, CustomTooltipDirective]
+})
+export class STooltipModule { }

package/{lib/tree-list/index.d.ts → src/lib/tree-list/index.ts}

@@ -1,3 +1,3 @@
 export * from './s-tree-list.module';
 export * from './s-tree-list.component';
-export * from './models';
+export * from './models';

package/{lib/tree-list/models/tree-node.interface.d.ts → src/lib/tree-list/models/tree-node.interface.ts}

@@ -9,4 +9,6 @@ export interface TreeNode {
     hideCheck?: boolean;
     isUndefined?: boolean;
     icon?: string;
-}
+    // actions?: SSubMenuModel | null;
+    // controlMenu?: boolean;
+}

package/src/lib/tree-list/s-tree-list.component.html

@@ -0,0 +1,29 @@
+<ng-template #treeNodeTemplate let-node>
+
+  <div class="s-tree-list" (click)="selectNode(node)" [ngClass]="node === selectedNode ? 's-tree-list__selected-node' : ''">
+    <span class="s-tree-list__toggle-icon" *ngIf="node.children && node.children.length" (click)="toggleNode(node)">
+      <s-icon-mat class="s-tree-list__icon-arrow">{{node.expanded? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</s-icon-mat>
+    </span>
+
+    <div class="s-tree-list__content">
+      <s-checkbox *ngIf="!node.hide && !node.hideRoot && !node.hideAll && !hideAll" [model]="node.checked" [value]="node" 
+        [isUndefined]="node.isUndefined" (emitSelection)="checkNode($event)" [disabled]="node.disable">
+      </s-checkbox>
+      <s-icon-mat class="s-tree-list__content-icon" *ngIf="node.icon">{{node.icon}}</s-icon-mat>
+      <span class="s-tree-list__content-title">{{node.label}}</span>
+    </div>
+  </div>
+
+  <div class="s-tree-list__node-children" *ngIf="node.expanded && node.children">
+    <ng-container *ngFor="let child of node.children">
+      <ng-container [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ $implicit: child }"></ng-container>
+    </ng-container>
+  </div>
+</ng-template>
+
+<ng-container *ngFor="let node of treeNodes">
+  <ng-container [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ $implicit: node }"></ng-container>
+</ng-container>
+
+
+

package/src/lib/tree-list/s-tree-list.component.scss

@@ -0,0 +1,46 @@
+.s-tree-list {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 0.6rem;
+
+  &:hover {
+    background-color: var(--neutrals-900);
+  }
+
+  &:active {
+    background-color: var(--primary-300);
+  }
+
+  &-toggle-icon {
+    margin-right: 5px;
+  }
+
+  &__selected-node {
+    background-color: var(--primary-200);
+  }
+
+  &__content {
+    align-items: center;
+    display: flex;
+    padding-left: 0.3rem;
+  
+    &-icon {
+      font-size: 0.8rem;
+      color: var(--primary-600);
+      margin-left: 0.5rem;
+    }
+  
+    &-title {
+      margin-left: 0.5rem;
+    }
+  }
+
+  &__node-children {
+    margin-left: 20px;
+  }
+
+  &__node-children.show {
+    display: block;
+  }
+}

package/src/lib/tree-list/s-tree-list.component.ts

@@ -0,0 +1,127 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { TreeNode } from './models/tree-node.interface';
+
+@Component({
+  selector: 's-tree-list',
+  templateUrl: './s-tree-list.component.html',
+  styleUrls: ['./s-tree-list.component.scss']
+})
+export class STreeListComponent implements OnInit {
+
+  @Input() treeNodes: TreeNode[] = []; // Lista de valores que va a nutrir el árbol
+  
+  @Input() hideAll: boolean = false; // Ocultar todos los checkboxes
+  
+  @Output() emitSelectNode = new EventEmitter<any>(); //Nodo seleccionado
+  @Output() emitChecked = new EventEmitter<any>(); //Notifica los cambios, string[]
+
+  // @Output() emitActionSelection = new EventEmitter<any>();
+
+
+  public selectedTreeNode: TreeNode | null | undefined;
+  public selection: any[] = [];
+
+  public selectedNode?: TreeNode;
+  public checkNodes: any[] = [];
+
+  ngOnInit() {}
+
+  // TODO Menu
+  // addActionsMenu(actions: SSubMenuItem[]) {
+  //   const menu: SSubMenuModel = {items: []};
+  //   for (const action of actions) {
+  //     menu.items.push({
+  //       id: action.id,
+  //       title: action.title,
+  //       value: action.value,
+  //       icon: action.icon,
+  //       iconName: action.iconName,
+  //       link: action.link,
+  //     })
+  //   }
+  //   return menu;
+  // }
+
+  // toggleMenu(element: TreeNode){
+  //   element.controlMenu = !element.controlMenu;
+  // }
+
+  toggleNode(node: TreeNode): void {
+    node.expanded = !node.expanded;
+  }
+
+  selectNode(node: TreeNode): void {
+    this.selectedNode = node;
+    this.emitSelectNode.emit(node);
+  }
+
+  isNodeSelected(node: TreeNode): boolean {
+    return this.selectedNode === node;
+  }
+
+  checkNode(event: any) {
+    const node = event.value;
+    const isChecked = event.event;
+
+    // Update checked nodes in tree
+    const nodeInTree = this.findNode(this.treeNodes, node, isChecked);
+    if(nodeInTree) this.checkAllChildren([nodeInTree], isChecked);
+
+    if(isChecked) {
+      this.checkNodes?.push(node.value);
+    } else {
+      this.checkNodes = this.checkNodes?.filter(c => c != node.value);
+    }
+
+    const checkedNodes = this.getCheckedNodesToNotify(this.treeNodes, []);
+    // Notify change
+    this.emitChecked.emit(checkedNodes);
+  }
+
+  private getCheckedNodesToNotify(nodes: TreeNode[], result: string[]): string[] {
+    nodes.forEach(node => {
+      if(node.checked) result.push(node.value);
+      if(node.children) {
+        this.getCheckedNodesToNotify(node.children, result);
+      }
+    })
+    return result; 
+  }
+
+  findNode(trees: TreeNode[], findedNode: TreeNode, isChecked: boolean): TreeNode | undefined {
+    for (const node of trees) {
+      if(node == findedNode) return node;
+      if(node.children) {
+        const founded = this.findNode(node.children, findedNode, isChecked);
+        if(founded) return founded;
+      }
+    }
+    return undefined;
+  }
+
+  private checkAllChildren(nodes: TreeNode[], isChecked: boolean) {
+    nodes.forEach(n => {
+      n.checked = isChecked;
+      if(n.children) this.checkAllChildren(n.children, isChecked)
+    })
+  }
+
+  // TODO
+  // selectMenuItem(event: TreeNode) {
+  //   this.emitActionSelection.emit(event);
+  // }
+
+
+  private checkChildren(nodes: TreeNode[]) {
+    return nodes.some((node) => {
+      return node.checked || !!node.isUndefined;
+    });
+  }
+
+  // private checkAllChildren(nodes: TreeNode[]) {
+  //   return nodes.every((node) => {
+  //     return node.checked;
+  //   });
+  // }
+
+}

package/src/lib/tree-list/s-tree-list.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { STreeListComponent } from './s-tree-list.component';
+import { FormsModule } from '@angular/forms';
+import { SCheckboxModule } from '../checkbox';
+import { SIconMaterialModule } from '../icon-material';
+
+@NgModule({
+  declarations: [
+    STreeListComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    SCheckboxModule,
+    SIconMaterialModule
+  ],
+  exports:[
+    STreeListComponent
+  ]
+})
+export class STreeListModule { }

package/src/lib/variables.scss

@@ -0,0 +1,107 @@
+
+:root{
+    --primary-100: #E6F4FF;
+    --primary-200: #CCE9FF;
+    --primary-300: #99D3FF;
+    --primary-400: #66BDFE;
+    --primary-500: #33A7FE;
+    --primary-600: #0091FE;
+    --primary-700: #0074CB;
+    --primary-800: #005798;
+    --primary-900: #003A66;
+    --primary-1000: #001D33;
+    
+    --secondary-100: #E4EDF9;
+    --secondary-200: #BBC9DB;
+    --secondary-300: #92A5BC;
+    --secondary-400: #69809E;
+    --secondary-500: #405C7F;
+    --secondary-600: #173861;
+    --secondary-700: #122D4E;
+    --secondary-800: #0E223A;
+    --secondary-900: #091627;
+    --secondary-1000: #07111D;
+    
+    --neutrals-100: #000000;
+    --neutrals-200: #1E1E1E;
+    --neutrals-300: #3C3C3C;
+    --neutrals-400: #5A5A5A;
+    --neutrals-500: #787878;   
+    --neutrals-600: #969696;
+    --neutrals-700: #B4B4B4;
+    --neutrals-800: #CECECE;
+    --neutrals-900: #E0E0E0;
+    --neutrals-1000: #EEEEEE;
+    --neutrals-1100: #F7F7F7;
+    --neutrals-1200: #FFFFFF;
+
+    --green-100:#F3F8F5;
+    --green-200:#E5F2EB;
+    --green-300:#C8E4D5;
+    --green-400:#A7D5BD;
+    --green-500:#7CC5A0;
+    --green-600:#36B37E;
+    --green-700:#30A071;
+    --green-800:#2A8B62;
+    --green-900:#227150;
+    --green-1000:#185038;
+
+    --yellow-100:#FFF8F2;
+    --yellow-200:#FFF1E4;
+    --yellow-300:#FFE1C6;
+    --yellow-400:#FFD1A1;
+    --yellow-500:#FFBF72;
+    --yellow-600:#FFAB00;
+    --yellow-700:#E49900;
+    --yellow-800:#C68400;
+    --yellow-900:#A16C00;
+    --yellow-1000:#724C00;
+
+    --red-100:#FFF3F2;
+    --red-200:#FFE7E5;
+    --red-300:#FFCDC8;
+    --red-400:#FFAEA6;
+    --red-500:#FF8A7A;
+    --red-600:#FF5630;
+    --red-700:#E44D2B;
+    --red-800:#C64325;
+    --red-900:#A1361E;
+    --red-1000:#722615;
+
+    --blue-alpha-100:rgba(23, 56, 97, 0.05);
+    --blue-alpha-200:rgba(23, 56, 97, 0.125);
+    --blue-alpha-300:rgba(23, 56, 97, 0.25);
+    --blue-alpha-400:rgba(23, 56, 97, 0.375);
+    --blue-alpha-500:rgba(23, 56, 97, 0.5);
+    --blue-alpha-600:rgba(23, 56, 97, 0.625);
+    --blue-alpha-700:rgba(23, 56, 97, 0.75);
+    --blue-alpha-800:rgba(23, 56, 97, 0.875);
+
+    --cyan-alpha-100:rgba(0, 145, 254, 0.05);
+    --cyan-alpha-200:rgba(0, 145, 254, 0.125);
+    --cyan-alpha-300:rgba(0, 145, 254, 0.25);
+    --cyan-alpha-400:rgba(0, 145, 254, 0.375);
+    --cyan-alpha-500:rgba(0, 145, 254, 0.5);
+    --cyan-alpha-600:rgba(0, 145, 254, 0.625);
+    --cyan-alpha-700:rgba(0, 145, 254, 0.75);
+    --cyan-alpha-800:rgba(0, 145, 254, 0.875);
+
+    --E000: 0px 0px 10px 0px rgba(23, 56, 97, 0.14);
+    --E100: 0px 0px 16px 0px rgba(23, 56, 97, 0.16);
+    --E200: 0px 5px 24px 0px rgba(23, 56, 97, 0.18);
+    --E300: 0px 0px 24px 0px rgba(23, 56, 97, 0.12), 0px 8px 20px 0px rgba(23, 56, 97, 0.06), 0px 4px 28px 0px rgba(23, 56, 97, 0.16);
+    --E400: 0px 16px 32px 0px rgba(23, 56, 97, 0.16), 0px 0px 10px 0px rgba(23, 56, 97, 0.08), 0px 16px 28px 0px rgba(23, 56, 97, 0.12);
+    --E500: 0px 16px 32px 0px rgba(23, 56, 97, 0.16), 0px 0px 10px 0px rgba(23, 56, 97, 0.08), 0px 16px 28px 0px rgba(23, 56, 97, 0.12);
+
+    --focus-cyan--sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px rgba(0, 145, 254, 0.15);
+    --focus-cyan--md: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(0, 145, 254, 0.15);
+    --focus-blue--sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px rgba(23, 56, 97, 0.15);
+    --focus-blue--md: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(23, 56, 97, 0.15);
+    --focus-green--sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px rgba(54, 179, 126, 0.15);
+    --focus-green--md: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(54, 179, 126, 0.15);
+    --focus-yellow--sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px rgba(255, 171, 0, 0.15);
+    --focus-yellow--md: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(255, 171, 0, 0.15);
+    --focus-red--sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px rgba(255, 86, 48, 0.15);
+    --focus-red--md: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(255, 86, 48, 0.15);
+    
+}

package/src/test.ts

@@ -0,0 +1,16 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+  { teardown: { destroyAfterEach: true }},
+);