[WIP] feat(tooltip): Tooltip component

package.json

@@ -155,6 +155,7 @@
         "server-dev:tag": "npm run server-dev -- --env.component tag",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:tree": "npm run server-dev -- --env.component tree",
-        "server-dev:typography": "npm run server-dev -- --env.component typography"
+        "server-dev:typography": "npm run server-dev -- --env.component typography",
+        "server-dev:tooltip": "npm run server-dev -- --env.component tooltip"
     }
 }

src/cdk/a11y/_a11y.scss

@@ -18,3 +18,9 @@
         -moz-appearance: none;
     }
 }
+
+@mixin cdk-high-contrast($target: active) {
+    @media screen and (-ms-high-contrast: $target) {
+        @content;
+    }
+}

src/cdk/overlay/overlay-directives.ts

@@ -273,7 +273,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
         }
 
         if (changes['open']) { //tslint:disable-line
-            this.open ? this._attachOverlay() : this._detachOverlay();
+            this.open ? this._attachOverlay() : this._detachOverlay(); //tslint:disable-line
         }
     }
 
@@ -358,7 +358,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
             this._createOverlay();
 
             this._overlayRef!.keydownEvents().subscribe((event: KeyboardEvent) => { //tslint:disable-line
-                if (event.keyCode === ESCAPE) {
+                if (event.keyCode === ESCAPE) { //tslint:disable-line
                     this._detachOverlay();
                 }
             });

src/cdk/overlay/overlay-ref.ts

@@ -365,7 +365,7 @@ export class OverlayRef implements IPortalOutlet {
 
         coerceArray(cssClasses).forEach((cssClass) => {
             // We can't do a spread here, because IE doesn't support setting multiple classes.
-            isAdd ? classList.add(cssClass) : classList.remove(cssClass);
+            isAdd ? classList.add(cssClass) : classList.remove(cssClass); // tslint:disable-line
         });
     }
 }

src/cdk/overlay/position/overlay-position-builder.ts

@@ -28,24 +28,24 @@ export class OverlayPositionBuilder {
 
     /**
      * Creates a relative position strategy.
-     * @param elementRef
-     * @param originPos
-     * @param overlayPos
+     * @param elementRef //tslint:disable-line
+     * @param originPos //tslint:disable-line
+     * @param overlayPos //tslint:disable-line
      * @deprecated Use `flexibleConnectedTo` instead.
      * @deletion-target 7.0.0
      */
     connectedTo(
         elementRef: ElementRef,
         originPos: IOriginConnectionPosition,
-        overlayPos: IOverlayConnectionPosition): ConnectedPositionStrategy {
+        overlayPos: IOverlayConnectionPosition): ConnectedPositionStrategy { //tslint:disable-line
 
-        return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler,
+        return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler, //tslint:disable-line
             this._document);
     }
 
     /**
      * Creates a flexible position strategy.
-     * @param elementRef
+     * @param elementRef //tslint:disable-line
      */
     flexibleConnectedTo(elementRef: ElementRef | HTMLElement): FlexibleConnectedPositionStrategy {
         return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document,

src/cdk/portal/dom-portal-outlet.ts

@@ -7,7 +7,7 @@ import {
     Injector
 } from '@angular/core';
 
-import {BasePortalOutlet, ComponentPortal, TemplatePortal} from './portal';
+import { BasePortalOutlet, ComponentPortal, TemplatePortal } from './portal';
 
 
 /**
@@ -41,7 +41,7 @@ export class DomPortalOutlet extends BasePortalOutlet {
             componentRef = portal.viewContainerRef.createComponent(
                 componentFactory,
                 portal.viewContainerRef.length,
-                portal.injector || portal.viewContainerRef.parentInjector);
+                portal.injector || portal.viewContainerRef.parentInjector); //tslint:disable-line
 
             this.setDisposeFn(() => componentRef.destroy());
         } else {
@@ -76,13 +76,12 @@ export class DomPortalOutlet extends BasePortalOutlet {
         viewRef.rootNodes.forEach((rootNode) => this.outletElement.appendChild(rootNode));
 
         this.setDisposeFn((() => {
-            let index = viewContainer.indexOf(viewRef);
+            let index = viewContainer.indexOf(viewRef); //tslint:disable-line
             if (index !== -1) {
                 viewContainer.remove(index);
             }
         }));
 
-        // TODO(jelbourn): Return locals from view.
         return viewRef;
     }
 

src/cdk/portal/portal.ts

@@ -153,7 +153,7 @@ export class TemplatePortal<C = any> extends Portal<C> {
     detach(): void {
         this.context = undefined;
 
-        return super.detach();
+        return super.detach(); //tslint:disable-line
     }
 }
 

src/lib-dev/tooltip/module.ts

@@ -0,0 +1,45 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McInputModule } from '@ptsecurity/mosaic/input';
+import { McListModule } from '@ptsecurity/mosaic/list';
+import { McRadioModule } from '@ptsecurity/mosaic/radio';
+import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
+
+
+/* tslint:disable:no-trailing-whitespace */
+@Component({
+    selector: 'app',
+    styleUrls: ['./styles.css'],
+    encapsulation: ViewEncapsulation.None,
+    template: require('./template.html')
+})
+export class DemoComponent {
+}
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        McToolTipModule,
+        McButtonModule,
+        McRadioModule,
+        McListModule,
+        McInputModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {
+}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error)); // tslint:disable-line

src/lib-dev/tooltip/styles.scss

@@ -0,0 +1,38 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/visual/prebuilt/default-visual';
+
+@include mosaic-visual();
+
+body, html {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+}
+
+app {
+    height: 100%;
+    width: 100%;
+}
+
+.container {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+
+    &-item {
+        height: 100%;
+    }
+}
+
+.mc-button {
+    min-width: 85px;
+    text-align: center;
+    padding: 0;
+    margin-right: 8px;
+    margin-bottom: 8px !important;
+}
+
+.custom-pos {
+    align-self: end;
+}

src/lib-dev/tooltip/template.html

@@ -0,0 +1,115 @@
+<section class="container flex-100 layout-row layout-align-center-center">
+    <div class="flex-60 layout-row layout-align-center-center">
+        <div class="flex layout-column layout-align-center-center container-item">
+            <span class="mc-title">Focus</span>
+            <button class="mc-primary"
+                    mc-button
+                    mc-tooltip="One two three"
+                    mcTitle="Download file"
+                    mcTrigger="hover"
+                    >Simple</button>
+            <button class="mc-primary"
+                mc-button
+                color="primary"
+                mc-tooltip
+                mcTitle="Удалить файл"
+                mcTrigger="focus"
+                mcPlacement="top">top</button>
+            <button class="mc-primary"
+                mc-button
+                mc-tooltip="Подсказка может занимать две и более строк"
+                mcTrigger="focus"
+                mcPlacement="right"
+                mcTooltipDisabled>disabled</button>
+            <button class="mc-primary"
+                mc-button
+                mc-tooltip="PDQL-запрос фильтра содержит ошибки"
+                mcTrigger="focus"
+                mcPlacement="left">left</button>
+            <button class="mc-primary"
+                mc-button
+                mc-tooltip="PDQL-запрос фильтра содержит ошибки. Uncaught SyntaxError: Unexpected string"
+                mcTrigger="focus"
+                mcPlacement="bottom">bottom</button>
+        </div>
+        <div class="flex layout-column layout-align-center-center container-item">
+            <span class="mc-title">Hover</span>
+            <button class="mc-primary"
+                    mc-button
+                    mc-tooltip="Показать\Скрыть"
+                    mcPlacement="top">top</button>
+            <button class="mc-primary"
+                    mc-button
+                    mc-tooltip="Активировать записи"
+                    mcPlacement="right">right</button>
+            <button class="mc-primary"
+                    mc-button
+                    mc-tooltip="PDQL-запрос фильтра содержит ошибки
+                                испральве запрос"
+                    mcPlacement="left">left</button>
+            <button class="mc-primary"
+                    mc-button
+                    mc-tooltip="Обновить"
+                    mcPlacement="bottom">bottom</button>
+        </div>
+    </div>
+    <div class="flex layout-column layout-align-center-center container-item">
+        <div class="flex layout-row layout-align-center-center">
+            <mc-radio-group class="flex layout-column layout-align-center-center">
+                <mc-radio-button
+                    class="example-radio-button"
+                    value="option_1"
+                    mc-tooltip
+                    mcTitle="Option 1"
+                    mcPlacement="left">Option 1</mc-radio-button>
+                <mc-radio-button
+                    class="example-radio-button"
+                    value="option_2"
+                    mc-tooltip
+                    mcTitle="Option 2 tooltip"
+                    mcPlacement="left">Option 2</mc-radio-button>
+                <mc-radio-button
+                    class="example-radio-button"
+                    value="option_3"
+                    mc-tooltip
+                    mcTitle="Last option tooltip placed left"
+                    mcPlacement="left">Option 3</mc-radio-button>
+            </mc-radio-group>
+        </div>
+        <div class="flex layout-row layout-aling-center-center">
+            <mc-list-selection
+                class="mc-no-select"
+                [(ngModel)]="multipleSelected"
+                (selectionChange)="onSelectionChange($event)">
+                <mc-list-option
+                    value="Disabled"
+                    disabled
+                    mc-tooltip
+                    mcTooltipDisabled
+                >Disabled</mc-list-option>
+                <mc-list-option
+                    value="Normal"
+                    mc-tooltip="Item inside list can have a tooltip with a lot of text.
+                                Tooltip for nex element is disabled."
+                    mcPlacement="left">Normal</mc-list-option>
+                <mc-list-option
+                    value="Hovered"
+                    class="mc-hovered"
+                    mc-tooltip="Not empty"
+                    mcPlacement="right"
+                    mcTooltipDisabled>Hovered</mc-list-option>
+                <mc-list-option
+                    value="Focused"
+                    class="mc-focused"
+                    mc-tooltip
+                    mcTitle="Focused list item have a tooltip"
+                    mcPlacement="bottom">Focused</mc-list-option>
+                <mc-list-option
+                    value="Selected"
+                    class="mc-selected"
+                    mc-tooltip="Выбранный элемент списка"
+                    mcPlacement="right">Selected</mc-list-option>
+            </mc-list-selection>
+        </div>
+    </div>
+</section>

src/lib/core/animation/fade-animations.ts

@@ -0,0 +1,17 @@
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+    AnimationTriggerMetadata,
+} from '@angular/animations';
+
+
+export const fadeAnimation: AnimationTriggerMetadata =  trigger('fadeAnimation', [
+    state('void', style({ opacity: 0 })),
+    state('true', style({ opacity: 1 })),
+    state('false', style({ opacity: 0 })),
+    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
+    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
+]);

src/lib/core/animation/index.ts

@@ -0,0 +1 @@
+export { fadeAnimation } from './fade-animations';