@firestitch/popover 18.0.1 → 18.1.0

package/fesm2022/firestitch-popover.mjs

@@ -1,23 +1,23 @@
 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, input, booleanAttribute, output, Directive, Input, HostBinding, NgModule } from '@angular/core';
+import { NgClass, AsyncPipe, DOCUMENT } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 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 { BehaviorSubject, Subject, combineLatest, fromEvent, timer, pipe, merge } from 'rxjs';
+import { map, filter, takeUntil, debounceTime, delay, tap, switchMap, mapTo, startWith, distinctUntilChanged, withLatestFrom, finalize, take } from 'rxjs/operators';
 
 class FsPopoverRef {
     overlayRef;
     _autoShow$ = new BehaviorSubject(true);
     _autoClose$ = new BehaviorSubject(true);
     _componentLoading$ = new BehaviorSubject(true);
+    _closed$ = new Subject();
     _maxWidth;
+    _maxHeight;
     _wrapperClass;
     _loadingDiameter;
     _loading;
@@ -76,6 +76,16 @@ class FsPopoverRef {
     get maxWidth() {
         return this._maxWidth;
     }
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    /**
+     * Emits after each close(). A panel listens to it, so content that calls
+     * `popover.close()` closes the panel the same way Escape or an outside click does.
+     */
+    get closed$() {
+        return this._closed$.asObservable();
+    }
     show() {
         setTimeout(() => {
             this._componentLoading$.next(false);
@@ -87,6 +97,7 @@ class FsPopoverRef {
     close() {
         this.overlayRef.detach();
         this._componentLoading$.next(true);
+        this._closed$.next();
     }
     updatePosition() {
         this.overlayRef.updatePosition();
@@ -94,6 +105,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;
@@ -103,23 +115,11 @@ class FsPopoverRef {
     }
 }
 
-var Position;
-(function (Position) {
-    Position["North"] = "north";
-    Position["South"] = "south";
-    Position["East"] = "east";
-    Position["West"] = "west";
-})(Position || (Position = {}));
-
-function pointInRect(x1, y1, x2, y2, px, py) {
-    return (px > x1 && px < x2) && (py > y1 && py < y2);
-}
-
 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 +127,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 +216,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,94 +236,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['spinner']
             }] } });
 
+var Position;
+(function (Position) {
+    Position["North"] = "north";
+    Position["South"] = "south";
+    Position["East"] = "east";
+    Position["West"] = "west";
+})(Position || (Position = {}));
+
+function createInjector(popoverRef, parentInjector) {
+    const providers = [
+        { provide: FsPopoverRef, useValue: popoverRef },
+    ];
+    return Injector.create({
+        providers,
+        parent: parentInjector,
+    });
+}
+
+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);
 }
 
-function createOverlayRef(el, overlay, position) {
-    const config = {
+/**
+ * Hover and click popovers have no backdrop. A panel gets a transparent backdrop, so a click
+ * anywhere outside it closes it, and the `fs-popover-panel` class on its pane.
+ */
+function createOverlayRef(el, overlay, position, panel = false) {
+    const overlayConfig = new OverlayConfig({
         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 providers = [
-        { provide: FsPopoverRef, useValue: popoverRef },
-    ];
-    return Injector.create({
-        providers,
-        parent: parentInjector,
+        hasBackdrop: panel,
+        backdropClass: panel ? 'cdk-overlay-transparent-backdrop' : undefined,
+        panelClass: panel ? 'fs-popover-panel' : undefined,
     });
+    return overlay.create(overlayConfig);
 }
 
 function createTempatePortal(template, popoverRef, data) {
     return new TemplatePortal(template, void 0, { data: data, popover: popoverRef });
 }
 
+/**
+ * True when an overlay with a backdrop was attached after this one and still shows content:
+ * a calendar, a select, a menu or a dialog opened from inside it. Overlays without a backdrop
+ * (tooltips, toasts, hover popovers) don't count.
+ *
+ * CDK inserts each backdrop right before its overlay's host, and later overlays after earlier
+ * ones, so everything after this overlay's host was attached later.
+ */
+function hasOverlayAbove(overlayRef) {
+    let element = overlayRef.hostElement?.nextElementSibling;
+    while (element) {
+        if (isShowingBackdropOverlay(element)) {
+            return true;
+        }
+        element = element.nextElementSibling;
+    }
+    return false;
+}
+function isShowingBackdropOverlay(host) {
+    const pane = host.querySelector(':scope > .cdk-overlay-pane');
+    return !!pane?.childElementCount
+        && !!host.previousElementSibling?.classList.contains('cdk-overlay-backdrop');
+}
+
+function pointInRect(x1, y1, x2, y2, px, py) {
+    return (px > x1 && px < x2) && (py > y1 && py < y2);
+}
+
 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 +405,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 +413,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;
@@ -393,6 +434,17 @@ class FsPopoverDirective {
     size = 'normal';
     trigger = 'mouseover';
     enabled = true;
+    /**
+     * Panel mode: a host click or open() opens it; it stays open until close(), an outside
+     * click, Escape (only when no later overlay with a backdrop sits above it) or `popover.close()`
+     * from the content. Focus is trapped inside and returns on close to the element that had it
+     * when the panel opened. `trigger`, `showDelay`, `leaveDelay` and `autoClose` don't apply.
+     */
+    panel = input(false, { transform: booleanAttribute });
+    /**
+     * Emits each time the panel closes.
+     */
+    closed = output();
     _initialized = false;
     _popoverRef;
     _wrapperElement;
@@ -402,11 +454,21 @@ 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');
+    _overlay = inject(Overlay);
+    _injector = inject(Injector);
+    _focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    _document = inject(DOCUMENT);
+    _panelOverlayRef;
+    _panelFocusTrap;
+    _panelOpener;
+    _panelTopmostKeydown;
+    _panelClosed$ = new Subject();
+    constructor() {
         this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
         this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
         this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
@@ -430,9 +492,33 @@ class FsPopoverDirective {
         }
     }
     ngOnDestroy() {
+        if (this._panelOverlayRef) {
+            this._finishPanel(false);
+        }
         this._popoverClosed$.next(null);
         this._destroy$.next(null);
     }
+    /**
+     * Opens the panel on this element. Panel mode only.
+     */
+    open() {
+        if (!this.panel() || !this.enabled || !this._initialized || this._panelOverlayRef) {
+            return;
+        }
+        this._ngZone.run(() => this._openPanel());
+    }
+    /**
+     * Closes the panel, or in hover and click modes the open popover.
+     */
+    close() {
+        if (!this.panel()) {
+            this._closePopover();
+            return;
+        }
+        if (this._panelOverlayRef) {
+            this._ngZone.run(() => this._popoverRef.close());
+        }
+    }
     _closePopover() {
         this._popoverClosed$.next(null);
         this._ngZone.run(() => {
@@ -448,6 +534,7 @@ class FsPopoverDirective {
         }
         this._popoverRef = new FsPopoverRef({
             maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
             wrapperClass: this.wrapperClass,
             autoShow: this.autoShow,
             autoClose: this.autoClose,
@@ -457,7 +544,10 @@ class FsPopoverDirective {
             theme: this.theme,
         });
         this._ngZone.runOutsideAngular(() => {
-            if (this.trigger === 'click') {
+            if (this.panel()) {
+                this._listenPanelHostClick();
+            }
+            else if (this.trigger === 'click') {
                 this._listenMouseHostClick();
             }
             else {
@@ -474,7 +564,7 @@ class FsPopoverDirective {
         }), pipe(takeUntil(this._destroy$
             .pipe(delay(200)))))
             .subscribe(() => {
-            this._closePopover();
+            this.close();
         });
     }
     _listenMouseHostClick() {
@@ -533,20 +623,114 @@ 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 });
+    _listenPanelHostClick() {
+        fromEvent(this._elRef.nativeElement, 'click')
+            .pipe(filter(() => this.enabled), tap((event) => {
+            event.stopPropagation();
+            this.open();
+        }), takeUntil(this._destroy$))
+            .subscribe();
+    }
+    _openPanel() {
+        this._panelOpener = this._document.activeElement;
+        this._panelOverlayRef = createOverlayRef(this._elRef, this._overlay, this.position, true);
+        this._popoverRef.overlayRef = this._panelOverlayRef;
+        const wrapperElement = this._attachPanelContent(this._panelOverlayRef);
+        this._trapPanelFocus(wrapperElement);
+        this._listenPanelClose(this._panelOverlayRef);
+        this._listenPanelEscape(this._panelOverlayRef);
+    }
+    _attachPanelContent(overlayRef) {
+        const wrapperRef = overlayRef.attach(new ComponentPortal(FsPopoverWrapperComponent, null, createInjector(this._popoverRef, this._injector)));
+        if (this.template) {
+            wrapperRef.instance
+                .attachTemplatePortal(createTempatePortal(this.template, this._popoverRef, this.data));
+        }
+        else {
+            wrapperRef.instance.setTextualContent(this.text);
+        }
+        return wrapperRef.location.nativeElement;
+    }
+    /**
+     * The configurable trap also pulls focus back when it lands outside the panel, for
+     * example on the first Tab after a calendar inside closed and took the focused element
+     * with it. Focus inside other overlays (a select, a calendar) is left alone.
+     */
+    _trapPanelFocus(wrapperElement) {
+        this._panelFocusTrap = this._focusTrapFactory.create(wrapperElement);
+        this._panelFocusTrap.focusInitialElementWhenReady()
+            .then((focused) => {
+            // Nothing inside takes focus (text only): the panel itself becomes the one
+            // tab stop, so the opener behind the backdrop doesn't keep focus.
+            if (!focused && wrapperElement.isConnected) {
+                wrapperElement.setAttribute('tabindex', '0');
+                wrapperElement.style.outline = 'none';
+                wrapperElement.focus();
+            }
+        });
+    }
+    _listenPanelClose(overlayRef) {
+        overlayRef.backdropClick()
+            .pipe(tap(() => this.close()), takeUntil(this._panelClosed$))
+            .subscribe();
+        // Every close (close(), the backdrop, Escape, or `popover.close()` from the
+        // content) goes through FsPopoverRef.close(), which detaches and then emits.
+        this._popoverRef.closed$
+            .pipe(take(1), tap(() => this._finishPanel(true)), takeUntil(this._panelClosed$))
+            .subscribe();
+    }
+    /**
+     * Escape closes the panel only when no later overlay with a backdrop sits above it, so
+     * Escape in a calendar, select or menu opened from the panel closes only that. The check
+     * runs in the capture phase, before any handler inside closes its own overlay; fs-datepicker,
+     * for one, closes its calendar from the input's keydown and from a document listener.
+     */
+    _listenPanelEscape(overlayRef) {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._document, 'keydown', { capture: true })
+                .pipe(tap((event) => {
+                this._panelTopmostKeydown = hasOverlayAbove(overlayRef) ? null : event;
+            }), takeUntil(this._panelClosed$))
+                .subscribe();
+        });
+        overlayRef.keydownEvents()
+            .pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), filter((event) => event === this._panelTopmostKeydown), tap(() => this.close()), takeUntil(this._panelClosed$))
+            .subscribe();
+    }
+    _finishPanel(emit) {
+        const overlayRef = this._panelOverlayRef;
+        this._panelOverlayRef = null;
+        this._panelTopmostKeydown = null;
+        this._panelClosed$.next();
+        this._panelFocusTrap?.destroy();
+        this._panelFocusTrap = null;
+        overlayRef.dispose();
+        this._restorePanelFocus();
+        if (emit) {
+            this.closed.emit();
+        }
+    }
+    _restorePanelFocus() {
+        const opener = this._panelOpener;
+        this._panelOpener = null;
+        if (opener?.isConnected && typeof opener.focus === 'function') {
+            opener.focus();
+        }
+    }
+    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: "17.1.0", version: "18.2.7", type: FsPopoverDirective, isStandalone: true, selector: "[fsPopover]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, leaveDelay: { classPropertyName: "leaveDelay", publicName: "leaveDelay", isSignal: false, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: false, isRequired: false, transformFunction: null }, autoShow: { classPropertyName: "autoShow", publicName: "autoShow", isSignal: false, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: false, isRequired: false, transformFunction: null }, loadingDiameter: { classPropertyName: "loadingDiameter", publicName: "loadingDiameter", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, indication: { classPropertyName: "indication", publicName: "indication", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: false, isRequired: false, transformFunction: null }, panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.indication": "this.indication", "class.fs-popover-enabled": "this.enabled" }, classAttribute: "fs-popover" }, exportAs: ["fsPopover"], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsPopover]',
+                    exportAs: 'fsPopover',
                     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 +742,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 +776,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" }, exportAs: ["fsPopover"], 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: {
+            args: [{ selector: 'fs-popover', exportAs: 'fsPopover', 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: [