@firestitch/popover 12.1.2 → 12.2.0

package/fesm2015/firestitch-popover.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewChild, HostBinding, Injectable, Optional, Input, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, HostBinding, TemplateRef, Injectable, Directive, Optional, Input, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/cdk/portal';
@@ -12,550 +12,601 @@ import { guid } from '@firestitch/common';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 
-var Position;
-(function (Position) {
-    Position["North"] = "north";
-    Position["South"] = "south";
-    Position["East"] = "east";
-    Position["West"] = "west";
+var Position;
+(function (Position) {
+    Position["North"] = "north";
+    Position["South"] = "south";
+    Position["East"] = "east";
+    Position["West"] = "west";
 })(Position || (Position = {}));
 
-class FsPopoverRef {
-    constructor(config = {}) {
-        this._autoShow$ = new BehaviorSubject(true);
-        this._autoClose$ = new BehaviorSubject(true);
-        this._componentLoading$ = new BehaviorSubject(true);
-        this._init(config);
-    }
-    get loadingDiameter() {
-        return this._loadingDiameter;
-    }
-    get size() {
-        return this._size;
-    }
-    get theme() {
-        return this._theme;
-    }
-    get loading() {
-        return this._loading;
-    }
-    get autoShow$() {
-        return this._autoShow$.asObservable();
-    }
-    get autoShow() {
-        return this._autoShow$.getValue();
-    }
-    set autoShow(value) {
-        this._autoShow$.next(value);
-    }
-    get autoClose$() {
-        return this._autoClose$.asObservable();
-    }
-    get autoClose() {
-        return this._autoClose$.getValue();
-    }
-    set autoClose(value) {
-        this._autoClose$.next(value);
-    }
-    get componentVisible$() {
-        return combineLatest([
-            this.autoShow$,
-            this.componentLoading$,
-        ]).pipe(map(([autoShow, componentLoading]) => {
-            return autoShow || !componentLoading;
-        }));
-    }
-    get componentLoading$() {
-        return this._componentLoading$.asObservable();
-    }
-    get componentLoading() {
-        return this._componentLoading$.getValue();
-    }
-    get wrapperClass() {
-        return this._wrapperClass;
-    }
-    get maxWidth() {
-        return this._maxWidth;
-    }
-    show() {
-        setTimeout(() => {
-            this._componentLoading$.next(false);
-            setTimeout(() => {
-                this.updatePosition();
-            });
-        });
-    }
-    close() {
-        this.overlayRef.detach();
-        this._componentLoading$.next(true);
-    }
-    updatePosition() {
-        this.overlayRef.updatePosition();
-    }
-    _init(config) {
-        this._wrapperClass = config.wrapperClass;
-        this._maxWidth = config.maxWidth;
-        this._loading = config.loading;
-        this._loadingDiameter = config.loadingDiameter;
-        this._size = config.size;
-        this._theme = config.theme;
-        this._autoShow$.next(config.autoShow);
-        this._autoClose$.next(config.autoClose);
-    }
+class FsPopoverRef {
+    constructor(config = {}) {
+        this._autoShow$ = new BehaviorSubject(true);
+        this._autoClose$ = new BehaviorSubject(true);
+        this._componentLoading$ = new BehaviorSubject(true);
+        this._init(config);
+    }
+    get loadingDiameter() {
+        return this._loadingDiameter;
+    }
+    get size() {
+        return this._size;
+    }
+    get theme() {
+        return this._theme;
+    }
+    get loading() {
+        return this._loading;
+    }
+    get autoShow$() {
+        return this._autoShow$.asObservable();
+    }
+    get autoShow() {
+        return this._autoShow$.getValue();
+    }
+    set autoShow(value) {
+        this._autoShow$.next(value);
+    }
+    get autoClose$() {
+        return this._autoClose$.asObservable();
+    }
+    get autoClose() {
+        return this._autoClose$.getValue();
+    }
+    set autoClose(value) {
+        this._autoClose$.next(value);
+    }
+    get componentVisible$() {
+        return combineLatest([
+            this.autoShow$,
+            this.componentLoading$,
+        ]).pipe(map(([autoShow, componentLoading]) => {
+            return autoShow || !componentLoading;
+        }));
+    }
+    get componentLoading$() {
+        return this._componentLoading$.asObservable();
+    }
+    get componentLoading() {
+        return this._componentLoading$.getValue();
+    }
+    get wrapperClass() {
+        return this._wrapperClass;
+    }
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    show() {
+        setTimeout(() => {
+            this._componentLoading$.next(false);
+            setTimeout(() => {
+                this.updatePosition();
+            });
+        });
+    }
+    close() {
+        this.overlayRef.detach();
+        this._componentLoading$.next(true);
+    }
+    updatePosition() {
+        this.overlayRef.updatePosition();
+    }
+    _init(config) {
+        this._wrapperClass = config.wrapperClass;
+        this._maxWidth = config.maxWidth;
+        this._loading = config.loading;
+        this._loadingDiameter = config.loadingDiameter;
+        this._size = config.size;
+        this._theme = config.theme;
+        this._autoShow$.next(config.autoShow);
+        this._autoClose$.next(config.autoClose);
+    }
 }
 
-class FsPopoverWrapperComponent extends BasePortalOutlet {
-    constructor(popoverRef, _el, _zone) {
-        super();
-        this.popoverRef = popoverRef;
-        this._el = _el;
-        this._zone = _zone;
-        this.hidden = false;
-        this._updatePosition = new Subject();
-        this._destroy$ = new Subject();
-        this._updateClass();
-        this.wrapperClass = this.popoverRef.wrapperClass;
-        this.maxWidth = this.popoverRef.maxWidth;
-    }
-    set maxWidth(value) {
-        this._el.nativeElement.style.maxWidth = value ? value + 'px' : void 0;
-    }
-    set wrapperClass(value) {
-        this._wrapperClass = value;
-        this._updateClass();
-    }
-    ngOnInit() {
-        if (!this.popoverRef.autoShow && this.popoverRef.componentLoading) {
-            this._watchMousePosition();
-        }
-        this._observeContentChanges();
-        this._listenUpdatePositionRequests();
-    }
-    ngOnDestroy() {
-        this._contentChangesObserver.disconnect();
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    /**
-     * Attach a TemplatePortal as content to this popover container.
-     * @param portal Portal to be attached as the popover content.
-     */
-    attachTemplatePortal(portal) {
-        if (this._portalOutlet.hasAttached()) {
-            throw Error('Popover template already attached');
-        }
-        return this._portalOutlet.attachTemplatePortal(portal);
-    }
-    /**
-     * Attach a ComponentPortal as content to this popover container.
-     * @param portal Portal to be attached as the popover content.
-     */
-    attachComponentPortal(portal) {
-        if (this._portalOutlet.hasAttached()) {
-            throw Error('Popover component already attached');
-        }
-        return this._portalOutlet.attachComponentPortal(portal);
-    }
-    updatePosition() {
-        this._updatePosition.next();
-    }
-    _watchMousePosition() {
-        const componentVisibilityChange$ = this.popoverRef.componentVisible$
-            .pipe(filter((value) => value === true));
-        this._zone.runOutsideAngular(() => {
-            fromEvent(document, 'mousemove')
-                .pipe(takeUntil(componentVisibilityChange$), takeUntil(this._destroy$))
-                .subscribe((e) => {
-                this.spinner.nativeElement.style.left = e.x + 'px';
-                this.spinner.nativeElement.style.top = (e.y + 20) + 'px';
-            });
-        });
-    }
-    _updateClass() {
-        this.class = ['popover-wrapper', this._wrapperClass].filter(Boolean).join(' ');
-    }
-    _observeContentChanges() {
-        const config = {
-            childList: true,
-            subtree: true
-        };
-        this._contentChangesObserver = new MutationObserver(() => {
-            this.updatePosition();
-        });
-        this._contentChangesObserver.observe(this._el.nativeElement, config);
-    }
-    _listenUpdatePositionRequests() {
-        this._updatePosition
-            .pipe(debounceTime(50), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.popoverRef.updatePosition();
-        });
-    }
-}
-FsPopoverWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, deps: [{ token: FsPopoverRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FsPopoverWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverWrapperComponent, selector: "fs-popover-wrapper", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "spinner", first: true, predicate: ["spinner"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [ngClass]=\"{\n  'theme-dark' : popoverRef.theme === 'dark',\n  'size-tiny': popoverRef.size === 'tiny',\n  'size-small': popoverRef.size === 'small',\n  'hidden': !(popoverRef.componentVisible$ | async)\n  }\">\n  <div class=\"mat-elevation-z4 popover-content\">\n    <ng-template cdkPortalOutlet></ng-template>\n  </div>\n\n  <div class=\"fs-popover-arrow light\"></div>\n  <div class=\"fs-popover-arrow dark\"></div>\n</div>\n\n<div class=\"loading-spinner\"\n    #spinner\n    *ngIf=\"popoverRef.loading && !(popoverRef.componentVisible$ | async)\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"popoverRef.loadingDiameter\" [attr.height]=\"popoverRef.loadingDiameter\" viewBox=\"0 0 42 42\" stroke=\"grey\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <g transform=\"translate(1 1)\" stroke-width=\"3\">\n        <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n          <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"1s\" repeatCount=\"indefinite\"/>\n        </path>\n      </g>\n    </g>\n  </svg>\n</div>\n", styles: [".wrapper{padding:6px;animation:fadeIn ease .2s}.wrapper.hidden{display:none}.wrapper .popover-content{background:#fff;border-radius:4px;padding:8px;color:#1b1b1b;box-sizing:border-box;overflow:hidden}.wrapper.theme-dark .popover-content{background-color:#707070;color:#fff}.wrapper.size-small .popover-content{font-size:80%}.wrapper.size-tiny .popover-content{font-size:70%}.wrapper .fs-popover-arrow{width:0;height:0;font-size:0;line-height:0;position:absolute;z-index:200;z-index:1}.wrapper .fs-popover-arrow.dark{z-index:0}::ng-deep .fs-popover-top .fs-popover-arrow,::ng-deep .fs-popover-bottom .fs-popover-arrow{border-left:10px solid transparent;border-right:10px solid transparent}::ng-deep .fs-popover-left .fs-popover-arrow,::ng-deep .fs-popover-right .fs-popover-arrow{border-top:10px solid transparent;border-bottom:10px solid transparent}::ng-deep .fs-popover-top .fs-popover-arrow{bottom:-3px;left:calc(50% - 10px);border-top:10px solid #fff}::ng-deep .fs-popover-top .fs-popover-arrow.dark{border-top-color:#dfdfdf40;bottom:-4px}::ng-deep .fs-popover-bottom .fs-popover-arrow{top:-3px;left:calc(50% - 10px);border-bottom:10px solid #fff}::ng-deep .fs-popover-bottom .fs-popover-arrow.dark{border-bottom-color:#dfdfdf40;top:-4px}::ng-deep .fs-popover-left .fs-popover-arrow{left:-3px;top:calc(50% - 10px);border-right:10px solid #fff}::ng-deep .fs-popover-left .fs-popover-arrow.dark{border-right-color:#dfdfdf40;left:-4px}::ng-deep .fs-popover-right .fs-popover-arrow{right:-3px;top:calc(50% - 10px);border-left:10px solid #fff}::ng-deep .fs-popover-right .fs-popover-arrow.dark{border-left-color:#dfdfdf40;right:-4px}::ng-deep .fs-popover-bottom .wrapper.theme-dark .fs-popover-arrow{border-bottom-color:#707070}::ng-deep .fs-popover-left .wrapper.theme-dark .fs-popover-arrow{border-right-color:#707070}::ng-deep .fs-popover-right .wrapper.theme-dark .fs-popover-arrow{border-left-color:#707070}::ng-deep .fs-popover-top .wrapper.theme-dark .fs-popover-arrow{border-top-color:#707070}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-popover-wrapper',
-                    templateUrl: 'popover-wrapper.component.html',
-                    styleUrls: ['popover-wrapper.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: FsPopoverRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { _portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
-            }], spinner: [{
-                type: ViewChild,
-                args: ['spinner']
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
+class FsPopoverWrapperComponent extends BasePortalOutlet {
+    constructor(popoverRef, _el, _zone) {
+        super();
+        this.popoverRef = popoverRef;
+        this._el = _el;
+        this._zone = _zone;
+        this.hidden = false;
+        this._updatePosition = new Subject();
+        this._destroy$ = new Subject();
+        this._updateClass();
+        this.wrapperClass = this.popoverRef.wrapperClass;
+        this.maxWidth = this.popoverRef.maxWidth;
+    }
+    set maxWidth(value) {
+        this._el.nativeElement.style.maxWidth = value ? value + 'px' : void 0;
+    }
+    set wrapperClass(value) {
+        this._wrapperClass = value;
+        this._updateClass();
+    }
+    ngOnInit() {
+        if (!this.popoverRef.autoShow && this.popoverRef.componentLoading) {
+            this._watchMousePosition();
+        }
+        this._observeContentChanges();
+        this._listenUpdatePositionRequests();
+    }
+    ngOnDestroy() {
+        this._contentChangesObserver.disconnect();
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    /**
+     * Attach a TemplatePortal as content to this popover container.
+     * @param portal Portal to be attached as the popover content.
+     */
+    attachTemplatePortal(portal) {
+        if (this._portalOutlet.hasAttached()) {
+            throw Error('Popover template already attached');
+        }
+        return this._portalOutlet.attachTemplatePortal(portal);
+    }
+    /**
+     * Attach a ComponentPortal as content to this popover container.
+     * @param portal Portal to be attached as the popover content.
+     */
+    attachComponentPortal(portal) {
+        if (this._portalOutlet.hasAttached()) {
+            throw Error('Popover component already attached');
+        }
+        return this._portalOutlet.attachComponentPortal(portal);
+    }
+    setTextualContent(content) {
+        this.content = content;
+    }
+    updatePosition() {
+        this._updatePosition.next();
+    }
+    _watchMousePosition() {
+        const componentVisibilityChange$ = this.popoverRef.componentVisible$
+            .pipe(filter((value) => value === true));
+        this._zone.runOutsideAngular(() => {
+            fromEvent(document, 'mousemove')
+                .pipe(takeUntil(componentVisibilityChange$), takeUntil(this._destroy$))
+                .subscribe((e) => {
+                this.spinner.nativeElement.style.left = e.x + 'px';
+                this.spinner.nativeElement.style.top = (e.y + 20) + 'px';
+            });
+        });
+    }
+    _updateClass() {
+        this.class = ['popover-wrapper', this._wrapperClass].filter(Boolean).join(' ');
+    }
+    _observeContentChanges() {
+        const config = {
+            childList: true,
+            subtree: true
+        };
+        this._contentChangesObserver = new MutationObserver(() => {
+            this.updatePosition();
+        });
+        this._contentChangesObserver.observe(this._el.nativeElement, config);
+    }
+    _listenUpdatePositionRequests() {
+        this._updatePosition
+            .pipe(debounceTime(50), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.popoverRef.updatePosition();
+        });
+    }
+}
+FsPopoverWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, deps: [{ token: FsPopoverRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+FsPopoverWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverWrapperComponent, selector: "fs-popover-wrapper", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "spinner", first: true, predicate: ["spinner"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [ngClass]=\"{\n  'theme-dark' : popoverRef.theme === 'dark',\n  'size-tiny': popoverRef.size === 'tiny',\n  'size-small': popoverRef.size === 'small',\n  'hidden': !(popoverRef.componentVisible$ | async)\n  }\">\n  <div class=\"mat-elevation-z4 popover-content\">\n    <ng-container *ngIf=\"content\">\n      {{content}}\n    </ng-container>\n\n    <ng-template cdkPortalOutlet></ng-template>\n  </div>\n\n  <div class=\"fs-popover-arrow light\"></div>\n  <div class=\"fs-popover-arrow dark\"></div>\n</div>\n\n<div class=\"loading-spinner\"\n    #spinner\n    *ngIf=\"popoverRef.loading && !(popoverRef.componentVisible$ | async)\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"popoverRef.loadingDiameter\" [attr.height]=\"popoverRef.loadingDiameter\" viewBox=\"0 0 42 42\" stroke=\"grey\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <g transform=\"translate(1 1)\" stroke-width=\"3\">\n        <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n          <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"1s\" repeatCount=\"indefinite\"/>\n        </path>\n      </g>\n    </g>\n  </svg>\n</div>\n", styles: [".wrapper{padding:6px;animation:fadeIn ease .2s}.wrapper.hidden{display:none}.wrapper .popover-content{background:#fff;border-radius:4px;padding:8px;color:#1b1b1b;box-sizing:border-box;overflow:hidden}.wrapper.theme-dark .popover-content{background-color:#707070;color:#fff}.wrapper.size-small .popover-content{font-size:80%}.wrapper.size-tiny .popover-content{font-size:70%}.wrapper .fs-popover-arrow{width:0;height:0;font-size:0;line-height:0;position:absolute;z-index:200;z-index:1}.wrapper .fs-popover-arrow.dark{z-index:0}::ng-deep .fs-popover-top .fs-popover-arrow,::ng-deep .fs-popover-bottom .fs-popover-arrow{border-left:10px solid transparent;border-right:10px solid transparent}::ng-deep .fs-popover-left .fs-popover-arrow,::ng-deep .fs-popover-right .fs-popover-arrow{border-top:10px solid transparent;border-bottom:10px solid transparent}::ng-deep .fs-popover-top .fs-popover-arrow{bottom:-3px;left:calc(50% - 10px);border-top:10px solid #fff}::ng-deep .fs-popover-top .fs-popover-arrow.dark{border-top-color:#dfdfdf40;bottom:-4px}::ng-deep .fs-popover-bottom .fs-popover-arrow{top:-3px;left:calc(50% - 10px);border-bottom:10px solid #fff}::ng-deep .fs-popover-bottom .fs-popover-arrow.dark{border-bottom-color:#dfdfdf40;top:-4px}::ng-deep .fs-popover-left .fs-popover-arrow{left:-3px;top:calc(50% - 10px);border-right:10px solid #fff}::ng-deep .fs-popover-left .fs-popover-arrow.dark{border-right-color:#dfdfdf40;left:-4px}::ng-deep .fs-popover-right .fs-popover-arrow{right:-3px;top:calc(50% - 10px);border-left:10px solid #fff}::ng-deep .fs-popover-right .fs-popover-arrow.dark{border-left-color:#dfdfdf40;right:-4px}::ng-deep .fs-popover-bottom .wrapper.theme-dark .fs-popover-arrow{border-bottom-color:#707070}::ng-deep .fs-popover-left .wrapper.theme-dark .fs-popover-arrow{border-right-color:#707070}::ng-deep .fs-popover-right .wrapper.theme-dark .fs-popover-arrow{border-left-color:#707070}::ng-deep .fs-popover-top .wrapper.theme-dark .fs-popover-arrow{border-top-color:#707070}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-popover-wrapper',
+                    templateUrl: 'popover-wrapper.component.html',
+                    styleUrls: ['popover-wrapper.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: FsPopoverRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { _portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], spinner: [{
+                type: ViewChild,
+                args: ['spinner']
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-function createPopupPositionStrategy(el, overlay, position) {
-    let overlayX = 'center';
-    let overlayY = 'center';
-    let originX = 'center';
-    let originY = 'center';
-    let offsetX = 0;
-    let offsetY = 0;
-    let panelClass = [];
-    switch (position) {
-        case Position.North:
-            originY = 'top';
-            overlayY = 'bottom';
-            panelClass = ['fs-popover-top'];
-            offsetY = -8;
-            break;
-        case Position.South:
-            originY = 'bottom';
-            overlayY = 'top';
-            panelClass = ['fs-popover-bottom'];
-            offsetY = 8;
-            break;
-        case Position.East:
-            overlayX = 'start';
-            originX = 'end';
-            panelClass = ['fs-popover-left'];
-            offsetX = 8;
-            break;
-        case Position.West:
-            overlayX = 'end';
-            originX = 'start';
-            panelClass = ['fs-popover-right'];
-            offsetX = -8;
-            break;
-    }
-    return createBasePopupPositionStrategy(el, overlay)
-        .withPositions([
-        {
-            originX: originX,
-            originY: originY,
-            overlayX: overlayX,
-            overlayY: overlayY,
-            offsetX: offsetX,
-            offsetY: offsetY,
-            panelClass: panelClass,
-        }
-    ]);
-}
-function createBasePopupPositionStrategy(el, overlay) {
-    return overlay.position()
-        .flexibleConnectedTo(el)
-        .withGrowAfterOpen(true)
-        .withFlexibleDimensions(false)
-        .withViewportMargin(4);
+function createPopupPositionStrategy(el, overlay, position) {
+    let overlayX = 'center';
+    let overlayY = 'center';
+    let originX = 'center';
+    let originY = 'center';
+    let offsetX = 0;
+    let offsetY = 0;
+    let panelClass = [];
+    switch (position) {
+        case Position.North:
+            originY = 'top';
+            overlayY = 'bottom';
+            panelClass = ['fs-popover-top'];
+            offsetY = -8;
+            break;
+        case Position.South:
+            originY = 'bottom';
+            overlayY = 'top';
+            panelClass = ['fs-popover-bottom'];
+            offsetY = 8;
+            break;
+        case Position.East:
+            overlayX = 'start';
+            originX = 'end';
+            panelClass = ['fs-popover-left'];
+            offsetX = 8;
+            break;
+        case Position.West:
+            overlayX = 'end';
+            originX = 'start';
+            panelClass = ['fs-popover-right'];
+            offsetX = -8;
+            break;
+    }
+    return createBasePopupPositionStrategy(el, overlay)
+        .withPositions([
+        {
+            originX: originX,
+            originY: originY,
+            overlayX: overlayX,
+            overlayY: overlayY,
+            offsetX: offsetX,
+            offsetY: offsetY,
+            panelClass: panelClass,
+        }
+    ]);
+}
+function createBasePopupPositionStrategy(el, overlay) {
+    return overlay.position()
+        .flexibleConnectedTo(el)
+        .withGrowAfterOpen(true)
+        .withFlexibleDimensions(false)
+        .withViewportMargin(4);
 }
 
-function createOverlayRef(el, overlay, position) {
-    const config = {
-        positionStrategy: createPopupPositionStrategy(el, overlay, position),
-        scrollStrategy: overlay.scrollStrategies.reposition(),
-        hasBackdrop: false
-    };
-    const overlayConfig = new OverlayConfig(config);
-    return overlay.create(overlayConfig);
+function createOverlayRef(el, overlay, position) {
+    const config = {
+        positionStrategy: createPopupPositionStrategy(el, overlay, position),
+        scrollStrategy: overlay.scrollStrategies.reposition(),
+        hasBackdrop: false
+    };
+    const overlayConfig = new OverlayConfig(config);
+    return overlay.create(overlayConfig);
 }
 
-function createInjector(popoverRef, parentInjector) {
-    const injectionTokens = new WeakMap([
-        [FsPopoverRef, popoverRef],
-    ]);
-    return new PortalInjector(parentInjector, injectionTokens);
+function createInjector(popoverRef, parentInjector) {
+    const injectionTokens = new WeakMap([
+        [FsPopoverRef, popoverRef],
+    ]);
+    return new PortalInjector(parentInjector, injectionTokens);
 }
 
-function createTempatePortal(template, popoverRef, data) {
-    return new TemplatePortal(template, void 0, { data: data, popover: popoverRef });
+function createTempatePortal(template, popoverRef, data) {
+    return new TemplatePortal(template, void 0, { data: data, popover: popoverRef });
 }
 
-class FsPopoverService {
-    constructor(_injector, _overlay) {
-        this._injector = _injector;
-        this._overlay = _overlay;
-    }
-    get hasActivePopover() {
-        return !!this._activeElement;
-    }
-    get activeElementGUID() {
-        return this._activeElementGUID;
-    }
-    setActivePopoverGUID(value) {
-        this._activeElementGUID = value;
-    }
-    openPopover(el, template, data, popoverRef, position) {
-        if (this._activeElement) {
-            this.close(this._activeElement.popoverRef);
-        }
-        const overlayRef = createOverlayRef(el, this._overlay, position);
-        const containerRef = this._openPortalPreview(FsPopoverWrapperComponent, overlayRef, popoverRef);
-        const templatePortal = createTempatePortal(template, popoverRef, data);
-        containerRef.instance.attachTemplatePortal(templatePortal);
-        popoverRef.overlayRef = overlayRef;
-        this._activeElement = {
-            overlayRef,
-            popoverRef,
-        };
-        return containerRef.location.nativeElement;
-    }
-    close(popoverRef = null) {
-        if (this._activeElement.popoverRef === popoverRef) {
-            popoverRef.close();
-            this._activeElement = void 0;
-            this._activeElementGUID = void 0;
-        }
-    }
-    _openPortalPreview(component, overlayRef, popoverRef) {
-        const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
-        return overlayRef.attach(containerPortal);
-    }
-}
-FsPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, deps: [{ token: i0.Injector }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-FsPopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class FsPopoverService {
+    constructor(_injector, _overlay) {
+        this._injector = _injector;
+        this._overlay = _overlay;
+    }
+    get hasActivePopover() {
+        return !!this._activeElement;
+    }
+    get activeElementGUID() {
+        return this._activeElementGUID;
+    }
+    setActivePopoverGUID(value) {
+        this._activeElementGUID = value;
+    }
+    openPopover(el, content, data, popoverRef, position) {
+        if (this._activeElement) {
+            this.close(this._activeElement.popoverRef);
+        }
+        const overlayRef = createOverlayRef(el, this._overlay, position);
+        const containerRef = this._openPortalPreview(FsPopoverWrapperComponent, overlayRef, popoverRef);
+        if (content instanceof TemplateRef) {
+            const templatePortal = createTempatePortal(content, popoverRef, data);
+            containerRef.instance.attachTemplatePortal(templatePortal);
+        }
+        else {
+            containerRef.instance.setTextualContent(content);
+        }
+        popoverRef.overlayRef = overlayRef;
+        this._activeElement = {
+            overlayRef,
+            popoverRef,
+        };
+        return containerRef.location.nativeElement;
+    }
+    close(popoverRef = null) {
+        if (this._activeElement.popoverRef === popoverRef) {
+            popoverRef.close();
+            this._activeElement = void 0;
+            this._activeElementGUID = void 0;
+        }
+    }
+    _openPortalPreview(component, overlayRef, popoverRef) {
+        const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
+        return overlayRef.attach(containerPortal);
+    }
+}
+FsPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, deps: [{ token: i0.Injector }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+FsPopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Overlay }]; } });
 
-function pointInRect(x1, y1, x2, y2, px, py) {
-    return (px > x1 && px < x2) && (py > y1 && py < y2);
+function pointInRect(x1, y1, x2, y2, px, py) {
+    return (px > x1 && px < x2) && (py > y1 && py < y2);
 }
 
-class FsPopoverComponent {
-    constructor(_elRef, _popoverService, _ngZone, _router) {
-        this._elRef = _elRef;
-        this._popoverService = _popoverService;
-        this._ngZone = _ngZone;
-        this._router = _router;
-        this._guid = guid('xxxxxxx');
-        this.leaveDelay = 100;
-        this.showDelay = 0;
-        this.maxWidth = 250;
-        this.autoShow = true;
-        this.autoClose = true;
-        this.loadingDiameter = 20;
-        this.loading = true;
-        this.indication = true;
-        this.position = Position.South;
-        this.theme = 'light';
-        this.size = 'normal';
-        this.trigger = 'mouseover';
-        this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
-        this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
-        this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
-        this._popoverClosed$ = new Subject();
-        this._destroy$ = new Subject();
-    }
-    get openTimer$() {
-        return timer(this.showDelay);
-    }
-    get closeTimer$() {
-        return timer(this.leaveDelay);
-    }
-    ngOnInit() {
-        this._popoverRef = new FsPopoverRef({
-            maxWidth: this.maxWidth,
-            wrapperClass: this.wrapperClass,
-            autoShow: this.autoShow,
-            autoClose: this.autoClose,
-            loadingDiameter: this.loadingDiameter,
-            loading: this.loading,
-            size: this.size,
-            theme: this.theme,
-        });
-        this._ngZone.runOutsideAngular(() => {
-            if (this.trigger === 'click') {
-                this._listenMouseHostClick();
-            }
-            else {
-                this._listenMouseHostEnter();
-            }
-        });
-        this._listenRouteChange();
-    }
-    ngOnDestroy() {
-        this._popoverClosed$.next();
-        this._destroy$.next();
-    }
-    _closePopover() {
-        this._popoverClosed$.next();
-        this._ngZone.run(() => {
-            this._wrapperElement = null;
-            if (this._popoverService.hasActivePopover) {
-                this._popoverService.close(this._popoverRef);
-            }
-        });
-    }
-    _listenRouteChange() {
-        this._router.events
-            .pipe(filter((event) => {
-            return event instanceof NavigationEnd;
-        }), pipe(takeUntil(this._destroy$
-            .pipe(delay(200)))))
-            .subscribe(() => {
-            this._closePopover();
-        });
-    }
-    _listenMouseHostClick() {
-        fromEvent(this._elRef.nativeElement, 'click', { passive: true })
-            .pipe(tap((e) => {
-            e.stopPropagation();
-            this._openPopover();
-        }), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._closePopover();
-        });
-    }
-    _listenMouseHostEnter() {
-        const actualMouseState$ = merge(this._mouseLeave$.pipe(mapTo(true)), this._mouseEnter$.pipe(mapTo(false)))
-            .pipe(startWith(false), distinctUntilChanged());
-        this._mouseEnter$
-            .pipe(filter(() => {
-            return !this._wrapperElement;
-        }), tap(() => {
-            this._popoverService.setActivePopoverGUID(this._guid);
-        }), switchMap(() => this.openTimer$), 
-        // we have to check that after all delays mouse still over an elemen
-        withLatestFrom(actualMouseState$), filter(([_, mouseLeave]) => {
-            return !mouseLeave;
-        }), tap(() => this._openPopover()), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), tap(() => this._closePopover()), finalize(() => this._closePopover()), takeUntil(this._destroy$))
-            .subscribe();
-    }
-    _openPopover() {
-        if (this.trigger === 'mouseover' && this._popoverService.activeElementGUID !== this._guid) {
-            return;
-        }
-        this._hostBounds = this._elRef.nativeElement.getBoundingClientRect();
-        this._ngZone.run(() => {
-            this._wrapperElement = this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position);
-        });
-    }
-    _listenMouseHostLeave$() {
-        const mouseMove$ = this._mouseMove$
-            .pipe(debounceTime(50), filter(() => !!this._wrapperElement), filter((event) => {
-            return this._popoverRef.autoClose && this._mouseLeftTheTargets(event);
-        }));
-        const mouseClick$ = fromEvent(this._elRef.nativeElement, 'click');
-        return merge(mouseMove$, mouseClick$);
-        //
-        // return this._mouseLeave$
-        //   .pipe(
-        //     //
-        //     timeoutWith(200, mouseMove$),
-        //   );
-    }
-    // Check if mouse left target or popover rects
-    _mouseLeftTheTargets(event) {
-        const hostBounds = this._hostBounds;
-        const popoverBounds = this._wrapperElement.getBoundingClientRect();
-        const pointInHostRect = pointInRect(hostBounds.x, hostBounds.y, hostBounds.x + hostBounds.width, hostBounds.y + hostBounds.height, event.x, event.y);
-        const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
-        return !pointInHostRect && !pointInPopoverRect;
-    }
-}
-FsPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, deps: [{ token: i0.ElementRef }, { token: FsPopoverService }, { token: i0.NgZone }, { token: i2$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FsPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverComponent, selector: "fs-popover", inputs: { template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", wrapperClass: "wrapperClass", autoShow: "autoShow", autoClose: "autoClose", loadingDiameter: "loadingDiameter", loading: "loading", indication: "indication", position: "position", theme: "theme", size: "size", trigger: "trigger" }, host: { properties: { "class.indication": "this.indication" } }, ngImport: i0, template: "<span class=\"popover-container\"><ng-content></ng-content></span>\n", styles: [":host{display:inline-flex;cursor:pointer;position:relative}::ng-deep fs-popover.indication .popover-container{text-decoration:underline;-webkit-text-decoration-style:dashed;text-decoration-style:dashed;-webkit-text-decoration-color:#ccc;text-decoration-color:#ccc;text-underline-offset:3px;text-decoration-thickness:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-popover',
-                    templateUrl: 'popover.component.html',
-                    styleUrls: ['popover.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FsPopoverService }, { type: i0.NgZone }, { type: i2$1.Router, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { template: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], leaveDelay: [{
-                type: Input
-            }], showDelay: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], wrapperClass: [{
-                type: Input
-            }], autoShow: [{
-                type: Input
-            }], autoClose: [{
-                type: Input
-            }], loadingDiameter: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], indication: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.indication']
-            }], position: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], trigger: [{
-                type: Input
+class FsPopoverDirective {
+    constructor(_elRef, _popoverService, _ngZone, _router) {
+        this._elRef = _elRef;
+        this._popoverService = _popoverService;
+        this._ngZone = _ngZone;
+        this._router = _router;
+        this._guid = guid('xxxxxxx');
+        this.leaveDelay = 100;
+        this.showDelay = 0;
+        this.maxWidth = 250;
+        this.autoShow = true;
+        this.autoClose = true;
+        this.loadingDiameter = 20;
+        this.loading = true;
+        this.indication = true;
+        this.position = Position.South;
+        this.theme = 'light';
+        this.size = 'normal';
+        this.trigger = 'mouseover';
+        this.enabled = true;
+        this._initialized = false;
+        this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
+        this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
+        this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
+        this._popoverClosed$ = new Subject();
+        this._destroy$ = new Subject();
+    }
+    get openTimer$() {
+        return timer(this.showDelay);
+    }
+    get closeTimer$() {
+        return timer(this.leaveDelay);
+    }
+    ngOnInit() {
+        if (this.enabled) {
+            this._initialize();
+        }
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (((_a = changes.enabled) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes.enabled) === null || _b === void 0 ? void 0 : _b.previousValue)) {
+            if (this.enabled && !this._initialized) {
+                this._initialize();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._popoverClosed$.next();
+        this._destroy$.next();
+    }
+    _closePopover() {
+        this._popoverClosed$.next();
+        this._ngZone.run(() => {
+            this._wrapperElement = null;
+            if (this._popoverService.hasActivePopover) {
+                this._popoverService.close(this._popoverRef);
+            }
+        });
+    }
+    _initialize() {
+        if (this._initialized) {
+            return;
+        }
+        this._popoverRef = new FsPopoverRef({
+            maxWidth: this.maxWidth,
+            wrapperClass: this.wrapperClass,
+            autoShow: this.autoShow,
+            autoClose: this.autoClose,
+            loadingDiameter: this.loadingDiameter,
+            loading: this.loading,
+            size: this.size,
+            theme: this.theme,
+        });
+        this._ngZone.runOutsideAngular(() => {
+            if (this.trigger === 'click') {
+                this._listenMouseHostClick();
+            }
+            else {
+                this._listenMouseHostEnter();
+            }
+        });
+        this._listenRouteChange();
+        this._initialized = true;
+    }
+    _listenRouteChange() {
+        this._router.events
+            .pipe(filter((event) => {
+            return event instanceof NavigationEnd;
+        }), pipe(takeUntil(this._destroy$
+            .pipe(delay(200)))))
+            .subscribe(() => {
+            this._closePopover();
+        });
+    }
+    _listenMouseHostClick() {
+        fromEvent(this._elRef.nativeElement, 'click', { passive: true })
+            .pipe(filter(() => this.enabled), tap((e) => {
+            e.stopPropagation();
+            this._openPopover();
+        }), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._closePopover();
+        });
+    }
+    _listenMouseHostEnter() {
+        const actualMouseState$ = merge(this._mouseLeave$.pipe(mapTo(true)), this._mouseEnter$.pipe(mapTo(false)))
+            .pipe(startWith(false), distinctUntilChanged());
+        this._mouseEnter$
+            .pipe(filter(() => this.enabled), filter(() => {
+            return !this._wrapperElement;
+        }), tap(() => {
+            this._popoverService.setActivePopoverGUID(this._guid);
+        }), switchMap(() => this.openTimer$), 
+        // we have to check that after all delays mouse still over an elemen
+        withLatestFrom(actualMouseState$), filter(([_, mouseLeave]) => {
+            return !mouseLeave;
+        }), tap(() => this._openPopover()), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), tap(() => this._closePopover()), finalize(() => this._closePopover()), takeUntil(this._destroy$))
+            .subscribe();
+    }
+    _openPopover() {
+        if (this.trigger === 'mouseover' && this._popoverService.activeElementGUID !== this._guid) {
+            return;
+        }
+        this._hostBounds = this._elRef.nativeElement.getBoundingClientRect();
+        this._ngZone.run(() => {
+            if (this.template) {
+                this._wrapperElement = this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position);
+            }
+            else {
+                this._wrapperElement = this._popoverService.openPopover(this._elRef, this.text, this.data, this._popoverRef, this.position);
+            }
+        });
+    }
+    _listenMouseHostLeave$() {
+        const mouseMove$ = this._mouseMove$
+            .pipe(debounceTime(50), filter(() => !!this._wrapperElement), filter((event) => {
+            return this._popoverRef.autoClose && this._mouseLeftTheTargets(event);
+        }));
+        const mouseClick$ = fromEvent(this._elRef.nativeElement, 'click');
+        return merge(mouseMove$, mouseClick$);
+        //
+        // return this._mouseLeave$
+        //   .pipe(
+        //     //
+        //     timeoutWith(200, mouseMove$),
+        //   );
+    }
+    // Check if mouse left target or popover rects
+    _mouseLeftTheTargets(event) {
+        const hostBounds = this._hostBounds;
+        const popoverBounds = this._wrapperElement.getBoundingClientRect();
+        const pointInHostRect = pointInRect(hostBounds.x, hostBounds.y, hostBounds.x + hostBounds.width, hostBounds.y + hostBounds.height, event.x, event.y);
+        const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
+        return !pointInHostRect && !pointInPopoverRect;
+    }
+}
+FsPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverDirective, deps: [{ token: i0.ElementRef }, { token: FsPopoverService }, { token: i0.NgZone }, { token: i2$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FsPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverDirective, selector: "[fsPopover]", inputs: { text: "text", template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", wrapperClass: "wrapperClass", autoShow: "autoShow", autoClose: "autoClose", loadingDiameter: "loadingDiameter", loading: "loading", indication: "indication", position: "position", theme: "theme", size: "size", trigger: "trigger", enabled: "enabled" }, host: { properties: { "class.indication": "this.indication" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsPopover]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FsPopoverService }, { type: i0.NgZone }, { type: i2$1.Router, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { text: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], leaveDelay: [{
+                type: Input
+            }], showDelay: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], wrapperClass: [{
+                type: Input
+            }], autoShow: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], loadingDiameter: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], indication: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.indication']
+            }], position: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], trigger: [{
+                type: Input
+            }], enabled: [{
+                type: Input
             }] } });
 
-class FsPopoverModule {
-}
-FsPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, declarations: [FsPopoverComponent,
-        FsPopoverWrapperComponent], imports: [CommonModule,
-        PortalModule], exports: [FsPopoverComponent] });
-FsPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, imports: [[
-            CommonModule,
-            PortalModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        PortalModule,
-                    ],
-                    declarations: [
-                        FsPopoverComponent,
-                        FsPopoverWrapperComponent,
-                    ],
-                    exports: [
-                        FsPopoverComponent,
-                    ],
-                }]
+class FsPopoverComponent extends FsPopoverDirective {
+}
+FsPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FsPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPopoverComponent, selector: "fs-popover", usesInheritance: true, ngImport: i0, template: "<span class=\"popover-container\"><ng-content></ng-content></span>\n", styles: [":host{display:inline-flex;cursor:pointer;position:relative}::ng-deep fs-popover.indication .popover-container{text-decoration:underline;-webkit-text-decoration-style:dashed;text-decoration-style:dashed;-webkit-text-decoration-color:#ccc;text-decoration-color:#ccc;text-underline-offset:3px;text-decoration-thickness:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-popover',
+                    templateUrl: 'popover.component.html',
+                    styleUrls: ['popover.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class FsPopoverModule {
+}
+FsPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, declarations: [FsPopoverComponent,
+        FsPopoverWrapperComponent,
+        FsPopoverDirective], imports: [CommonModule,
+        PortalModule], exports: [FsPopoverComponent,
+        FsPopoverDirective] });
+FsPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, imports: [[
+            CommonModule,
+            PortalModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PortalModule,
+                    ],
+                    declarations: [
+                        FsPopoverComponent,
+                        FsPopoverWrapperComponent,
+                        FsPopoverDirective,
+                    ],
+                    exports: [
+                        FsPopoverComponent,
+                        FsPopoverDirective,
+                    ],
+                }]
         }] });
 
-/*
- * Public API Surface of fs-menu
+/*
+ * Public API Surface of fs-menu
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { FsPopoverComponent, FsPopoverModule, FsPopoverRef, Position };
+export { FsPopoverComponent, FsPopoverDirective, FsPopoverModule, FsPopoverRef, Position };
 //# sourceMappingURL=firestitch-popover.js.map