@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.
Files changed (43) hide show
  1. package/bundles/colijnit-corecomponents_v12.umd.js +381 -30
  2. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  3. package/colijnit-corecomponents_v12.d.ts +8 -3
  4. package/colijnit-corecomponents_v12.metadata.json +1 -1
  5. package/esm2015/colijnit-corecomponents_v12.js +9 -4
  6. package/esm2015/lib/components/base/base-input.component.js +2 -1
  7. package/esm2015/lib/components/icon/icon.component.js +17 -5
  8. package/esm2015/lib/components/input-search/input-search.component.js +12 -1
  9. package/esm2015/lib/components/input-text/input-text.component.js +51 -29
  10. package/esm2015/lib/components/tooltip/tooltip.component.js +77 -0
  11. package/esm2015/lib/components/tooltip/tooltip.module.js +19 -0
  12. package/esm2015/lib/directives/overlay/overlay-parent.directive.js +19 -0
  13. package/esm2015/lib/directives/overlay/overlay.directive.js +67 -0
  14. package/esm2015/lib/directives/overlay/overlay.module.js +18 -0
  15. package/esm2015/lib/directives/tooltip/tooltip-directive.module.js +19 -0
  16. package/esm2015/lib/directives/tooltip/tooltip.directive.js +78 -0
  17. package/esm2015/public-api.js +3 -1
  18. package/fesm2015/colijnit-corecomponents_v12.js +359 -32
  19. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  20. package/lib/components/base/base-input.component.d.ts +1 -0
  21. package/lib/components/icon/icon.component.d.ts +6 -1
  22. package/lib/components/input-search/input-search.component.d.ts +5 -0
  23. package/lib/components/input-search/style/_layout.scss +2 -16
  24. package/lib/components/input-search/style/_material-definition.scss +1 -0
  25. package/lib/components/input-text/input-text.component.d.ts +12 -5
  26. package/lib/components/input-text/style/_layout.scss +22 -36
  27. package/lib/components/input-text/style/_material-definition.scss +4 -0
  28. package/lib/components/input-text/style/_theme.scss +3 -0
  29. package/lib/components/tooltip/style/_layout.scss +52 -0
  30. package/lib/components/tooltip/style/_material-definition.scss +8 -0
  31. package/lib/components/tooltip/style/_theme.scss +33 -0
  32. package/lib/components/tooltip/style/material.scss +4 -0
  33. package/lib/components/tooltip/tooltip.component.d.ts +18 -0
  34. package/lib/components/tooltip/tooltip.module.d.ts +2 -0
  35. package/lib/directives/overlay/overlay-parent.directive.d.ts +6 -0
  36. package/lib/directives/overlay/overlay.directive.d.ts +14 -0
  37. package/lib/directives/overlay/overlay.module.d.ts +2 -0
  38. package/lib/directives/tooltip/tooltip-directive.module.d.ts +2 -0
  39. package/lib/directives/tooltip/tooltip.directive.d.ts +20 -0
  40. package/lib/style/_input.mixins.scss +1 -1
  41. package/lib/style/_variables.scss +1 -1
  42. package/package.json +1 -1
  43. package/public-api.d.ts +2 -0
@@ -1293,13 +1293,24 @@
1293
1293
  }
1294
1294
  Object.defineProperty(IconComponent.prototype, "icon", {
1295
1295
  set: function (value) {
1296
- this._setIconFromEnum(value);
1296
+ this._icon = value;
1297
1297
  },
1298
1298
  enumerable: false,
1299
1299
  configurable: true
1300
1300
  });
1301
+ IconComponent.prototype.ngOnInit = function () {
1302
+ this._prepareIcon();
1303
+ };
1304
+ IconComponent.prototype._prepareIcon = function () {
1305
+ if (this.iconData) {
1306
+ this.innerIconData = this.iconData;
1307
+ }
1308
+ else if (this._icon) {
1309
+ this._setIconFromEnum(this._icon);
1310
+ }
1311
+ };
1301
1312
  IconComponent.prototype._setIconFromEnum = function (icon) {
1302
- this.iconData = this._iconCache.getIcon(icon);
1313
+ this.innerIconData = this._iconCache.getIcon(icon);
1303
1314
  };
1304
1315
  return IconComponent;
1305
1316
  }());
@@ -1315,8 +1326,9 @@
1315
1326
  ]; };
1316
1327
  IconComponent.propDecorators = {
1317
1328
  icon: [{ type: i0.Input }],
1318
- iconData: [{ type: i0.Input }, { type: i0.HostBinding, args: ["innerHtml",] }],
1319
- showClass: [{ type: i0.HostBinding, args: ["class.co-icon",] }]
1329
+ iconData: [{ type: i0.Input }],
1330
+ showClass: [{ type: i0.HostBinding, args: ['class.co-icon',] }],
1331
+ innerIconData: [{ type: i0.HostBinding, args: ['innerHtml',] }]
1320
1332
  };
1321
1333
 
1322
1334
  var IconModule = /** @class */ (function () {
@@ -5127,6 +5139,7 @@
5127
5139
  hidden: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class." + BaseInputComponent.HiddenClass,] }],
5128
5140
  decimals: [{ type: i0.Input }],
5129
5141
  icon: [{ type: i0.Input }],
5142
+ customCssClass: [{ type: i0.Input }],
5130
5143
  redErrorBackground: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.cc-red-error-background",] }],
5131
5144
  myFormInputInstance: [{ type: i0.Input }],
5132
5145
  nativeBlur: [{ type: i0.Output }],
@@ -7596,12 +7609,31 @@
7596
7609
  _this.showClearButton = undefined;
7597
7610
  _this.showPlaceholderOnFocus = true;
7598
7611
  _this.noStyle = false;
7599
- _this.hasOwnLabel = true;
7600
7612
  _this.hideArrowButtons = false;
7601
7613
  _this.isSmall = false;
7614
+ _this.leftIconClick = new i0.EventEmitter();
7615
+ _this.rightIconClick = new i0.EventEmitter();
7616
+ _this.hasOwnLabel = true;
7602
7617
  _super.prototype._markAsOnPush.call(_this);
7603
7618
  return _this;
7604
7619
  }
7620
+ InputTextComponent.prototype.showClass = function () {
7621
+ return true;
7622
+ };
7623
+ Object.defineProperty(InputTextComponent.prototype, "hasLeftIcon", {
7624
+ get: function () {
7625
+ return this.leftIcon !== undefined && this.leftIcon !== null;
7626
+ },
7627
+ enumerable: false,
7628
+ configurable: true
7629
+ });
7630
+ Object.defineProperty(InputTextComponent.prototype, "hasRightIcon", {
7631
+ get: function () {
7632
+ return this.rightIcon !== undefined && this.rightIcon !== null;
7633
+ },
7634
+ enumerable: false,
7635
+ configurable: true
7636
+ });
7605
7637
  Object.defineProperty(InputTextComponent.prototype, "model", {
7606
7638
  get: function () {
7607
7639
  return _super.prototype.model;
@@ -7622,34 +7654,27 @@
7622
7654
  enumerable: false,
7623
7655
  configurable: true
7624
7656
  });
7625
- InputTextComponent.prototype.showClass = function () {
7626
- return true;
7627
- };
7628
- Object.defineProperty(InputTextComponent.prototype, "hasLeftIcon", {
7629
- get: function () {
7630
- return this.leftIcon !== undefined && this.leftIcon !== null;
7631
- },
7632
- enumerable: false,
7633
- configurable: true
7634
- });
7635
- Object.defineProperty(InputTextComponent.prototype, "hasRightIcon", {
7636
- get: function () {
7637
- return this.rightIcon !== undefined && this.rightIcon !== null;
7638
- },
7639
- enumerable: false,
7640
- configurable: true
7641
- });
7642
7657
  // exclude some non-digit characters, since input type 'number' still allows the characters -, + and e
7643
7658
  InputTextComponent.prototype.excludeNonDigitChars = function (event) {
7644
7659
  var excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
7645
7660
  return !excludedKeys.includes(event.key);
7646
7661
  };
7662
+ InputTextComponent.prototype.handleLeftIconClick = function (event) {
7663
+ event.preventDefault();
7664
+ event.stopPropagation();
7665
+ this.leftIconClick.emit(event);
7666
+ };
7667
+ InputTextComponent.prototype.handleRightIconClick = function (event) {
7668
+ event.preventDefault();
7669
+ event.stopPropagation();
7670
+ this.rightIconClick.emit(event);
7671
+ };
7647
7672
  return InputTextComponent;
7648
7673
  }(BaseInputComponent));
7649
7674
  InputTextComponent.decorators = [
7650
7675
  { type: i0.Component, args: [{
7651
7676
  selector: "co-input-text",
7652
- template: "\n <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n [textContent]=\"placeholder\"></label>\n <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"></co-icon>\n <input #input\n [type]=\"digitsOnly ? 'number' : type\"\n [ngModel]=\"model\"\n [min]=\"type === 'number' && this.min ? this.min : undefined\"\n [max]=\"type === 'number' && this.max ? this.max : undefined\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (ngModelChange)=\"modelChange.emit($event)\"\n (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n >\n <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n [committing]=\"committing\"\n [commitFinished]=\"commitFinished\"\n (commitClick)=\"commitClick($event)\"\n (cancelClick)=\"cancelClick($event)\"\n >\n </co-commit-buttons>\n <div class=\"required-indicator\"></div>\n <ng-template #validationError></ng-template>\n ",
7677
+ template: "\n <div class=\"input-text-wrapper\">\n <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\" (click)=\"handleLeftIconClick($event)\"></co-icon>\n <div *ngIf=\"leftIcon\" class=\"spacer\"></div>\n <div class=\"input-wrapper\">\n <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n [textContent]=\"placeholder\"></label>\n <input #input\n [type]=\"digitsOnly ? 'number' : type\"\n [ngModel]=\"model\"\n [min]=\"type === 'number' && this.min ? this.min : undefined\"\n [max]=\"type === 'number' && this.max ? this.max : undefined\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (ngModelChange)=\"modelChange.emit($event)\"\n (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n >\n </div>\n <div *ngIf=\"rightIcon\" class=\"spacer\"></div>\n <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\" (click)=\"handleRightIconClick($event)\"></co-icon>\n </div>\n <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n [committing]=\"committing\"\n [commitFinished]=\"commitFinished\"\n (commitClick)=\"commitClick($event)\"\n (cancelClick)=\"cancelClick($event)\"\n >\n </co-commit-buttons>\n <div class=\"required-indicator\"></div>\n <ng-template #validationError></ng-template>\n ",
7653
7678
  providers: [{
7654
7679
  provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
7655
7680
  useExisting: i0.forwardRef(function () { return InputTextComponent; })
@@ -7680,13 +7705,17 @@
7680
7705
  showPlaceholderOnFocus: [{ type: i0.Input }],
7681
7706
  leftIcon: [{ type: i0.Input }],
7682
7707
  rightIcon: [{ type: i0.Input }],
7708
+ leftIconData: [{ type: i0.Input }],
7709
+ rightIconData: [{ type: i0.Input }],
7683
7710
  noStyle: [{ type: i0.HostBinding, args: ['class.no-style',] }, { type: i0.Input }],
7711
+ hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
7712
+ isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }],
7713
+ leftIconClick: [{ type: i0.Output }],
7714
+ rightIconClick: [{ type: i0.Output }],
7684
7715
  showClass: [{ type: i0.HostBinding, args: ["class.co-input-text",] }],
7685
7716
  hasLeftIcon: [{ type: i0.HostBinding, args: ['class.has-left-icon',] }],
7686
7717
  hasRightIcon: [{ type: i0.HostBinding, args: ['class.has-right-icon',] }],
7687
- hasOwnLabel: [{ type: i0.HostBinding, args: ["class.has-own-label",] }],
7688
- hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
7689
- isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }]
7718
+ hasOwnLabel: [{ type: i0.HostBinding, args: ["class.has-own-label",] }]
7690
7719
  };
7691
7720
 
7692
7721
  var ValidationErrorModule = /** @class */ (function () {
@@ -7846,6 +7875,8 @@
7846
7875
  var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
7847
7876
  _this.searchIcon = exports.CoreComponentsIcon.Magnifier;
7848
7877
  _this.search = new i0.EventEmitter();
7878
+ _this.leftIconClick = new i0.EventEmitter();
7879
+ _this.rightIconClick = new i0.EventEmitter();
7849
7880
  _this.useLeftIcon = false;
7850
7881
  _this.useRightIcon = false;
7851
7882
  _this.centerLabel = false;
@@ -7868,7 +7899,7 @@
7868
7899
  InputSearchComponent.decorators = [
7869
7900
  { type: i0.Component, args: [{
7870
7901
  selector: 'co-input-search',
7871
- template: "\n <co-input-text\n [model]=\"model\"\n [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n [rightIcon]=\"useRightIcon ? searchIcon : null\"\n [placeholder]=\"placeholder\"\n [customHeight]=\"true\"\n [showPlaceholderOnFocus]=\"false\"\n (modelChange)=\"modelChange.emit($event)\"\n ></co-input-text>\n ",
7902
+ template: "\n <co-input-text\n [ngClass]=\"customCssClass\"\n [model]=\"model\"\n [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n [rightIcon]=\"useRightIcon ? searchIcon : null\"\n [leftIconData]=\"useLeftIcon && leftIconData ? leftIconData : undefined\"\n [rightIconData]=\"useRightIcon && rightIconData ? rightIconData : undefined\"\n [placeholder]=\"placeholder\"\n [customHeight]=\"true\"\n [showPlaceholderOnFocus]=\"false\"\n (modelChange)=\"modelChange.emit($event)\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"rightIconClick.emit($event)\"\n ></co-input-text>\n ",
7872
7903
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
7873
7904
  encapsulation: i0.ViewEncapsulation.None
7874
7905
  },] }
@@ -7876,8 +7907,12 @@
7876
7907
  InputSearchComponent.propDecorators = {
7877
7908
  placeholder: [{ type: i0.Input }],
7878
7909
  search: [{ type: i0.Output }],
7910
+ leftIconClick: [{ type: i0.Output }],
7911
+ rightIconClick: [{ type: i0.Output }],
7879
7912
  useLeftIcon: [{ type: i0.Input }],
7880
7913
  useRightIcon: [{ type: i0.Input }],
7914
+ leftIconData: [{ type: i0.Input }],
7915
+ rightIconData: [{ type: i0.Input }],
7881
7916
  centerLabel: [{ type: i0.HostBinding, args: ['class.center-label',] }, { type: i0.Input }],
7882
7917
  showClass: [{ type: i0.HostBinding, args: ['class.co-input-search',] }]
7883
7918
  };
@@ -11450,6 +11485,315 @@
11450
11485
  },] }
11451
11486
  ];
11452
11487
 
11488
+ var OverlayDirective = /** @class */ (function () {
11489
+ function OverlayDirective(elementRef) {
11490
+ this._elementRef = elementRef;
11491
+ }
11492
+ Object.defineProperty(OverlayDirective.prototype, "parent", {
11493
+ set: function (value) {
11494
+ if (value && value.elementRef) {
11495
+ this._parent = value.elementRef;
11496
+ }
11497
+ else {
11498
+ if (this._parent) {
11499
+ this._observer.disconnect();
11500
+ }
11501
+ }
11502
+ },
11503
+ enumerable: false,
11504
+ configurable: true
11505
+ });
11506
+ OverlayDirective.prototype.ngOnDestroy = function () {
11507
+ var _this = this;
11508
+ window.removeEventListener("scroll", function (event) { return _this._handleScroll; });
11509
+ this._observer.disconnect();
11510
+ this._elementRef = undefined;
11511
+ this._parent = undefined;
11512
+ };
11513
+ OverlayDirective.prototype.ngOnInit = function () {
11514
+ var _this = this;
11515
+ window.addEventListener("scroll", function (event) { return _this._handleScroll; });
11516
+ this._initiallyPlaceElement();
11517
+ this._observer = new ResizeObserver(function (entries) {
11518
+ var entry = entries[0];
11519
+ var elementRect = _this._elementRef.nativeElement.getBoundingClientRect();
11520
+ var parentRect = _this._parent.nativeElement.getBoundingClientRect();
11521
+ _this._placeElement(entry.contentRect.bottom, entry.contentRect.right, parentRect, elementRect);
11522
+ });
11523
+ this._observer.observe(document.body);
11524
+ };
11525
+ OverlayDirective.prototype._initiallyPlaceElement = function () {
11526
+ var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
11527
+ var parentRect = this._parent.nativeElement.getBoundingClientRect();
11528
+ this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
11529
+ };
11530
+ OverlayDirective.prototype._placeElement = function (bottom, right, parentRect, elementRect) {
11531
+ if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
11532
+ this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
11533
+ }
11534
+ else {
11535
+ this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
11536
+ }
11537
+ if (right < parentRect.left + elementRect.width) { // make sure it fits at the right
11538
+ this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
11539
+ }
11540
+ else {
11541
+ this._elementRef.nativeElement.style.left = parentRect.left + "px";
11542
+ }
11543
+ };
11544
+ OverlayDirective.prototype._handleScroll = function (event) {
11545
+ console.log("scroll");
11546
+ };
11547
+ return OverlayDirective;
11548
+ }());
11549
+ OverlayDirective.decorators = [
11550
+ { type: i0.Directive, args: [{
11551
+ selector: "[overlay]"
11552
+ },] }
11553
+ ];
11554
+ OverlayDirective.ctorParameters = function () { return [
11555
+ { type: i0.ElementRef }
11556
+ ]; };
11557
+ OverlayDirective.propDecorators = {
11558
+ parent: [{ type: i0.Input, args: ["overlay",] }]
11559
+ };
11560
+
11561
+ var OverlayParentDirective = /** @class */ (function () {
11562
+ function OverlayParentDirective(elementRef) {
11563
+ this.elementRef = elementRef;
11564
+ }
11565
+ OverlayParentDirective.prototype.ngOnDestroy = function () {
11566
+ this.elementRef = undefined;
11567
+ };
11568
+ return OverlayParentDirective;
11569
+ }());
11570
+ OverlayParentDirective.decorators = [
11571
+ { type: i0.Directive, args: [{
11572
+ selector: '[overlayParent]',
11573
+ exportAs: 'overlayParent'
11574
+ },] }
11575
+ ];
11576
+ OverlayParentDirective.ctorParameters = function () { return [
11577
+ { type: i0.ElementRef }
11578
+ ]; };
11579
+
11580
+ var OverlayModule = /** @class */ (function () {
11581
+ function OverlayModule() {
11582
+ }
11583
+ return OverlayModule;
11584
+ }());
11585
+ OverlayModule.decorators = [
11586
+ { type: i0.NgModule, args: [{
11587
+ declarations: [
11588
+ OverlayDirective,
11589
+ OverlayParentDirective
11590
+ ],
11591
+ exports: [
11592
+ OverlayDirective,
11593
+ OverlayParentDirective
11594
+ ]
11595
+ },] }
11596
+ ];
11597
+
11598
+ var TooltipComponent = /** @class */ (function () {
11599
+ function TooltipComponent(_elementRef, _changeDetector) {
11600
+ this._elementRef = _elementRef;
11601
+ this._changeDetector = _changeDetector;
11602
+ this.top = -100;
11603
+ this.left = -100;
11604
+ this.bottom = false;
11605
+ this.animate = true;
11606
+ }
11607
+ Object.defineProperty(TooltipComponent.prototype, "hostElement", {
11608
+ get: function () {
11609
+ return this._hostElement;
11610
+ },
11611
+ set: function (value) {
11612
+ this._hostElement = value;
11613
+ // this._positionTooltip();
11614
+ },
11615
+ enumerable: false,
11616
+ configurable: true
11617
+ });
11618
+ TooltipComponent.prototype.showClass = function () {
11619
+ return true;
11620
+ };
11621
+ TooltipComponent.prototype.ngAfterViewInit = function () {
11622
+ var _this = this;
11623
+ setTimeout(function () {
11624
+ _this._positionTooltip();
11625
+ });
11626
+ };
11627
+ TooltipComponent.prototype._positionTooltip = function () {
11628
+ if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
11629
+ var rect = this.hostElement.getBoundingClientRect();
11630
+ var ownRect = this._elementRef.nativeElement.getBoundingClientRect();
11631
+ var wantedLeft = rect.left;
11632
+ var wantedTop = rect.top - ownRect.height;
11633
+ if (wantedTop < 0) { // out of view, move to bottom
11634
+ this.bottom = true;
11635
+ wantedTop = rect.bottom;
11636
+ }
11637
+ else {
11638
+ this.bottom = false;
11639
+ }
11640
+ this.left = wantedLeft;
11641
+ this.top = wantedTop;
11642
+ this._changeDetector.markForCheck();
11643
+ this._changeDetector.detectChanges();
11644
+ }
11645
+ };
11646
+ return TooltipComponent;
11647
+ }());
11648
+ TooltipComponent.decorators = [
11649
+ { type: i0.Component, args: [{
11650
+ selector: 'co-tooltip',
11651
+ template: "\n <div class=\"tooltip\" [innerHTML]=\"toolTip\"></div>\n ",
11652
+ animations: [
11653
+ animations.trigger("showHide", [
11654
+ animations.state("void", animations.style({ opacity: 0 })),
11655
+ animations.state("*", animations.style({ opacity: 1 })),
11656
+ animations.transition("void <=> *", animations.animate("200ms ease-in-out")),
11657
+ ])
11658
+ ],
11659
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
11660
+ encapsulation: i0.ViewEncapsulation.None
11661
+ },] }
11662
+ ];
11663
+ TooltipComponent.ctorParameters = function () { return [
11664
+ { type: i0.ElementRef },
11665
+ { type: i0.ChangeDetectorRef }
11666
+ ]; };
11667
+ TooltipComponent.propDecorators = {
11668
+ hostElement: [{ type: i0.Input }],
11669
+ toolTip: [{ type: i0.Input }],
11670
+ showClass: [{ type: i0.HostBinding, args: ['class.co-tooltip',] }],
11671
+ top: [{ type: i0.HostBinding, args: ["style.top.px",] }],
11672
+ left: [{ type: i0.HostBinding, args: ["style.left.px",] }],
11673
+ bottom: [{ type: i0.HostBinding, args: ["class.bottom",] }],
11674
+ animate: [{ type: i0.HostBinding, args: ['@showHide',] }]
11675
+ };
11676
+
11677
+ var TooltipDirective = /** @class */ (function () {
11678
+ function TooltipDirective(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
11679
+ this._compFactoryResolver = _compFactoryResolver;
11680
+ this._appRef = _appRef;
11681
+ this._injector = _injector;
11682
+ this._sanitizer = _sanitizer;
11683
+ this._elementRef = elementRef;
11684
+ }
11685
+ Object.defineProperty(TooltipDirective.prototype, "tooltip", {
11686
+ set: function (str) {
11687
+ this._tooltipMessage = str;
11688
+ },
11689
+ enumerable: false,
11690
+ configurable: true
11691
+ });
11692
+ TooltipDirective.prototype.ngOnDestroy = function () {
11693
+ var _this = this;
11694
+ if (this._elementRef && this._elementRef.nativeElement) {
11695
+ this._elementRef.nativeElement.removeEventListener('mouseenter', function (event) { return _this._handleMouseMove(event); });
11696
+ this._elementRef.nativeElement.removeEventListener('mouseleave', function () { return _this._removeTooltip(); });
11697
+ }
11698
+ window.removeEventListener("scroll", function (event) { return _this._handleScroll; });
11699
+ this._elementRef = undefined;
11700
+ };
11701
+ TooltipDirective.prototype.ngOnInit = function () {
11702
+ var _this = this;
11703
+ window.addEventListener("scroll", function (event) { return _this._handleScroll; });
11704
+ if (this._elementRef && this._elementRef.nativeElement) {
11705
+ this._elementRef.nativeElement.addEventListener('mouseenter', function (event) { return _this._handleMouseMove(event); });
11706
+ this._elementRef.nativeElement.addEventListener('mouseleave', function () { return _this._removeTooltip(); });
11707
+ }
11708
+ };
11709
+ TooltipDirective.prototype._handleScroll = function () {
11710
+ this._removeTooltip();
11711
+ };
11712
+ TooltipDirective.prototype._handleMouseMove = function (event) {
11713
+ this._showTooltip(event.clientY, event.clientX);
11714
+ };
11715
+ TooltipDirective.prototype._showTooltip = function (top, left) {
11716
+ this._createTooltipComponent(top, left);
11717
+ };
11718
+ TooltipDirective.prototype._removeTooltip = function () {
11719
+ if (this._componentRef) {
11720
+ this._appRef.detachView(this._componentRef.hostView);
11721
+ this._componentRef.destroy();
11722
+ this._componentRef = undefined;
11723
+ }
11724
+ };
11725
+ TooltipDirective.prototype._createTooltipComponent = function (top, left) {
11726
+ if (!this._tooltipMessage) {
11727
+ return;
11728
+ }
11729
+ if (this._componentRef) {
11730
+ return;
11731
+ }
11732
+ this._componentRef = this._compFactoryResolver
11733
+ .resolveComponentFactory(TooltipComponent)
11734
+ .create(this._injector);
11735
+ this._componentRef.instance.hostElement = this._elementRef.nativeElement;
11736
+ this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
11737
+ this._appRef.attachView(this._componentRef.hostView);
11738
+ var domElem = this._componentRef.hostView.rootNodes[0];
11739
+ document.body.appendChild(domElem);
11740
+ };
11741
+ return TooltipDirective;
11742
+ }());
11743
+ TooltipDirective.decorators = [
11744
+ { type: i0.Directive, args: [{
11745
+ selector: "[tooltip]"
11746
+ },] }
11747
+ ];
11748
+ TooltipDirective.ctorParameters = function () { return [
11749
+ { type: i0.ElementRef },
11750
+ { type: i0.ComponentFactoryResolver },
11751
+ { type: i0.ApplicationRef },
11752
+ { type: i0.Injector },
11753
+ { type: platformBrowser.DomSanitizer }
11754
+ ]; };
11755
+ TooltipDirective.propDecorators = {
11756
+ tooltip: [{ type: i0.Input, args: ["tooltip",] }]
11757
+ };
11758
+
11759
+ var TooltipModule = /** @class */ (function () {
11760
+ function TooltipModule() {
11761
+ }
11762
+ return TooltipModule;
11763
+ }());
11764
+ TooltipModule.decorators = [
11765
+ { type: i0.NgModule, args: [{
11766
+ imports: [
11767
+ common.CommonModule
11768
+ ],
11769
+ declarations: [
11770
+ TooltipComponent
11771
+ ],
11772
+ exports: [
11773
+ TooltipComponent
11774
+ ]
11775
+ },] }
11776
+ ];
11777
+
11778
+ var TooltipDirectiveModule = /** @class */ (function () {
11779
+ function TooltipDirectiveModule() {
11780
+ }
11781
+ return TooltipDirectiveModule;
11782
+ }());
11783
+ TooltipDirectiveModule.decorators = [
11784
+ { type: i0.NgModule, args: [{
11785
+ imports: [
11786
+ TooltipModule
11787
+ ],
11788
+ declarations: [
11789
+ TooltipDirective
11790
+ ],
11791
+ exports: [
11792
+ TooltipDirective
11793
+ ]
11794
+ },] }
11795
+ ];
11796
+
11453
11797
  var CheckmarkOverlayComponent = /** @class */ (function () {
11454
11798
  function CheckmarkOverlayComponent(_renderer) {
11455
11799
  var _this = this;
@@ -11806,6 +12150,7 @@
11806
12150
  exports.MultiSelectListModule = MultiSelectListModule;
11807
12151
  exports.ObserveVisibilityModule = ObserveVisibilityModule;
11808
12152
  exports.OrientationOfDirection = OrientationOfDirection;
12153
+ exports.OverlayModule = OverlayModule;
11809
12154
  exports.PaginationBarComponent = PaginationBarComponent;
11810
12155
  exports.PaginationBarModule = PaginationBarModule;
11811
12156
  exports.PaginationComponent = PaginationComponent;
@@ -11825,6 +12170,7 @@
11825
12170
  exports.TextInputPopupComponent = TextInputPopupComponent;
11826
12171
  exports.TileComponent = TileComponent;
11827
12172
  exports.TileModule = TileModule;
12173
+ exports.TooltipDirectiveModule = TooltipDirectiveModule;
11828
12174
  exports.ViewModeButtonsComponent = ViewModeButtonsComponent;
11829
12175
  exports.ViewModeButtonsModule = ViewModeButtonsModule;
11830
12176
  exports.showHideDialogAnimation = showHideDialogAnimation;
@@ -11837,9 +12183,14 @@
11837
12183
  exports["ɵbe"] = PrependPipe;
11838
12184
  exports["ɵbf"] = ClickOutsideDirective;
11839
12185
  exports["ɵbg"] = ClickOutsideMasterService;
11840
- exports["ɵbh"] = CheckmarkOverlayComponent;
11841
- exports["ɵbi"] = ScreenConfigurationDirective;
11842
- exports["ɵbj"] = ScreenConfigComponentWrapper;
12186
+ exports["ɵbh"] = OverlayDirective;
12187
+ exports["ɵbi"] = OverlayParentDirective;
12188
+ exports["ɵbj"] = TooltipModule;
12189
+ exports["ɵbk"] = TooltipComponent;
12190
+ exports["ɵbl"] = TooltipDirective;
12191
+ exports["ɵbm"] = CheckmarkOverlayComponent;
12192
+ exports["ɵbn"] = ScreenConfigurationDirective;
12193
+ exports["ɵbo"] = ScreenConfigComponentWrapper;
11843
12194
  exports["ɵc"] = CoRippleDirective;
11844
12195
  exports["ɵd"] = CoViewportRulerService;
11845
12196
  exports["ɵe"] = CoScrollDispatcherService;