mis-crystal-design-system 2.0.1 → 2.2.0

package/bundles/mis-crystal-design-system-tooltip.umd.js

@@ -0,0 +1,228 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/tooltip', ['exports', '@angular/core', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system'].tooltip = {}), global.ng.core, global.ng.common));
+}(this, (function (exports, core, common) { 'use strict';
+
+    var ToolTipComponent = /** @class */ (function () {
+        function ToolTipComponent(renderer) {
+            this.renderer = renderer;
+            this.toolTipText = '';
+            this.toolTipWidth = '';
+            this.toolTipPosition = 'Bottom';
+        }
+        Object.defineProperty(ToolTipComponent.prototype, "text", {
+            set: function (value) {
+                this.toolTipText = value;
+                this.updateToolTipPosition();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ToolTipComponent.prototype, "width", {
+            set: function (value) {
+                this.toolTipWidth = value;
+                this.updateToolTipPosition();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ToolTipComponent.prototype, "position", {
+            set: function (value) {
+                this.toolTipPosition = value;
+                this.updateToolTipPosition();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ToolTipComponent.prototype.ngOnInit = function () {
+        };
+        ToolTipComponent.prototype.ngAfterViewInit = function () {
+            this.updateToolTipPosition();
+        };
+        ToolTipComponent.prototype.updateToolTipPosition = function () {
+            if (this.container) {
+                var 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', '');
+                }
+            }
+        };
+        return ToolTipComponent;
+    }());
+    ToolTipComponent.decorators = [
+        { type: core.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 = function () { return [
+        { type: core.Renderer2 }
+    ]; };
+    ToolTipComponent.propDecorators = {
+        text: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        position: [{ type: core.Input }],
+        container: [{ type: core.ViewChild, args: ['container',] }]
+    };
+
+    var ToolTipDirective = /** @class */ (function () {
+        function ToolTipDirective(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;
+        }
+        Object.defineProperty(ToolTipDirective.prototype, "showToolTip", {
+            set: function (value) {
+                this.isToolTipDisplayed = value;
+                if (value)
+                    this.displayToolTip();
+                else
+                    this.hideToolTip();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ToolTipDirective.prototype, "width", {
+            set: function (value) {
+                this.toolTipWidth = value;
+                this.createToolTip();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ToolTipDirective.prototype, "text", {
+            set: function (value) {
+                this.toolTipText = value;
+                this.createToolTip();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ToolTipDirective.prototype, "position", {
+            set: function (value) {
+                this.toolTipPosition = value;
+                this.createToolTip();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ToolTipDirective.prototype.onMouseEnter = function () {
+            if (this.showOnHover)
+                this.displayToolTip();
+        };
+        ToolTipDirective.prototype.onMouseLeave = function () {
+            if (this.showOnHover)
+                this.hideToolTip();
+        };
+        ToolTipDirective.prototype.ngOnInit = function () {
+            this.createToolTip();
+        };
+        ToolTipDirective.prototype.ngAfterViewInit = function () {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'relative');
+            if (this.isToolTipDisplayed)
+                this.displayToolTip();
+            else
+                this.hideToolTip();
+            if (this.isToolTipDisplayed && this.responsivePosition)
+                this.updatePosition();
+        };
+        ToolTipDirective.prototype.createToolTip = function () {
+            var 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;
+        };
+        ToolTipDirective.prototype.displayToolTip = function () {
+            var 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();
+        };
+        ToolTipDirective.prototype.hideToolTip = function () {
+            var isChild = this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement);
+            if (isChild)
+                this.renderer.removeChild(this.elementRef.nativeElement, this.componentRef.location.nativeElement);
+        };
+        ToolTipDirective.prototype.updatePosition = function () {
+            // 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)
+        };
+        return ToolTipDirective;
+    }());
+    ToolTipDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[misToolTip]'
+                },] }
+    ];
+    ToolTipDirective.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: core.Renderer2 },
+        { type: core.ViewContainerRef },
+        { type: core.ComponentFactoryResolver }
+    ]; };
+    ToolTipDirective.propDecorators = {
+        responsivePosition: [{ type: core.Input }],
+        showOnHover: [{ type: core.Input }],
+        showToolTip: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        text: [{ type: core.Input }],
+        position: [{ type: core.Input }],
+        onMouseEnter: [{ type: core.HostListener, args: ['mouseenter', ['$event'],] }],
+        onMouseLeave: [{ type: core.HostListener, args: ['mouseleave', ['$event'],] }]
+    };
+
+    var ToolTipModule = /** @class */ (function () {
+        function ToolTipModule() {
+        }
+        ToolTipModule.forRoot = function () {
+            return { ngModule: ToolTipModule, providers: [] };
+        };
+        return ToolTipModule;
+    }());
+    ToolTipModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [ToolTipDirective, ToolTipComponent],
+                    imports: [common.CommonModule],
+                    exports: [ToolTipDirective, ToolTipComponent],
+                    entryComponents: [ToolTipComponent]
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.ToolTipComponent = ToolTipComponent;
+    exports.ToolTipDirective = ToolTipDirective;
+    exports.ToolTipModule = ToolTipModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=mis-crystal-design-system-tooltip.umd.js.map

package/bundles/mis-crystal-design-system-tooltip.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-tooltip.umd.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":["Component","Renderer2","Input","ViewChild","Directive","ElementRef","ViewContainerRef","ComponentFactoryResolver","HostListener","NgModule","CommonModule"],"mappings":"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"}

package/bundles/mis-crystal-design-system-tooltip.umd.min.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/tooltip",["exports","@angular/core","@angular/common"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self)["mis-crystal-design-system"]=t["mis-crystal-design-system"]||{},t["mis-crystal-design-system"].tooltip={}),t.ng.core,t.ng.common)}(this,(function(t,e,o){"use strict";var i=function(){function t(t){this.renderer=t,this.toolTipText="",this.toolTipWidth="",this.toolTipPosition="Bottom"}return Object.defineProperty(t.prototype,"text",{set:function(t){this.toolTipText=t,this.updateToolTipPosition()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"width",{set:function(t){this.toolTipWidth=t,this.updateToolTipPosition()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"position",{set:function(t){this.toolTipPosition=t,this.updateToolTipPosition()},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){this.updateToolTipPosition()},t.prototype.updateToolTipPosition=function(){if(this.container){var t=this.container.nativeElement.offsetWidth;"Left"===this.toolTipPosition?(this.renderer.setStyle(this.container.nativeElement,"left","-"+(t+12)+"px"),this.renderer.setStyle(this.container.nativeElement,"right","")):"Right"===this.toolTipPosition?(this.renderer.setStyle(this.container.nativeElement,"left",""),this.renderer.setStyle(this.container.nativeElement,"right","-"+(t+12)+"px")):(this.renderer.setStyle(this.container.nativeElement,"left","50%"),this.renderer.setStyle(this.container.nativeElement,"right",""))}},t}();i.decorators=[{type:e.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}"]}]}],i.ctorParameters=function(){return[{type:e.Renderer2}]},i.propDecorators={text:[{type:e.Input}],width:[{type:e.Input}],position:[{type:e.Input}],container:[{type:e.ViewChild,args:["container"]}]};var n=function(){function t(t,e,o,i){this.elementRef=t,this.renderer=e,this.viewContainerRef=o,this.componentFactoryResolver=i,this.isToolTipDisplayed=!1,this.toolTipWidth="",this.toolTipText="",this.toolTipPosition="Bottom",this.responsivePosition=!1,this.showOnHover=!1}return Object.defineProperty(t.prototype,"showToolTip",{set:function(t){this.isToolTipDisplayed=t,t?this.displayToolTip():this.hideToolTip()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"width",{set:function(t){this.toolTipWidth=t,this.createToolTip()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"text",{set:function(t){this.toolTipText=t,this.createToolTip()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"position",{set:function(t){this.toolTipPosition=t,this.createToolTip()},enumerable:!1,configurable:!0}),t.prototype.onMouseEnter=function(){this.showOnHover&&this.displayToolTip()},t.prototype.onMouseLeave=function(){this.showOnHover&&this.hideToolTip()},t.prototype.ngOnInit=function(){this.createToolTip()},t.prototype.ngAfterViewInit=function(){this.renderer.setStyle(this.elementRef.nativeElement,"position","relative"),this.isToolTipDisplayed?this.displayToolTip():this.hideToolTip(),this.isToolTipDisplayed&&this.responsivePosition&&this.updatePosition()},t.prototype.createToolTip=function(){var t=this.componentFactoryResolver.resolveComponentFactory(i);this.viewContainerRef.clear(),this.componentRef=this.viewContainerRef.createComponent(t),this.componentRef.instance.width=this.toolTipWidth,this.componentRef.instance.text=this.toolTipText,this.componentRef.instance.position=this.toolTipPosition},t.prototype.displayToolTip=function(){this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement)||this.renderer.appendChild(this.elementRef.nativeElement,this.componentRef.location.nativeElement),this.responsivePosition&&this.updatePosition()},t.prototype.hideToolTip=function(){this.elementRef.nativeElement.contains(this.componentRef.location.nativeElement)&&this.renderer.removeChild(this.elementRef.nativeElement,this.componentRef.location.nativeElement)},t.prototype.updatePosition=function(){},t}();n.decorators=[{type:e.Directive,args:[{selector:"[misToolTip]"}]}],n.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer2},{type:e.ViewContainerRef},{type:e.ComponentFactoryResolver}]},n.propDecorators={responsivePosition:[{type:e.Input}],showOnHover:[{type:e.Input}],showToolTip:[{type:e.Input}],width:[{type:e.Input}],text:[{type:e.Input}],position:[{type:e.Input}],onMouseEnter:[{type:e.HostListener,args:["mouseenter",["$event"]]}],onMouseLeave:[{type:e.HostListener,args:["mouseleave",["$event"]]}]};var r=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t}();r.decorators=[{type:e.NgModule,args:[{declarations:[n,i],imports:[o.CommonModule],exports:[n,i],entryComponents:[i]}]}],t.ToolTipComponent=i,t.ToolTipDirective=n,t.ToolTipModule=r,Object.defineProperty(t,"__esModule",{value:!0})}));
+//# sourceMappingURL=mis-crystal-design-system-tooltip.umd.min.js.map

package/bundles/mis-crystal-design-system-tooltip.umd.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../projects/mis-components/tooltip/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts"],"names":["ToolTipComponent","renderer","this","toolTipText","toolTipWidth","toolTipPosition","Object","defineProperty","prototype","value","updateToolTipPosition","ngOnInit","ngAfterViewInit","container","width","nativeElement","offsetWidth","setStyle","Component","args","selector","template","Renderer2","Input","ViewChild","ToolTipDirective","elementRef","viewContainerRef","componentFactoryResolver","isToolTipDisplayed","responsivePosition","showOnHover","displayToolTip","hideToolTip","createToolTip","onMouseEnter","onMouseLeave","updatePosition","cmpFactoryResolver","resolveComponentFactory","clear","componentRef","createComponent","instance","text","position","contains","location","appendChild","removeChild","Directive","ElementRef","ViewContainerRef","ComponentFactoryResolver","HostListener","ToolTipModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","exports","entryComponents"],"mappings":"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","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"]}