mis-crystal-design-system 2.0.1 → 2.2.0

package/fesm2015/mis-crystal-design-system-toast.js

@@ -0,0 +1,179 @@
+import { OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ɵɵdefineInjectable, Injectable, Component, ɵɵinject, NgModule } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+
+class ToastDataService {
+    constructor() {
+        this.messageMap = new Map();
+    }
+    get messages() {
+        return Array.from(this.messageMap.values()).reverse();
+    }
+    updateMessage(msg) {
+        const id = new Date().getTime();
+        this.messageMap.set(id, msg);
+        return id;
+    }
+    removeMessage(id) {
+        this.messageMap.delete(id);
+    }
+    hasMessage() {
+        return this.messageMap.size > 0;
+    }
+}
+ToastDataService.ɵprov = ɵɵdefineInjectable({ factory: function ToastDataService_Factory() { return new ToastDataService(); }, token: ToastDataService, providedIn: "root" });
+ToastDataService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+ToastDataService.ctorParameters = () => [];
+
+class ToastComponent {
+    constructor(data) {
+        this.data = data;
+    }
+}
+ToastComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-teams-toast',
+                template: "<div class=\"toast-container\">\n  <div *ngFor=\"let msg of data.messages\" @fadeInOut>\n    <div class=\"toast-wrapper\">\n      <div class=\"msg\">{{msg}}</div>\n    </div>\n  </div>\n</div>",
+                animations: [
+                    trigger('fadeInOut', [
+                        transition(':enter', [
+                            style({ opacity: '0', transform: 'translateY(-50%)', height: '0' }),
+                            animate('300ms ease-in', style({ opacity: '1', transform: 'translateY(0)', height: '*' })),
+                        ]),
+                        transition(':leave', [
+                            animate('300ms ease-in', style({ opacity: '0', transform: 'translateY(50%)' })),
+                        ]),
+                    ]),
+                ],
+                styles: [".toast-container{transition:max-height .3s ease-in}.toast-container>div{position:relative;display:flex;justify-content:center}.toast-wrapper{display:flex;flex-direction:row;align-items:center;gap:20px;padding:14px 12px;background:#181f33;box-shadow:0 12px 17px rgba(0,0,0,.14),0 5px 22px rgba(0,0,0,.12),0 7px 8px rgba(0,0,0,.2);border-radius:4px;transition:all .3s ease-in;min-height:44px;transform-origin:top}.toast-wrapper .msg{color:#fff;max-width:314px;flex:1 1 314px;font-size:14px;line-height:20px;letter-spacing:.2px}@media screen and (max-width:360px){.toast-wrapper .msg{max-width:90vw;flex:1 1 90vw}}"]
+            },] }
+];
+ToastComponent.ctorParameters = () => [
+    { type: ToastDataService }
+];
+
+class ToastService {
+    constructor(overlay, data) {
+        this.overlay = overlay;
+        this.data = data;
+        this.messagePromises = [];
+        this.messageBuilder = {
+            error: {
+                simple: 'Something went wrong. Please try again later.',
+                400: 'Bad Request! We are working to fix this.',
+                401: 'UNAUTHORISED',
+                403: 'Sorry for the interruption but seems like your session has expired. Please login again and continue',
+                404: 'Unable to find resource. Please try again later',
+            },
+            item: (item) => {
+                return {
+                    action: (act = 'updated') => {
+                        const success = `Successfully ${act} ${item}.`;
+                        const failure = `Failed to ${act} ${item}.`;
+                        return {
+                            success,
+                            failure,
+                        };
+                    },
+                };
+            },
+            short: (act = 'updated') => {
+                const success = `Successfully ${act}.`;
+                const failure = `Failed to ${act}.`;
+                return {
+                    success,
+                    failure,
+                };
+            },
+            simple: (...args) => args.join(' '),
+            simplest: 'Done!',
+        };
+        this.userProfilePortal = new ComponentPortal(ToastComponent);
+    }
+    displayMsg(msg, timeout = 3000) {
+        var _a;
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally();
+        if ((window === null || window === void 0 ? void 0 : window.innerWidth) < 600) {
+            positionStrategy.bottom('48px');
+        }
+        else {
+            positionStrategy.top('80px');
+        }
+        const config = new OverlayConfig({
+            hasBackdrop: false,
+            positionStrategy,
+        });
+        if (!((_a = this.toastWrapperRef) === null || _a === void 0 ? void 0 : _a.hasAttached())) {
+            this.toastWrapperRef = this.overlay.create(config);
+            this.toastWrapperRef.attach(this.userProfilePortal);
+        }
+        const messageId = this.data.updateMessage(msg);
+        this.messagePromises.push(new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve(this.data.removeMessage(messageId));
+                if (!this.data.hasMessage()) {
+                    this.closeToastOverlay();
+                }
+                // adding 300ms for entry animation
+            }, timeout + 300);
+        }));
+        Promise.race(this.messagePromises).then(() => { });
+    }
+    // tslint:disable-next-line
+    closeToastOverlay() {
+        return setTimeout(() => {
+            var _a;
+            this.messagePromises = [];
+            (_a = this.toastWrapperRef) === null || _a === void 0 ? void 0 : _a.detach();
+            // adding 300ms for exit animation
+        }, 300);
+    }
+}
+ToastService.ɵprov = ɵɵdefineInjectable({ factory: function ToastService_Factory() { return new ToastService(ɵɵinject(Overlay), ɵɵinject(ToastDataService)); }, token: ToastService, providedIn: "root" });
+ToastService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+ToastService.ctorParameters = () => [
+    { type: Overlay },
+    { type: ToastDataService }
+];
+
+class ToastModule {
+    static forRoot() {
+        return {
+            ngModule: ToastModule,
+            providers: [ToastDataService, ToastService],
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: ToastModule,
+            providers: [ToastDataService, ToastService],
+        };
+    }
+}
+ToastModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ToastComponent],
+                imports: [CommonModule, OverlayModule],
+                entryComponents: [ToastComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToastModule, ToastService, ToastDataService as ɵa, ToastComponent as ɵb };
+//# sourceMappingURL=mis-crystal-design-system-toast.js.map

package/fesm2015/mis-crystal-design-system-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-toast.js","sources":["../../../projects/mis-components/toast/toast.data.service.ts","../../../projects/mis-components/toast/toast.component.ts","../../../projects/mis-components/toast/toast.service.ts","../../../projects/mis-components/toast/toast.module.ts","../../../projects/mis-components/toast/mis-crystal-design-system-toast.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ToastDataService {\n  private messageMap: Map<number, string> = new Map();\n  get messages(): string[] {\n    return Array.from(this.messageMap.values()).reverse();\n  }\n\n  constructor() {}\n\n  updateMessage(msg: string): number {\n    const id = new Date().getTime();\n    this.messageMap.set(id, msg);\n    return id;\n  }\n\n  removeMessage(id: number): void {\n    this.messageMap.delete(id);\n  }\n\n  hasMessage(): boolean {\n    return this.messageMap.size > 0;\n  }\n}\n","import { animate, style, transition, trigger } from '@angular/animations';\nimport { Component } from '@angular/core';\nimport { ToastDataService } from './toast.data.service';\n\n@Component({\n  selector: 'mis-teams-toast',\n  templateUrl: './toast.component.html',\n  styleUrls: ['./toast.component.scss'],\n  animations: [\n    trigger('fadeInOut', [\n      transition(':enter', [\n        style({ opacity: '0', transform: 'translateY(-50%)', height: '0' }),\n        animate(\n          '300ms ease-in',\n          style({ opacity: '1', transform: 'translateY(0)', height: '*' })\n        ),\n      ]),\n      transition(':leave', [\n        animate(\n          '300ms ease-in',\n          style({ opacity: '0', transform: 'translateY(50%)' })\n        ),\n      ]),\n    ]),\n  ],\n})\nexport class ToastComponent {\n  constructor(public data: ToastDataService) {}\n}\n","import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { Injectable } from '@angular/core';\nimport { ToastComponent } from './toast.component';\nimport { ToastDataService } from './toast.data.service';\n\ntype Operations =\n  | 'created'\n  | 'updated'\n  | 'deleted'\n  | 'create'\n  | 'update'\n  | 'delete';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ToastService {\n  constructor(private overlay: Overlay, private data: ToastDataService) {\n    this.userProfilePortal = new ComponentPortal(ToastComponent);\n  }\n  private toastWrapperRef: OverlayRef;\n  private messagePromises: Promise<void>[] = [];\n  private userProfilePortal: ComponentPortal<ToastComponent>;\n\n  messageBuilder = {\n    error: {\n      simple: 'Something went wrong. Please try again later.',\n      400: 'Bad Request! We are working to fix this.',\n      401: 'UNAUTHORISED',\n      403: 'Sorry for the interruption but seems like your session has expired. Please login again and continue',\n      404: 'Unable to find resource. Please try again later',\n    },\n    item: (item: string) => {\n      return {\n        action: (act: Operations = 'updated') => {\n          const success = `Successfully ${act} ${item}.`;\n          const failure = `Failed to ${act} ${item}.`;\n          return {\n            success,\n            failure,\n          };\n        },\n      };\n    },\n    short: (act: Operations = 'updated') => {\n      const success = `Successfully ${act}.`;\n      const failure = `Failed to ${act}.`;\n      return {\n        success,\n        failure,\n      };\n    },\n    simple: (...args: string[]) => args.join(' '),\n    simplest: 'Done!',\n  };\n\n  displayMsg(msg: string, timeout = 3000): void {\n    const positionStrategy = this.overlay\n      .position()\n      .global()\n      .centerHorizontally();\n\n    if (window?.innerWidth < 600) {\n      positionStrategy.bottom('48px');\n    } else {\n      positionStrategy.top('80px');\n    }\n    const config = new OverlayConfig({\n      hasBackdrop: false,\n      positionStrategy,\n    });\n    if (!this.toastWrapperRef?.hasAttached()) {\n      this.toastWrapperRef = this.overlay.create(config);\n      this.toastWrapperRef.attach(this.userProfilePortal);\n    }\n    const messageId = this.data.updateMessage(msg);\n    this.messagePromises.push(\n      new Promise((resolve, reject) => {\n        setTimeout(() => {\n          resolve(this.data.removeMessage(messageId));\n          if (!this.data.hasMessage()) {\n            this.closeToastOverlay();\n          }\n          // adding 300ms for entry animation\n        }, timeout + 300);\n      })\n    );\n    Promise.race(this.messagePromises).then(() => {});\n  }\n\n  // tslint:disable-next-line\n  private closeToastOverlay(): any {\n    return setTimeout(() => {\n      this.messagePromises = [];\n      this.toastWrapperRef?.detach();\n      // adding 300ms for exit animation\n    }, 300);\n  }\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { ModuleWithProviders, NgModule } from '@angular/core';\nimport { ToastComponent } from './toast.component';\nimport { ToastDataService } from './toast.data.service';\nimport { ToastService } from './toast.service';\n\n@NgModule({\n  declarations: [ToastComponent],\n  imports: [CommonModule, OverlayModule],\n  entryComponents: [ToastComponent]\n})\nexport class ToastModule {\n  static forRoot(): ModuleWithProviders<ToastModule> {\n    return {\n      ngModule: ToastModule,\n      providers: [ToastDataService, ToastService],\n    };\n  }\n\n  static forChild(): ModuleWithProviders<ToastModule> {\n    return {\n      ngModule: ToastModule,\n      providers: [ToastDataService, ToastService],\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ToastComponent as ɵb} from './toast.component';\nexport {ToastDataService as ɵa} from './toast.data.service';"],"names":[],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-tooltip.js

@@ -0,0 +1,186 @@
+import { Component, Renderer2, Input, ViewChild, Directive, ElementRef, ViewContainerRef, ComponentFactoryResolver, HostListener, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class ToolTipComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.toolTipText = '';
+        this.toolTipWidth = '';
+        this.toolTipPosition = 'Bottom';
+    }
+    set text(value) {
+        this.toolTipText = value;
+        this.updateToolTipPosition();
+    }
+    set width(value) {
+        this.toolTipWidth = value;
+        this.updateToolTipPosition();
+    }
+    set position(value) {
+        this.toolTipPosition = value;
+        this.updateToolTipPosition();
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.updateToolTipPosition();
+    }
+    updateToolTipPosition() {
+        if (this.container) {
+            let width = this.container.nativeElement.offsetWidth;
+            if (this.toolTipPosition === 'Left') {
+                this.renderer.setStyle(this.container.nativeElement, 'left', `-${width + 12}px`);
+                this.renderer.setStyle(this.container.nativeElement, 'right', '');
+            }
+            else if (this.toolTipPosition === 'Right') {
+                this.renderer.setStyle(this.container.nativeElement, 'left', '');
+                this.renderer.setStyle(this.container.nativeElement, 'right', `-${width + 12}px`);
+            }
+            else {
+                this.renderer.setStyle(this.container.nativeElement, 'left', '50%');
+                this.renderer.setStyle(this.container.nativeElement, 'right', '');
+            }
+        }
+    }
+}
+ToolTipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-tooltip',
+                template: "<div id=\"tooltip-container\" [hidden]=\"toolTipText.length < 1\"\n     #container\n     [ngStyle]=\"{'width': toolTipWidth.length > 0? toolTipWidth : ''}\"\n     [ngClass]=\"{\n        'left': toolTipPosition === 'Left',\n        'right': toolTipPosition === 'Right',\n        'top': toolTipPosition === 'Top',\n        'bottom': toolTipPosition === 'Bottom'\n     }\"\n>\n  <div id=\"tooltip\">\n    <div id=\"tooltip-text\">{{toolTipText}}</div>\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'Left',\n        'arrow-right': toolTipPosition === 'Right',\n        'arrow-top': toolTipPosition === 'Top',\n        'arrow-bottom': toolTipPosition === 'Bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n",
+                styles: ["#tooltip-container{position:absolute;z-index:1}#tooltip-container.top{left:50%;transform:translateX(-50%);top:-48px}#tooltip-container.bottom{left:50%;transform:translateX(-50%);bottom:-48px}#tooltip-container.left,#tooltip-container.right{top:50%;transform:translateY(-50%)}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{bottom:-6px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{top:-6px}.arrow-left{right:-6px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{left:-6px}"]
+            },] }
+];
+ToolTipComponent.ctorParameters = () => [
+    { type: Renderer2 }
+];
+ToolTipComponent.propDecorators = {
+    text: [{ type: Input }],
+    width: [{ type: Input }],
+    position: [{ type: Input }],
+    container: [{ type: ViewChild, args: ['container',] }]
+};
+
+class ToolTipDirective {
+    constructor(elementRef, renderer, viewContainerRef, componentFactoryResolver) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.isToolTipDisplayed = false;
+        this.toolTipWidth = '';
+        this.toolTipText = '';
+        this.toolTipPosition = 'Bottom';
+        this.responsivePosition = false;
+        this.showOnHover = false;
+    }
+    set showToolTip(value) {
+        this.isToolTipDisplayed = value;
+        if (value)
+            this.displayToolTip();
+        else
+            this.hideToolTip();
+    }
+    set width(value) {
+        this.toolTipWidth = value;
+        this.createToolTip();
+    }
+    set text(value) {
+        this.toolTipText = value;
+        this.createToolTip();
+    }
+    set position(value) {
+        this.toolTipPosition = value;
+        this.createToolTip();
+    }
+    onMouseEnter() {
+        if (this.showOnHover)
+            this.displayToolTip();
+    }
+    onMouseLeave() {
+        if (this.showOnHover)
+            this.hideToolTip();
+    }
+    ngOnInit() {
+        this.createToolTip();
+    }
+    ngAfterViewInit() {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'relative');
+        if (this.isToolTipDisplayed)
+            this.displayToolTip();
+        else
+            this.hideToolTip();
+        if (this.isToolTipDisplayed && this.responsivePosition)
+            this.updatePosition();
+    }
+    createToolTip() {
+        const cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(ToolTipComponent);
+        this.viewContainerRef.clear();
+        this.componentRef = this.viewContainerRef.createComponent(cmpFactoryResolver);
+        this.componentRef.instance.width = this.toolTipWidth;
+        this.componentRef.instance.text = this.toolTipText;
+        this.componentRef.instance.position = this.toolTipPosition;
+    }
+    displayToolTip() {
+        let isChild = this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement);
+        if (!isChild)
+            this.renderer.appendChild(this.elementRef.nativeElement, this.componentRef.location.nativeElement);
+        if (this.responsivePosition)
+            this.updatePosition();
+    }
+    hideToolTip() {
+        let isChild = this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement);
+        if (isChild)
+            this.renderer.removeChild(this.elementRef.nativeElement, this.componentRef.location.nativeElement);
+    }
+    updatePosition() {
+        // let rect: any = this.componentRef.location.nativeElement.children[0].getBoundingClientRect()
+        // let {x, y, height, width} = rect
+        //TODO: Add logic for responsive positioning
+        // Use default value as priority and dont change it here 'toolTipPosition'
+        // Update the position using below line
+        // this.componentRef.instance.position = 'Right'
+        // console.log(x, y, height, width)
+    }
+}
+ToolTipDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[misToolTip]'
+            },] }
+];
+ToolTipDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: ViewContainerRef },
+    { type: ComponentFactoryResolver }
+];
+ToolTipDirective.propDecorators = {
+    responsivePosition: [{ type: Input }],
+    showOnHover: [{ type: Input }],
+    showToolTip: [{ type: Input }],
+    width: [{ type: Input }],
+    text: [{ type: Input }],
+    position: [{ type: Input }],
+    onMouseEnter: [{ type: HostListener, args: ['mouseenter', ['$event'],] }],
+    onMouseLeave: [{ type: HostListener, args: ['mouseleave', ['$event'],] }]
+};
+
+class ToolTipModule {
+    static forRoot() {
+        return { ngModule: ToolTipModule, providers: [] };
+    }
+}
+ToolTipModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ToolTipDirective, ToolTipComponent],
+                imports: [CommonModule],
+                exports: [ToolTipDirective, ToolTipComponent],
+                entryComponents: [ToolTipComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToolTipComponent, ToolTipDirective, ToolTipModule };
+//# sourceMappingURL=mis-crystal-design-system-tooltip.js.map

package/fesm2015/mis-crystal-design-system-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-tooltip.js","sources":["../../../projects/mis-components/tooltip/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts","../../../projects/mis-components/tooltip/mis-crystal-design-system-tooltip.ts"],"sourcesContent":["import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';\n\n@Component({\n  selector: 'mis-tooltip',\n  templateUrl: './tooltip.component.html',\n  styleUrls: ['./tooltip.component.scss']\n})\nexport class ToolTipComponent implements OnInit, AfterViewInit{\n\n  public toolTipText: string = ''\n  public toolTipWidth: string = ''\n  public toolTipPosition: 'Left' | 'Right' | 'Top' | 'Bottom' = 'Bottom'\n\n  @Input() set text(value: string){\n    this.toolTipText = value\n    this.updateToolTipPosition()\n  }\n  @Input() set width(value: string){\n    this.toolTipWidth = value;\n    this.updateToolTipPosition()\n  }\n  @Input() set position(value: 'Left' | 'Right' | 'Top' | 'Bottom'){\n    this.toolTipPosition = value\n    this.updateToolTipPosition()\n  }\n\n  @ViewChild('container') container: ElementRef\n\n  constructor(private renderer: Renderer2) {\n  }\n  ngOnInit() {\n  }\n  ngAfterViewInit(){\n    this.updateToolTipPosition()\n  }\n  updateToolTipPosition(){\n    if(this.container){\n      let width = this.container.nativeElement.offsetWidth\n      if(this.toolTipPosition === 'Left'){\n        this.renderer.setStyle(this.container.nativeElement, 'left', `-${width + 12}px`)\n        this.renderer.setStyle(this.container.nativeElement, 'right', '')\n      }\n      else if(this.toolTipPosition === 'Right'){\n        this.renderer.setStyle(this.container.nativeElement, 'left', '')\n        this.renderer.setStyle(this.container.nativeElement, 'right', `-${width + 12}px`)\n      }\n      else{\n        this.renderer.setStyle(this.container.nativeElement, 'left', '50%')\n        this.renderer.setStyle(this.container.nativeElement, 'right', '')\n      }\n    }\n  }\n}\n","import {\n  AfterViewInit,\n  ComponentFactoryResolver, ComponentRef,\n  Directive,\n  ElementRef, HostListener, Input,\n  OnInit,\n  Renderer2,\n  ViewContainerRef\n} from '@angular/core';\nimport {ToolTipComponent} from './tooltip.component';\nimport {isChildNodeOf} from 'codelyzer/util/isChildNodeOf';\n\n@Directive({\n  selector: '[misToolTip]'\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n  public isToolTipDisplayed: boolean = false\n  public toolTipWidth: string = ''\n  public toolTipText: string = ''\n  public toolTipPosition: 'Left' | 'Right' | 'Top' | 'Bottom' = 'Bottom'\n\n  @Input() responsivePosition: boolean = false\n  @Input() showOnHover: boolean = false\n  @Input() set showToolTip(value: boolean){\n    this.isToolTipDisplayed = value\n    if(value) this.displayToolTip()\n    else this.hideToolTip()\n  }\n  @Input() set width(value: string){\n    this.toolTipWidth = value\n    this.createToolTip()\n  }\n  @Input() set text(value: string){\n    this.toolTipText = value\n    this.createToolTip()\n  }\n  @Input() set position(value: 'Left' | 'Right' | 'Top' | 'Bottom'){\n    this.toolTipPosition = value\n    this.createToolTip()\n  }\n\n  @HostListener('mouseenter', ['$event']) onMouseEnter() {\n    if (this.showOnHover) this.displayToolTip()\n  }\n  @HostListener('mouseleave', ['$event']) onMouseLeave(){\n    if(this.showOnHover) this.hideToolTip()\n  }\n\n  private componentRef: ComponentRef<ToolTipComponent>\n  constructor(\n    private elementRef: ElementRef,\n    private renderer: Renderer2,\n    private viewContainerRef: ViewContainerRef,\n    private componentFactoryResolver: ComponentFactoryResolver\n  ) {\n  }\n\n  ngOnInit() {\n    this.createToolTip()\n  }\n  ngAfterViewInit(){\n    this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'relative')\n    if(this.isToolTipDisplayed) this.displayToolTip()\n    else this.hideToolTip()\n    if(this.isToolTipDisplayed && this.responsivePosition) this.updatePosition()\n  }\n  createToolTip(){\n    const cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(ToolTipComponent);\n    this.viewContainerRef.clear();\n    this.componentRef = this.viewContainerRef.createComponent(cmpFactoryResolver);\n    this.componentRef.instance.width = this.toolTipWidth\n    this.componentRef.instance.text = this.toolTipText\n    this.componentRef.instance.position = this.toolTipPosition\n  }\n  displayToolTip(){\n    let isChild = this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement)\n    if(!isChild) this.renderer.appendChild(this.elementRef.nativeElement, this.componentRef.location.nativeElement)\n    if(this.responsivePosition) this.updatePosition()\n  }\n  hideToolTip(){\n    let isChild = this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement)\n    if(isChild) this.renderer.removeChild(this.elementRef.nativeElement, this.componentRef.location.nativeElement)\n  }\n  updatePosition(){\n    // let rect: any = this.componentRef.location.nativeElement.children[0].getBoundingClientRect()\n    // let {x, y, height, width} = rect\n    //TODO: Add logic for responsive positioning\n    // Use default value as priority and dont change it here 'toolTipPosition'\n    // Update the position using below line\n    // this.componentRef.instance.position = 'Right'\n    // console.log(x, y, height, width)\n  }\n}\n\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ToolTipDirective } from './tooltip.directive';\nimport {ToolTipComponent} from './tooltip.component';\n\n@NgModule({\n  declarations: [ToolTipDirective, ToolTipComponent],\n  imports: [CommonModule],\n  exports: [ToolTipDirective, ToolTipComponent],\n  entryComponents:[ToolTipComponent]\n})\nexport class ToolTipModule {\n  static forRoot(): ModuleWithProviders<ToolTipModule> {\n    return { ngModule: ToolTipModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}