@colijnit/corecomponents_v12 12.0.96 → 12.0.97

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -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 }],
@@ -7673,7 +7674,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; })
@@ -7898,7 +7899,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 +11485,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 +12150,7 @@
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
     exports.OrientationOfDirection = OrientationOfDirection;
+    exports.OverlayModule = OverlayModule;
     exports.PaginationBarComponent = PaginationBarComponent;
     exports.PaginationBarModule = PaginationBarModule;
     exports.PaginationComponent = PaginationComponent;
@@ -11859,6 +12170,7 @@
     exports.TextInputPopupComponent = TextInputPopupComponent;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
+    exports.TooltipDirectiveModule = TooltipDirectiveModule;
     exports.ViewModeButtonsComponent = ViewModeButtonsComponent;
     exports.ViewModeButtonsModule = ViewModeButtonsModule;
     exports.showHideDialogAnimation = showHideDialogAnimation;
@@ -11871,9 +12183,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;