@colijnit/corecomponents_v12 12.0.95 → 12.0.97
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/colijnit-corecomponents_v12.umd.js +381 -30
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.d.ts +8 -3
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/colijnit-corecomponents_v12.js +9 -4
- package/esm2015/lib/components/base/base-input.component.js +2 -1
- package/esm2015/lib/components/icon/icon.component.js +17 -5
- package/esm2015/lib/components/input-search/input-search.component.js +12 -1
- package/esm2015/lib/components/input-text/input-text.component.js +51 -29
- package/esm2015/lib/components/tooltip/tooltip.component.js +77 -0
- package/esm2015/lib/components/tooltip/tooltip.module.js +19 -0
- package/esm2015/lib/directives/overlay/overlay-parent.directive.js +19 -0
- package/esm2015/lib/directives/overlay/overlay.directive.js +67 -0
- package/esm2015/lib/directives/overlay/overlay.module.js +18 -0
- package/esm2015/lib/directives/tooltip/tooltip-directive.module.js +19 -0
- package/esm2015/lib/directives/tooltip/tooltip.directive.js +78 -0
- package/esm2015/public-api.js +3 -1
- package/fesm2015/colijnit-corecomponents_v12.js +359 -32
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/base/base-input.component.d.ts +1 -0
- package/lib/components/icon/icon.component.d.ts +6 -1
- package/lib/components/input-search/input-search.component.d.ts +5 -0
- package/lib/components/input-search/style/_layout.scss +2 -16
- package/lib/components/input-search/style/_material-definition.scss +1 -0
- package/lib/components/input-text/input-text.component.d.ts +12 -5
- package/lib/components/input-text/style/_layout.scss +22 -36
- package/lib/components/input-text/style/_material-definition.scss +4 -0
- package/lib/components/input-text/style/_theme.scss +3 -0
- package/lib/components/tooltip/style/_layout.scss +52 -0
- package/lib/components/tooltip/style/_material-definition.scss +8 -0
- package/lib/components/tooltip/style/_theme.scss +33 -0
- package/lib/components/tooltip/style/material.scss +4 -0
- package/lib/components/tooltip/tooltip.component.d.ts +18 -0
- package/lib/components/tooltip/tooltip.module.d.ts +2 -0
- package/lib/directives/overlay/overlay-parent.directive.d.ts +6 -0
- package/lib/directives/overlay/overlay.directive.d.ts +14 -0
- package/lib/directives/overlay/overlay.module.d.ts +2 -0
- package/lib/directives/tooltip/tooltip-directive.module.d.ts +2 -0
- package/lib/directives/tooltip/tooltip.directive.d.ts +20 -0
- package/lib/style/_input.mixins.scss +1 -1
- package/lib/style/_variables.scss +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -1247,10 +1247,21 @@ class IconComponent {
|
|
|
1247
1247
|
this.showClass = true;
|
|
1248
1248
|
}
|
|
1249
1249
|
set icon(value) {
|
|
1250
|
-
this.
|
|
1250
|
+
this._icon = value;
|
|
1251
|
+
}
|
|
1252
|
+
ngOnInit() {
|
|
1253
|
+
this._prepareIcon();
|
|
1254
|
+
}
|
|
1255
|
+
_prepareIcon() {
|
|
1256
|
+
if (this.iconData) {
|
|
1257
|
+
this.innerIconData = this.iconData;
|
|
1258
|
+
}
|
|
1259
|
+
else if (this._icon) {
|
|
1260
|
+
this._setIconFromEnum(this._icon);
|
|
1261
|
+
}
|
|
1251
1262
|
}
|
|
1252
1263
|
_setIconFromEnum(icon) {
|
|
1253
|
-
this.
|
|
1264
|
+
this.innerIconData = this._iconCache.getIcon(icon);
|
|
1254
1265
|
}
|
|
1255
1266
|
}
|
|
1256
1267
|
IconComponent.decorators = [
|
|
@@ -1265,8 +1276,9 @@ IconComponent.ctorParameters = () => [
|
|
|
1265
1276
|
];
|
|
1266
1277
|
IconComponent.propDecorators = {
|
|
1267
1278
|
icon: [{ type: Input }],
|
|
1268
|
-
iconData: [{ type: Input }
|
|
1269
|
-
showClass: [{ type: HostBinding, args: [
|
|
1279
|
+
iconData: [{ type: Input }],
|
|
1280
|
+
showClass: [{ type: HostBinding, args: ['class.co-icon',] }],
|
|
1281
|
+
innerIconData: [{ type: HostBinding, args: ['innerHtml',] }]
|
|
1270
1282
|
};
|
|
1271
1283
|
|
|
1272
1284
|
class IconModule {
|
|
@@ -4666,6 +4678,7 @@ BaseInputComponent.propDecorators = {
|
|
|
4666
4678
|
hidden: [{ type: Input }, { type: HostBinding, args: ["class." + BaseInputComponent.HiddenClass,] }],
|
|
4667
4679
|
decimals: [{ type: Input }],
|
|
4668
4680
|
icon: [{ type: Input }],
|
|
4681
|
+
customCssClass: [{ type: Input }],
|
|
4669
4682
|
redErrorBackground: [{ type: Input }, { type: HostBinding, args: ["class.cc-red-error-background",] }],
|
|
4670
4683
|
myFormInputInstance: [{ type: Input }],
|
|
4671
4684
|
nativeBlur: [{ type: Output }],
|
|
@@ -7073,11 +7086,22 @@ class InputTextComponent extends BaseInputComponent {
|
|
|
7073
7086
|
this.showClearButton = undefined;
|
|
7074
7087
|
this.showPlaceholderOnFocus = true;
|
|
7075
7088
|
this.noStyle = false;
|
|
7076
|
-
this.hasOwnLabel = true;
|
|
7077
7089
|
this.hideArrowButtons = false;
|
|
7078
7090
|
this.isSmall = false;
|
|
7091
|
+
this.leftIconClick = new EventEmitter();
|
|
7092
|
+
this.rightIconClick = new EventEmitter();
|
|
7093
|
+
this.hasOwnLabel = true;
|
|
7079
7094
|
super._markAsOnPush();
|
|
7080
7095
|
}
|
|
7096
|
+
showClass() {
|
|
7097
|
+
return true;
|
|
7098
|
+
}
|
|
7099
|
+
get hasLeftIcon() {
|
|
7100
|
+
return this.leftIcon !== undefined && this.leftIcon !== null;
|
|
7101
|
+
}
|
|
7102
|
+
get hasRightIcon() {
|
|
7103
|
+
return this.rightIcon !== undefined && this.rightIcon !== null;
|
|
7104
|
+
}
|
|
7081
7105
|
set model(value) {
|
|
7082
7106
|
if (this.type === 'number' && !isNaN(value)) {
|
|
7083
7107
|
if (this.min && value < this.min || this.max && value > this.max) {
|
|
@@ -7094,39 +7118,46 @@ class InputTextComponent extends BaseInputComponent {
|
|
|
7094
7118
|
get model() {
|
|
7095
7119
|
return super.model;
|
|
7096
7120
|
}
|
|
7097
|
-
showClass() {
|
|
7098
|
-
return true;
|
|
7099
|
-
}
|
|
7100
|
-
get hasLeftIcon() {
|
|
7101
|
-
return this.leftIcon !== undefined && this.leftIcon !== null;
|
|
7102
|
-
}
|
|
7103
|
-
get hasRightIcon() {
|
|
7104
|
-
return this.rightIcon !== undefined && this.rightIcon !== null;
|
|
7105
|
-
}
|
|
7106
7121
|
// exclude some non-digit characters, since input type 'number' still allows the characters -, + and e
|
|
7107
7122
|
excludeNonDigitChars(event) {
|
|
7108
7123
|
const excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
|
|
7109
7124
|
return !excludedKeys.includes(event.key);
|
|
7110
7125
|
}
|
|
7126
|
+
handleLeftIconClick(event) {
|
|
7127
|
+
event.preventDefault();
|
|
7128
|
+
event.stopPropagation();
|
|
7129
|
+
this.leftIconClick.emit(event);
|
|
7130
|
+
}
|
|
7131
|
+
handleRightIconClick(event) {
|
|
7132
|
+
event.preventDefault();
|
|
7133
|
+
event.stopPropagation();
|
|
7134
|
+
this.rightIconClick.emit(event);
|
|
7135
|
+
}
|
|
7111
7136
|
}
|
|
7112
7137
|
InputTextComponent.decorators = [
|
|
7113
7138
|
{ type: Component, args: [{
|
|
7114
7139
|
selector: "co-input-text",
|
|
7115
7140
|
template: `
|
|
7116
|
-
<
|
|
7117
|
-
|
|
7118
|
-
|
|
7119
|
-
|
|
7120
|
-
|
|
7121
|
-
|
|
7122
|
-
|
|
7123
|
-
|
|
7124
|
-
|
|
7125
|
-
|
|
7126
|
-
|
|
7127
|
-
|
|
7128
|
-
|
|
7129
|
-
|
|
7141
|
+
<div class="input-text-wrapper">
|
|
7142
|
+
<co-icon *ngIf="leftIcon" class="input-text-left-icon" [icon]="leftIcon" [iconData]="leftIconData" (click)="handleLeftIconClick($event)"></co-icon>
|
|
7143
|
+
<div *ngIf="leftIcon" class="spacer"></div>
|
|
7144
|
+
<div class="input-wrapper">
|
|
7145
|
+
<label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)"
|
|
7146
|
+
[textContent]="placeholder"></label>
|
|
7147
|
+
<input #input
|
|
7148
|
+
[type]="digitsOnly ? 'number' : type"
|
|
7149
|
+
[ngModel]="model"
|
|
7150
|
+
[min]="type === 'number' && this.min ? this.min : undefined"
|
|
7151
|
+
[max]="type === 'number' && this.max ? this.max : undefined"
|
|
7152
|
+
[readonly]="readonly"
|
|
7153
|
+
[required]="required"
|
|
7154
|
+
(ngModelChange)="modelChange.emit($event)"
|
|
7155
|
+
(keydown)="digitsOnly ? excludeNonDigitChars($event) : true"
|
|
7156
|
+
>
|
|
7157
|
+
</div>
|
|
7158
|
+
<div *ngIf="rightIcon" class="spacer"></div>
|
|
7159
|
+
<co-icon *ngIf="rightIcon" class="input-text-right-icon" [icon]="rightIcon" [iconData]="rightIconData" (click)="handleRightIconClick($event)"></co-icon>
|
|
7160
|
+
</div>
|
|
7130
7161
|
<co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
|
|
7131
7162
|
[committing]="committing"
|
|
7132
7163
|
[commitFinished]="commitFinished"
|
|
@@ -7167,13 +7198,17 @@ InputTextComponent.propDecorators = {
|
|
|
7167
7198
|
showPlaceholderOnFocus: [{ type: Input }],
|
|
7168
7199
|
leftIcon: [{ type: Input }],
|
|
7169
7200
|
rightIcon: [{ type: Input }],
|
|
7201
|
+
leftIconData: [{ type: Input }],
|
|
7202
|
+
rightIconData: [{ type: Input }],
|
|
7170
7203
|
noStyle: [{ type: HostBinding, args: ['class.no-style',] }, { type: Input }],
|
|
7204
|
+
hideArrowButtons: [{ type: Input }, { type: HostBinding, args: ['class.hide-arrows',] }],
|
|
7205
|
+
isSmall: [{ type: HostBinding, args: ['class.is-small',] }, { type: Input }],
|
|
7206
|
+
leftIconClick: [{ type: Output }],
|
|
7207
|
+
rightIconClick: [{ type: Output }],
|
|
7171
7208
|
showClass: [{ type: HostBinding, args: ["class.co-input-text",] }],
|
|
7172
7209
|
hasLeftIcon: [{ type: HostBinding, args: ['class.has-left-icon',] }],
|
|
7173
7210
|
hasRightIcon: [{ type: HostBinding, args: ['class.has-right-icon',] }],
|
|
7174
|
-
hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
|
|
7175
|
-
hideArrowButtons: [{ type: Input }, { type: HostBinding, args: ['class.hide-arrows',] }],
|
|
7176
|
-
isSmall: [{ type: HostBinding, args: ['class.is-small',] }, { type: Input }]
|
|
7211
|
+
hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
|
|
7177
7212
|
};
|
|
7178
7213
|
|
|
7179
7214
|
class ValidationErrorModule {
|
|
@@ -7319,6 +7354,8 @@ class InputSearchComponent extends BaseInputComponent {
|
|
|
7319
7354
|
super(...arguments);
|
|
7320
7355
|
this.searchIcon = CoreComponentsIcon.Magnifier;
|
|
7321
7356
|
this.search = new EventEmitter();
|
|
7357
|
+
this.leftIconClick = new EventEmitter();
|
|
7358
|
+
this.rightIconClick = new EventEmitter();
|
|
7322
7359
|
this.useLeftIcon = false;
|
|
7323
7360
|
this.useRightIcon = false;
|
|
7324
7361
|
this.centerLabel = false;
|
|
@@ -7341,13 +7378,18 @@ InputSearchComponent.decorators = [
|
|
|
7341
7378
|
selector: 'co-input-search',
|
|
7342
7379
|
template: `
|
|
7343
7380
|
<co-input-text
|
|
7381
|
+
[ngClass]="customCssClass"
|
|
7344
7382
|
[model]="model"
|
|
7345
7383
|
[leftIcon]="useLeftIcon ? searchIcon : null"
|
|
7346
7384
|
[rightIcon]="useRightIcon ? searchIcon : null"
|
|
7385
|
+
[leftIconData]="useLeftIcon && leftIconData ? leftIconData : undefined"
|
|
7386
|
+
[rightIconData]="useRightIcon && rightIconData ? rightIconData : undefined"
|
|
7347
7387
|
[placeholder]="placeholder"
|
|
7348
7388
|
[customHeight]="true"
|
|
7349
7389
|
[showPlaceholderOnFocus]="false"
|
|
7350
7390
|
(modelChange)="modelChange.emit($event)"
|
|
7391
|
+
(leftIconClick)="leftIconClick.emit($event)"
|
|
7392
|
+
(rightIconClick)="rightIconClick.emit($event)"
|
|
7351
7393
|
></co-input-text>
|
|
7352
7394
|
`,
|
|
7353
7395
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -7357,8 +7399,12 @@ InputSearchComponent.decorators = [
|
|
|
7357
7399
|
InputSearchComponent.propDecorators = {
|
|
7358
7400
|
placeholder: [{ type: Input }],
|
|
7359
7401
|
search: [{ type: Output }],
|
|
7402
|
+
leftIconClick: [{ type: Output }],
|
|
7403
|
+
rightIconClick: [{ type: Output }],
|
|
7360
7404
|
useLeftIcon: [{ type: Input }],
|
|
7361
7405
|
useRightIcon: [{ type: Input }],
|
|
7406
|
+
leftIconData: [{ type: Input }],
|
|
7407
|
+
rightIconData: [{ type: Input }],
|
|
7362
7408
|
centerLabel: [{ type: HostBinding, args: ['class.center-label',] }, { type: Input }],
|
|
7363
7409
|
showClass: [{ type: HostBinding, args: ['class.co-input-search',] }]
|
|
7364
7410
|
};
|
|
@@ -10937,6 +10983,287 @@ ClickoutsideModule.decorators = [
|
|
|
10937
10983
|
},] }
|
|
10938
10984
|
];
|
|
10939
10985
|
|
|
10986
|
+
class OverlayDirective {
|
|
10987
|
+
constructor(elementRef) {
|
|
10988
|
+
this._elementRef = elementRef;
|
|
10989
|
+
}
|
|
10990
|
+
set parent(value) {
|
|
10991
|
+
if (value && value.elementRef) {
|
|
10992
|
+
this._parent = value.elementRef;
|
|
10993
|
+
}
|
|
10994
|
+
else {
|
|
10995
|
+
if (this._parent) {
|
|
10996
|
+
this._observer.disconnect();
|
|
10997
|
+
}
|
|
10998
|
+
}
|
|
10999
|
+
}
|
|
11000
|
+
ngOnDestroy() {
|
|
11001
|
+
window.removeEventListener("scroll", (event) => this._handleScroll);
|
|
11002
|
+
this._observer.disconnect();
|
|
11003
|
+
this._elementRef = undefined;
|
|
11004
|
+
this._parent = undefined;
|
|
11005
|
+
}
|
|
11006
|
+
ngOnInit() {
|
|
11007
|
+
window.addEventListener("scroll", (event) => this._handleScroll);
|
|
11008
|
+
this._initiallyPlaceElement();
|
|
11009
|
+
this._observer = new ResizeObserver((entries) => {
|
|
11010
|
+
const entry = entries[0];
|
|
11011
|
+
const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
11012
|
+
const parentRect = this._parent.nativeElement.getBoundingClientRect();
|
|
11013
|
+
this._placeElement(entry.contentRect.bottom, entry.contentRect.right, parentRect, elementRect);
|
|
11014
|
+
});
|
|
11015
|
+
this._observer.observe(document.body);
|
|
11016
|
+
}
|
|
11017
|
+
_initiallyPlaceElement() {
|
|
11018
|
+
const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
11019
|
+
const parentRect = this._parent.nativeElement.getBoundingClientRect();
|
|
11020
|
+
this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
|
|
11021
|
+
}
|
|
11022
|
+
_placeElement(bottom, right, parentRect, elementRect) {
|
|
11023
|
+
if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
|
|
11024
|
+
this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
|
|
11025
|
+
}
|
|
11026
|
+
else {
|
|
11027
|
+
this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
|
|
11028
|
+
}
|
|
11029
|
+
if (right < parentRect.left + elementRect.width) { // make sure it fits at the right
|
|
11030
|
+
this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
|
|
11031
|
+
}
|
|
11032
|
+
else {
|
|
11033
|
+
this._elementRef.nativeElement.style.left = parentRect.left + "px";
|
|
11034
|
+
}
|
|
11035
|
+
}
|
|
11036
|
+
_handleScroll(event) {
|
|
11037
|
+
console.log("scroll");
|
|
11038
|
+
}
|
|
11039
|
+
}
|
|
11040
|
+
OverlayDirective.decorators = [
|
|
11041
|
+
{ type: Directive, args: [{
|
|
11042
|
+
selector: "[overlay]"
|
|
11043
|
+
},] }
|
|
11044
|
+
];
|
|
11045
|
+
OverlayDirective.ctorParameters = () => [
|
|
11046
|
+
{ type: ElementRef }
|
|
11047
|
+
];
|
|
11048
|
+
OverlayDirective.propDecorators = {
|
|
11049
|
+
parent: [{ type: Input, args: ["overlay",] }]
|
|
11050
|
+
};
|
|
11051
|
+
|
|
11052
|
+
class OverlayParentDirective {
|
|
11053
|
+
constructor(elementRef) {
|
|
11054
|
+
this.elementRef = elementRef;
|
|
11055
|
+
}
|
|
11056
|
+
ngOnDestroy() {
|
|
11057
|
+
this.elementRef = undefined;
|
|
11058
|
+
}
|
|
11059
|
+
}
|
|
11060
|
+
OverlayParentDirective.decorators = [
|
|
11061
|
+
{ type: Directive, args: [{
|
|
11062
|
+
selector: '[overlayParent]',
|
|
11063
|
+
exportAs: 'overlayParent'
|
|
11064
|
+
},] }
|
|
11065
|
+
];
|
|
11066
|
+
OverlayParentDirective.ctorParameters = () => [
|
|
11067
|
+
{ type: ElementRef }
|
|
11068
|
+
];
|
|
11069
|
+
|
|
11070
|
+
class OverlayModule {
|
|
11071
|
+
}
|
|
11072
|
+
OverlayModule.decorators = [
|
|
11073
|
+
{ type: NgModule, args: [{
|
|
11074
|
+
declarations: [
|
|
11075
|
+
OverlayDirective,
|
|
11076
|
+
OverlayParentDirective
|
|
11077
|
+
],
|
|
11078
|
+
exports: [
|
|
11079
|
+
OverlayDirective,
|
|
11080
|
+
OverlayParentDirective
|
|
11081
|
+
]
|
|
11082
|
+
},] }
|
|
11083
|
+
];
|
|
11084
|
+
|
|
11085
|
+
class TooltipComponent {
|
|
11086
|
+
constructor(_elementRef, _changeDetector) {
|
|
11087
|
+
this._elementRef = _elementRef;
|
|
11088
|
+
this._changeDetector = _changeDetector;
|
|
11089
|
+
this.top = -100;
|
|
11090
|
+
this.left = -100;
|
|
11091
|
+
this.bottom = false;
|
|
11092
|
+
this.animate = true;
|
|
11093
|
+
}
|
|
11094
|
+
set hostElement(value) {
|
|
11095
|
+
this._hostElement = value;
|
|
11096
|
+
// this._positionTooltip();
|
|
11097
|
+
}
|
|
11098
|
+
get hostElement() {
|
|
11099
|
+
return this._hostElement;
|
|
11100
|
+
}
|
|
11101
|
+
showClass() {
|
|
11102
|
+
return true;
|
|
11103
|
+
}
|
|
11104
|
+
ngAfterViewInit() {
|
|
11105
|
+
setTimeout(() => {
|
|
11106
|
+
this._positionTooltip();
|
|
11107
|
+
});
|
|
11108
|
+
}
|
|
11109
|
+
_positionTooltip() {
|
|
11110
|
+
if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
|
|
11111
|
+
const rect = this.hostElement.getBoundingClientRect();
|
|
11112
|
+
const ownRect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
11113
|
+
let wantedLeft = rect.left;
|
|
11114
|
+
let wantedTop = rect.top - ownRect.height;
|
|
11115
|
+
if (wantedTop < 0) { // out of view, move to bottom
|
|
11116
|
+
this.bottom = true;
|
|
11117
|
+
wantedTop = rect.bottom;
|
|
11118
|
+
}
|
|
11119
|
+
else {
|
|
11120
|
+
this.bottom = false;
|
|
11121
|
+
}
|
|
11122
|
+
this.left = wantedLeft;
|
|
11123
|
+
this.top = wantedTop;
|
|
11124
|
+
this._changeDetector.markForCheck();
|
|
11125
|
+
this._changeDetector.detectChanges();
|
|
11126
|
+
}
|
|
11127
|
+
}
|
|
11128
|
+
}
|
|
11129
|
+
TooltipComponent.decorators = [
|
|
11130
|
+
{ type: Component, args: [{
|
|
11131
|
+
selector: 'co-tooltip',
|
|
11132
|
+
template: `
|
|
11133
|
+
<div class="tooltip" [innerHTML]="toolTip"></div>
|
|
11134
|
+
`,
|
|
11135
|
+
animations: [
|
|
11136
|
+
trigger("showHide", [
|
|
11137
|
+
state("void", style({ opacity: 0 })),
|
|
11138
|
+
state("*", style({ opacity: 1 })),
|
|
11139
|
+
transition("void <=> *", animate("200ms ease-in-out")),
|
|
11140
|
+
])
|
|
11141
|
+
],
|
|
11142
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11143
|
+
encapsulation: ViewEncapsulation.None
|
|
11144
|
+
},] }
|
|
11145
|
+
];
|
|
11146
|
+
TooltipComponent.ctorParameters = () => [
|
|
11147
|
+
{ type: ElementRef },
|
|
11148
|
+
{ type: ChangeDetectorRef }
|
|
11149
|
+
];
|
|
11150
|
+
TooltipComponent.propDecorators = {
|
|
11151
|
+
hostElement: [{ type: Input }],
|
|
11152
|
+
toolTip: [{ type: Input }],
|
|
11153
|
+
showClass: [{ type: HostBinding, args: ['class.co-tooltip',] }],
|
|
11154
|
+
top: [{ type: HostBinding, args: ["style.top.px",] }],
|
|
11155
|
+
left: [{ type: HostBinding, args: ["style.left.px",] }],
|
|
11156
|
+
bottom: [{ type: HostBinding, args: ["class.bottom",] }],
|
|
11157
|
+
animate: [{ type: HostBinding, args: ['@showHide',] }]
|
|
11158
|
+
};
|
|
11159
|
+
|
|
11160
|
+
class TooltipDirective {
|
|
11161
|
+
constructor(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
|
|
11162
|
+
this._compFactoryResolver = _compFactoryResolver;
|
|
11163
|
+
this._appRef = _appRef;
|
|
11164
|
+
this._injector = _injector;
|
|
11165
|
+
this._sanitizer = _sanitizer;
|
|
11166
|
+
this._elementRef = elementRef;
|
|
11167
|
+
}
|
|
11168
|
+
set tooltip(str) {
|
|
11169
|
+
this._tooltipMessage = str;
|
|
11170
|
+
}
|
|
11171
|
+
ngOnDestroy() {
|
|
11172
|
+
if (this._elementRef && this._elementRef.nativeElement) {
|
|
11173
|
+
this._elementRef.nativeElement.removeEventListener('mouseenter', (event) => this._handleMouseMove(event));
|
|
11174
|
+
this._elementRef.nativeElement.removeEventListener('mouseleave', () => this._removeTooltip());
|
|
11175
|
+
}
|
|
11176
|
+
window.removeEventListener("scroll", (event) => this._handleScroll);
|
|
11177
|
+
this._elementRef = undefined;
|
|
11178
|
+
}
|
|
11179
|
+
ngOnInit() {
|
|
11180
|
+
window.addEventListener("scroll", (event) => this._handleScroll);
|
|
11181
|
+
if (this._elementRef && this._elementRef.nativeElement) {
|
|
11182
|
+
this._elementRef.nativeElement.addEventListener('mouseenter', (event) => this._handleMouseMove(event));
|
|
11183
|
+
this._elementRef.nativeElement.addEventListener('mouseleave', () => this._removeTooltip());
|
|
11184
|
+
}
|
|
11185
|
+
}
|
|
11186
|
+
_handleScroll() {
|
|
11187
|
+
this._removeTooltip();
|
|
11188
|
+
}
|
|
11189
|
+
_handleMouseMove(event) {
|
|
11190
|
+
this._showTooltip(event.clientY, event.clientX);
|
|
11191
|
+
}
|
|
11192
|
+
_showTooltip(top, left) {
|
|
11193
|
+
this._createTooltipComponent(top, left);
|
|
11194
|
+
}
|
|
11195
|
+
_removeTooltip() {
|
|
11196
|
+
if (this._componentRef) {
|
|
11197
|
+
this._appRef.detachView(this._componentRef.hostView);
|
|
11198
|
+
this._componentRef.destroy();
|
|
11199
|
+
this._componentRef = undefined;
|
|
11200
|
+
}
|
|
11201
|
+
}
|
|
11202
|
+
_createTooltipComponent(top, left) {
|
|
11203
|
+
if (!this._tooltipMessage) {
|
|
11204
|
+
return;
|
|
11205
|
+
}
|
|
11206
|
+
if (this._componentRef) {
|
|
11207
|
+
return;
|
|
11208
|
+
}
|
|
11209
|
+
this._componentRef = this._compFactoryResolver
|
|
11210
|
+
.resolveComponentFactory(TooltipComponent)
|
|
11211
|
+
.create(this._injector);
|
|
11212
|
+
this._componentRef.instance.hostElement = this._elementRef.nativeElement;
|
|
11213
|
+
this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
|
|
11214
|
+
this._appRef.attachView(this._componentRef.hostView);
|
|
11215
|
+
const domElem = this._componentRef.hostView.rootNodes[0];
|
|
11216
|
+
document.body.appendChild(domElem);
|
|
11217
|
+
}
|
|
11218
|
+
}
|
|
11219
|
+
TooltipDirective.decorators = [
|
|
11220
|
+
{ type: Directive, args: [{
|
|
11221
|
+
selector: "[tooltip]"
|
|
11222
|
+
},] }
|
|
11223
|
+
];
|
|
11224
|
+
TooltipDirective.ctorParameters = () => [
|
|
11225
|
+
{ type: ElementRef },
|
|
11226
|
+
{ type: ComponentFactoryResolver },
|
|
11227
|
+
{ type: ApplicationRef },
|
|
11228
|
+
{ type: Injector },
|
|
11229
|
+
{ type: DomSanitizer }
|
|
11230
|
+
];
|
|
11231
|
+
TooltipDirective.propDecorators = {
|
|
11232
|
+
tooltip: [{ type: Input, args: ["tooltip",] }]
|
|
11233
|
+
};
|
|
11234
|
+
|
|
11235
|
+
class TooltipModule {
|
|
11236
|
+
}
|
|
11237
|
+
TooltipModule.decorators = [
|
|
11238
|
+
{ type: NgModule, args: [{
|
|
11239
|
+
imports: [
|
|
11240
|
+
CommonModule
|
|
11241
|
+
],
|
|
11242
|
+
declarations: [
|
|
11243
|
+
TooltipComponent
|
|
11244
|
+
],
|
|
11245
|
+
exports: [
|
|
11246
|
+
TooltipComponent
|
|
11247
|
+
]
|
|
11248
|
+
},] }
|
|
11249
|
+
];
|
|
11250
|
+
|
|
11251
|
+
class TooltipDirectiveModule {
|
|
11252
|
+
}
|
|
11253
|
+
TooltipDirectiveModule.decorators = [
|
|
11254
|
+
{ type: NgModule, args: [{
|
|
11255
|
+
imports: [
|
|
11256
|
+
TooltipModule
|
|
11257
|
+
],
|
|
11258
|
+
declarations: [
|
|
11259
|
+
TooltipDirective
|
|
11260
|
+
],
|
|
11261
|
+
exports: [
|
|
11262
|
+
TooltipDirective
|
|
11263
|
+
]
|
|
11264
|
+
},] }
|
|
11265
|
+
];
|
|
11266
|
+
|
|
10940
11267
|
class CheckmarkOverlayComponent {
|
|
10941
11268
|
constructor(_renderer) {
|
|
10942
11269
|
this._renderer = _renderer;
|
|
@@ -11192,5 +11519,5 @@ class FilterViewmodel {
|
|
|
11192
11519
|
* Generated bundle index. Do not edit.
|
|
11193
11520
|
*/
|
|
11194
11521
|
|
|
11195
|
-
export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, PrependPipeModule as ɵbd, PrependPipe as ɵbe, ClickOutsideDirective as ɵbf, ClickOutsideMasterService as ɵbg,
|
|
11522
|
+
export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, PrependPipeModule as ɵbd, PrependPipe as ɵbe, ClickOutsideDirective as ɵbf, ClickOutsideMasterService as ɵbg, OverlayDirective as ɵbh, OverlayParentDirective as ɵbi, TooltipModule as ɵbj, TooltipComponent as ɵbk, TooltipDirective as ɵbl, CheckmarkOverlayComponent as ɵbm, ScreenConfigurationDirective as ɵbn, ScreenConfigComponentWrapper as ɵbo, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, ValidationErrorComponent as ɵw, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, ObserveVisibilityDirective as ɵz };
|
|
11196
11523
|
//# sourceMappingURL=colijnit-corecomponents_v12.js.map
|