@colijnit/corecomponents_v12 12.0.96 → 12.0.98
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 +323 -8
- 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/input-search/input-search.component.js +2 -1
- package/esm2015/lib/components/input-text/input-text.component.js +21 -17
- package/esm2015/lib/components/tooltip/tooltip.component.js +77 -0
- package/esm2015/lib/components/tooltip/tooltip.module.js +19 -0
- package/esm2015/lib/core/model/core-components-icon-svg.js +2 -2
- 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 +305 -18
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/base/base-input.component.d.ts +1 -0
- package/lib/components/input-search/style/_layout.scss +20 -21
- package/lib/components/input-search/style/_material-definition.scss +1 -0
- package/lib/components/input-search/style/_theme.scss +21 -1
- package/lib/components/input-text/input-text.component.d.ts +0 -1
- package/lib/components/input-text/style/_layout.scss +39 -33
- package/lib/components/input-text/style/_material-definition.scss +3 -0
- package/lib/components/input-text/style/_theme.scss +13 -1
- package/lib/components/list-of-values/style/_layout.scss +66 -0
- package/lib/components/list-of-values/style/_material-definition.scss +0 -0
- package/lib/components/list-of-values/style/_theme.scss +0 -0
- package/lib/components/list-of-values/style/material.scss +4 -0
- package/lib/components/simple-grid/style/_layout.scss +34 -1
- package/lib/components/simple-grid/style/_material-definition.scss +10 -1
- 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 +14 -24
- package/lib/style/_variables.scss +3 -3
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -1052,7 +1052,7 @@ const CoreComponentsIconSvg = {
|
|
|
1052
1052
|
"logo": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"21.19\" width=\"2.04\" height=\"6.32\" fill=\"#484f60\"/><path d=\"M18.66,29.24a3.84,3.84,0,0,1-2.85-1.19,4.19,4.19,0,0,1,0-5.77,4,4,0,0,1,5.71,0,4.19,4.19,0,0,1,0,5.77A3.85,3.85,0,0,1,18.66,29.24Zm0-6.16a1.79,1.79,0,0,0-1.38.58,2.12,2.12,0,0,0-.57,1.51,2,2,0,0,0,.57,1.49,1.94,1.94,0,0,0,2.76,0,2.08,2.08,0,0,0,.56-1.5,2.15,2.15,0,0,0-.56-1.51A1.76,1.76,0,0,0,18.67,23.08Z\" fill=\"#484f60\"/><polygon points=\"31.05 29.18 27.33 25.02 27.33 29.14 25.29 29.14 25.29 21.15 26.57 21.15 30.29 25.33 30.29 21.19 32.33 21.19 32.33 29.18 31.05 29.18\" fill=\"#484f60\"/><polygon points=\"35.34 29.14 35.34 21.19 39.9 21.19 39.9 23.17 37.38 23.17 37.38 23.9 39.66 23.9 39.66 25.87 37.38 25.87 37.38 27.14 40 27.14 40 29.14 35.34 29.14\" fill=\"#484f60\"/></svg>",
|
|
1053
1053
|
"logout": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"27.33 34.17 12.33 34.17 12.33 11.17 27.33 11.17 27.33 17.63 28.33 17.63 28.33 10.17 11.33 10.17 11.33 35.17 28.33 35.17 28.33 27.71 27.33 27.71 27.33 34.17\" fill=\"#484f60\"/><polygon points=\"22.33 40.17 11.33 35.17 11.33 10.17 22.33 14.17 22.33 40.17\" fill=\"#484f60\"/><polygon points=\"38.67 22.66 30.63 14.63 30.63 19.63 24.33 19.63 24.33 25.71 30.63 25.71 30.63 30.71 38.67 22.66\" fill=\"#484f60\"/></svg>",
|
|
1054
1054
|
"magic_wand": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><g style=\"isolation:isolate\"><path d=\"M20.45,10.71a.28.28,0,0,1,.49-.19l1.4,1.25a.93.93,0,0,0,.83.23L25,11.62a.29.29,0,0,1,.34.41l-.76,1.71a.93.93,0,0,0,0,.86l.93,1.62c.12.26,0,.45-.29.45l-1.86-.2a1,1,0,0,0-.81.32l-1.26,1.38a.28.28,0,0,1-.5-.14l-.39-1.83a1,1,0,0,0-.55-.67l-1.71-.77a.28.28,0,0,1,0-.52l1.62-.94a1,1,0,0,0,.48-.73Z\" fill=\"#484f60\"/><g style=\"mix-blend-mode:lighten\"><path d=\"M23.3,16.21a1,1,0,0,0-.8.31l-1,1.13a.29.29,0,0,1-.51-.14L20.66,16a1,1,0,0,0-.55-.68l-1.39-.62a.28.28,0,0,1,0-.52L20,13.45a1,1,0,0,0,.48-.73l.16-1.5a.29.29,0,0,1,.49-.2l1.13,1a.93.93,0,0,0,.83.23L24.58,12a.29.29,0,0,1,.34.41l-.62,1.38a.91.91,0,0,0,.05.86l.75,1.32a.29.29,0,0,1-.29.44Z\" fill=\"#484f60\"/></g><path d=\"M33.57,36.76a.53.53,0,0,1,0,.72l-2.37,2.18a.48.48,0,0,1-.7,0L18,25.34a.51.51,0,0,1,0-.71l2.36-2.19a.49.49,0,0,1,.7,0Z\" fill=\"#484f60\"/><path d=\"M18.6,19.94a.51.51,0,0,1,0,.71L16.2,22.84a.48.48,0,0,1-.7,0l-2.76-3.13a.51.51,0,0,1,0-.71l2.37-2.19a.48.48,0,0,1,.7,0Z\" fill=\"#484f60\"/><path d=\"M30.67,10.55a.29.29,0,0,1,.47.24v1.12a1,1,0,0,0,.4.77l.9.66a.29.29,0,0,1-.08.52l-1.07.35a1,1,0,0,0-.61.61l-.35,1.06a.28.28,0,0,1-.51.09l-.67-.91a1,1,0,0,0-.77-.4H27.27a.29.29,0,0,1-.25-.47l.66-.9a.93.93,0,0,0,.14-.85l-.35-1.07a.29.29,0,0,1,.38-.38l1.07.35a1,1,0,0,0,.85-.13Z\" fill=\"#484f60\"/><g style=\"mix-blend-mode:lighten\"><path d=\"M29.25,14.88a1,1,0,0,0-.77-.4h-.86a.29.29,0,0,1-.24-.47l.5-.69a.93.93,0,0,0,.14-.85l-.26-.82c-.07-.27.1-.44.37-.37l.82.26a1,1,0,0,0,.85-.13l.69-.51a.29.29,0,0,1,.47.25V12a.94.94,0,0,0,.39.76l.7.51a.29.29,0,0,1-.09.52l-.81.26a1,1,0,0,0-.62.61l-.26.82a.29.29,0,0,1-.52.08Z\" fill=\"#484f60\"/></g><path d=\"M37,15.81a.29.29,0,0,1,.32.43l-.13.26a.91.91,0,0,0,0,.85l.15.26A.29.29,0,0,1,37,18l-.29,0a.93.93,0,0,0-.81.27l-.2.21a.28.28,0,0,1-.5-.16l0-.29a1,1,0,0,0-.52-.69l-.27-.13a.28.28,0,0,1,0-.52l.26-.13a.93.93,0,0,0,.5-.71l0-.29a.29.29,0,0,1,.5-.17l.21.21a.92.92,0,0,0,.82.26Z\" fill=\"#484f60\"/><g style=\"mix-blend-mode:lighten\"><path d=\"M35.25,18a1,1,0,0,0-.52-.7l-.12-.05a.28.28,0,0,1,0-.52l.12-.06a1,1,0,0,0,.51-.7V15.8a.29.29,0,0,1,.5-.18l.09.1a.92.92,0,0,0,.82.26l.13,0a.29.29,0,0,1,.32.42L37,16.5a.91.91,0,0,0,0,.85l.07.12a.29.29,0,0,1-.31.43l-.13,0a1,1,0,0,0-.82.28l-.09.1a.28.28,0,0,1-.5-.16Z\" fill=\"#484f60\"/></g></g></svg>",
|
|
1055
|
-
"magnifier": "<svg
|
|
1055
|
+
"magnifier": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\"/></svg>",
|
|
1056
1056
|
"manager": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><g><path fill=\"#484F5F\" d=\"M31.5,23h-0.5c-0.9,1.2-2.4,2.6-4.1,3.2c0.1,0.2,0.2,0.4,0.2,0.6c0,0.4-0.2,0.7-0.6,1l1.5,6.9l-2.5,2.5L23,34.7l1.5-6.9c-0.4-0.2-0.6-0.6-0.6-1c0-0.2,0.1-0.4,0.2-0.6c-1.7-0.6-3.2-2-4.1-3.2h-0.5c-2.2,0-4,2.1-4,3.9l2.7,3c0,1.8,1.8,8.1,4,8.1h6.7c2.2,0,4-6.4,4-8.1l2.7-3C35.6,25.1,33.8,23,31.5,23z\"/><path fill=\"#484F5F\" d=\"M31.7,18.1c0,2.7-2.8,5.8-6.2,5.8c-3.4,0-6.2-3.1-6.2-5.8c0-2.7,2.8-5.1,6.2-5.1C28.9,13,31.7,15.4,31.7,18.1z\"/></g></svg>",
|
|
1057
1057
|
"mask": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M30,11V30H11V11H30m1-1H10V31H31V10Z\" fill=\"#484f60\"/><rect x=\"19\" y=\"19\" width=\"21\" height=\"21\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"19\" y=\"19\" width=\"12\" height=\"12\" fill=\"#484f60\"/><path d=\"M39,20V39H20V20H39m1-1H19V40H40V19Z\" fill=\"#484f60\" opacity=\"0.5\"/></svg>",
|
|
1058
1058
|
"master_detail": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"22\" y=\"32.17\" width=\"18\" height=\"4\" transform=\"translate(62 68.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"26.17\" width=\"18\" height=\"4\" transform=\"translate(62 56.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"20.17\" width=\"18\" height=\"4\" transform=\"translate(62 44.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"14.17\" width=\"18\" height=\"4\" transform=\"translate(62 32.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"10\" y=\"14.17\" width=\"10\" height=\"22\" transform=\"translate(30 50.33) rotate(180)\" fill=\"#484f60\"/></svg>",
|
|
@@ -4678,6 +4678,7 @@ BaseInputComponent.propDecorators = {
|
|
|
4678
4678
|
hidden: [{ type: Input }, { type: HostBinding, args: ["class." + BaseInputComponent.HiddenClass,] }],
|
|
4679
4679
|
decimals: [{ type: Input }],
|
|
4680
4680
|
icon: [{ type: Input }],
|
|
4681
|
+
customCssClass: [{ type: Input }],
|
|
4681
4682
|
redErrorBackground: [{ type: Input }, { type: HostBinding, args: ["class.cc-red-error-background",] }],
|
|
4682
4683
|
myFormInputInstance: [{ type: Input }],
|
|
4683
4684
|
nativeBlur: [{ type: Output }],
|
|
@@ -7086,7 +7087,6 @@ class InputTextComponent extends BaseInputComponent {
|
|
|
7086
7087
|
this.showPlaceholderOnFocus = true;
|
|
7087
7088
|
this.noStyle = false;
|
|
7088
7089
|
this.hideArrowButtons = false;
|
|
7089
|
-
this.isSmall = false;
|
|
7090
7090
|
this.leftIconClick = new EventEmitter();
|
|
7091
7091
|
this.rightIconClick = new EventEmitter();
|
|
7092
7092
|
this.hasOwnLabel = true;
|
|
@@ -7137,20 +7137,26 @@ InputTextComponent.decorators = [
|
|
|
7137
7137
|
{ type: Component, args: [{
|
|
7138
7138
|
selector: "co-input-text",
|
|
7139
7139
|
template: `
|
|
7140
|
-
<
|
|
7141
|
-
|
|
7142
|
-
|
|
7143
|
-
|
|
7144
|
-
|
|
7145
|
-
|
|
7146
|
-
|
|
7147
|
-
|
|
7148
|
-
|
|
7149
|
-
|
|
7150
|
-
|
|
7151
|
-
|
|
7152
|
-
|
|
7153
|
-
|
|
7140
|
+
<div class="input-text-wrapper">
|
|
7141
|
+
<co-icon *ngIf="leftIcon" class="input-text-left-icon" [icon]="leftIcon" [iconData]="leftIconData" (click)="handleLeftIconClick($event)"></co-icon>
|
|
7142
|
+
<div *ngIf="leftIcon" class="spacer"></div>
|
|
7143
|
+
<div class="input-wrapper">
|
|
7144
|
+
<label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)"
|
|
7145
|
+
[textContent]="placeholder"></label>
|
|
7146
|
+
<input #input
|
|
7147
|
+
[type]="digitsOnly ? 'number' : type"
|
|
7148
|
+
[ngModel]="model"
|
|
7149
|
+
[min]="type === 'number' && this.min ? this.min : undefined"
|
|
7150
|
+
[max]="type === 'number' && this.max ? this.max : undefined"
|
|
7151
|
+
[readonly]="readonly"
|
|
7152
|
+
[required]="required"
|
|
7153
|
+
(ngModelChange)="modelChange.emit($event)"
|
|
7154
|
+
(keydown)="digitsOnly ? excludeNonDigitChars($event) : true"
|
|
7155
|
+
>
|
|
7156
|
+
</div>
|
|
7157
|
+
<div *ngIf="rightIcon" class="spacer"></div>
|
|
7158
|
+
<co-icon *ngIf="rightIcon" class="input-text-right-icon" [icon]="rightIcon" [iconData]="rightIconData" (click)="handleRightIconClick($event)"></co-icon>
|
|
7159
|
+
</div>
|
|
7154
7160
|
<co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
|
|
7155
7161
|
[committing]="committing"
|
|
7156
7162
|
[commitFinished]="commitFinished"
|
|
@@ -7195,7 +7201,6 @@ InputTextComponent.propDecorators = {
|
|
|
7195
7201
|
rightIconData: [{ type: Input }],
|
|
7196
7202
|
noStyle: [{ type: HostBinding, args: ['class.no-style',] }, { type: Input }],
|
|
7197
7203
|
hideArrowButtons: [{ type: Input }, { type: HostBinding, args: ['class.hide-arrows',] }],
|
|
7198
|
-
isSmall: [{ type: HostBinding, args: ['class.is-small',] }, { type: Input }],
|
|
7199
7204
|
leftIconClick: [{ type: Output }],
|
|
7200
7205
|
rightIconClick: [{ type: Output }],
|
|
7201
7206
|
showClass: [{ type: HostBinding, args: ["class.co-input-text",] }],
|
|
@@ -7371,6 +7376,7 @@ InputSearchComponent.decorators = [
|
|
|
7371
7376
|
selector: 'co-input-search',
|
|
7372
7377
|
template: `
|
|
7373
7378
|
<co-input-text
|
|
7379
|
+
[ngClass]="customCssClass"
|
|
7374
7380
|
[model]="model"
|
|
7375
7381
|
[leftIcon]="useLeftIcon ? searchIcon : null"
|
|
7376
7382
|
[rightIcon]="useRightIcon ? searchIcon : null"
|
|
@@ -10975,6 +10981,287 @@ ClickoutsideModule.decorators = [
|
|
|
10975
10981
|
},] }
|
|
10976
10982
|
];
|
|
10977
10983
|
|
|
10984
|
+
class OverlayDirective {
|
|
10985
|
+
constructor(elementRef) {
|
|
10986
|
+
this._elementRef = elementRef;
|
|
10987
|
+
}
|
|
10988
|
+
set parent(value) {
|
|
10989
|
+
if (value && value.elementRef) {
|
|
10990
|
+
this._parent = value.elementRef;
|
|
10991
|
+
}
|
|
10992
|
+
else {
|
|
10993
|
+
if (this._parent) {
|
|
10994
|
+
this._observer.disconnect();
|
|
10995
|
+
}
|
|
10996
|
+
}
|
|
10997
|
+
}
|
|
10998
|
+
ngOnDestroy() {
|
|
10999
|
+
window.removeEventListener("scroll", (event) => this._handleScroll);
|
|
11000
|
+
this._observer.disconnect();
|
|
11001
|
+
this._elementRef = undefined;
|
|
11002
|
+
this._parent = undefined;
|
|
11003
|
+
}
|
|
11004
|
+
ngOnInit() {
|
|
11005
|
+
window.addEventListener("scroll", (event) => this._handleScroll);
|
|
11006
|
+
this._initiallyPlaceElement();
|
|
11007
|
+
this._observer = new ResizeObserver((entries) => {
|
|
11008
|
+
const entry = entries[0];
|
|
11009
|
+
const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
11010
|
+
const parentRect = this._parent.nativeElement.getBoundingClientRect();
|
|
11011
|
+
this._placeElement(entry.contentRect.bottom, entry.contentRect.right, parentRect, elementRect);
|
|
11012
|
+
});
|
|
11013
|
+
this._observer.observe(document.body);
|
|
11014
|
+
}
|
|
11015
|
+
_initiallyPlaceElement() {
|
|
11016
|
+
const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
11017
|
+
const parentRect = this._parent.nativeElement.getBoundingClientRect();
|
|
11018
|
+
this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
|
|
11019
|
+
}
|
|
11020
|
+
_placeElement(bottom, right, parentRect, elementRect) {
|
|
11021
|
+
if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
|
|
11022
|
+
this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
|
|
11023
|
+
}
|
|
11024
|
+
else {
|
|
11025
|
+
this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
|
|
11026
|
+
}
|
|
11027
|
+
if (right < parentRect.left + elementRect.width) { // make sure it fits at the right
|
|
11028
|
+
this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
|
|
11029
|
+
}
|
|
11030
|
+
else {
|
|
11031
|
+
this._elementRef.nativeElement.style.left = parentRect.left + "px";
|
|
11032
|
+
}
|
|
11033
|
+
}
|
|
11034
|
+
_handleScroll(event) {
|
|
11035
|
+
console.log("scroll");
|
|
11036
|
+
}
|
|
11037
|
+
}
|
|
11038
|
+
OverlayDirective.decorators = [
|
|
11039
|
+
{ type: Directive, args: [{
|
|
11040
|
+
selector: "[overlay]"
|
|
11041
|
+
},] }
|
|
11042
|
+
];
|
|
11043
|
+
OverlayDirective.ctorParameters = () => [
|
|
11044
|
+
{ type: ElementRef }
|
|
11045
|
+
];
|
|
11046
|
+
OverlayDirective.propDecorators = {
|
|
11047
|
+
parent: [{ type: Input, args: ["overlay",] }]
|
|
11048
|
+
};
|
|
11049
|
+
|
|
11050
|
+
class OverlayParentDirective {
|
|
11051
|
+
constructor(elementRef) {
|
|
11052
|
+
this.elementRef = elementRef;
|
|
11053
|
+
}
|
|
11054
|
+
ngOnDestroy() {
|
|
11055
|
+
this.elementRef = undefined;
|
|
11056
|
+
}
|
|
11057
|
+
}
|
|
11058
|
+
OverlayParentDirective.decorators = [
|
|
11059
|
+
{ type: Directive, args: [{
|
|
11060
|
+
selector: '[overlayParent]',
|
|
11061
|
+
exportAs: 'overlayParent'
|
|
11062
|
+
},] }
|
|
11063
|
+
];
|
|
11064
|
+
OverlayParentDirective.ctorParameters = () => [
|
|
11065
|
+
{ type: ElementRef }
|
|
11066
|
+
];
|
|
11067
|
+
|
|
11068
|
+
class OverlayModule {
|
|
11069
|
+
}
|
|
11070
|
+
OverlayModule.decorators = [
|
|
11071
|
+
{ type: NgModule, args: [{
|
|
11072
|
+
declarations: [
|
|
11073
|
+
OverlayDirective,
|
|
11074
|
+
OverlayParentDirective
|
|
11075
|
+
],
|
|
11076
|
+
exports: [
|
|
11077
|
+
OverlayDirective,
|
|
11078
|
+
OverlayParentDirective
|
|
11079
|
+
]
|
|
11080
|
+
},] }
|
|
11081
|
+
];
|
|
11082
|
+
|
|
11083
|
+
class TooltipComponent {
|
|
11084
|
+
constructor(_elementRef, _changeDetector) {
|
|
11085
|
+
this._elementRef = _elementRef;
|
|
11086
|
+
this._changeDetector = _changeDetector;
|
|
11087
|
+
this.top = -100;
|
|
11088
|
+
this.left = -100;
|
|
11089
|
+
this.bottom = false;
|
|
11090
|
+
this.animate = true;
|
|
11091
|
+
}
|
|
11092
|
+
set hostElement(value) {
|
|
11093
|
+
this._hostElement = value;
|
|
11094
|
+
// this._positionTooltip();
|
|
11095
|
+
}
|
|
11096
|
+
get hostElement() {
|
|
11097
|
+
return this._hostElement;
|
|
11098
|
+
}
|
|
11099
|
+
showClass() {
|
|
11100
|
+
return true;
|
|
11101
|
+
}
|
|
11102
|
+
ngAfterViewInit() {
|
|
11103
|
+
setTimeout(() => {
|
|
11104
|
+
this._positionTooltip();
|
|
11105
|
+
});
|
|
11106
|
+
}
|
|
11107
|
+
_positionTooltip() {
|
|
11108
|
+
if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
|
|
11109
|
+
const rect = this.hostElement.getBoundingClientRect();
|
|
11110
|
+
const ownRect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
11111
|
+
let wantedLeft = rect.left;
|
|
11112
|
+
let wantedTop = rect.top - ownRect.height;
|
|
11113
|
+
if (wantedTop < 0) { // out of view, move to bottom
|
|
11114
|
+
this.bottom = true;
|
|
11115
|
+
wantedTop = rect.bottom;
|
|
11116
|
+
}
|
|
11117
|
+
else {
|
|
11118
|
+
this.bottom = false;
|
|
11119
|
+
}
|
|
11120
|
+
this.left = wantedLeft;
|
|
11121
|
+
this.top = wantedTop;
|
|
11122
|
+
this._changeDetector.markForCheck();
|
|
11123
|
+
this._changeDetector.detectChanges();
|
|
11124
|
+
}
|
|
11125
|
+
}
|
|
11126
|
+
}
|
|
11127
|
+
TooltipComponent.decorators = [
|
|
11128
|
+
{ type: Component, args: [{
|
|
11129
|
+
selector: 'co-tooltip',
|
|
11130
|
+
template: `
|
|
11131
|
+
<div class="tooltip" [innerHTML]="toolTip"></div>
|
|
11132
|
+
`,
|
|
11133
|
+
animations: [
|
|
11134
|
+
trigger("showHide", [
|
|
11135
|
+
state("void", style({ opacity: 0 })),
|
|
11136
|
+
state("*", style({ opacity: 1 })),
|
|
11137
|
+
transition("void <=> *", animate("200ms ease-in-out")),
|
|
11138
|
+
])
|
|
11139
|
+
],
|
|
11140
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11141
|
+
encapsulation: ViewEncapsulation.None
|
|
11142
|
+
},] }
|
|
11143
|
+
];
|
|
11144
|
+
TooltipComponent.ctorParameters = () => [
|
|
11145
|
+
{ type: ElementRef },
|
|
11146
|
+
{ type: ChangeDetectorRef }
|
|
11147
|
+
];
|
|
11148
|
+
TooltipComponent.propDecorators = {
|
|
11149
|
+
hostElement: [{ type: Input }],
|
|
11150
|
+
toolTip: [{ type: Input }],
|
|
11151
|
+
showClass: [{ type: HostBinding, args: ['class.co-tooltip',] }],
|
|
11152
|
+
top: [{ type: HostBinding, args: ["style.top.px",] }],
|
|
11153
|
+
left: [{ type: HostBinding, args: ["style.left.px",] }],
|
|
11154
|
+
bottom: [{ type: HostBinding, args: ["class.bottom",] }],
|
|
11155
|
+
animate: [{ type: HostBinding, args: ['@showHide',] }]
|
|
11156
|
+
};
|
|
11157
|
+
|
|
11158
|
+
class TooltipDirective {
|
|
11159
|
+
constructor(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
|
|
11160
|
+
this._compFactoryResolver = _compFactoryResolver;
|
|
11161
|
+
this._appRef = _appRef;
|
|
11162
|
+
this._injector = _injector;
|
|
11163
|
+
this._sanitizer = _sanitizer;
|
|
11164
|
+
this._elementRef = elementRef;
|
|
11165
|
+
}
|
|
11166
|
+
set tooltip(str) {
|
|
11167
|
+
this._tooltipMessage = str;
|
|
11168
|
+
}
|
|
11169
|
+
ngOnDestroy() {
|
|
11170
|
+
if (this._elementRef && this._elementRef.nativeElement) {
|
|
11171
|
+
this._elementRef.nativeElement.removeEventListener('mouseenter', (event) => this._handleMouseMove(event));
|
|
11172
|
+
this._elementRef.nativeElement.removeEventListener('mouseleave', () => this._removeTooltip());
|
|
11173
|
+
}
|
|
11174
|
+
window.removeEventListener("scroll", (event) => this._handleScroll);
|
|
11175
|
+
this._elementRef = undefined;
|
|
11176
|
+
}
|
|
11177
|
+
ngOnInit() {
|
|
11178
|
+
window.addEventListener("scroll", (event) => this._handleScroll);
|
|
11179
|
+
if (this._elementRef && this._elementRef.nativeElement) {
|
|
11180
|
+
this._elementRef.nativeElement.addEventListener('mouseenter', (event) => this._handleMouseMove(event));
|
|
11181
|
+
this._elementRef.nativeElement.addEventListener('mouseleave', () => this._removeTooltip());
|
|
11182
|
+
}
|
|
11183
|
+
}
|
|
11184
|
+
_handleScroll() {
|
|
11185
|
+
this._removeTooltip();
|
|
11186
|
+
}
|
|
11187
|
+
_handleMouseMove(event) {
|
|
11188
|
+
this._showTooltip(event.clientY, event.clientX);
|
|
11189
|
+
}
|
|
11190
|
+
_showTooltip(top, left) {
|
|
11191
|
+
this._createTooltipComponent(top, left);
|
|
11192
|
+
}
|
|
11193
|
+
_removeTooltip() {
|
|
11194
|
+
if (this._componentRef) {
|
|
11195
|
+
this._appRef.detachView(this._componentRef.hostView);
|
|
11196
|
+
this._componentRef.destroy();
|
|
11197
|
+
this._componentRef = undefined;
|
|
11198
|
+
}
|
|
11199
|
+
}
|
|
11200
|
+
_createTooltipComponent(top, left) {
|
|
11201
|
+
if (!this._tooltipMessage) {
|
|
11202
|
+
return;
|
|
11203
|
+
}
|
|
11204
|
+
if (this._componentRef) {
|
|
11205
|
+
return;
|
|
11206
|
+
}
|
|
11207
|
+
this._componentRef = this._compFactoryResolver
|
|
11208
|
+
.resolveComponentFactory(TooltipComponent)
|
|
11209
|
+
.create(this._injector);
|
|
11210
|
+
this._componentRef.instance.hostElement = this._elementRef.nativeElement;
|
|
11211
|
+
this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
|
|
11212
|
+
this._appRef.attachView(this._componentRef.hostView);
|
|
11213
|
+
const domElem = this._componentRef.hostView.rootNodes[0];
|
|
11214
|
+
document.body.appendChild(domElem);
|
|
11215
|
+
}
|
|
11216
|
+
}
|
|
11217
|
+
TooltipDirective.decorators = [
|
|
11218
|
+
{ type: Directive, args: [{
|
|
11219
|
+
selector: "[tooltip]"
|
|
11220
|
+
},] }
|
|
11221
|
+
];
|
|
11222
|
+
TooltipDirective.ctorParameters = () => [
|
|
11223
|
+
{ type: ElementRef },
|
|
11224
|
+
{ type: ComponentFactoryResolver },
|
|
11225
|
+
{ type: ApplicationRef },
|
|
11226
|
+
{ type: Injector },
|
|
11227
|
+
{ type: DomSanitizer }
|
|
11228
|
+
];
|
|
11229
|
+
TooltipDirective.propDecorators = {
|
|
11230
|
+
tooltip: [{ type: Input, args: ["tooltip",] }]
|
|
11231
|
+
};
|
|
11232
|
+
|
|
11233
|
+
class TooltipModule {
|
|
11234
|
+
}
|
|
11235
|
+
TooltipModule.decorators = [
|
|
11236
|
+
{ type: NgModule, args: [{
|
|
11237
|
+
imports: [
|
|
11238
|
+
CommonModule
|
|
11239
|
+
],
|
|
11240
|
+
declarations: [
|
|
11241
|
+
TooltipComponent
|
|
11242
|
+
],
|
|
11243
|
+
exports: [
|
|
11244
|
+
TooltipComponent
|
|
11245
|
+
]
|
|
11246
|
+
},] }
|
|
11247
|
+
];
|
|
11248
|
+
|
|
11249
|
+
class TooltipDirectiveModule {
|
|
11250
|
+
}
|
|
11251
|
+
TooltipDirectiveModule.decorators = [
|
|
11252
|
+
{ type: NgModule, args: [{
|
|
11253
|
+
imports: [
|
|
11254
|
+
TooltipModule
|
|
11255
|
+
],
|
|
11256
|
+
declarations: [
|
|
11257
|
+
TooltipDirective
|
|
11258
|
+
],
|
|
11259
|
+
exports: [
|
|
11260
|
+
TooltipDirective
|
|
11261
|
+
]
|
|
11262
|
+
},] }
|
|
11263
|
+
];
|
|
11264
|
+
|
|
10978
11265
|
class CheckmarkOverlayComponent {
|
|
10979
11266
|
constructor(_renderer) {
|
|
10980
11267
|
this._renderer = _renderer;
|
|
@@ -11230,5 +11517,5 @@ class FilterViewmodel {
|
|
|
11230
11517
|
* Generated bundle index. Do not edit.
|
|
11231
11518
|
*/
|
|
11232
11519
|
|
|
11233
|
-
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,
|
|
11520
|
+
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 };
|
|
11234
11521
|
//# sourceMappingURL=colijnit-corecomponents_v12.js.map
|