feat(Tooltip): implementa la componente tooltip

#fix 41

e2e/src/tooltip/tooltip.e2e-spec.ts

@@ -0,0 +1,77 @@
+import { browser, ElementFinder } from 'protractor';
+import { TooltipPage } from './tooltip.po';
+import { timeout } from 'q';
+
+describe('Tooltip', () => {
+  let page: TooltipPage;
+
+  beforeEach(async() => {
+    page = new TooltipPage();
+    await page.go();
+  });
+
+  it('dovrebbe iniziare creato e visualizzato', async () => {
+    expect(await page.existsStandardExampleTooltip()).toBeFalsy();
+    await page.hoverOverStandardExample();
+    expect(await page.existsStandardExampleTooltip()).toBeTruthy();
+    expect(await page.getStandardExampleTooltipClass()).toBe('tooltip show bs-tooltip-right');
+  });
+
+  it('dovrebbe iniziare creato e visualizzato in alto', async () => {
+    expect(await page.existsTopExampleTooltip()).toBeFalsy();
+    await page.hoverOverTopExample();
+    expect(await page.existsTopExampleTooltip()).toBeTruthy();
+    expect(await page.getTopExampleTooltipClass()).toBe('tooltip show bs-tooltip-top');
+  });
+
+  it('dovrebbe iniziare creato e visualizzato a destra', async () => {
+    expect(await page.existsRightExampleTooltip()).toBeFalsy();
+    await page.hoverOverRightExample();
+    expect(await page.existsRightExampleTooltip()).toBeTruthy();
+    expect(await page.getRightExampleTooltipClass()).toBe('tooltip show bs-tooltip-right');
+  });
+
+  it('dovrebbe iniziare creato e visualizzato a sinistra', async () => {
+    expect(await page.existsLeftExampleTooltip()).toBeFalsy();
+    await page.hoverOverLeftExample();
+    expect(await page.existsLeftExampleTooltip()).toBeTruthy();
+    expect(await page.getLeftExampleTooltipClass()).toBe('tooltip show bs-tooltip-left');
+  });
+
+  it('dovrebbe iniziare creato e visualizzato in basso', async () => {
+    expect(await page.existsBottomExampleTooltip()).toBeFalsy();
+    await page.hoverOverBottomExample();
+    expect(await page.existsBottomExampleTooltip()).toBeTruthy();
+    expect(await page.getBottomExampleTooltipClass()).toBe('tooltip show bs-tooltip-bottom');
+  });
+
+  it('dovrebbe iniziare creato e visualizzato a destra, poi in alto e successivamente a sinistra, ed infine in basso', async () => {
+    await page.hoverOverPlacementExample();
+    expect(await page.existsPlacementExampleTooltip()).toBeTruthy();
+    expect(await page.getPlacementExampleTooltipClass()).toBe('tooltip show bs-tooltip-right');
+
+    await page.changeTooltipPlacement();
+    expect(await page.getPlacementExampleTooltipClass()).toBe('tooltip show bs-tooltip-top');
+
+    await page.changeTooltipPlacement();
+    expect(await page.getPlacementExampleTooltipClass()).toBe('tooltip show bs-tooltip-left');
+
+    await page.changeTooltipPlacement();
+    expect(await page.getPlacementExampleTooltipClass()).toBe('tooltip show bs-tooltip-bottom');
+  });
+
+  it('dovrebbe iniziare creato e visualizzato, per poi essere distrutto ed infine ricreato e rivisualizzato', async () => {
+    await page.hoverOverDisposableExample();
+    const isPresent = await page.existsDisposableExampleTooltip();
+    expect(isPresent).toBeTruthy();
+
+    await page.disposeExampleTooltip();
+
+    const isDisposed = await page.existsDisposableExampleTooltip();
+    expect(isDisposed).toBeFalsy();
+
+    await page.hoverOverDisposableExample();
+    expect(await page.existsDisposableExampleTooltip()).toBeTruthy();
+  });
+
+});

e2e/src/tooltip/tooltip.po.ts

@@ -0,0 +1,137 @@
+import { browser, by, element, ExpectedConditions, ElementFinder } from 'protractor';
+
+export class TooltipPage {
+  private readonly TOOLTIP_URL = '/#/componenti/tooltip';
+  private readonly ID_EXAMPLE_TAB = 'tooltip-examples-tab';
+
+  private readonly ID_TOOLTIP_PLACEMENT_BUTTON = 'tooltip-placement-button';
+  private readonly ID_TOOLTIP_DISPOSE_BUTTON = 'tooltip-dispose-button';
+
+  private readonly ID_EXAMPLE_STANDARD = 'tooltip-example-0';
+  private readonly ID_EXAMPLE_TOP = 'tooltip-example-1';
+  private readonly ID_EXAMPLE_RIGHT = 'tooltip-example-2';
+  private readonly ID_EXAMPLE_LEFT = 'tooltip-example-3';
+  private readonly ID_EXAMPLE_BOTTOM = 'tooltip-example-4';
+  private readonly ID_EXAMPLE_PLACEMENT = 'tooltip-example-5';
+  private readonly ID_EXAMPLE_DISPOSABLE = 'tooltip-example-disposable';
+
+  private readonly ID_TOOLTIP_STANDARD = 'it-tooltip-0';
+  private readonly ID_TOOLTIP_TOP = 'it-tooltip-1';
+  private readonly ID_TOOLTIP_RIGHT = 'it-tooltip-2';
+  private readonly ID_TOOLTIP_LEFT = 'it-tooltip-3';
+  private readonly ID_TOOLTIP_BOTTOM = 'it-tooltip-4';
+  private readonly ID_TOOLTIP_PLACEMENT = 'it-tooltip-5';
+  private readonly ID_TOOLTIP_DISPOSABLE = 'it-tooltip-8';
+
+  async go() {
+    await browser.get(this.TOOLTIP_URL);
+    await element(by.id(this.ID_EXAMPLE_TAB)).click();
+    return await browser.sleep(500);
+  }
+
+  private getLabelForAttribute(attr: string) {
+    return `[id="${attr}"]`;
+  }
+
+  async hover(elementId: string) {
+    await browser.actions().mouseMove(element(by.id(elementId))).perform();
+  }
+
+  async hoverOverStandardExample() {
+    await this.hover(this.ID_EXAMPLE_STANDARD);
+  }
+
+  async hoverOverTopExample() {
+    await this.hover(this.ID_EXAMPLE_TOP);
+  }
+
+  async hoverOverRightExample() {
+    await this.hover(this.ID_EXAMPLE_RIGHT);
+  }
+
+  async hoverOverBottomExample() {
+    await this.hover(this.ID_EXAMPLE_BOTTOM);
+  }
+
+  async hoverOverLeftExample() {
+    await this.hover(this.ID_EXAMPLE_LEFT);
+  }
+
+  async existsStandardExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_STANDARD)).isPresent();
+  }
+
+  async getStandardExampleTooltipClass() {
+    return await element(by.id(this.ID_TOOLTIP_STANDARD)).getAttribute('class');
+  }
+
+  async existsTopExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_TOP)).isPresent();
+  }
+
+  async getTopExampleTooltipClass() {
+    return await element(by.id(this.ID_TOOLTIP_TOP)).getAttribute('class');
+  }
+
+  async existsRightExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_RIGHT)).isPresent();
+  }
+
+  async getRightExampleTooltipClass() {
+    return await element(by.id(this.ID_TOOLTIP_RIGHT)).getAttribute('class');
+  }
+
+  async existsBottomExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_BOTTOM)).isPresent();
+  }
+
+  async getBottomExampleTooltipClass() {
+    return await element(by.id(this.ID_TOOLTIP_BOTTOM)).getAttribute('class');
+  }
+
+  async existsLeftExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_LEFT)).isPresent();
+  }
+
+  async getLeftExampleTooltipClass() {
+    return await element(by.id(this.ID_TOOLTIP_LEFT)).getAttribute('class');
+  }
+
+  async hoverOverPlacementExample() {
+    await this.hover(this.ID_EXAMPLE_PLACEMENT);
+  }
+
+  async existsPlacementExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_PLACEMENT)).isPresent();
+  }
+
+  async getPlacementExampleTooltipClass() {
+    return await element(by.id(this.ID_TOOLTIP_PLACEMENT)).getAttribute('class');
+  }
+
+  async changeTooltipPlacement() {
+    await element(by.id(this.ID_TOOLTIP_PLACEMENT_BUTTON)).click();
+  }
+
+  async hoverOverDisposableExample() {
+    await this.hover(this.ID_EXAMPLE_DISPOSABLE);
+  }
+
+  async hoverOverDisposeButton() {
+    await this.hover(this.ID_TOOLTIP_DISPOSE_BUTTON);
+  }
+
+  async existsDisposableExampleTooltip() {
+    return await element(by.id(this.ID_TOOLTIP_DISPOSABLE)).isPresent();
+  }
+
+  async getDisposableExampleTooltipClass() {
+
+    return await element(by.id(this.ID_TOOLTIP_DISPOSABLE)).getAttribute('class');
+  }
+
+  async disposeExampleTooltip() {
+    await element(by.id(this.ID_TOOLTIP_DISPOSE_BUTTON)).click();
+  }
+
+}

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -6,6 +6,8 @@ import { CheckboxComponent } from './checkbox/checkbox.component';
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { RadioButtonComponent, RadioGroupDirective } from './radio/radio.component';
 import { ToggleComponent } from './toggle/toggle.component';
+import { TooltipDirective } from './tooltip/tooltip.directive';
+import { TooltipComponent } from './tooltip/tooltip.component';
 import { ButtonComponent } from './button/button.component';
 import { BadgeDirective } from './badge/badge.directive';
 
@@ -14,15 +16,16 @@ import { BadgeDirective } from './badge/badge.directive';
     CommonModule,
     FormsModule
   ],
-
   declarations: [
     CheckboxComponent,
     ToggleComponent,
     RadioGroupDirective,
     RadioButtonComponent,
     BadgeDirective,
     ProgressBarComponent,
-    ButtonComponent
+    ButtonComponent,
+    TooltipDirective,
+    TooltipComponent
   ],
   exports: [
     CheckboxComponent,
@@ -31,7 +34,9 @@ import { BadgeDirective } from './badge/badge.directive';
     RadioButtonComponent,
     BadgeDirective,
     ProgressBarComponent,
-    ButtonComponent
-  ]
+    ButtonComponent,
+    TooltipDirective
+  ],
+  entryComponents: [TooltipComponent]
 })
 export class DesignAngularKitModule { }

projects/design-angular-kit/src/lib/models/InteractionTrigger.ts

@@ -0,0 +1,17 @@
+import * as t from 'io-ts';
+
+export const InteractionTrigger = t.keyof({
+  click: null,
+  focus: null,
+  hover: null,
+});
+
+const CLICK = 'click';
+const FOCUS = 'focus';
+const HOVER = 'hover';
+
+export const INTERACTION_TRIGGERS = {
+  CLICK: CLICK,
+  FOCUS: FOCUS,
+  HOVER: HOVER,
+};

projects/design-angular-kit/src/lib/tooltip/popup.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright Angular ng-bootstrap team All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://raw.githubusercontent.com/ng-bootstrap/ng-bootstrap/master/LICENSE
+ */
+import {
+    Injector,
+    TemplateRef,
+    ViewRef,
+    ViewContainerRef,
+    Renderer2,
+    ComponentRef,
+    ComponentFactoryResolver
+} from '@angular/core';
+
+export class ContentRef {
+    constructor(public nodes: any[], public viewRef?: ViewRef, public componentRef?: ComponentRef<any>) { }
+}
+
+export class PopupService<T> {
+    private _windowRef: ComponentRef<T>;
+    private _contentRef: ContentRef;
+
+    constructor(
+        private _type: any, private _injector: Injector, private _viewContainerRef: ViewContainerRef,
+        private _renderer: Renderer2, private _componentFactoryResolver: ComponentFactoryResolver) { }
+
+    open(content?: string | TemplateRef<any>, context?: any): ComponentRef<T> {
+        if (!this._windowRef) {
+            this._contentRef = this._getContentRef(content, context);
+            this._windowRef = this._viewContainerRef.createComponent(
+                this._componentFactoryResolver.resolveComponentFactory<T>(this._type), 0, this._injector,
+                this._contentRef.nodes);
+        }
+
+        return this._windowRef;
+    }
+
+    close() {
+        if (this._windowRef) {
+            this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._windowRef.hostView));
+            this._windowRef = null;
+
+            if (this._contentRef.viewRef) {
+                this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._contentRef.viewRef));
+                this._contentRef = null;
+            }
+        }
+    }
+
+    private _getContentRef(content: string | TemplateRef<any>, context?: any): ContentRef {
+        if (!content) {
+            return new ContentRef([]);
+        } else if (content instanceof TemplateRef) {
+            const viewRef = this._viewContainerRef.createEmbeddedView(<TemplateRef<T>>content, context);
+            return new ContentRef([viewRef.rootNodes], viewRef);
+        } else {
+            return new ContentRef([[this._renderer.createText(`${content}`)]]);
+        }
+    }
+}