@firestitch/popover 18.0.2 → 18.1.0

package/esm2022/app/helpers/create-overlay-ref.mjs

@@ -1,12 +1,17 @@
 import { OverlayConfig } from '@angular/cdk/overlay';
 import { createPopupPositionStrategy } from './create-position-strategy';
-export 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.
+ */
+export 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);
+        hasBackdrop: panel,
+        backdropClass: panel ? 'cdk-overlay-transparent-backdrop' : undefined,
+        panelClass: panel ? 'fs-popover-panel' : undefined,
+    });
     return overlay.create(overlayConfig);
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLW92ZXJsYXktcmVmLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2FwcC9oZWxwZXJzL2NyZWF0ZS1vdmVybGF5LXJlZi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQVcsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDOUQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFJekUsTUFBTSxVQUFVLGdCQUFnQixDQUFDLEVBQWMsRUFBRSxPQUFnQixFQUFFLFFBQWtCO0lBQ25GLE1BQU0sTUFBTSxHQUFHO1FBQ2IsZ0JBQWdCLEVBQUUsMkJBQTJCLENBQUMsRUFBRSxFQUFFLE9BQU8sRUFBRSxRQUFRLENBQUM7UUFDcEUsY0FBYyxFQUFFLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUU7UUFDckQsV0FBVyxFQUFFLEtBQUs7S0FDbkIsQ0FBQztJQUVGLE1BQU0sYUFBYSxHQUFHLElBQUksYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRWhELE9BQU8sT0FBTyxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsQ0FBQztBQUN2QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT3ZlcmxheSwgT3ZlcmxheUNvbmZpZyB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcbmltcG9ydCB7IGNyZWF0ZVBvcHVwUG9zaXRpb25TdHJhdGVneSB9IGZyb20gJy4vY3JlYXRlLXBvc2l0aW9uLXN0cmF0ZWd5JztcbmltcG9ydCB7IFBvc2l0aW9uIH0gZnJvbSAnLi8uLi9lbnVtcy9wb3NpdGlvbic7XG5cblxuZXhwb3J0IGZ1bmN0aW9uIGNyZWF0ZU92ZXJsYXlSZWYoZWw6IEVsZW1lbnRSZWYsIG92ZXJsYXk6IE92ZXJsYXksIHBvc2l0aW9uOiBQb3NpdGlvbikge1xuICBjb25zdCBjb25maWcgPSB7XG4gICAgcG9zaXRpb25TdHJhdGVneTogY3JlYXRlUG9wdXBQb3NpdGlvblN0cmF0ZWd5KGVsLCBvdmVybGF5LCBwb3NpdGlvbiksXG4gICAgc2Nyb2xsU3RyYXRlZ3k6IG92ZXJsYXkuc2Nyb2xsU3RyYXRlZ2llcy5yZXBvc2l0aW9uKCksXG4gICAgaGFzQmFja2Ryb3A6IGZhbHNlXG4gIH07XG5cbiAgY29uc3Qgb3ZlcmxheUNvbmZpZyA9IG5ldyBPdmVybGF5Q29uZmlnKGNvbmZpZyk7XG5cbiAgcmV0dXJuIG92ZXJsYXkuY3JlYXRlKG92ZXJsYXlDb25maWcpO1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JlYXRlLW92ZXJsYXktcmVmLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2FwcC9oZWxwZXJzL2NyZWF0ZS1vdmVybGF5LXJlZi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLEVBQVcsYUFBYSxFQUFjLE1BQU0sc0JBQXNCLENBQUM7QUFHMUUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFHekU7OztHQUdHO0FBQ0gsTUFBTSxVQUFVLGdCQUFnQixDQUM5QixFQUFjLEVBQ2QsT0FBZ0IsRUFDaEIsUUFBa0IsRUFDbEIsS0FBSyxHQUFHLEtBQUs7SUFFYixNQUFNLGFBQWEsR0FBRyxJQUFJLGFBQWEsQ0FBQztRQUN0QyxnQkFBZ0IsRUFBRSwyQkFBMkIsQ0FBQyxFQUFFLEVBQUUsT0FBTyxFQUFFLFFBQVEsQ0FBQztRQUNwRSxjQUFjLEVBQUUsT0FBTyxDQUFDLGdCQUFnQixDQUFDLFVBQVUsRUFBRTtRQUNyRCxXQUFXLEVBQUUsS0FBSztRQUNsQixhQUFhLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDLENBQUMsU0FBUztRQUNyRSxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsU0FBUztLQUNuRCxDQUFDLENBQUM7SUFFSCxPQUFPLE9BQU8sQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7QUFDdkMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVsZW1lbnRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgT3ZlcmxheSwgT3ZlcmxheUNvbmZpZywgT3ZlcmxheVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcblxuaW1wb3J0IHsgUG9zaXRpb24gfSBmcm9tICcuLy4uL2VudW1zL3Bvc2l0aW9uJztcbmltcG9ydCB7IGNyZWF0ZVBvcHVwUG9zaXRpb25TdHJhdGVneSB9IGZyb20gJy4vY3JlYXRlLXBvc2l0aW9uLXN0cmF0ZWd5JztcblxuXG4vKipcbiAqIEhvdmVyIGFuZCBjbGljayBwb3BvdmVycyBoYXZlIG5vIGJhY2tkcm9wLiBBIHBhbmVsIGdldHMgYSB0cmFuc3BhcmVudCBiYWNrZHJvcCwgc28gYSBjbGlja1xuICogYW55d2hlcmUgb3V0c2lkZSBpdCBjbG9zZXMgaXQsIGFuZCB0aGUgYGZzLXBvcG92ZXItcGFuZWxgIGNsYXNzIG9uIGl0cyBwYW5lLlxuICovXG5leHBvcnQgZnVuY3Rpb24gY3JlYXRlT3ZlcmxheVJlZihcbiAgZWw6IEVsZW1lbnRSZWYsXG4gIG92ZXJsYXk6IE92ZXJsYXksXG4gIHBvc2l0aW9uOiBQb3NpdGlvbixcbiAgcGFuZWwgPSBmYWxzZSxcbik6IE92ZXJsYXlSZWYge1xuICBjb25zdCBvdmVybGF5Q29uZmlnID0gbmV3IE92ZXJsYXlDb25maWcoe1xuICAgIHBvc2l0aW9uU3RyYXRlZ3k6IGNyZWF0ZVBvcHVwUG9zaXRpb25TdHJhdGVneShlbCwgb3ZlcmxheSwgcG9zaXRpb24pLFxuICAgIHNjcm9sbFN0cmF0ZWd5OiBvdmVybGF5LnNjcm9sbFN0cmF0ZWdpZXMucmVwb3NpdGlvbigpLFxuICAgIGhhc0JhY2tkcm9wOiBwYW5lbCxcbiAgICBiYWNrZHJvcENsYXNzOiBwYW5lbCA/ICdjZGstb3ZlcmxheS10cmFuc3BhcmVudC1iYWNrZHJvcCcgOiB1bmRlZmluZWQsXG4gICAgcGFuZWxDbGFzczogcGFuZWwgPyAnZnMtcG9wb3Zlci1wYW5lbCcgOiB1bmRlZmluZWQsXG4gIH0pO1xuXG4gIHJldHVybiBvdmVybGF5LmNyZWF0ZShvdmVybGF5Q29uZmlnKTtcbn1cbiJdfQ==

package/esm2022/app/helpers/has-overlay-above.mjs

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+export 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');
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGFzLW92ZXJsYXktYWJvdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXBwL2hlbHBlcnMvaGFzLW92ZXJsYXktYWJvdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7Ozs7Ozs7R0FPRztBQUNILE1BQU0sVUFBVSxlQUFlLENBQUMsVUFBc0I7SUFDcEQsSUFBSSxPQUFPLEdBQUcsVUFBVSxDQUFDLFdBQVcsRUFBRSxrQkFBa0IsQ0FBQztJQUV6RCxPQUFPLE9BQU8sRUFBRSxDQUFDO1FBQ2YsSUFBSSx3QkFBd0IsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDO1lBQ3RDLE9BQU8sSUFBSSxDQUFDO1FBQ2QsQ0FBQztRQUVELE9BQU8sR0FBRyxPQUFPLENBQUMsa0JBQWtCLENBQUM7SUFDdkMsQ0FBQztJQUVELE9BQU8sS0FBSyxDQUFDO0FBQ2YsQ0FBQztBQUVELFNBQVMsd0JBQXdCLENBQUMsSUFBYTtJQUM3QyxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLDRCQUE0QixDQUFDLENBQUM7SUFFOUQsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLGlCQUFpQjtXQUMzQixDQUFDLENBQUMsSUFBSSxDQUFDLHNCQUFzQixFQUFFLFNBQVMsQ0FBQyxRQUFRLENBQUMsc0JBQXNCLENBQUMsQ0FBQztBQUNqRixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT3ZlcmxheVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcblxuXG4vKipcbiAqIFRydWUgd2hlbiBhbiBvdmVybGF5IHdpdGggYSBiYWNrZHJvcCB3YXMgYXR0YWNoZWQgYWZ0ZXIgdGhpcyBvbmUgYW5kIHN0aWxsIHNob3dzIGNvbnRlbnQ6XG4gKiBhIGNhbGVuZGFyLCBhIHNlbGVjdCwgYSBtZW51IG9yIGEgZGlhbG9nIG9wZW5lZCBmcm9tIGluc2lkZSBpdC4gT3ZlcmxheXMgd2l0aG91dCBhIGJhY2tkcm9wXG4gKiAodG9vbHRpcHMsIHRvYXN0cywgaG92ZXIgcG9wb3ZlcnMpIGRvbid0IGNvdW50LlxuICpcbiAqIENESyBpbnNlcnRzIGVhY2ggYmFja2Ryb3AgcmlnaHQgYmVmb3JlIGl0cyBvdmVybGF5J3MgaG9zdCwgYW5kIGxhdGVyIG92ZXJsYXlzIGFmdGVyIGVhcmxpZXJcbiAqIG9uZXMsIHNvIGV2ZXJ5dGhpbmcgYWZ0ZXIgdGhpcyBvdmVybGF5J3MgaG9zdCB3YXMgYXR0YWNoZWQgbGF0ZXIuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBoYXNPdmVybGF5QWJvdmUob3ZlcmxheVJlZjogT3ZlcmxheVJlZik6IGJvb2xlYW4ge1xuICBsZXQgZWxlbWVudCA9IG92ZXJsYXlSZWYuaG9zdEVsZW1lbnQ/Lm5leHRFbGVtZW50U2libGluZztcblxuICB3aGlsZSAoZWxlbWVudCkge1xuICAgIGlmIChpc1Nob3dpbmdCYWNrZHJvcE92ZXJsYXkoZWxlbWVudCkpIHtcbiAgICAgIHJldHVybiB0cnVlO1xuICAgIH1cblxuICAgIGVsZW1lbnQgPSBlbGVtZW50Lm5leHRFbGVtZW50U2libGluZztcbiAgfVxuXG4gIHJldHVybiBmYWxzZTtcbn1cblxuZnVuY3Rpb24gaXNTaG93aW5nQmFja2Ryb3BPdmVybGF5KGhvc3Q6IEVsZW1lbnQpOiBib29sZWFuIHtcbiAgY29uc3QgcGFuZSA9IGhvc3QucXVlcnlTZWxlY3RvcignOnNjb3BlID4gLmNkay1vdmVybGF5LXBhbmUnKTtcblxuICByZXR1cm4gISFwYW5lPy5jaGlsZEVsZW1lbnRDb3VudFxuICAgICYmICEhaG9zdC5wcmV2aW91c0VsZW1lbnRTaWJsaW5nPy5jbGFzc0xpc3QuY29udGFpbnMoJ2Nkay1vdmVybGF5LWJhY2tkcm9wJyk7XG59XG4iXX0=

package/fesm2022/firestitch-popover.mjs

@@ -1,18 +1,21 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, Renderer2, Component, ChangeDetectionStrategy, ViewChild, Injector, TemplateRef, Injectable, Directive, Input, HostBinding, NgModule } from '@angular/core';
+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 { 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 { 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 { NgClass, AsyncPipe } from '@angular/common';
+import { guid } from '@firestitch/common';
+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;
@@ -76,6 +79,13 @@ class FsPopoverRef {
     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();
@@ -104,18 +115,6 @@ 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 = inject(FsPopoverRef);
     _el = inject(ElementRef);
@@ -237,6 +236,24 @@ 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',
@@ -296,30 +313,53 @@ function createBasePopupPositionStrategy(el, overlay) {
         .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 = inject(Injector);
     _overlay = inject(Overlay);
@@ -394,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;
@@ -408,6 +459,15 @@ class FsPopoverDirective {
     _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 });
@@ -432,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(() => {
@@ -460,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 {
@@ -477,7 +564,7 @@ class FsPopoverDirective {
         }), pipe(takeUntil(this._destroy$
             .pipe(delay(200)))))
             .subscribe(() => {
-            this._closePopover();
+            this.close();
         });
     }
     _listenMouseHostClick() {
@@ -536,13 +623,108 @@ class FsPopoverDirective {
         const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
         return !pointInHostRect && !pointInPopoverRect;
     }
+    _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: "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 });
+    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',
                     },
@@ -594,11 +776,11 @@ 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, 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 });
+    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',
                     }, standalone: true, imports: [NgClass], template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n" }]
         }] });