mis-crystal-design-system 2.4.5 → 2.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.js +24 -10
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js +2 -2
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.js +17 -26
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.min.js +2 -2
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.js +86 -120
- package/bundles/mis-crystal-design-system-tooltip.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-utils.umd.js +33 -0
- package/bundles/mis-crystal-design-system-utils.umd.js.map +1 -0
- package/bundles/mis-crystal-design-system-utils.umd.min.js +2 -0
- package/bundles/mis-crystal-design-system-utils.umd.min.js.map +1 -0
- package/datepicker_v2/mis-crystal-design-system-datepicker_v2.metadata.json +1 -1
- package/daterangepicker_v2/mis-crystal-design-system-daterangepicker_v2.metadata.json +1 -1
- package/daterangepicker_v2/tz-daterangepicker.directive.d.ts +0 -1
- package/esm2015/datepicker_v2/tz-datepicker.directive.js +23 -8
- package/esm2015/daterangepicker_v2/tz-daterangepicker.directive.js +17 -25
- package/esm2015/tooltip/index.js +2 -2
- package/esm2015/tooltip/models/tooltip.model.js +2 -0
- package/esm2015/tooltip/public_api.js +4 -4
- package/esm2015/tooltip/tooltip-container/tooltip.component.js +34 -0
- package/esm2015/tooltip/tooltip.directive.js +68 -57
- package/esm2015/tooltip/tooltip.module.js +5 -5
- package/esm2015/utils/index.js +17 -0
- package/esm2015/utils/mis-crystal-design-system-utils.js +5 -0
- package/fesm2015/mis-crystal-design-system-datepicker_v2.js +21 -6
- package/fesm2015/mis-crystal-design-system-datepicker_v2.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.js +15 -23
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-tooltip.js +86 -101
- package/fesm2015/mis-crystal-design-system-tooltip.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-utils.js +24 -0
- package/fesm2015/mis-crystal-design-system-utils.js.map +1 -0
- package/package.json +1 -1
- package/tooltip/index.d.ts +1 -1
- package/tooltip/mis-crystal-design-system-tooltip.metadata.json +1 -1
- package/tooltip/models/tooltip.model.d.ts +1 -0
- package/tooltip/public_api.d.ts +4 -3
- package/tooltip/tooltip-container/tooltip.component.d.ts +10 -0
- package/tooltip/tooltip.directive.d.ts +10 -13
- package/tooltip/tooltip.module.d.ts +1 -1
- package/utils/index.d.ts +7 -0
- package/utils/mis-crystal-design-system-utils.d.ts +4 -0
- package/utils/mis-crystal-design-system-utils.metadata.json +1 -0
- package/utils/package.json +11 -0
- package/esm2015/tooltip/tooltip.component.js +0 -60
- package/tooltip/tooltip.component.d.ts +0 -15
|
@@ -1,93 +1,52 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('mis-crystal-design-system/tooltip', ['exports', '@angular/core', '@angular/common'], factory) :
|
|
4
|
-
(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));
|
|
5
|
-
}(this, (function (exports, core, common) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/overlay'), require('rxjs/operators'), require('@angular/cdk/portal'), require('mis-crystal-design-system/utils'), require('@angular/common')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('mis-crystal-design-system/tooltip', ['exports', '@angular/core', '@angular/cdk/overlay', 'rxjs/operators', '@angular/cdk/portal', 'mis-crystal-design-system/utils', '@angular/common'], factory) :
|
|
4
|
+
(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.cdk.overlay, global.rxjs.operators, global.ng.cdk.portal, global['mis-crystal-design-system'].utils, global.ng.common));
|
|
5
|
+
}(this, (function (exports, core, overlay, operators, portal, utils, common) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var ToolTipComponent = /** @class */ (function () {
|
|
8
|
-
function ToolTipComponent(
|
|
9
|
-
this.
|
|
10
|
-
this.
|
|
11
|
-
this.toolTipWidth = '';
|
|
12
|
-
this.toolTipPosition = 'Bottom';
|
|
8
|
+
function ToolTipComponent() {
|
|
9
|
+
this.toolTipText = "";
|
|
10
|
+
this.toolTipPosition = "bottom";
|
|
13
11
|
}
|
|
14
|
-
|
|
15
|
-
set: function (value) {
|
|
16
|
-
this.toolTipText = value;
|
|
17
|
-
this.updateToolTipPosition();
|
|
18
|
-
},
|
|
19
|
-
enumerable: false,
|
|
20
|
-
configurable: true
|
|
21
|
-
});
|
|
22
|
-
Object.defineProperty(ToolTipComponent.prototype, "width", {
|
|
23
|
-
set: function (value) {
|
|
24
|
-
this.toolTipWidth = value;
|
|
25
|
-
this.updateToolTipPosition();
|
|
26
|
-
},
|
|
27
|
-
enumerable: false,
|
|
28
|
-
configurable: true
|
|
29
|
-
});
|
|
30
|
-
Object.defineProperty(ToolTipComponent.prototype, "position", {
|
|
31
|
-
set: function (value) {
|
|
32
|
-
this.toolTipPosition = value;
|
|
33
|
-
this.updateToolTipPosition();
|
|
34
|
-
},
|
|
35
|
-
enumerable: false,
|
|
36
|
-
configurable: true
|
|
37
|
-
});
|
|
38
|
-
ToolTipComponent.prototype.ngOnInit = function () {
|
|
39
|
-
};
|
|
12
|
+
ToolTipComponent.prototype.ngOnInit = function () { };
|
|
40
13
|
ToolTipComponent.prototype.ngAfterViewInit = function () {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (this.
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
this.renderer.setStyle(this.container.nativeElement, 'right', "-" + (width + 12) + "px");
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
this.renderer.setStyle(this.container.nativeElement, 'left', '50%');
|
|
56
|
-
this.renderer.setStyle(this.container.nativeElement, 'right', '');
|
|
57
|
-
}
|
|
14
|
+
var _a;
|
|
15
|
+
if (!((_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement))
|
|
16
|
+
return;
|
|
17
|
+
if (this.toolTipPosition === "top" || this.toolTipPosition === "bottom") {
|
|
18
|
+
var eleWidth = this.container.nativeElement.getBoundingClientRect();
|
|
19
|
+
this.container.nativeElement.style.left = eleWidth.width / -2 + "px";
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
if (this.toolTipPosition === "left") {
|
|
23
|
+
var eleWidth = this.container.nativeElement.getBoundingClientRect();
|
|
24
|
+
this.container.nativeElement.style.left = -eleWidth.width + "px";
|
|
58
25
|
}
|
|
59
26
|
};
|
|
60
27
|
return ToolTipComponent;
|
|
61
28
|
}());
|
|
62
29
|
ToolTipComponent.decorators = [
|
|
63
30
|
{ type: core.Component, args: [{
|
|
64
|
-
selector:
|
|
65
|
-
template: "<div id=\"tooltip-container\"
|
|
66
|
-
styles: ["#tooltip-container{position:absolute;z-index:1}#tooltip
|
|
31
|
+
selector: "mis-tooltip",
|
|
32
|
+
template: "<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\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",
|
|
33
|
+
styles: ["#tooltip-container{position:absolute;z-index:1}#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}"]
|
|
67
34
|
},] }
|
|
68
35
|
];
|
|
69
|
-
ToolTipComponent.ctorParameters = function () { return [
|
|
70
|
-
{ type: core.Renderer2 }
|
|
71
|
-
]; };
|
|
36
|
+
ToolTipComponent.ctorParameters = function () { return []; };
|
|
72
37
|
ToolTipComponent.propDecorators = {
|
|
73
|
-
|
|
74
|
-
width: [{ type: core.Input }],
|
|
75
|
-
position: [{ type: core.Input }],
|
|
76
|
-
container: [{ type: core.ViewChild, args: ['container',] }]
|
|
38
|
+
container: [{ type: core.ViewChild, args: ["container",] }]
|
|
77
39
|
};
|
|
78
40
|
|
|
79
41
|
var ToolTipDirective = /** @class */ (function () {
|
|
80
|
-
function ToolTipDirective(
|
|
81
|
-
this.
|
|
82
|
-
this.
|
|
42
|
+
function ToolTipDirective(element, overlay, viewContainerRef) {
|
|
43
|
+
this.element = element;
|
|
44
|
+
this.overlay = overlay;
|
|
83
45
|
this.viewContainerRef = viewContainerRef;
|
|
84
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
85
46
|
this.isToolTipDisplayed = false;
|
|
86
|
-
this.
|
|
87
|
-
this.
|
|
88
|
-
this.
|
|
89
|
-
this.responsivePosition = false;
|
|
90
|
-
this.showOnHover = false;
|
|
47
|
+
this.toolTipText = "";
|
|
48
|
+
this.toolTipPosition = "bottom";
|
|
49
|
+
this.showOnHover = true;
|
|
91
50
|
}
|
|
92
51
|
Object.defineProperty(ToolTipDirective.prototype, "showToolTip", {
|
|
93
52
|
set: function (value) {
|
|
@@ -100,18 +59,9 @@
|
|
|
100
59
|
enumerable: false,
|
|
101
60
|
configurable: true
|
|
102
61
|
});
|
|
103
|
-
Object.defineProperty(ToolTipDirective.prototype, "width", {
|
|
104
|
-
set: function (value) {
|
|
105
|
-
this.toolTipWidth = value;
|
|
106
|
-
this.createToolTip();
|
|
107
|
-
},
|
|
108
|
-
enumerable: false,
|
|
109
|
-
configurable: true
|
|
110
|
-
});
|
|
111
62
|
Object.defineProperty(ToolTipDirective.prototype, "text", {
|
|
112
63
|
set: function (value) {
|
|
113
64
|
this.toolTipText = value;
|
|
114
|
-
this.createToolTip();
|
|
115
65
|
},
|
|
116
66
|
enumerable: false,
|
|
117
67
|
configurable: true
|
|
@@ -119,7 +69,6 @@
|
|
|
119
69
|
Object.defineProperty(ToolTipDirective.prototype, "position", {
|
|
120
70
|
set: function (value) {
|
|
121
71
|
this.toolTipPosition = value;
|
|
122
|
-
this.createToolTip();
|
|
123
72
|
},
|
|
124
73
|
enumerable: false,
|
|
125
74
|
configurable: true
|
|
@@ -132,69 +81,86 @@
|
|
|
132
81
|
if (this.showOnHover)
|
|
133
82
|
this.hideToolTip();
|
|
134
83
|
};
|
|
135
|
-
ToolTipDirective.prototype.ngOnInit = function () {
|
|
136
|
-
this.createToolTip();
|
|
137
|
-
};
|
|
84
|
+
ToolTipDirective.prototype.ngOnInit = function () { };
|
|
138
85
|
ToolTipDirective.prototype.ngAfterViewInit = function () {
|
|
139
|
-
this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'relative');
|
|
140
86
|
if (this.isToolTipDisplayed)
|
|
141
87
|
this.displayToolTip();
|
|
142
88
|
else
|
|
143
89
|
this.hideToolTip();
|
|
144
|
-
if (this.isToolTipDisplayed && this.responsivePosition)
|
|
145
|
-
this.updatePosition();
|
|
146
|
-
};
|
|
147
|
-
ToolTipDirective.prototype.createToolTip = function () {
|
|
148
|
-
var cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(ToolTipComponent);
|
|
149
|
-
this.viewContainerRef.clear();
|
|
150
|
-
this.componentRef = this.viewContainerRef.createComponent(cmpFactoryResolver);
|
|
151
|
-
this.componentRef.instance.width = this.toolTipWidth;
|
|
152
|
-
this.componentRef.instance.text = this.toolTipText;
|
|
153
|
-
this.componentRef.instance.position = this.toolTipPosition;
|
|
154
90
|
};
|
|
155
91
|
ToolTipDirective.prototype.displayToolTip = function () {
|
|
156
|
-
var
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
92
|
+
var _this = this;
|
|
93
|
+
var positionStrategy = this.overlay
|
|
94
|
+
.position()
|
|
95
|
+
.flexibleConnectedTo(this.element)
|
|
96
|
+
.withPositions(utils.genPositionPairs({
|
|
97
|
+
positionX: "center",
|
|
98
|
+
positionY: this.toolTipPosition === "top" ? "top" : "center",
|
|
99
|
+
offsetX: this.positionTooltip("OFFSET_X"),
|
|
100
|
+
offsetY: this.positionTooltip("OFFSET_Y")
|
|
101
|
+
}, false))
|
|
102
|
+
.withPush(true);
|
|
103
|
+
var config = new overlay.OverlayConfig({
|
|
104
|
+
hasBackdrop: false,
|
|
105
|
+
positionStrategy: positionStrategy,
|
|
106
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition()
|
|
107
|
+
});
|
|
108
|
+
this.overlayRef = this.overlay.create(config);
|
|
109
|
+
var tempRef = new portal.ComponentPortal(ToolTipComponent, this.viewContainerRef);
|
|
110
|
+
var tooltipRef = this.overlayRef.attach(tempRef);
|
|
111
|
+
tooltipRef.instance.toolTipText = this.toolTipText;
|
|
112
|
+
tooltipRef.instance.toolTipPosition = this.toolTipPosition;
|
|
113
|
+
this.overlayRef
|
|
114
|
+
.backdropClick()
|
|
115
|
+
.pipe(operators.take(1))
|
|
116
|
+
.subscribe(function () {
|
|
117
|
+
_this.hideToolTip();
|
|
118
|
+
});
|
|
161
119
|
};
|
|
162
|
-
ToolTipDirective.prototype.
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
120
|
+
ToolTipDirective.prototype.positionTooltip = function (type) {
|
|
121
|
+
if (type === "OFFSET_X") {
|
|
122
|
+
return this.toolTipPosition === "right"
|
|
123
|
+
? this.element.nativeElement.offsetWidth / 2 + 8
|
|
124
|
+
: this.toolTipPosition === "left"
|
|
125
|
+
? (this.element.nativeElement.offsetWidth / 2 + 8) * -1
|
|
126
|
+
: this.toolTipPosition === "top" || this.toolTipPosition === "bottom"
|
|
127
|
+
? 0
|
|
128
|
+
: 8;
|
|
129
|
+
}
|
|
130
|
+
if (type !== "OFFSET_Y")
|
|
131
|
+
return;
|
|
132
|
+
return this.toolTipPosition === "right" || this.toolTipPosition === "left"
|
|
133
|
+
? -18
|
|
134
|
+
: this.toolTipPosition === "top"
|
|
135
|
+
? -44
|
|
136
|
+
: this.toolTipPosition === "bottom"
|
|
137
|
+
? this.element.nativeElement.offsetHeight / 2 + 8
|
|
138
|
+
: 8;
|
|
166
139
|
};
|
|
167
|
-
ToolTipDirective.prototype.
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
// Use default value as priority and dont change it here 'toolTipPosition'
|
|
172
|
-
// Update the position using below line
|
|
173
|
-
// this.componentRef.instance.position = 'Right'
|
|
174
|
-
// console.log(x, y, height, width)
|
|
140
|
+
ToolTipDirective.prototype.hideToolTip = function () {
|
|
141
|
+
var _a, _b;
|
|
142
|
+
(_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
|
|
143
|
+
(_b = this.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
175
144
|
};
|
|
176
145
|
return ToolTipDirective;
|
|
177
146
|
}());
|
|
178
147
|
ToolTipDirective.decorators = [
|
|
179
148
|
{ type: core.Directive, args: [{
|
|
180
|
-
selector:
|
|
149
|
+
selector: "[misToolTip]"
|
|
181
150
|
},] }
|
|
182
151
|
];
|
|
183
152
|
ToolTipDirective.ctorParameters = function () { return [
|
|
184
153
|
{ type: core.ElementRef },
|
|
185
|
-
{ type:
|
|
186
|
-
{ type: core.ViewContainerRef }
|
|
187
|
-
{ type: core.ComponentFactoryResolver }
|
|
154
|
+
{ type: overlay.Overlay },
|
|
155
|
+
{ type: core.ViewContainerRef }
|
|
188
156
|
]; };
|
|
189
157
|
ToolTipDirective.propDecorators = {
|
|
190
|
-
responsivePosition: [{ type: core.Input }],
|
|
191
158
|
showOnHover: [{ type: core.Input }],
|
|
192
159
|
showToolTip: [{ type: core.Input }],
|
|
193
|
-
width: [{ type: core.Input }],
|
|
194
160
|
text: [{ type: core.Input }],
|
|
195
161
|
position: [{ type: core.Input }],
|
|
196
|
-
onMouseEnter: [{ type: core.HostListener, args: [
|
|
197
|
-
onMouseLeave: [{ type: core.HostListener, args: [
|
|
162
|
+
onMouseEnter: [{ type: core.HostListener, args: ["mouseenter",] }],
|
|
163
|
+
onMouseLeave: [{ type: core.HostListener, args: ["mouseleave",] }]
|
|
198
164
|
};
|
|
199
165
|
|
|
200
166
|
var ToolTipModule = /** @class */ (function () {
|
|
@@ -1 +1 @@
|
|
|
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',) onMouseEnter() {\n if (this.showOnHover) this.displayToolTip()\n }\n @HostListener('mouseleave',) 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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"}
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-tooltip.umd.js","sources":["../../../projects/mis-components/tooltip/tooltip-container/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, Inject, OnInit, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\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 public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n\n @ViewChild(\"container\") container: ElementRef;\n\n constructor() {}\n ngOnInit() {}\n ngAfterViewInit() {\n if (!this.container?.nativeElement) return;\n if (this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n return;\n }\n if (this.toolTipPosition === \"left\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n }\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, ViewContainerRef, Injector } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n public isToolTipDisplayed: boolean = false;\n public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n private overlayRef: OverlayRef;\n\n @Input() showOnHover: boolean = true;\n @Input() set showToolTip(value: boolean) {\n this.isToolTipDisplayed = value;\n if (value) this.displayToolTip();\n else this.hideToolTip();\n }\n @Input() set text(value: string) {\n this.toolTipText = value;\n }\n @Input() set position(value: ITooltipPositions) {\n this.toolTipPosition = value;\n }\n\n @HostListener(\"mouseenter\") onMouseEnter() {\n if (this.showOnHover) this.displayToolTip();\n }\n @HostListener(\"mouseleave\") onMouseLeave() {\n if (this.showOnHover) this.hideToolTip();\n }\n\n constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n ngOnInit() {}\n ngAfterViewInit() {\n if (this.isToolTipDisplayed) this.displayToolTip();\n else this.hideToolTip();\n }\n\n displayToolTip() {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.element)\n .withPositions(\n genPositionPairs(\n {\n positionX: \"center\",\n positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n offsetX: this.positionTooltip(\"OFFSET_X\"),\n offsetY: this.positionTooltip(\"OFFSET_Y\")\n },\n false\n )\n )\n .withPush(true);\n const config = new OverlayConfig({\n hasBackdrop: false,\n positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition()\n });\n this.overlayRef = this.overlay.create(config);\n const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n const tooltipRef = this.overlayRef.attach(tempRef);\n tooltipRef.instance.toolTipText = this.toolTipText;\n tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n this.overlayRef\n .backdropClick()\n .pipe(take(1))\n .subscribe(() => {\n this.hideToolTip();\n });\n }\n\n positionTooltip(type: \"OFFSET_X\" | \"OFFSET_Y\") {\n if (type === \"OFFSET_X\") {\n return this.toolTipPosition === \"right\"\n ? this.element.nativeElement.offsetWidth / 2 + 8\n : this.toolTipPosition === \"left\"\n ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n : this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\"\n ? 0\n : 8;\n }\n if (type !== \"OFFSET_Y\") return;\n return this.toolTipPosition === \"right\" || this.toolTipPosition === \"left\"\n ? -18\n : this.toolTipPosition === \"top\"\n ? -44\n : this.toolTipPosition === \"bottom\"\n ? this.element.nativeElement.offsetHeight / 2 + 8\n : 8;\n }\n\n hideToolTip() {\n this.overlayRef?.detach();\n this.overlayRef?.dispose();\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/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","ViewChild","genPositionPairs","OverlayConfig","ComponentPortal","take","Directive","ElementRef","Overlay","ViewContainerRef","Input","HostListener","NgModule","CommonModule"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/tooltip",["exports","@angular/core","@angular/common"],o):o(((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,o,e){"use strict";var
|
|
1
|
+
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/cdk/overlay"),require("rxjs/operators"),require("@angular/cdk/portal"),require("mis-crystal-design-system/utils"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/tooltip",["exports","@angular/core","@angular/cdk/overlay","rxjs/operators","@angular/cdk/portal","mis-crystal-design-system/utils","@angular/common"],o):o(((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.cdk.overlay,t.rxjs.operators,t.ng.cdk.portal,t["mis-crystal-design-system"].utils,t.ng.common)}(this,(function(t,o,i,e,n,r,s){"use strict";var l=function(){function t(){this.toolTipText="",this.toolTipPosition="bottom"}return t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){var t;if(null===(t=this.container)||void 0===t?void 0:t.nativeElement)if("top"!==this.toolTipPosition&&"bottom"!==this.toolTipPosition){if("left"===this.toolTipPosition){o=this.container.nativeElement.getBoundingClientRect();this.container.nativeElement.style.left=-o.width+"px"}}else{var o=this.container.nativeElement.getBoundingClientRect();this.container.nativeElement.style.left=o.width/-2+"px"}},t}();l.decorators=[{type:o.Component,args:[{selector:"mis-tooltip",template:"<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\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{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}"]}]}],l.ctorParameters=function(){return[]},l.propDecorators={container:[{type:o.ViewChild,args:["container"]}]};var p=function(){function t(t,o,i){this.element=t,this.overlay=o,this.viewContainerRef=i,this.isToolTipDisplayed=!1,this.toolTipText="",this.toolTipPosition="bottom",this.showOnHover=!0}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,"text",{set:function(t){this.toolTipText=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"position",{set:function(t){this.toolTipPosition=t},enumerable:!1,configurable:!0}),t.prototype.onMouseEnter=function(){this.showOnHover&&this.displayToolTip()},t.prototype.onMouseLeave=function(){this.showOnHover&&this.hideToolTip()},t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){this.isToolTipDisplayed?this.displayToolTip():this.hideToolTip()},t.prototype.displayToolTip=function(){var t=this,o=this.overlay.position().flexibleConnectedTo(this.element).withPositions(r.genPositionPairs({positionX:"center",positionY:"top"===this.toolTipPosition?"top":"center",offsetX:this.positionTooltip("OFFSET_X"),offsetY:this.positionTooltip("OFFSET_Y")},!1)).withPush(!0),s=new i.OverlayConfig({hasBackdrop:!1,positionStrategy:o,scrollStrategy:this.overlay.scrollStrategies.reposition()});this.overlayRef=this.overlay.create(s);var p=new n.ComponentPortal(l,this.viewContainerRef),a=this.overlayRef.attach(p);a.instance.toolTipText=this.toolTipText,a.instance.toolTipPosition=this.toolTipPosition,this.overlayRef.backdropClick().pipe(e.take(1)).subscribe((function(){t.hideToolTip()}))},t.prototype.positionTooltip=function(t){return"OFFSET_X"===t?"right"===this.toolTipPosition?this.element.nativeElement.offsetWidth/2+8:"left"===this.toolTipPosition?-1*(this.element.nativeElement.offsetWidth/2+8):"top"===this.toolTipPosition||"bottom"===this.toolTipPosition?0:8:"OFFSET_Y"===t?"right"===this.toolTipPosition||"left"===this.toolTipPosition?-18:"top"===this.toolTipPosition?-44:"bottom"===this.toolTipPosition?this.element.nativeElement.offsetHeight/2+8:8:void 0},t.prototype.hideToolTip=function(){var t,o;null===(t=this.overlayRef)||void 0===t||t.detach(),null===(o=this.overlayRef)||void 0===o||o.dispose()},t}();p.decorators=[{type:o.Directive,args:[{selector:"[misToolTip]"}]}],p.ctorParameters=function(){return[{type:o.ElementRef},{type:i.Overlay},{type:o.ViewContainerRef}]},p.propDecorators={showOnHover:[{type:o.Input}],showToolTip:[{type:o.Input}],text:[{type:o.Input}],position:[{type:o.Input}],onMouseEnter:[{type:o.HostListener,args:["mouseenter"]}],onMouseLeave:[{type:o.HostListener,args:["mouseleave"]}]};var a=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t}();a.decorators=[{type:o.NgModule,args:[{declarations:[p,l],imports:[s.CommonModule],exports:[p,l],entryComponents:[l]}]}],t.ToolTipComponent=l,t.ToolTipDirective=p,t.ToolTipModule=a,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
2
2
|
//# sourceMappingURL=mis-crystal-design-system-tooltip.umd.min.js.map
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
1
|
+
{"version":3,"sources":["../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts"],"names":["ToolTipComponent","this","toolTipText","toolTipPosition","prototype","ngOnInit","ngAfterViewInit","_a","container","nativeElement","eleWidth","getBoundingClientRect","style","left","width","Component","args","selector","template","ViewChild","ToolTipDirective","element","overlay","viewContainerRef","isToolTipDisplayed","showOnHover","Object","defineProperty","value","displayToolTip","hideToolTip","onMouseEnter","onMouseLeave","_this","positionStrategy","position","flexibleConnectedTo","withPositions","genPositionPairs","positionX","positionY","offsetX","positionTooltip","offsetY","withPush","config","OverlayConfig","hasBackdrop","scrollStrategy","scrollStrategies","reposition","overlayRef","create","tempRef","ComponentPortal","tooltipRef","attach","instance","backdropClick","pipe","take","subscribe","type","offsetWidth","offsetHeight","detach","_b","dispose","Directive","ElementRef","Overlay","ViewContainerRef","Input","HostListener","ToolTipModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","exports","entryComponents"],"mappings":"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","sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\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 public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n\n @ViewChild(\"container\") container: ElementRef;\n\n constructor() {}\n ngOnInit() {}\n ngAfterViewInit() {\n if (!this.container?.nativeElement) return;\n if (this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n return;\n }\n if (this.toolTipPosition === \"left\") {\n const eleWidth = this.container.nativeElement.getBoundingClientRect();\n this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n }\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, ViewContainerRef, Injector } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n public isToolTipDisplayed: boolean = false;\n public toolTipText: string = \"\";\n public toolTipPosition: ITooltipPositions = \"bottom\";\n private overlayRef: OverlayRef;\n\n @Input() showOnHover: boolean = true;\n @Input() set showToolTip(value: boolean) {\n this.isToolTipDisplayed = value;\n if (value) this.displayToolTip();\n else this.hideToolTip();\n }\n @Input() set text(value: string) {\n this.toolTipText = value;\n }\n @Input() set position(value: ITooltipPositions) {\n this.toolTipPosition = value;\n }\n\n @HostListener(\"mouseenter\") onMouseEnter() {\n if (this.showOnHover) this.displayToolTip();\n }\n @HostListener(\"mouseleave\") onMouseLeave() {\n if (this.showOnHover) this.hideToolTip();\n }\n\n constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n ngOnInit() {}\n ngAfterViewInit() {\n if (this.isToolTipDisplayed) this.displayToolTip();\n else this.hideToolTip();\n }\n\n displayToolTip() {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.element)\n .withPositions(\n genPositionPairs(\n {\n positionX: \"center\",\n positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n offsetX: this.positionTooltip(\"OFFSET_X\"),\n offsetY: this.positionTooltip(\"OFFSET_Y\")\n },\n false\n )\n )\n .withPush(true);\n const config = new OverlayConfig({\n hasBackdrop: false,\n positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition()\n });\n this.overlayRef = this.overlay.create(config);\n const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n const tooltipRef = this.overlayRef.attach(tempRef);\n tooltipRef.instance.toolTipText = this.toolTipText;\n tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n this.overlayRef\n .backdropClick()\n .pipe(take(1))\n .subscribe(() => {\n this.hideToolTip();\n });\n }\n\n positionTooltip(type: \"OFFSET_X\" | \"OFFSET_Y\") {\n if (type === \"OFFSET_X\") {\n return this.toolTipPosition === \"right\"\n ? this.element.nativeElement.offsetWidth / 2 + 8\n : this.toolTipPosition === \"left\"\n ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n : this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\"\n ? 0\n : 8;\n }\n if (type !== \"OFFSET_Y\") return;\n return this.toolTipPosition === \"right\" || this.toolTipPosition === \"left\"\n ? -18\n : this.toolTipPosition === \"top\"\n ? -44\n : this.toolTipPosition === \"bottom\"\n ? this.element.nativeElement.offsetHeight / 2 + 8\n : 8;\n }\n\n hideToolTip() {\n this.overlayRef?.detach();\n this.overlayRef?.dispose();\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/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"]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/overlay')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('mis-crystal-design-system/utils', ['exports', '@angular/cdk/overlay'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system'].utils = {}), global.ng.cdk.overlay));
|
|
5
|
+
}(this, (function (exports, overlay) { 'use strict';
|
|
6
|
+
|
|
7
|
+
var genPositionPairs = function (_a, isResponsive) {
|
|
8
|
+
var positionX = _a.positionX, positionY = _a.positionY, _b = _a.offsetX, offsetX = _b === void 0 ? 0 : _b, _c = _a.offsetY, offsetY = _c === void 0 ? 0 : _c;
|
|
9
|
+
var positions = [
|
|
10
|
+
new overlay.ConnectionPositionPair({ originX: positionX, originY: positionY }, {
|
|
11
|
+
overlayX: positionX,
|
|
12
|
+
overlayY: positionY
|
|
13
|
+
}, offsetX, offsetY),
|
|
14
|
+
new overlay.ConnectionPositionPair({ originX: "center", originY: "bottom" }, { overlayX: "center", overlayY: "top" }, offsetX, offsetY),
|
|
15
|
+
new overlay.ConnectionPositionPair({ originX: "center", originY: "top" }, { overlayX: "center", overlayY: "bottom" }, offsetX, offsetY),
|
|
16
|
+
new overlay.ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, offsetX, offsetY),
|
|
17
|
+
new overlay.ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, offsetX, offsetY),
|
|
18
|
+
new overlay.ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, offsetX, offsetY),
|
|
19
|
+
new overlay.ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, offsetX, offsetY)
|
|
20
|
+
];
|
|
21
|
+
return isResponsive ? positions : positions.slice(0, 1);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Generated bundle index. Do not edit.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
exports.genPositionPairs = genPositionPairs;
|
|
29
|
+
|
|
30
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
31
|
+
|
|
32
|
+
})));
|
|
33
|
+
//# sourceMappingURL=mis-crystal-design-system-utils.umd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-utils.umd.js","sources":["../../../projects/mis-components/utils/index.ts","../../../projects/mis-components/utils/mis-crystal-design-system-utils.ts"],"sourcesContent":["import { ConnectionPositionPair } from \"@angular/cdk/overlay\";\n\nexport const genPositionPairs = ({ positionX, positionY, offsetX = 0, offsetY = 0 }, isResponsive: boolean): ConnectionPositionPair[] => {\n const positions = [\n new ConnectionPositionPair(\n { originX: positionX, originY: positionY },\n {\n overlayX: positionX,\n overlayY: positionY\n },\n offsetX,\n offsetY\n ),\n new ConnectionPositionPair({ originX: \"center\", originY: \"bottom\" }, { overlayX: \"center\", overlayY: \"top\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"center\", originY: \"top\" }, { overlayX: \"center\", overlayY: \"bottom\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, offsetX, offsetY)\n ];\n return isResponsive ? positions : positions.slice(0, 1);\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ConnectionPositionPair"],"mappings":";;;;;;QAEa,gBAAgB,GAAG,UAAC,EAAkD,EAAE,YAAqB;YAAvE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EAAE,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA;QAC/E,IAAM,SAAS,GAAG;YAChB,IAAIA,8BAAsB,CACxB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,EAC1C;gBACE,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,SAAS;aACpB,EACD,OAAO,EACP,OAAO,CACR;YACD,IAAIA,8BAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;YAC/H,IAAIA,8BAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;YAC/H,IAAIA,8BAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;YAC7H,IAAIA,8BAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;YAC7H,IAAIA,8BAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;YACzH,IAAIA,8BAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;SAC1H,CAAC;QACF,OAAO,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D;;ICrBA;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(o,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/cdk/overlay")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/utils",["exports","@angular/cdk/overlay"],i):i(((o="undefined"!=typeof globalThis?globalThis:o||self)["mis-crystal-design-system"]=o["mis-crystal-design-system"]||{},o["mis-crystal-design-system"].utils={}),o.ng.cdk.overlay)}(this,(function(o,i){"use strict";o.genPositionPairs=function(o,e){var n=o.positionX,t=o.positionY,r=o.offsetX,s=void 0===r?0:r,a=o.offsetY,l=void 0===a?0:a,y=[new i.ConnectionPositionPair({originX:n,originY:t},{overlayX:n,overlayY:t},s,l),new i.ConnectionPositionPair({originX:"center",originY:"bottom"},{overlayX:"center",overlayY:"top"},s,l),new i.ConnectionPositionPair({originX:"center",originY:"top"},{overlayX:"center",overlayY:"bottom"},s,l),new i.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"},s,l),new i.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"},s,l),new i.ConnectionPositionPair({originX:"end",originY:"bottom"},{overlayX:"end",overlayY:"top"},s,l),new i.ConnectionPositionPair({originX:"end",originY:"top"},{overlayX:"end",overlayY:"bottom"},s,l)];return e?y:y.slice(0,1)},Object.defineProperty(o,"__esModule",{value:!0})}));
|
|
2
|
+
//# sourceMappingURL=mis-crystal-design-system-utils.umd.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../projects/mis-components/utils/index.ts"],"names":["_a","isResponsive","positionX","positionY","_b","offsetX","_c","offsetY","positions","ConnectionPositionPair","originX","originY","overlayX","overlayY","slice"],"mappings":"6cAEgC,SAACA,EAAoDC,OAAlDC,EAASF,EAAAE,UAAEC,EAASH,EAAAG,UAAEC,EAAAJ,EAAAK,QAAAA,OAAO,IAAAD,EAAG,EAACA,EAAEE,EAAAN,EAAAO,QAAAA,OAAO,IAAAD,EAAG,EAACA,EACzEE,EAAY,CAChB,IAAIC,EAAAA,uBACF,CAAEC,QAASR,EAAWS,QAASR,GAC/B,CACES,SAAUV,EACVW,SAAUV,GAEZE,EACAE,GAEF,IAAIE,EAAAA,uBAAuB,CAAEC,QAAS,SAAUC,QAAS,UAAY,CAAEC,SAAU,SAAUC,SAAU,OAASR,EAASE,GACvH,IAAIE,EAAAA,uBAAuB,CAAEC,QAAS,SAAUC,QAAS,OAAS,CAAEC,SAAU,SAAUC,SAAU,UAAYR,EAASE,GACvH,IAAIE,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,UAAY,CAAEC,SAAU,QAASC,SAAU,OAASR,EAASE,GACrH,IAAIE,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,OAAS,CAAEC,SAAU,QAASC,SAAU,UAAYR,EAASE,GACrH,IAAIE,EAAAA,uBAAuB,CAAEC,QAAS,MAAOC,QAAS,UAAY,CAAEC,SAAU,MAAOC,SAAU,OAASR,EAASE,GACjH,IAAIE,EAAAA,uBAAuB,CAAEC,QAAS,MAAOC,QAAS,OAAS,CAAEC,SAAU,MAAOC,SAAU,UAAYR,EAASE,IAEnH,OAAON,EAAeO,EAAYA,EAAUM,MAAM,EAAG","sourcesContent":["import { ConnectionPositionPair } from \"@angular/cdk/overlay\";\n\nexport const genPositionPairs = ({ positionX, positionY, offsetX = 0, offsetY = 0 }, isResponsive: boolean): ConnectionPositionPair[] => {\n const positions = [\n new ConnectionPositionPair(\n { originX: positionX, originY: positionY },\n {\n overlayX: positionX,\n overlayY: positionY\n },\n offsetX,\n offsetY\n ),\n new ConnectionPositionPair({ originX: \"center\", originY: \"bottom\" }, { overlayX: \"center\", overlayY: \"top\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"center\", originY: \"top\" }, { overlayX: \"center\", overlayY: \"bottom\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, offsetX, offsetY),\n new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, offsetX, offsetY)\n ];\n return isResponsive ? positions : positions.slice(0, 1);\n};\n"]}
|