@colijnit/corecomponents_v12 12.0.96 → 12.0.98

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1091,7 +1091,7 @@
         "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>",
         "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>",
         "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>",
-        "magnifier": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#29363E\" d=\"M27.8,15.5c-3.4-3.4-8.9-3.4-12.3,0c-3.4,3.4-3.4,8.9,0,12.3c3.4,3.4,8.9,3.4,12.3,0C31.2,24.4,31.2,18.9,27.8,15.5z M26.4,26.4c-2.6,2.6-6.8,2.6-9.4,0c-2.6-2.6-2.6-6.8,0-9.4c2.6-2.6,6.8-2.6,9.4,0C29,19.6,29,23.8,26.4,26.4z\"/><path fill=\"#29363E\" d=\"M36.4,32.8l-4.3-4.3c-0.8-0.8-2.1-0.8-2.9,0l-0.7,0.7c-0.8,0.8-0.8,2.1,0,2.9l4.3,4.3c0.8,0.8,2.1,0.8,2.9,0l0.7-0.7C37.2,34.9,37.2,33.6,36.4,32.8z\"/></g></svg>",
+        "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>",
         "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>",
         "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>",
         "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>",
@@ -5139,6 +5139,7 @@
         hidden: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class." + BaseInputComponent.HiddenClass,] }],
         decimals: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
+        customCssClass: [{ type: i0.Input }],
         redErrorBackground: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.cc-red-error-background",] }],
         myFormInputInstance: [{ type: i0.Input }],
         nativeBlur: [{ type: i0.Output }],
@@ -7609,7 +7610,6 @@
             _this.showPlaceholderOnFocus = true;
             _this.noStyle = false;
             _this.hideArrowButtons = false;
-            _this.isSmall = false;
             _this.leftIconClick = new i0.EventEmitter();
             _this.rightIconClick = new i0.EventEmitter();
             _this.hasOwnLabel = true;
@@ -7673,7 +7673,7 @@
     InputTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\" (click)=\"handleLeftIconClick($event)\"></co-icon>\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    <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\" (click)=\"handleRightIconClick($event)\"></co-icon>\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  ",
+                    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  ",
                     providers: [{
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputTextComponent; })
@@ -7708,7 +7708,6 @@
         rightIconData: [{ type: i0.Input }],
         noStyle: [{ type: i0.HostBinding, args: ['class.no-style',] }, { type: i0.Input }],
         hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
-        isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }],
         leftIconClick: [{ type: i0.Output }],
         rightIconClick: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-input-text",] }],
@@ -7898,7 +7897,7 @@
     InputSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-search',
-                    template: "\n    <co-input-text\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  ",
+                    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  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -11484,6 +11483,315 @@
                 },] }
     ];
 
+    var OverlayDirective = /** @class */ (function () {
+        function OverlayDirective(elementRef) {
+            this._elementRef = elementRef;
+        }
+        Object.defineProperty(OverlayDirective.prototype, "parent", {
+            set: function (value) {
+                if (value && value.elementRef) {
+                    this._parent = value.elementRef;
+                }
+                else {
+                    if (this._parent) {
+                        this._observer.disconnect();
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OverlayDirective.prototype.ngOnDestroy = function () {
+            var _this = this;
+            window.removeEventListener("scroll", function (event) { return _this._handleScroll; });
+            this._observer.disconnect();
+            this._elementRef = undefined;
+            this._parent = undefined;
+        };
+        OverlayDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            window.addEventListener("scroll", function (event) { return _this._handleScroll; });
+            this._initiallyPlaceElement();
+            this._observer = new ResizeObserver(function (entries) {
+                var entry = entries[0];
+                var elementRect = _this._elementRef.nativeElement.getBoundingClientRect();
+                var parentRect = _this._parent.nativeElement.getBoundingClientRect();
+                _this._placeElement(entry.contentRect.bottom, entry.contentRect.right, parentRect, elementRect);
+            });
+            this._observer.observe(document.body);
+        };
+        OverlayDirective.prototype._initiallyPlaceElement = function () {
+            var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
+            var parentRect = this._parent.nativeElement.getBoundingClientRect();
+            this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
+        };
+        OverlayDirective.prototype._placeElement = function (bottom, right, parentRect, elementRect) {
+            if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
+                this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
+            }
+            else {
+                this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
+            }
+            if (right < parentRect.left + elementRect.width) { // make sure it fits at the right
+                this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
+            }
+            else {
+                this._elementRef.nativeElement.style.left = parentRect.left + "px";
+            }
+        };
+        OverlayDirective.prototype._handleScroll = function (event) {
+            console.log("scroll");
+        };
+        return OverlayDirective;
+    }());
+    OverlayDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[overlay]"
+                },] }
+    ];
+    OverlayDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    OverlayDirective.propDecorators = {
+        parent: [{ type: i0.Input, args: ["overlay",] }]
+    };
+
+    var OverlayParentDirective = /** @class */ (function () {
+        function OverlayParentDirective(elementRef) {
+            this.elementRef = elementRef;
+        }
+        OverlayParentDirective.prototype.ngOnDestroy = function () {
+            this.elementRef = undefined;
+        };
+        return OverlayParentDirective;
+    }());
+    OverlayParentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[overlayParent]',
+                    exportAs: 'overlayParent'
+                },] }
+    ];
+    OverlayParentDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var OverlayModule = /** @class */ (function () {
+        function OverlayModule() {
+        }
+        return OverlayModule;
+    }());
+    OverlayModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        OverlayDirective,
+                        OverlayParentDirective
+                    ],
+                    exports: [
+                        OverlayDirective,
+                        OverlayParentDirective
+                    ]
+                },] }
+    ];
+
+    var TooltipComponent = /** @class */ (function () {
+        function TooltipComponent(_elementRef, _changeDetector) {
+            this._elementRef = _elementRef;
+            this._changeDetector = _changeDetector;
+            this.top = -100;
+            this.left = -100;
+            this.bottom = false;
+            this.animate = true;
+        }
+        Object.defineProperty(TooltipComponent.prototype, "hostElement", {
+            get: function () {
+                return this._hostElement;
+            },
+            set: function (value) {
+                this._hostElement = value;
+                // this._positionTooltip();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TooltipComponent.prototype.showClass = function () {
+            return true;
+        };
+        TooltipComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this._positionTooltip();
+            });
+        };
+        TooltipComponent.prototype._positionTooltip = function () {
+            if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
+                var rect = this.hostElement.getBoundingClientRect();
+                var ownRect = this._elementRef.nativeElement.getBoundingClientRect();
+                var wantedLeft = rect.left;
+                var wantedTop = rect.top - ownRect.height;
+                if (wantedTop < 0) { // out of view, move to bottom
+                    this.bottom = true;
+                    wantedTop = rect.bottom;
+                }
+                else {
+                    this.bottom = false;
+                }
+                this.left = wantedLeft;
+                this.top = wantedTop;
+                this._changeDetector.markForCheck();
+                this._changeDetector.detectChanges();
+            }
+        };
+        return TooltipComponent;
+    }());
+    TooltipComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-tooltip',
+                    template: "\n    <div class=\"tooltip\" [innerHTML]=\"toolTip\"></div>\n  ",
+                    animations: [
+                        animations.trigger("showHide", [
+                            animations.state("void", animations.style({ opacity: 0 })),
+                            animations.state("*", animations.style({ opacity: 1 })),
+                            animations.transition("void <=> *", animations.animate("200ms ease-in-out")),
+                        ])
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    TooltipComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    TooltipComponent.propDecorators = {
+        hostElement: [{ type: i0.Input }],
+        toolTip: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-tooltip',] }],
+        top: [{ type: i0.HostBinding, args: ["style.top.px",] }],
+        left: [{ type: i0.HostBinding, args: ["style.left.px",] }],
+        bottom: [{ type: i0.HostBinding, args: ["class.bottom",] }],
+        animate: [{ type: i0.HostBinding, args: ['@showHide',] }]
+    };
+
+    var TooltipDirective = /** @class */ (function () {
+        function TooltipDirective(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
+            this._compFactoryResolver = _compFactoryResolver;
+            this._appRef = _appRef;
+            this._injector = _injector;
+            this._sanitizer = _sanitizer;
+            this._elementRef = elementRef;
+        }
+        Object.defineProperty(TooltipDirective.prototype, "tooltip", {
+            set: function (str) {
+                this._tooltipMessage = str;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TooltipDirective.prototype.ngOnDestroy = function () {
+            var _this = this;
+            if (this._elementRef && this._elementRef.nativeElement) {
+                this._elementRef.nativeElement.removeEventListener('mouseenter', function (event) { return _this._handleMouseMove(event); });
+                this._elementRef.nativeElement.removeEventListener('mouseleave', function () { return _this._removeTooltip(); });
+            }
+            window.removeEventListener("scroll", function (event) { return _this._handleScroll; });
+            this._elementRef = undefined;
+        };
+        TooltipDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            window.addEventListener("scroll", function (event) { return _this._handleScroll; });
+            if (this._elementRef && this._elementRef.nativeElement) {
+                this._elementRef.nativeElement.addEventListener('mouseenter', function (event) { return _this._handleMouseMove(event); });
+                this._elementRef.nativeElement.addEventListener('mouseleave', function () { return _this._removeTooltip(); });
+            }
+        };
+        TooltipDirective.prototype._handleScroll = function () {
+            this._removeTooltip();
+        };
+        TooltipDirective.prototype._handleMouseMove = function (event) {
+            this._showTooltip(event.clientY, event.clientX);
+        };
+        TooltipDirective.prototype._showTooltip = function (top, left) {
+            this._createTooltipComponent(top, left);
+        };
+        TooltipDirective.prototype._removeTooltip = function () {
+            if (this._componentRef) {
+                this._appRef.detachView(this._componentRef.hostView);
+                this._componentRef.destroy();
+                this._componentRef = undefined;
+            }
+        };
+        TooltipDirective.prototype._createTooltipComponent = function (top, left) {
+            if (!this._tooltipMessage) {
+                return;
+            }
+            if (this._componentRef) {
+                return;
+            }
+            this._componentRef = this._compFactoryResolver
+                .resolveComponentFactory(TooltipComponent)
+                .create(this._injector);
+            this._componentRef.instance.hostElement = this._elementRef.nativeElement;
+            this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
+            this._appRef.attachView(this._componentRef.hostView);
+            var domElem = this._componentRef.hostView.rootNodes[0];
+            document.body.appendChild(domElem);
+        };
+        return TooltipDirective;
+    }());
+    TooltipDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[tooltip]"
+                },] }
+    ];
+    TooltipDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ApplicationRef },
+        { type: i0.Injector },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    TooltipDirective.propDecorators = {
+        tooltip: [{ type: i0.Input, args: ["tooltip",] }]
+    };
+
+    var TooltipModule = /** @class */ (function () {
+        function TooltipModule() {
+        }
+        return TooltipModule;
+    }());
+    TooltipModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        TooltipComponent
+                    ],
+                    exports: [
+                        TooltipComponent
+                    ]
+                },] }
+    ];
+
+    var TooltipDirectiveModule = /** @class */ (function () {
+        function TooltipDirectiveModule() {
+        }
+        return TooltipDirectiveModule;
+    }());
+    TooltipDirectiveModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        TooltipModule
+                    ],
+                    declarations: [
+                        TooltipDirective
+                    ],
+                    exports: [
+                        TooltipDirective
+                    ]
+                },] }
+    ];
+
     var CheckmarkOverlayComponent = /** @class */ (function () {
         function CheckmarkOverlayComponent(_renderer) {
             var _this = this;
@@ -11840,6 +12148,7 @@
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
     exports.OrientationOfDirection = OrientationOfDirection;
+    exports.OverlayModule = OverlayModule;
     exports.PaginationBarComponent = PaginationBarComponent;
     exports.PaginationBarModule = PaginationBarModule;
     exports.PaginationComponent = PaginationComponent;
@@ -11859,6 +12168,7 @@
     exports.TextInputPopupComponent = TextInputPopupComponent;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
+    exports.TooltipDirectiveModule = TooltipDirectiveModule;
     exports.ViewModeButtonsComponent = ViewModeButtonsComponent;
     exports.ViewModeButtonsModule = ViewModeButtonsModule;
     exports.showHideDialogAnimation = showHideDialogAnimation;
@@ -11871,9 +12181,14 @@
     exports["ɵbe"] = PrependPipe;
     exports["ɵbf"] = ClickOutsideDirective;
     exports["ɵbg"] = ClickOutsideMasterService;
-    exports["ɵbh"] = CheckmarkOverlayComponent;
-    exports["ɵbi"] = ScreenConfigurationDirective;
-    exports["ɵbj"] = ScreenConfigComponentWrapper;
+    exports["ɵbh"] = OverlayDirective;
+    exports["ɵbi"] = OverlayParentDirective;
+    exports["ɵbj"] = TooltipModule;
+    exports["ɵbk"] = TooltipComponent;
+    exports["ɵbl"] = TooltipDirective;
+    exports["ɵbm"] = CheckmarkOverlayComponent;
+    exports["ɵbn"] = ScreenConfigurationDirective;
+    exports["ɵbo"] = ScreenConfigComponentWrapper;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;