@firestitch/popover 18.0.1 → 18.0.2

package/fesm2022/firestitch-popover.mjs

@@ -1,16 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewChild, Injector, TemplateRef, Injectable, Directive, Optional, Input, HostBinding, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import * as i2$1 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
+import { inject, ElementRef, NgZone, Renderer2, Component, ChangeDetectionStrategy, ViewChild, Injector, TemplateRef, Injectable, Directive, Input, HostBinding, NgModule } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
 import { guid } from '@firestitch/common';
 import { BehaviorSubject, combineLatest, Subject, fromEvent, timer, pipe, merge } from 'rxjs';
 import { map, filter, takeUntil, debounceTime, delay, tap, switchMap, mapTo, startWith, distinctUntilChanged, withLatestFrom, finalize } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig } from '@angular/cdk/overlay';
+import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { NgClass, AsyncPipe } from '@angular/common';
 
 class FsPopoverRef {
     overlayRef;
@@ -18,6 +14,7 @@ class FsPopoverRef {
     _autoClose$ = new BehaviorSubject(true);
     _componentLoading$ = new BehaviorSubject(true);
     _maxWidth;
+    _maxHeight;
     _wrapperClass;
     _loadingDiameter;
     _loading;
@@ -76,6 +73,9 @@ class FsPopoverRef {
     get maxWidth() {
         return this._maxWidth;
     }
+    get maxHeight() {
+        return this._maxHeight;
+    }
     show() {
         setTimeout(() => {
             this._componentLoading$.next(false);
@@ -94,6 +94,7 @@ class FsPopoverRef {
     _init(config) {
         this._wrapperClass = config.wrapperClass;
         this._maxWidth = config.maxWidth;
+        this._maxHeight = config.maxHeight;
         this._loading = config.loading;
         this._loadingDiameter = config.loadingDiameter;
         this._size = config.size;
@@ -116,10 +117,10 @@ function pointInRect(x1, y1, x2, y2, px, py) {
 }
 
 class FsPopoverWrapperComponent extends BasePortalOutlet {
-    popoverRef;
-    _el;
-    _zone;
-    _renderer;
+    popoverRef = inject(FsPopoverRef);
+    _el = inject(ElementRef);
+    _zone = inject(NgZone);
+    _renderer = inject(Renderer2);
     _portalOutlet;
     spinner;
     content;
@@ -127,19 +128,19 @@ class FsPopoverWrapperComponent extends BasePortalOutlet {
     _contentChangesObserver;
     _updatePosition = new Subject();
     _destroy$ = new Subject();
-    constructor(popoverRef, _el, _zone, _renderer) {
+    constructor() {
         super();
-        this.popoverRef = popoverRef;
-        this._el = _el;
-        this._zone = _zone;
-        this._renderer = _renderer;
         this._updateClass();
         this.wrapperClass = this.popoverRef.wrapperClass;
         this.maxWidth = this.popoverRef.maxWidth;
+        this.maxHeight = this.popoverRef.maxHeight;
     }
     set maxWidth(value) {
         this._el.nativeElement.style.maxWidth = value ? `${value}px` : void 0;
     }
+    set maxHeight(value) {
+        this._el.nativeElement.style.setProperty('--fs-popover-max-height', value ? `${value}px` : null);
+    }
     set wrapperClass(value) {
         this._wrapperClass = value;
         this._updateClass();
@@ -216,15 +217,19 @@ class FsPopoverWrapperComponent extends BasePortalOutlet {
             this.popoverRef.updatePosition();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverWrapperComponent, deps: [{ token: FsPopoverRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsPopoverWrapperComponent, selector: "fs-popover-wrapper", host: { classAttribute: "fs-popover-wrapper" }, 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsPopoverWrapperComponent, isStandalone: true, selector: "fs-popover-wrapper", host: { classAttribute: "fs-popover-wrapper" }, 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    @if (content) {\n      {{content}}\n    }\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@if (popoverRef.loading && !(popoverRef.componentVisible$ | async)) {\n  <div class=\"loading-spinner\"\n    #spinner\n    >\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}\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:auto;max-height:var(--fs-popover-max-height, calc(100vh - 100px) )}.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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-popover-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'fs-popover-wrapper',
-                    }, 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"] }]
-        }], ctorParameters: () => [{ type: FsPopoverRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { _portalOutlet: [{
+                    }, standalone: true, imports: [
+                        NgClass,
+                        CdkPortalOutlet,
+                        AsyncPipe,
+                    ], 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    @if (content) {\n      {{content}}\n    }\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@if (popoverRef.loading && !(popoverRef.componentVisible$ | async)) {\n  <div class=\"loading-spinner\"\n    #spinner\n    >\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}\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:auto;max-height:var(--fs-popover-max-height, calc(100vh - 100px) )}.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"] }]
+        }], ctorParameters: () => [], propDecorators: { _portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
             }], spinner: [{
@@ -232,57 +237,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['spinner']
             }] } });
 
+const POSITIONS = {
+    [Position.North]: {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetX: 0,
+        offsetY: -8,
+        panelClass: ['fs-popover-top'],
+    },
+    [Position.South]: {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 8,
+        panelClass: ['fs-popover-bottom'],
+    },
+    [Position.East]: {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+        offsetX: 8,
+        offsetY: 0,
+        panelClass: ['fs-popover-left'],
+    },
+    [Position.West]: {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+        offsetX: -8,
+        offsetY: 0,
+        panelClass: ['fs-popover-right'],
+    },
+};
+const FALLBACKS = {
+    [Position.South]: Position.North,
+    [Position.North]: Position.South,
+    [Position.East]: Position.West,
+    [Position.West]: Position.East,
+};
 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;
-    }
+    const primary = POSITIONS[position];
+    const fallback = POSITIONS[FALLBACKS[position]];
     return createBasePopupPositionStrategy(el, overlay)
-        .withPositions([
-        {
-            originX: originX,
-            originY: originY,
-            overlayX: overlayX,
-            overlayY: overlayY,
-            offsetX: offsetX,
-            offsetY: offsetY,
-            panelClass: panelClass,
-        }
-    ]);
+        .withPositions([primary, fallback]);
 }
 function createBasePopupPositionStrategy(el, overlay) {
     return overlay.position()
         .flexibleConnectedTo(el)
         .withGrowAfterOpen(true)
+        .withPush(true)
         .withFlexibleDimensions(false)
         .withViewportMargin(4);
 }
@@ -312,14 +321,10 @@ function createTempatePortal(template, popoverRef, data) {
 }
 
 class FsPopoverService {
-    _injector;
-    _overlay;
+    _injector = inject(Injector);
+    _overlay = inject(Overlay);
     _activeElement;
     _activeElementGUID;
-    constructor(_injector, _overlay) {
-        this._injector = _injector;
-        this._overlay = _overlay;
-    }
     get hasActivePopover() {
         return !!this._activeElement;
     }
@@ -360,7 +365,7 @@ class FsPopoverService {
         const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
         return overlayRef.attach(containerPortal);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, deps: [{ token: i0.Injector }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverService, decorators: [{
@@ -368,20 +373,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.Overlay }] });
+        }] });
 
 class FsPopoverDirective {
-    _elRef;
-    _popoverService;
-    _ngZone;
-    _router;
-    _guid = guid('xxxxxxx');
     text;
     template;
     data;
     leaveDelay = 100;
     showDelay = 0;
     maxWidth = 250;
+    maxHeight;
     wrapperClass;
     autoShow = true;
     autoClose = true;
@@ -402,11 +403,12 @@ class FsPopoverDirective {
     _mouseLeave$;
     _popoverClosed$ = new Subject();
     _destroy$ = new Subject();
-    constructor(_elRef, _popoverService, _ngZone, _router) {
-        this._elRef = _elRef;
-        this._popoverService = _popoverService;
-        this._ngZone = _ngZone;
-        this._router = _router;
+    _elRef = inject(ElementRef);
+    _popoverService = inject(FsPopoverService);
+    _ngZone = inject(NgZone);
+    _router = inject(Router, { optional: true });
+    _guid = guid('xxxxxxx');
+    constructor() {
         this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
         this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
         this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
@@ -448,6 +450,7 @@ class FsPopoverDirective {
         }
         this._popoverRef = new FsPopoverRef({
             maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
             wrapperClass: this.wrapperClass,
             autoShow: this.autoShow,
             autoClose: this.autoClose,
@@ -533,8 +536,8 @@ class FsPopoverDirective {
         const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
         return !pointInHostRect && !pointInPopoverRect;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, deps: [{ token: i0.ElementRef }, { token: FsPopoverService }, { token: i0.NgZone }, { token: i2$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", 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", "class.fs-popover-enabled": "this.enabled" }, classAttribute: "fs-popover" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsPopoverDirective, isStandalone: true, selector: "[fsPopover]", inputs: { text: "text", template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", maxHeight: "maxHeight", 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", "class.fs-popover-enabled": "this.enabled" }, classAttribute: "fs-popover" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, decorators: [{
             type: Directive,
@@ -543,10 +546,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     host: {
                         'class': 'fs-popover',
                     },
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FsPopoverService }, { type: i0.NgZone }, { type: i2$1.Router, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { text: [{
+        }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
             }], template: [{
                 type: Input
@@ -558,6 +560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], maxWidth: [{
                 type: Input
+            }], maxHeight: [{
+                type: Input
             }], wrapperClass: [{
                 type: Input
             }], autoShow: [{
@@ -590,35 +594,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 class FsPopoverComponent extends FsPopoverDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsPopoverComponent, selector: "fs-popover", host: { classAttribute: "fs-popover-component" }, usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsPopoverComponent, isStandalone: true, selector: "fs-popover", host: { classAttribute: "fs-popover-component" }, usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-popover', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'fs-popover-component',
-                    }, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n" }]
+                    }, standalone: true, imports: [NgClass], template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n" }]
         }] });
 
 class FsPopoverModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, declarations: [FsPopoverComponent,
-            FsPopoverWrapperComponent,
-            FsPopoverDirective], imports: [CommonModule,
-            PortalModule], exports: [FsPopoverComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, imports: [FsPopoverComponent,
+            FsPopoverDirective], exports: [FsPopoverComponent,
             FsPopoverDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, imports: [CommonModule,
-            PortalModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        PortalModule,
-                    ],
-                    declarations: [
                         FsPopoverComponent,
-                        FsPopoverWrapperComponent,
                         FsPopoverDirective,
                     ],
                     exports: [