Merge branch 'main' into ion-notification-service

README.md

@@ -9,6 +9,12 @@
 
 React version here: https://github.com/iurynogueira/ion-react
 
+## Install in your project
+
+```
+npm i @brisanet/ion
+```
+
 ## Install and run project
 
 To run this project, You will need to use [node v.12](https://nodejs.org/en/)

projects/ion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brisanet/ion",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Brisanet/ion.git"

projects/ion/src/lib/sidebar/sidebar.component.ts

@@ -15,30 +15,28 @@ export class IonSidebarComponent {
   public closed = true;
 
   public checkClikOnPageAccess = (event): void => {
-    this.checkClikOnPage(event);
-  };
-
-  public checkClikOnPage(event): void {
-    const containerElement = [document.querySelector('.ion-sidebar--opened')];
+    const containerElement = document.querySelector('.ion-sidebar--opened');
     const innerElement = event.target;
-    if (containerElement.length && !containerElement.includes(innerElement)) {
+    if (containerElement && !containerElement.contains(innerElement)) {
       const closeButton = document.querySelector(
         '.ion-sidebar--opened .ion-sidebar__header button'
       ) as HTMLElement;
       if (closeButton) {
         closeButton.click();
       }
-      document.removeEventListener('click', this.checkClikOnPage);
     }
-  }
+  };
 
   public toggleVisibility(): void {
     this.closed = !this.closed;
     if (!this.closed) {
       setTimeout(() => {
         document.addEventListener('click', this.checkClikOnPageAccess);
       });
+
+      return;
     }
+    document.removeEventListener('click', this.checkClikOnPageAccess);
   }
 
   public itemSelected(itemIndex: number): void {

projects/ion/src/lib/sidebar/sidebar.spec.ts

@@ -215,20 +215,21 @@ describe('Sidebar', () => {
     it('should close sidebar after clicking outside it', async () => {
       jest.useFakeTimers();
       const timeDelay = 300;
-      const { detectChanges } = await render(IonSidebarComponent, {
+
+      await render(IonSidebarComponent, {
         declarations: [IonSidebarItemComponent, IonSidebarGroupComponent],
         imports: [CommonModule, IonIconModule, IonButtonModule],
       });
 
       userEvent.click(getByTestId('toggleVisibility').firstElementChild);
+      jest.advanceTimersByTime(timeDelay);
+      expect(getByTestId('sidebar')).toHaveClass('ion-sidebar--opened');
       userEvent.click(
         within(getByTestId('outsideContainer')).getByTestId(
           'ion-sidebar__toggle-visibility'
-        ).firstElementChild
+        )
       );
 
-      jest.advanceTimersByTime(timeDelay);
-      detectChanges();
       expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
     });
   });

projects/ion/src/lib/smart-table/smart-table.component.html

@@ -206,7 +206,7 @@
                     [iconType]="action.icon"
                     [circularButton]="true"
                     [disabled]="
-                      action.disabled ? !disableAction(row, action) : false
+                      action.disabled ? disableAction(row, action) : false
                     "
                   ></ion-button>
 

projects/ion/src/lib/smart-table/smart-table.component.spec.ts

@@ -168,15 +168,15 @@ describe('IonSmartTableComponent', () => {
     );
   });
 
-  it('should emit event sort with desc false when click in sort icon', async () => {
+  it('should emit event sort with desc true when click in sort icon', async () => {
     const orderBy = columns[0].key;
     fireEvent.click(screen.getByTestId('sort-by-' + orderBy));
     expect(events).toHaveBeenCalledWith({
       change_page: pagination,
       event: EventTable.SORT,
       order: {
         column: orderBy,
-        desc: false,
+        desc: true,
       },
     });
   });
@@ -186,7 +186,7 @@ describe('IonSmartTableComponent', () => {
     fireEvent.click(screen.getByTestId('sort-by-' + orderBy));
     expect(defaultProps.config.order).toStrictEqual({
       column: orderBy,
-      desc: true,
+      desc: false,
     });
   });
 

projects/ion/src/lib/smart-table/smart-table.component.ts

@@ -103,6 +103,8 @@ export class IonSmartTableComponent implements OnInit, AfterViewChecked {
   }
 
   public sort(column: Column): void {
+    column.desc = !column.desc;
+
     this.config.order = {
       column: column.key,
       desc: column.desc,
@@ -112,7 +114,7 @@ export class IonSmartTableComponent implements OnInit, AfterViewChecked {
       change_page: this.pagination,
       order: {
         column: column.key,
-        desc: !!column.desc,
+        desc: column.desc,
       },
     });
 
@@ -121,7 +123,6 @@ export class IonSmartTableComponent implements OnInit, AfterViewChecked {
         columnEach.desc = null;
       }
     });
-    column.desc = !column.desc;
   }
 
   public handleEvent(row: SafeAny, action: ActionTable): void {

projects/ion/src/lib/tooltip/tooltip.component.html

@@ -8,6 +8,7 @@
   [class.ion-tooltip--visible]="ionTooltipVisible"
   [style.top]="top + 'px'"
   [style.left]="left + 'px'"
+  #tooltip
 >
   {{ ionTooltipTitle }}
   <ng-container [ngTemplateOutlet]="ionTooltipTemplateRef"></ng-container>

projects/ion/src/lib/tooltip/tooltip.component.spec.ts

@@ -1,12 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { render, screen } from '@testing-library/angular';
-import { TooltipPosition, TooltipProps } from '../core/types';
+import { TooltipProps } from '../core/types';
 import { IonTooltipComponent } from './tooltip.component';
 
 const tooltipTestId = 'ion-tooltip';
 
-const positions = Object.values(TooltipPosition) as TooltipPosition[];
-
 const defaultProps: TooltipProps = {
   ionTooltipTitle: 'Title',
 };
@@ -38,15 +36,6 @@ describe('IonTooltipComponent', () => {
     await sut({ ionTooltipColorScheme: 'light' });
     expect(screen.getByTestId(tooltipTestId)).toHaveClass('ion-tooltip-light');
   });
-  it.each(positions)(
-    'should render tooltip on position %s',
-    async (position) => {
-      await sut({ ionTooltipPosition: position });
-      expect(screen.getByTestId(tooltipTestId)).toHaveClass(
-        `ion-tooltip-position--${position}`
-      );
-    }
-  );
   it('should not have visible class when visibility is false', async () => {
     await sut();
     expect(screen.getByTestId(tooltipTestId)).not.toHaveClass(

projects/ion/src/lib/tooltip/tooltip.component.ts

@@ -1,17 +1,46 @@
-import { Component, TemplateRef } from '@angular/core';
+import {
+  AfterViewChecked,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
 import { TooltipColorScheme, TooltipPosition } from '../core/types';
+import { TooltipService } from './tooltip.service';
 
 @Component({
   selector: 'ion-tooltip',
   templateUrl: './tooltip.component.html',
   styleUrls: ['./tooltip.component.scss'],
 })
-export class IonTooltipComponent {
+export class IonTooltipComponent implements AfterViewChecked {
+  @ViewChild('tooltip', { static: true }) tooltip: ElementRef;
+
   ionTooltipTitle: string;
   ionTooltipTemplateRef: TemplateRef<void>;
   ionTooltipColorScheme: TooltipColorScheme = 'dark';
   ionTooltipPosition: TooltipPosition = TooltipPosition.DEFAULT;
   ionTooltipVisible = false;
   left = 0;
   top = 0;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private tooltipService: TooltipService
+  ) {}
+
+  ngAfterViewChecked(): void {
+    this.repositionTooltip();
+    this.cdr.detectChanges();
+  }
+
+  private repositionTooltip(): void {
+    const coordinates = this.tooltip.nativeElement.getBoundingClientRect();
+
+    this.tooltipService.setTooltipCoordinates(coordinates);
+    this.tooltipService.setCurrentPosition(this.ionTooltipPosition);
+    this.ionTooltipPosition = this.tooltipService.getNewPosition();
+    this.tooltipService.emitReposition();
+  }
 }

projects/ion/src/lib/tooltip/tooltip.directive.spec.ts

@@ -100,17 +100,6 @@ describe('Directive: Tooltip', () => {
     }
   );
 
-  it.each(Object.values(TooltipPosition))(
-    'should render tooltip on %s position',
-    async (ionTooltipPosition) => {
-      await sut({ ionTooltipPosition });
-      fireEvent.mouseEnter(screen.getByTestId('hostTooltip'));
-      expect(screen.getByTestId('ion-tooltip')).toHaveClass(
-        `ion-tooltip-position--${ionTooltipPosition}`
-      );
-    }
-  );
-
   it('should show tooltip after delay time setted', async () => {
     jest.useFakeTimers();
     const timeDelay = 300;
@@ -133,6 +122,14 @@ describe('Directive: Tooltip', () => {
     );
   });
 
+  it('should reposition the tooltip when exceed the screen size', async () => {
+    await sut();
+    fireEvent.mouseEnter(screen.getByTestId('hostTooltip'));
+    expect(screen.getByTestId('ion-tooltip')).toHaveClass(
+      `ion-tooltip-position--bottomRight`
+    );
+  });
+
   describe('trigger: click', () => {
     afterEach(async () => {
       fireEvent.click(screen.getByTestId('hostTooltip'));

projects/ion/src/lib/tooltip/tooltip.directive.ts

@@ -1,3 +1,4 @@
+import { TooltipPosition } from './../core/types/tooltip';
 import {
   ApplicationRef,
   ComponentFactoryResolver,
@@ -9,21 +10,20 @@ import {
   Injector,
   Input,
   OnDestroy,
+  OnInit,
   TemplateRef,
 } from '@angular/core';
-import {
-  TooltipColorScheme,
-  TooltipPosition,
-  TooltipTrigger,
-} from '../core/types';
+import { TooltipColorScheme, TooltipTrigger } from '../core/types';
 import { SafeAny } from '../utils/safe-any';
 import { IonTooltipComponent } from './tooltip.component';
 import { getPositions } from './utilsTooltip';
+import { TooltipService } from './tooltip.service';
+import { Subscription } from 'rxjs';
 
 @Directive({
   selector: '[ionTooltip]',
 })
-export class IonTooltipDirective implements OnDestroy {
+export class IonTooltipDirective implements OnDestroy, OnInit {
   @Input() ionTooltipTitle = '';
   @Input() ionTooltipTemplateRef: TemplateRef<void>;
   @Input() ionTooltipColorScheme: TooltipColorScheme = 'dark';
@@ -32,16 +32,26 @@ export class IonTooltipDirective implements OnDestroy {
   @Input() ionTooltipTrigger: TooltipTrigger = TooltipTrigger.DEFAULT;
   @Input() ionTooltipShowDelay = 0;
 
+  public subscription$: Subscription;
   private componentRef: ComponentRef<IonTooltipComponent> = null;
   private delayTimeout: number;
 
   constructor(
     private componentFactoryResolver: ComponentFactoryResolver,
     private appRef: ApplicationRef,
     private injector: Injector,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private tooltipService: TooltipService
   ) {}
 
+  ngOnInit(): void {
+    this.subscription$ = this.tooltipService.reposition.subscribe(() => {
+      if (!this.isComponentRefNull()) {
+        this.setComponentPosition();
+      }
+    });
+  }
+
   isComponentRefNull(): boolean {
     return this.componentRef === null;
   }
@@ -77,7 +87,6 @@ export class IonTooltipDirective implements OnDestroy {
         this.showTooltip.bind(this),
         this.ionTooltipShowDelay
       );
-
       this.setComponentPosition();
     }
   }
@@ -87,13 +96,18 @@ export class IonTooltipDirective implements OnDestroy {
       this.elementRef.nativeElement.getBoundingClientRect();
 
     const hostPositions = { left, right, top, bottom };
+
+    this.tooltipService.setHostPosition(hostPositions);
+
     const positions = getPositions(
       hostPositions,
       this.ionTooltipArrowPointAtCenter
     );
 
-    this.componentRef.instance.left = positions[this.ionTooltipPosition].left;
-    this.componentRef.instance.top = positions[this.ionTooltipPosition].top;
+    this.componentRef.instance.left =
+      positions[this.componentRef.instance.ionTooltipPosition].left;
+    this.componentRef.instance.top =
+      positions[this.componentRef.instance.ionTooltipPosition].top;
   }
 
   attachComponentToView(): void {
@@ -145,5 +159,6 @@ export class IonTooltipDirective implements OnDestroy {
 
   ngOnDestroy(): void {
     this.destroyComponent();
+    this.subscription$.unsubscribe();
   }
 }

projects/ion/src/lib/tooltip/tooltip.module.ts

@@ -2,11 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { IonTooltipComponent } from './tooltip.component';
 import { IonTooltipDirective } from './tooltip.directive';
+import { TooltipService } from './tooltip.service';
 
 @NgModule({
   declarations: [IonTooltipComponent, IonTooltipDirective],
   imports: [CommonModule],
   exports: [IonTooltipDirective],
   entryComponents: [IonTooltipComponent],
+  providers: [TooltipService],
 })
 export class IonTooltipModule {}