novo-elements 7.9.0 → 7.10.0-next.2

package/fesm2015/novo-elements.mjs

@@ -19878,6 +19878,15 @@ class BaseControl extends ControlConfig {
             this.removeTooltipArrow = config.removeTooltipArrow;
             this.tooltipAutoPosition = config.tooltipAutoPosition;
         }
+        this.popoverAlways = config.popoverAlways;
+        this.popoverAnimation = config.popoverAnimation;
+        this.popoverContent = config.popoverContent;
+        this.popoverDisabled = config.popoverDisabled;
+        this.popoverDismissTimeout = config.popoverDismissTimeout;
+        this.popoverHtmlContent = config.popoverHtmlContent;
+        this.popoverOnHover = config.popoverOnHover;
+        this.popoverPlacement = config.popoverPlacement;
+        this.popoverTitle = config.popoverTitle;
         this.template = config.template;
         this.customControlConfig = config.customControlConfig;
         this.tipWell = config.tipWell;
@@ -48006,6 +48015,21 @@ class FieldInteractionApi {
             this.triggerEvent({ controlKey: key, prop: 'tooltip', value: tooltip }, otherForm);
         }
     }
+    setPopOver(key, popover, otherForm) {
+        const control = this.getControl(key, otherForm);
+        if (control && !control.restrictFieldInteractions) {
+            control.popoverTitle = popover.title;
+            control.popoverContent = popover.content;
+            control.popoverHtmlContent = popover.htmlContent;
+            control.popoverPlacement = popover.placement;
+            control.popoverOnHover = popover.onHover;
+            control.popoverAlways = popover.always;
+            control.popoverDisabled = popover.disabled;
+            control.popoverAnimation = popover.animation;
+            control.popoverDismissTimeout = popover.dismissTimeout;
+            this.triggerEvent({ controlKey: key, prop: 'popover', value: popover }, otherForm);
+        }
+    }
     confirmChanges(key, message) {
         const history = this.getProperty(key, 'valueHistory');
         const oldValue = history[history.length - 2];
@@ -50836,6 +50860,398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
+class PopOverContent {
+    constructor(element, cdr) {
+        this.element = element;
+        this.cdr = cdr;
+        this.placement = 'top';
+        this.animation = true;
+        this.onCloseFromOutside = new EventEmitter();
+        this.top = -10000;
+        this.left = -10000;
+        this.displayType = 'none';
+        this.isHidden = false;
+    }
+    ngAfterViewInit() {
+        this.show();
+        this.cdr.detectChanges();
+    }
+    toggle() {
+        if (this.isHidden) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        if (!this.popover || !this.popover.getElement()) {
+            return;
+        }
+        const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
+        this.displayType = 'block';
+        this.top = p.top;
+        this.left = p.left;
+        this.isHidden = false;
+    }
+    hide() {
+        this.top = -10000;
+        this.left = -10000;
+        this.isHidden = true;
+        this.popover.hide();
+    }
+    hideFromPopover() {
+        this.top = -10000;
+        this.left = -10000;
+    }
+    positionElements(hostEl, targetEl, positionStr, appendToBody = false) {
+        const positionStrParts = positionStr.split('-');
+        const mainSide = (this.effectivePlacement = this.getEffectivePlacement(positionStrParts[0] || 'right', hostEl, targetEl));
+        const orientation = (this.effectiveAlignment = positionStrParts[1] || 'center');
+        const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        const targetElWidth = targetEl.offsetWidth;
+        const targetElHeight = targetEl.offsetHeight;
+        const shiftWidth = {
+            center() {
+                return hostElPos.left + (hostElPos.width - targetElWidth) / 2;
+            },
+            right() {
+                return hostElPos.left;
+            },
+            left() {
+                return hostElPos.left + (hostElPos.width - targetElWidth);
+            },
+        };
+        const shiftHeight = {
+            center() {
+                return hostElPos.top + (hostElPos.height - targetElHeight) / 2;
+            },
+            bottom() {
+                return hostElPos.top;
+            },
+            top() {
+                return hostElPos.top + (hostElPos.height - targetElHeight);
+            },
+        };
+        let targetElPos;
+        switch (mainSide) {
+            case 'right':
+                targetElPos = {
+                    top: shiftHeight[orientation](),
+                    left: hostElPos.left + hostElPos.width,
+                };
+                break;
+            case 'left':
+                targetElPos = {
+                    top: shiftHeight[orientation](),
+                    left: hostElPos.left - targetElWidth,
+                };
+                break;
+            case 'bottom':
+                targetElPos = {
+                    top: hostElPos.top + hostElPos.height,
+                    left: shiftWidth[orientation](),
+                };
+                break;
+            default:
+                targetElPos = {
+                    top: hostElPos.top - targetElHeight,
+                    left: shiftWidth[orientation](),
+                };
+                break;
+        }
+        return targetElPos;
+    }
+    position(nativeEl) {
+        let offsetParentBCR = { top: 0, left: 0 };
+        const elBCR = this.offset(nativeEl);
+        const offsetParentEl = this.parentOffsetEl(nativeEl);
+        if (offsetParentEl !== window.document) {
+            offsetParentBCR = this.offset(offsetParentEl);
+            offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
+            offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
+        }
+        const boundingClientRect = nativeEl.getBoundingClientRect();
+        return {
+            width: boundingClientRect.width || nativeEl.offsetWidth,
+            height: boundingClientRect.height || nativeEl.offsetHeight,
+            top: elBCR.top - offsetParentBCR.top,
+            left: elBCR.left - offsetParentBCR.left,
+        };
+    }
+    offset(nativeEl) {
+        const boundingClientRect = nativeEl.getBoundingClientRect();
+        return {
+            width: boundingClientRect.width || nativeEl.offsetWidth,
+            height: boundingClientRect.height || nativeEl.offsetHeight,
+            top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
+            left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft),
+        };
+    }
+    getStyle(nativeEl, cssProp) {
+        if (nativeEl.currentStyle) {
+            return nativeEl.currentStyle[cssProp];
+        }
+        if (window.getComputedStyle) {
+            return window.getComputedStyle(nativeEl)[cssProp];
+        }
+        return nativeEl.style[cssProp];
+    }
+    isStaticPositioned(nativeEl) {
+        return (this.getStyle(nativeEl, 'position') || 'static') === 'static';
+    }
+    parentOffsetEl(nativeEl) {
+        let offsetParent = nativeEl.offsetParent || window.document;
+        while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
+            offsetParent = offsetParent.offsetParent;
+        }
+        return offsetParent || window.document;
+    }
+    getEffectivePlacement(desiredPlacement, hostElement, targetElement) {
+        const hostElBoundingRect = hostElement.getBoundingClientRect();
+        if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+            return 'bottom';
+        }
+        if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+            return 'top';
+        }
+        if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+            return 'right';
+        }
+        if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+            return 'left';
+        }
+        return desiredPlacement;
+    }
+}
+PopOverContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverContent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopOverContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PopOverContent, selector: "popover-content", inputs: { content: "content", htmlContent: "htmlContent", placement: "placement", title: "title", animation: "animation" }, viewQueries: [{ propertyName: "popoverDiv", first: true, predicate: ["popoverDiv"], descendants: true }], ngImport: i0, template: `
+    <div
+      #popoverDiv
+      class="popover {{ effectivePlacement }}"
+      [style.top]="top + 'px'"
+      [style.left]="left + 'px'"
+      [class.fade]="animation"
+      style="display: block"
+      role="popover"
+    >
+      <div class="arrow {{ effectiveAlignment }}"></div>
+      <div class="popover-title" [hidden]="!title">{{ title }}</div>
+      <div class="popover-content">
+        <ng-content></ng-content>
+        <div *ngIf="htmlContent" class="popover-content-text" [innerHTML]="htmlContent"></div>
+        <div *ngIf="!htmlContent" class="popover-content-text">{{ content }}</div>
+      </div>
+    </div>
+  `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'popover-content',
+                    template: `
+    <div
+      #popoverDiv
+      class="popover {{ effectivePlacement }}"
+      [style.top]="top + 'px'"
+      [style.left]="left + 'px'"
+      [class.fade]="animation"
+      style="display: block"
+      role="popover"
+    >
+      <div class="arrow {{ effectiveAlignment }}"></div>
+      <div class="popover-title" [hidden]="!title">{{ title }}</div>
+      <div class="popover-content">
+        <ng-content></ng-content>
+        <div *ngIf="htmlContent" class="popover-content-text" [innerHTML]="htmlContent"></div>
+        <div *ngIf="!htmlContent" class="popover-content-text">{{ content }}</div>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
+                type: Input
+            }], htmlContent: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], popoverDiv: [{
+                type: ViewChild,
+                args: ['popoverDiv']
+            }] } });
+
+// NG2
+class PopOverDirective {
+    constructor(viewContainerRef, resolver) {
+        this.viewContainerRef = viewContainerRef;
+        this.resolver = resolver;
+        this.PopoverComponent = PopOverContent;
+        this.popoverOnHover = false;
+        this.popoverDismissTimeout = 0;
+        this.onShown = new EventEmitter();
+        this.onHidden = new EventEmitter();
+    }
+    // ---------------------------------------------------
+    // Event listeners
+    // ---------------------------------------------------
+    showOrHideOnClick() {
+        if (this.popoverOnHover || this.popoverDisabled) {
+            return;
+        }
+        this.toggle();
+    }
+    showOnHover() {
+        if (!this.popoverOnHover || this.popoverDisabled) {
+            return;
+        }
+        this.show();
+    }
+    hideOnHover() {
+        if (!this.popoverOnHover || this.popoverDisabled) {
+            return;
+        }
+        this.hide();
+    }
+    ngOnChanges(changes) {
+        if (changes.popoverDisabled) {
+            if (changes.popoverDisabled.currentValue) {
+                this.hide();
+            }
+        }
+        if (changes.popoverAlways) {
+            if (changes.popoverAlways.currentValue) {
+                this.show();
+            }
+        }
+    }
+    toggle() {
+        if (!this.visible) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        if (this.visible || (!this.content && !this.popoverHtmlContent)) {
+            return;
+        }
+        this.visible = true;
+        if (typeof this.content === 'string' || this.popoverHtmlContent) {
+            const factory = this.resolver.resolveComponentFactory(this.PopoverComponent);
+            if (!this.visible) {
+                return;
+            }
+            this.popover = this.viewContainerRef.createComponent(factory);
+            const popover = this.popover.instance;
+            popover.popover = this;
+            if (this.content) {
+                popover.content = this.content;
+            }
+            if (this.popoverHtmlContent) {
+                popover.htmlContent = this.popoverHtmlContent;
+            }
+            if (this.popoverPlacement !== undefined) {
+                popover.placement = this.popoverPlacement;
+            }
+            if (this.popoverAnimation !== undefined) {
+                popover.animation = this.popoverAnimation;
+            }
+            if (this.popoverTitle !== undefined) {
+                popover.title = this.popoverTitle;
+            }
+            popover.onCloseFromOutside.subscribe(() => this.hide());
+            if (this.popoverDismissTimeout > 0) {
+                setTimeout(() => this.hide(), this.popoverDismissTimeout);
+            }
+        }
+        else {
+            const popover = this.content;
+            popover.popover = this;
+            if (this.popoverPlacement !== undefined) {
+                popover.placement = this.popoverPlacement;
+            }
+            if (this.popoverAnimation !== undefined) {
+                popover.animation = this.popoverAnimation;
+            }
+            if (this.popoverTitle !== undefined) {
+                popover.title = this.popoverTitle;
+            }
+            popover.onCloseFromOutside.subscribe(() => this.hide());
+            if (this.popoverDismissTimeout > 0) {
+                setTimeout(() => this.hide(), this.popoverDismissTimeout);
+            }
+            popover.show();
+        }
+        this.onShown.emit(this);
+    }
+    hide() {
+        if (!this.visible) {
+            return;
+        }
+        this.visible = false;
+        if (this.popover) {
+            this.popover.destroy();
+        }
+        if (this.content instanceof PopOverContent) {
+            this.content.hideFromPopover();
+        }
+        this.onHidden.emit(this);
+    }
+    getElement() {
+        return this.viewContainerRef.element.nativeElement;
+    }
+}
+PopOverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+PopOverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PopOverDirective, selector: "[popover]", inputs: { content: ["popover", "content"], popoverHtmlContent: "popoverHtmlContent", popoverDisabled: "popoverDisabled", popoverAlways: "popoverAlways", popoverAnimation: "popoverAnimation", popoverPlacement: "popoverPlacement", popoverTitle: "popoverTitle", popoverOnHover: "popoverOnHover", popoverDismissTimeout: "popoverDismissTimeout" }, outputs: { onShown: "onShown", onHidden: "onHidden" }, host: { listeners: { "click": "showOrHideOnClick()", "focusin": "showOnHover()", "mouseenter": "showOnHover()", "focusout": "hideOnHover()", "mouseleave": "hideOnHover()" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[popover]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { content: [{
+                type: Input,
+                args: ['popover']
+            }], popoverHtmlContent: [{
+                type: Input
+            }], popoverDisabled: [{
+                type: Input
+            }], popoverAlways: [{
+                type: Input
+            }], popoverAnimation: [{
+                type: Input
+            }], popoverPlacement: [{
+                type: Input
+            }], popoverTitle: [{
+                type: Input
+            }], popoverOnHover: [{
+                type: Input
+            }], popoverDismissTimeout: [{
+                type: Input
+            }], onShown: [{
+                type: Output
+            }], onHidden: [{
+                type: Output
+            }], showOrHideOnClick: [{
+                type: HostListener,
+                args: ['click']
+            }], showOnHover: [{
+                type: HostListener,
+                args: ['focusin']
+            }, {
+                type: HostListener,
+                args: ['mouseenter']
+            }], hideOnHover: [{
+                type: HostListener,
+                args: ['focusout']
+            }, {
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 class NovoControlTemplates {
     constructor(templates) {
         this.templates = templates;
@@ -50865,6 +51281,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <input
           *ngIf="control?.type !== 'number' && control?.textMaskEnabled"
@@ -50940,6 +51365,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <textarea
           [class.maxlength-error]="errors?.maxlength"
@@ -50996,6 +51430,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         >
           <option *ngIf="control.placeholder" value="" disabled selected hidden>{{ control.placeholder }}</option>
           <option *ngFor="let opt of control.options" [value]="opt.key">{{ opt.value }}</option>
@@ -51020,6 +51463,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           (edit)="methods.handleEdit($event)"
           (save)="methods.handleSave($event)"
           (delete)="methods.handleDelete($event)"
@@ -51041,6 +51493,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           [controlDisabled]="control.disabled"
         ></novo-tiles>
       </div>
@@ -51066,6 +51527,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-picker>
         <novo-chips
           [source]="control.config"
@@ -51085,6 +51555,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-chips>
         <novo-row-chips
           [source]="control.config"
@@ -51104,6 +51583,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-row-chips>
       </div>
     </ng-template>
@@ -51122,6 +51610,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           (onSelect)="methods.modelChange($event)"
         ></novo-select>
       </div>
@@ -51141,6 +51638,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           position="bottom"
           (onSelect)="methods.modelChange($event)"
         ></novo-select>
@@ -51165,6 +51671,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [tooltipPreline]="control?.tooltipPreline"
             [removeTooltipArrow]="control?.removeTooltipArrow"
             [tooltipAutoPosition]="control?.tooltipAutoPosition"
+            [popover]="control.popoverContent"
+            [popoverHtmlContent]="control.popoverHtmlContent"
+            [popoverTitle]="control.popoverTitle"
+            [popoverPlacement]="control.popoverPlacement"
+            [popoverOnHover]="control.popoverOnHover"
+            [popoverAlways]="control.popoverAlways"
+            [popoverDisabled]="control.popoverDisabled"
+            [popoverAnimation]="control.popoverAnimation"
+            [popoverDismissTimeout]="control.popoverDismissTimeout"
             [button]="!!option.icon"
             [icon]="option.icon"
             [color]="option.color"
@@ -51186,6 +51701,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <novo-time-picker-input
           [attr.id]="control.key"
@@ -51208,6 +51732,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <input
           [formControlName]="control.key"
@@ -51232,6 +51765,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <novo-date-picker-input
           [attr.id]="control.key"
@@ -51263,6 +51805,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <novo-date-time-picker-input
           [attr.id]="control.key"
@@ -51308,6 +51859,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           [layoutOptions]="control?.layoutOptions"
         ></novo-checkbox>
       </div>
@@ -51324,6 +51884,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-switch>
       </div>
     </ng-template>
@@ -51341,6 +51910,15 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           (onSelect)="methods.modelChange($event)"
         ></novo-check-list>
       </div>
@@ -51358,13 +51936,22 @@ NovoControlTemplates.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           [tooltip]="control?.tooltip"
           [tooltipPosition]="control?.tooltipPosition"
           [tooltipSize]="control?.tooltipSize"
+          [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
-          [tooltipPreline]="control?.tooltipPreline"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-quick-note>
       </div>
     </ng-template>
-  `, isInline: true, components: [{ type: NovoCKEditorElement, selector: "novo-editor", inputs: ["config", "debounce", "name", "minimal", "startupFocus", "fileBrowserImageUploadUrl", "disabled", "value"], outputs: ["change", "ready", "blur", "focus", "paste", "loaded"] }, { type: NovoAceEditor, selector: "novo-ace-editor", inputs: ["theme", "options", "mode", "name"], outputs: ["blur", "focus"] }, { type: NovoFileInputElement, selector: "novo-file-input", inputs: ["id", "tabindex", "errorStateMatcher", "multiple", "layoutOptions", "value", "dataFeatureId", "name", "disabled", "required", "placeholder"], outputs: ["edit", "save", "delete", "upload"] }, { type: NovoTilesElement, selector: "novo-tiles", inputs: ["name", "options", "required", "controlDisabled"], outputs: ["onChange", "onSelectedOptionClick", "onDisabledOptionClick"] }, { type: NovoPickerElement, selector: "novo-picker", inputs: ["config", "placeholder", "clearValueOnSelect", "closeOnSelect", "selected", "appendToBody", "parentScrollSelector", "parentScrollAction", "containerClass", "side", "autoSelectFirstOption", "overrideElement", "disablePickerInput"], outputs: ["changed", "select", "focus", "blur", "typing"] }, { type: NovoChipsElement, selector: "chips,novo-chips", inputs: ["closeOnSelect", "placeholder", "source", "maxlength", "type", "disablePickerInput", "value"], outputs: ["changed", "focus", "blur", "typing"] }, { type: NovoRowChipsElement, selector: "novo-row-chips", inputs: ["closeOnSelect"] }, { type: NovoSelectElement, selector: "novo-select", inputs: ["disabled", "required", "tabIndex", "id", "name", "options", "placeholder", "readonly", "headerConfig", "position", "overlayWidth", "overlayHeight", "displayWith", "compareWith", "value", "multiple"], outputs: ["onSelect", "selectionChange", "valueChange", "openedChange", "opened", "closed"] }, { type: NovoRadioGroup, selector: "novo-radio-group", inputs: ["id", "tabindex", "errorStateMatcher", "appearance", "value", "name", "disabled", "required", "placeholder"], outputs: ["change", "blur"] }, { type: NovoRadioElement, selector: "novo-radio", inputs: ["id", "name", "tabindex", "vertical", "label", "button", "theme", "size", "icon", "color", "checked", "value", "disabled"], outputs: ["change", "blur", "focus"] }, { type: NovoTimePickerInputElement, selector: "novo-time-picker-input", inputs: ["name", "placeholder", "military", "maskOptions", "disabled", "analog"], outputs: ["blurEvent", "focusEvent"] }, { type: NovoDatePickerInputElement, selector: "novo-date-picker-input", inputs: ["name", "start", "end", "placeholder", "maskOptions", "format", "textMaskEnabled", "allowInvalidDate", "disabled", "disabledDateMessage", "weekStart"], outputs: ["blurEvent", "focusEvent", "changeEvent"] }, { type: NovoDateTimePickerInputElement, selector: "novo-date-time-picker-input", inputs: ["name", "start", "end", "placeholder", "maskOptions", "military", "disabled", "format", "weekStart", "disabledDateMessage"], outputs: ["blurEvent", "focusEvent", "changeEvent"] }, { type: NovoAddressElement, selector: "novo-address", inputs: ["config", "readOnly"], outputs: ["change", "focus", "blur", "validityChange"] }, { type: NovoCheckboxElement, selector: "novo-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "name", "label", "disabled", "layoutOptions", "color", "value", "tabIndex", "required", "checked", "indeterminate"], outputs: ["change", "indeterminateChange", "onSelect"] }, { type: NovoSwitchElement, selector: "novo-switch", inputs: ["theme", "icons", "disabled"], outputs: ["onChange"] }, { type: NovoCheckListElement, selector: "novo-check-list", inputs: ["name", "options", "disabled"], outputs: ["onSelect"] }, { type: QuickNoteElement, selector: "novo-quick-note", inputs: ["config", "startupFocus", "placeholder"], outputs: ["focus", "blur", "change"] }], directives: [{ type: NovoTemplate, selector: "[novoTemplate]", inputs: ["type", "novoTemplate"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition", "tooltipType", "tooltipSize", "tooltipBounce", "tooltipNoAnimate", "tooltipRounded", "tooltipAlways", "tooltipActive", "tooltipPreline", "removeTooltipArrow", "tooltipAutoPosition", "tooltipIsHTML"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: NovoAutoSize, selector: "textarea[autosize]" }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }] });
+  `, isInline: true, components: [{ type: NovoCKEditorElement, selector: "novo-editor", inputs: ["config", "debounce", "name", "minimal", "startupFocus", "fileBrowserImageUploadUrl", "disabled", "value"], outputs: ["change", "ready", "blur", "focus", "paste", "loaded"] }, { type: NovoAceEditor, selector: "novo-ace-editor", inputs: ["theme", "options", "mode", "name"], outputs: ["blur", "focus"] }, { type: NovoFileInputElement, selector: "novo-file-input", inputs: ["id", "tabindex", "errorStateMatcher", "multiple", "layoutOptions", "value", "dataFeatureId", "name", "disabled", "required", "placeholder"], outputs: ["edit", "save", "delete", "upload"] }, { type: NovoTilesElement, selector: "novo-tiles", inputs: ["name", "options", "required", "controlDisabled"], outputs: ["onChange", "onSelectedOptionClick", "onDisabledOptionClick"] }, { type: NovoPickerElement, selector: "novo-picker", inputs: ["config", "placeholder", "clearValueOnSelect", "closeOnSelect", "selected", "appendToBody", "parentScrollSelector", "parentScrollAction", "containerClass", "side", "autoSelectFirstOption", "overrideElement", "disablePickerInput"], outputs: ["changed", "select", "focus", "blur", "typing"] }, { type: NovoChipsElement, selector: "chips,novo-chips", inputs: ["closeOnSelect", "placeholder", "source", "maxlength", "type", "disablePickerInput", "value"], outputs: ["changed", "focus", "blur", "typing"] }, { type: NovoRowChipsElement, selector: "novo-row-chips", inputs: ["closeOnSelect"] }, { type: NovoSelectElement, selector: "novo-select", inputs: ["disabled", "required", "tabIndex", "id", "name", "options", "placeholder", "readonly", "headerConfig", "position", "overlayWidth", "overlayHeight", "displayWith", "compareWith", "value", "multiple"], outputs: ["onSelect", "selectionChange", "valueChange", "openedChange", "opened", "closed"] }, { type: NovoRadioGroup, selector: "novo-radio-group", inputs: ["id", "tabindex", "errorStateMatcher", "appearance", "value", "name", "disabled", "required", "placeholder"], outputs: ["change", "blur"] }, { type: NovoRadioElement, selector: "novo-radio", inputs: ["id", "name", "tabindex", "vertical", "label", "button", "theme", "size", "icon", "color", "checked", "value", "disabled"], outputs: ["change", "blur", "focus"] }, { type: NovoTimePickerInputElement, selector: "novo-time-picker-input", inputs: ["name", "placeholder", "military", "maskOptions", "disabled", "analog"], outputs: ["blurEvent", "focusEvent"] }, { type: NovoDatePickerInputElement, selector: "novo-date-picker-input", inputs: ["name", "start", "end", "placeholder", "maskOptions", "format", "textMaskEnabled", "allowInvalidDate", "disabled", "disabledDateMessage", "weekStart"], outputs: ["blurEvent", "focusEvent", "changeEvent"] }, { type: NovoDateTimePickerInputElement, selector: "novo-date-time-picker-input", inputs: ["name", "start", "end", "placeholder", "maskOptions", "military", "disabled", "format", "weekStart", "disabledDateMessage"], outputs: ["blurEvent", "focusEvent", "changeEvent"] }, { type: NovoAddressElement, selector: "novo-address", inputs: ["config", "readOnly"], outputs: ["change", "focus", "blur", "validityChange"] }, { type: NovoCheckboxElement, selector: "novo-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "name", "label", "disabled", "layoutOptions", "color", "value", "tabIndex", "required", "checked", "indeterminate"], outputs: ["change", "indeterminateChange", "onSelect"] }, { type: NovoSwitchElement, selector: "novo-switch", inputs: ["theme", "icons", "disabled"], outputs: ["onChange"] }, { type: NovoCheckListElement, selector: "novo-check-list", inputs: ["name", "options", "disabled"], outputs: ["onSelect"] }, { type: QuickNoteElement, selector: "novo-quick-note", inputs: ["config", "startupFocus", "placeholder"], outputs: ["focus", "blur", "change"] }], directives: [{ type: NovoTemplate, selector: "[novoTemplate]", inputs: ["type", "novoTemplate"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition", "tooltipType", "tooltipSize", "tooltipBounce", "tooltipNoAnimate", "tooltipRounded", "tooltipAlways", "tooltipActive", "tooltipPreline", "removeTooltipArrow", "tooltipAutoPosition", "tooltipIsHTML"] }, { type: PopOverDirective, selector: "[popover]", inputs: ["popover", "popoverHtmlContent", "popoverDisabled", "popoverAlways", "popoverAnimation", "popoverPlacement", "popoverTitle", "popoverOnHover", "popoverDismissTimeout"], outputs: ["onShown", "onHidden"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: NovoAutoSize, selector: "textarea[autosize]" }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoControlTemplates, decorators: [{
             type: Component,
             args: [{
@@ -51385,6 +51972,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <input
           *ngIf="control?.type !== 'number' && control?.textMaskEnabled"
@@ -51460,6 +52056,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <textarea
           [class.maxlength-error]="errors?.maxlength"
@@ -51516,6 +52121,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         >
           <option *ngIf="control.placeholder" value="" disabled selected hidden>{{ control.placeholder }}</option>
           <option *ngFor="let opt of control.options" [value]="opt.key">{{ opt.value }}</option>
@@ -51540,6 +52154,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           (edit)="methods.handleEdit($event)"
           (save)="methods.handleSave($event)"
           (delete)="methods.handleDelete($event)"
@@ -51561,6 +52184,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           [controlDisabled]="control.disabled"
         ></novo-tiles>
       </div>
@@ -51586,6 +52218,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-picker>
         <novo-chips
           [source]="control.config"
@@ -51605,6 +52246,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-chips>
         <novo-row-chips
           [source]="control.config"
@@ -51624,6 +52274,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-row-chips>
       </div>
     </ng-template>
@@ -51642,6 +52301,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           (onSelect)="methods.modelChange($event)"
         ></novo-select>
       </div>
@@ -51661,6 +52329,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           position="bottom"
           (onSelect)="methods.modelChange($event)"
         ></novo-select>
@@ -51685,6 +52362,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [tooltipPreline]="control?.tooltipPreline"
             [removeTooltipArrow]="control?.removeTooltipArrow"
             [tooltipAutoPosition]="control?.tooltipAutoPosition"
+            [popover]="control.popoverContent"
+            [popoverHtmlContent]="control.popoverHtmlContent"
+            [popoverTitle]="control.popoverTitle"
+            [popoverPlacement]="control.popoverPlacement"
+            [popoverOnHover]="control.popoverOnHover"
+            [popoverAlways]="control.popoverAlways"
+            [popoverDisabled]="control.popoverDisabled"
+            [popoverAnimation]="control.popoverAnimation"
+            [popoverDismissTimeout]="control.popoverDismissTimeout"
             [button]="!!option.icon"
             [icon]="option.icon"
             [color]="option.color"
@@ -51706,6 +52392,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <novo-time-picker-input
           [attr.id]="control.key"
@@ -51728,6 +52423,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <input
           [formControlName]="control.key"
@@ -51752,6 +52456,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <novo-date-picker-input
           [attr.id]="control.key"
@@ -51783,6 +52496,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [tooltipPreline]="control?.tooltipPreline"
         [removeTooltipArrow]="control?.removeTooltipArrow"
         [tooltipAutoPosition]="control?.tooltipAutoPosition"
+        [popover]="control.popoverContent"
+        [popoverHtmlContent]="control.popoverHtmlContent"
+        [popoverTitle]="control.popoverTitle"
+        [popoverPlacement]="control.popoverPlacement"
+        [popoverOnHover]="control.popoverOnHover"
+        [popoverAlways]="control.popoverAlways"
+        [popoverDisabled]="control.popoverDisabled"
+        [popoverAnimation]="control.popoverAnimation"
+        [popoverDismissTimeout]="control.popoverDismissTimeout"
       >
         <novo-date-time-picker-input
           [attr.id]="control.key"
@@ -51828,6 +52550,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           [layoutOptions]="control?.layoutOptions"
         ></novo-checkbox>
       </div>
@@ -51844,6 +52575,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-switch>
       </div>
     </ng-template>
@@ -51861,6 +52601,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
           (onSelect)="methods.modelChange($event)"
         ></novo-check-list>
       </div>
@@ -51878,9 +52627,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
           [tooltip]="control?.tooltip"
           [tooltipPosition]="control?.tooltipPosition"
           [tooltipSize]="control?.tooltipSize"
+          [tooltipPreline]="control?.tooltipPreline"
           [removeTooltipArrow]="control?.removeTooltipArrow"
           [tooltipAutoPosition]="control?.tooltipAutoPosition"
-          [tooltipPreline]="control?.tooltipPreline"
+          [popover]="control.popoverContent"
+          [popoverHtmlContent]="control.popoverHtmlContent"
+          [popoverTitle]="control.popoverTitle"
+          [popoverPlacement]="control.popoverPlacement"
+          [popoverOnHover]="control.popoverOnHover"
+          [popoverAlways]="control.popoverAlways"
+          [popoverDisabled]="control.popoverDisabled"
+          [popoverAnimation]="control.popoverAnimation"
+          [popoverDismissTimeout]="control.popoverDismissTimeout"
         ></novo-quick-note>
       </div>
     </ng-template>
@@ -52552,6 +53310,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+// NG2
+class NovoPopOverModule {
+}
+NovoPopOverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NovoPopOverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, declarations: [PopOverContent, PopOverDirective], imports: [CommonModule], exports: [PopOverContent, PopOverDirective] });
+NovoPopOverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PopOverContent, PopOverDirective],
+                    exports: [PopOverContent, PopOverDirective],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
 // NG2
 class NovoFormModule {
 }
@@ -52582,6 +53359,7 @@ NovoFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NovoDateTimePickerModule,
         NovoHeaderModule,
         NovoTooltipModule,
+        NovoPopOverModule,
         NovoDragulaModule,
         IMaskDirectiveModule,
         TextMaskModule,
@@ -52618,6 +53396,7 @@ NovoFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             NovoDateTimePickerModule,
             NovoHeaderModule,
             NovoTooltipModule,
+            NovoPopOverModule,
             NovoDragulaModule,
             IMaskDirectiveModule,
             TextMaskModule,
@@ -52652,6 +53431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NovoDateTimePickerModule,
                         NovoHeaderModule,
                         NovoTooltipModule,
+                        NovoPopOverModule,
                         NovoDragulaModule,
                         IMaskDirectiveModule,
                         TextMaskModule,
@@ -55525,401 +56305,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
-class PopOverContent {
-    constructor(element, cdr) {
-        this.element = element;
-        this.cdr = cdr;
-        this.placement = 'top';
-        this.animation = true;
-        this.onCloseFromOutside = new EventEmitter();
-        this.top = -10000;
-        this.left = -10000;
-        this.displayType = 'none';
-        this.isHidden = false;
-    }
-    ngAfterViewInit() {
-        this.show();
-        this.cdr.detectChanges();
-    }
-    toggle() {
-        if (this.isHidden) {
-            this.show();
-        }
-        else {
-            this.hide();
-        }
-    }
-    show() {
-        if (!this.popover || !this.popover.getElement()) {
-            return;
-        }
-        const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
-        this.displayType = 'block';
-        this.top = p.top;
-        this.left = p.left;
-        this.isHidden = false;
-    }
-    hide() {
-        this.top = -10000;
-        this.left = -10000;
-        this.isHidden = true;
-        this.popover.hide();
-    }
-    hideFromPopover() {
-        this.top = -10000;
-        this.left = -10000;
-    }
-    positionElements(hostEl, targetEl, positionStr, appendToBody = false) {
-        const positionStrParts = positionStr.split('-');
-        const mainSide = (this.effectivePlacement = this.getEffectivePlacement(positionStrParts[0] || 'right', hostEl, targetEl));
-        const orientation = (this.effectiveAlignment = positionStrParts[1] || 'center');
-        const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
-        const targetElWidth = targetEl.offsetWidth;
-        const targetElHeight = targetEl.offsetHeight;
-        const shiftWidth = {
-            center() {
-                return hostElPos.left + (hostElPos.width - targetElWidth) / 2;
-            },
-            right() {
-                return hostElPos.left;
-            },
-            left() {
-                return hostElPos.left + (hostElPos.width - targetElWidth);
-            },
-        };
-        const shiftHeight = {
-            center() {
-                return hostElPos.top + (hostElPos.height - targetElHeight) / 2;
-            },
-            bottom() {
-                return hostElPos.top;
-            },
-            top() {
-                return hostElPos.top + (hostElPos.height - targetElHeight);
-            },
-        };
-        let targetElPos;
-        switch (mainSide) {
-            case 'right':
-                targetElPos = {
-                    top: shiftHeight[orientation](),
-                    left: hostElPos.left + hostElPos.width,
-                };
-                break;
-            case 'left':
-                targetElPos = {
-                    top: shiftHeight[orientation](),
-                    left: hostElPos.left - targetElWidth,
-                };
-                break;
-            case 'bottom':
-                targetElPos = {
-                    top: hostElPos.top + hostElPos.height,
-                    left: shiftWidth[orientation](),
-                };
-                break;
-            default:
-                targetElPos = {
-                    top: hostElPos.top - targetElHeight,
-                    left: shiftWidth[orientation](),
-                };
-                break;
-        }
-        return targetElPos;
-    }
-    position(nativeEl) {
-        let offsetParentBCR = { top: 0, left: 0 };
-        const elBCR = this.offset(nativeEl);
-        const offsetParentEl = this.parentOffsetEl(nativeEl);
-        if (offsetParentEl !== window.document) {
-            offsetParentBCR = this.offset(offsetParentEl);
-            offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
-            offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
-        }
-        const boundingClientRect = nativeEl.getBoundingClientRect();
-        return {
-            width: boundingClientRect.width || nativeEl.offsetWidth,
-            height: boundingClientRect.height || nativeEl.offsetHeight,
-            top: elBCR.top - offsetParentBCR.top,
-            left: elBCR.left - offsetParentBCR.left,
-        };
-    }
-    offset(nativeEl) {
-        const boundingClientRect = nativeEl.getBoundingClientRect();
-        return {
-            width: boundingClientRect.width || nativeEl.offsetWidth,
-            height: boundingClientRect.height || nativeEl.offsetHeight,
-            top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
-            left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft),
-        };
-    }
-    getStyle(nativeEl, cssProp) {
-        if (nativeEl.currentStyle) {
-            return nativeEl.currentStyle[cssProp];
-        }
-        if (window.getComputedStyle) {
-            return window.getComputedStyle(nativeEl)[cssProp];
-        }
-        return nativeEl.style[cssProp];
-    }
-    isStaticPositioned(nativeEl) {
-        return (this.getStyle(nativeEl, 'position') || 'static') === 'static';
-    }
-    parentOffsetEl(nativeEl) {
-        let offsetParent = nativeEl.offsetParent || window.document;
-        while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
-            offsetParent = offsetParent.offsetParent;
-        }
-        return offsetParent || window.document;
-    }
-    getEffectivePlacement(desiredPlacement, hostElement, targetElement) {
-        const hostElBoundingRect = hostElement.getBoundingClientRect();
-        if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
-            return 'bottom';
-        }
-        if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
-            return 'top';
-        }
-        if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
-            return 'right';
-        }
-        if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
-            return 'left';
-        }
-        return desiredPlacement;
-    }
-}
-PopOverContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverContent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopOverContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PopOverContent, selector: "popover-content", inputs: { content: "content", placement: "placement", title: "title", animation: "animation" }, viewQueries: [{ propertyName: "popoverDiv", first: true, predicate: ["popoverDiv"], descendants: true }], ngImport: i0, template: `
-    <div
-      #popoverDiv
-      class="popover {{ effectivePlacement }}"
-      [style.top]="top + 'px'"
-      [style.left]="left + 'px'"
-      [class.fade]="animation"
-      style="display: block"
-      role="popover"
-    >
-      <div class="arrow {{ effectiveAlignment }}"></div>
-      <div class="popover-title" [hidden]="!title">{{ title }}</div>
-      <div class="popover-content">
-        <ng-content></ng-content>
-        <div class="popover-content-text">{{ content }}</div>
-      </div>
-    </div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverContent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'popover-content',
-                    template: `
-    <div
-      #popoverDiv
-      class="popover {{ effectivePlacement }}"
-      [style.top]="top + 'px'"
-      [style.left]="left + 'px'"
-      [class.fade]="animation"
-      style="display: block"
-      role="popover"
-    >
-      <div class="arrow {{ effectiveAlignment }}"></div>
-      <div class="popover-title" [hidden]="!title">{{ title }}</div>
-      <div class="popover-content">
-        <ng-content></ng-content>
-        <div class="popover-content-text">{{ content }}</div>
-      </div>
-    </div>
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], animation: [{
-                type: Input
-            }], popoverDiv: [{
-                type: ViewChild,
-                args: ['popoverDiv']
-            }] } });
-
-// NG2
-class PopOverDirective {
-    constructor(viewContainerRef, resolver) {
-        this.viewContainerRef = viewContainerRef;
-        this.resolver = resolver;
-        this.PopoverComponent = PopOverContent;
-        this.popoverOnHover = false;
-        this.popoverDismissTimeout = 0;
-        this.onShown = new EventEmitter();
-        this.onHidden = new EventEmitter();
-    }
-    // ---------------------------------------------------
-    // Event listeners
-    // ---------------------------------------------------
-    showOrHideOnClick() {
-        if (this.popoverOnHover || this.popoverDisabled) {
-            return;
-        }
-        this.toggle();
-    }
-    showOnHover() {
-        if (!this.popoverOnHover || this.popoverDisabled) {
-            return;
-        }
-        this.show();
-    }
-    hideOnHover() {
-        if (!this.popoverOnHover || this.popoverDisabled) {
-            return;
-        }
-        this.hide();
-    }
-    ngOnChanges(changes) {
-        if (changes.popoverDisabled) {
-            if (changes.popoverDisabled.currentValue) {
-                this.hide();
-            }
-        }
-        if (changes.popoverAlways) {
-            if (changes.popoverAlways.currentValue) {
-                this.show();
-            }
-        }
-    }
-    toggle() {
-        if (!this.visible) {
-            this.show();
-        }
-        else {
-            this.hide();
-        }
-    }
-    show() {
-        if (this.visible) {
-            return;
-        }
-        this.visible = true;
-        if (typeof this.content === 'string') {
-            const factory = this.resolver.resolveComponentFactory(this.PopoverComponent);
-            if (!this.visible) {
-                return;
-            }
-            this.popover = this.viewContainerRef.createComponent(factory);
-            const popover = this.popover.instance;
-            popover.popover = this;
-            popover.content = this.content;
-            if (this.popoverPlacement !== undefined) {
-                popover.placement = this.popoverPlacement;
-            }
-            if (this.popoverAnimation !== undefined) {
-                popover.animation = this.popoverAnimation;
-            }
-            if (this.popoverTitle !== undefined) {
-                popover.title = this.popoverTitle;
-            }
-            popover.onCloseFromOutside.subscribe(() => this.hide());
-            if (this.popoverDismissTimeout > 0) {
-                setTimeout(() => this.hide(), this.popoverDismissTimeout);
-            }
-        }
-        else {
-            const popover = this.content;
-            popover.popover = this;
-            if (this.popoverPlacement !== undefined) {
-                popover.placement = this.popoverPlacement;
-            }
-            if (this.popoverAnimation !== undefined) {
-                popover.animation = this.popoverAnimation;
-            }
-            if (this.popoverTitle !== undefined) {
-                popover.title = this.popoverTitle;
-            }
-            popover.onCloseFromOutside.subscribe(() => this.hide());
-            if (this.popoverDismissTimeout > 0) {
-                setTimeout(() => this.hide(), this.popoverDismissTimeout);
-            }
-            popover.show();
-        }
-        this.onShown.emit(this);
-    }
-    hide() {
-        if (!this.visible) {
-            return;
-        }
-        this.visible = false;
-        if (this.popover) {
-            this.popover.destroy();
-        }
-        if (this.content instanceof PopOverContent) {
-            this.content.hideFromPopover();
-        }
-        this.onHidden.emit(this);
-    }
-    getElement() {
-        return this.viewContainerRef.element.nativeElement;
-    }
-}
-PopOverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-PopOverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PopOverDirective, selector: "[popover]", inputs: { content: ["popover", "content"], popoverDisabled: "popoverDisabled", popoverAlways: "popoverAlways", popoverAnimation: "popoverAnimation", popoverPlacement: "popoverPlacement", popoverTitle: "popoverTitle", popoverOnHover: "popoverOnHover", popoverDismissTimeout: "popoverDismissTimeout" }, outputs: { onShown: "onShown", onHidden: "onHidden" }, host: { listeners: { "click": "showOrHideOnClick()", "focusin": "showOnHover()", "mouseenter": "showOnHover()", "focusout": "hideOnHover()", "mouseleave": "hideOnHover()" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopOverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[popover]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { content: [{
-                type: Input,
-                args: ['popover']
-            }], popoverDisabled: [{
-                type: Input
-            }], popoverAlways: [{
-                type: Input
-            }], popoverAnimation: [{
-                type: Input
-            }], popoverPlacement: [{
-                type: Input
-            }], popoverTitle: [{
-                type: Input
-            }], popoverOnHover: [{
-                type: Input
-            }], popoverDismissTimeout: [{
-                type: Input
-            }], onShown: [{
-                type: Output
-            }], onHidden: [{
-                type: Output
-            }], showOrHideOnClick: [{
-                type: HostListener,
-                args: ['click']
-            }], showOnHover: [{
-                type: HostListener,
-                args: ['focusin']
-            }, {
-                type: HostListener,
-                args: ['mouseenter']
-            }], hideOnHover: [{
-                type: HostListener,
-                args: ['focusout']
-            }, {
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-// NG2
-class NovoPopOverModule {
-}
-NovoPopOverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NovoPopOverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, declarations: [PopOverContent, PopOverDirective], exports: [PopOverContent, PopOverDirective] });
-NovoPopOverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoPopOverModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PopOverContent, PopOverDirective],
-                    exports: [PopOverContent, PopOverDirective],
-                }]
-        }] });
-
 var ProgressAppearance;
 (function (ProgressAppearance) {
     ProgressAppearance["LINEAR"] = "linear";