@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-popover.mjs

@@ -1,222 +1,534 @@
-import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Injector, NgZone, HostListener, Directive } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { NgTemplateOutlet } from '@angular/common';
-import * as i1 from '@testgorilla/tgo-ui/components/card';
-import { CardComponentModule } from '@testgorilla/tgo-ui/components/card';
-
-class PopoverComponent {
-    constructor() {
-        this.templateRef = input(null, ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
-        this.ctx = input({}, ...(ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []));
-        this.popoverCard = input(true, ...(ngDevMode ? [{ debugName: "popoverCard" }] : /* istanbul ignore next */ []));
-        this.popoverCardSize = input('medium', ...(ngDevMode ? [{ debugName: "popoverCardSize" }] : /* istanbul ignore next */ []));
-        this.trapFocus = input(false, ...(ngDevMode ? [{ debugName: "trapFocus" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PopoverComponent, isStandalone: true, selector: "ui-popover", inputs: { templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, ctx: { classPropertyName: "ctx", publicName: "ctx", isSignal: true, isRequired: false, transformFunction: null }, popoverCard: { classPropertyName: "popoverCard", publicName: "popoverCard", isSignal: true, isRequired: false, transformFunction: null }, popoverCardSize: { classPropertyName: "popoverCardSize", publicName: "popoverCardSize", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (templateRef()) {\n  <div class=\"popover-focus-scope\" [cdkTrapFocus]=\"trapFocus()\" [cdkTrapFocusAutoCapture]=\"trapFocus()\">\n    <div\n      class=\"popover-surface\"\n      [attr.role]=\"trapFocus() ? 'dialog' : null\"\n      [attr.aria-label]=\"trapFocus() && ariaLabel() ? ariaLabel() : null\"\n      [attr.tabindex]=\"trapFocus() ? '-1' : null\"\n      [attr.cdkFocusInitial]=\"trapFocus() ? '' : null\"\n    >\n      @if (popoverCard()) {\n        <ui-card [size]=\"popoverCardSize()\">\n          <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n        </ui-card>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n      }\n    </div>\n  </div>\n}\n", styles: [".popover-focus-scope{display:contents}.popover-surface{display:block}.popover-surface:focus,.popover-surface:focus-visible{outline:none}:host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CardComponentModule }, { kind: "component", type: i1.CardComponent, selector: "ui-card", inputs: ["size", "sizeVariant", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus", "testId"], outputs: ["cardSelected"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-popover', standalone: true, imports: [NgTemplateOutlet, CardComponentModule, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (templateRef()) {\n  <div class=\"popover-focus-scope\" [cdkTrapFocus]=\"trapFocus()\" [cdkTrapFocusAutoCapture]=\"trapFocus()\">\n    <div\n      class=\"popover-surface\"\n      [attr.role]=\"trapFocus() ? 'dialog' : null\"\n      [attr.aria-label]=\"trapFocus() && ariaLabel() ? ariaLabel() : null\"\n      [attr.tabindex]=\"trapFocus() ? '-1' : null\"\n      [attr.cdkFocusInitial]=\"trapFocus() ? '' : null\"\n    >\n      @if (popoverCard()) {\n        <ui-card [size]=\"popoverCardSize()\">\n          <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n        </ui-card>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n      }\n    </div>\n  </div>\n}\n", styles: [".popover-focus-scope{display:contents}.popover-surface{display:block}.popover-surface:focus,.popover-surface:focus-visible{outline:none}:host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
-        }], propDecorators: { templateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRef", required: false }] }], ctx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctx", required: false }] }], popoverCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCard", required: false }] }], popoverCardSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCardSize", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
-
-class PopoverDirective {
-    constructor() {
-        this.uiPopover = input.required(...(ngDevMode ? [{ debugName: "uiPopover" }] : /* istanbul ignore next */ []));
-        this.popoverOffset = input(4, ...(ngDevMode ? [{ debugName: "popoverOffset" }] : /* istanbul ignore next */ []));
-        this.popoverAlign = input('center', ...(ngDevMode ? [{ debugName: "popoverAlign" }] : /* istanbul ignore next */ []));
-        this.popoverOpen = input(false, ...(ngDevMode ? [{ debugName: "popoverOpen" }] : /* istanbul ignore next */ []));
-        this.popoverCard = input(true, ...(ngDevMode ? [{ debugName: "popoverCard" }] : /* istanbul ignore next */ []));
-        this.popoverCardSize = input('medium', ...(ngDevMode ? [{ debugName: "popoverCardSize" }] : /* istanbul ignore next */ []));
-        this.popoverTrigger = input('hover', ...(ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []));
-        this.popoverAriaLabel = input('', ...(ngDevMode ? [{ debugName: "popoverAriaLabel" }] : /* istanbul ignore next */ []));
-        this.uiPopoverDisabled = input(false, ...(ngDevMode ? [{ debugName: "uiPopoverDisabled" }] : /* istanbul ignore next */ []));
-        this.openState = signal(false, ...(ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []));
-        /** Whether the popover is currently showing. Read it via `#ref="uiPopover"` or `viewChild(PopoverDirective)`. */
-        this.isOpen = this.openState.asReadonly();
-        this.overlay = inject(Overlay);
-        this.elementRef = inject(ElementRef);
-        this.injector = inject(Injector);
-        this.ngZone = inject(NgZone);
-        this.overlayRef = null;
-        this.openTimeout = null;
-        this.closeTimeout = null;
-        this.overlayListeners = null;
-        this.dismissSubscriptions = null;
-    }
-    onMouseEnter() {
-        if (this.popoverTrigger() !== 'hover' || this.uiPopoverDisabled()) {
-            return;
-        }
-        this.cancelClose();
-        this.scheduleOpen();
-    }
-    onMouseLeave() {
-        if (this.popoverTrigger() !== 'hover') {
-            return;
-        }
-        this.cancelOpen();
-        this.scheduleClose();
-    }
-    onClick() {
-        if (this.popoverTrigger() !== 'click') {
-            return;
-        }
-        this.toggle();
-    }
-    /** Opens the popover. No-op while `uiPopoverDisabled` is `true` or it is already open. */
-    open() {
-        if (this.uiPopoverDisabled()) {
-            return;
-        }
-        if (!this.overlayRef) {
-            this.createOverlay();
-        }
-        const overlayRef = this.overlayRef;
-        if (!overlayRef || overlayRef.hasAttached()) {
-            return;
-        }
-        const portal = new ComponentPortal(PopoverComponent, null, this.injector);
-        const ref = overlayRef.attach(portal);
-        ref.setInput('templateRef', this.uiPopover());
-        ref.setInput('ctx', { close: () => this.close() });
-        ref.setInput('popoverCard', this.popoverCard());
-        ref.setInput('popoverCardSize', this.popoverCardSize());
-        ref.setInput('trapFocus', this.popoverTrigger() === 'click');
-        ref.setInput('ariaLabel', this.popoverAriaLabel());
-        if (this.popoverTrigger() === 'hover') {
-            const el = overlayRef.overlayElement;
-            const enter = () => this.ngZone.run(() => this.cancelClose());
-            const leave = () => this.ngZone.run(() => this.scheduleClose());
-            el.addEventListener('mouseenter', enter);
-            el.addEventListener('mouseleave', leave);
-            this.overlayListeners = { enter, leave };
-        }
-        this.openState.set(true);
-    }
-    /** Closes the popover. Safe to call when it is already closed. */
-    close() {
-        if (!this.overlayRef) {
-            return;
-        }
-        if (this.overlayListeners) {
-            const el = this.overlayRef.overlayElement;
-            el.removeEventListener('mouseenter', this.overlayListeners.enter);
-            el.removeEventListener('mouseleave', this.overlayListeners.leave);
-            this.overlayListeners = null;
-        }
-        this.overlayRef.detach();
-        this.openState.set(false);
-    }
-    /** Opens the popover when closed, closes it when open. */
-    toggle() {
-        if (this.isOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    createOverlay() {
-        const align = this.popoverAlign();
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(this.elementRef)
-            .withPositions([
-            { originX: align, originY: 'bottom', overlayX: align, overlayY: 'top', offsetY: this.popoverOffset() },
-            { originX: align, originY: 'top', overlayX: align, overlayY: 'bottom', offsetY: -this.popoverOffset() },
-        ]);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            hasBackdrop: false,
-        });
-        if (this.popoverTrigger() === 'click') {
-            this.listenForDismiss(this.overlayRef);
-        }
-    }
-    /** Click-triggered popovers dismiss on an outside pointer event or on Escape. */
-    listenForDismiss(overlayRef) {
-        const subscriptions = new Subscription();
-        subscriptions.add(overlayRef.outsidePointerEvents().subscribe(event => {
-            // The anchor's own click handler toggles, so ignore it here to avoid closing and reopening.
-            if (this.elementRef.nativeElement.contains(event.target)) {
-                return;
-            }
-            this.close();
-        }));
-        subscriptions.add(overlayRef.keydownEvents().subscribe(event => {
-            if (event.key !== 'Escape') {
-                return;
-            }
-            event.preventDefault();
-            // cdkTrapFocusAutoCapture restores focus to whatever was focused before the popover opened,
-            // so closing is all this has to do.
-            this.close();
-        }));
-        this.dismissSubscriptions = subscriptions;
-    }
-    scheduleOpen() {
-        this.openTimeout = setTimeout(() => this.open(), 100);
-    }
-    cancelOpen() {
-        if (this.openTimeout) {
-            clearTimeout(this.openTimeout);
-            this.openTimeout = null;
-        }
-    }
-    scheduleClose() {
-        this.closeTimeout = setTimeout(() => this.close(), 150);
-    }
-    cancelClose() {
-        if (this.closeTimeout) {
-            clearTimeout(this.closeTimeout);
-            this.closeTimeout = null;
-        }
-    }
-    ngOnInit() {
-        if (this.popoverOpen()) {
-            this.open();
-        }
-    }
-    ngOnDestroy() {
-        this.cancelOpen();
-        this.cancelClose();
-        this.close();
-        this.dismissSubscriptions?.unsubscribe();
-        this.overlayRef?.dispose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: PopoverDirective, isStandalone: true, selector: "[uiPopover]", inputs: { uiPopover: { classPropertyName: "uiPopover", publicName: "uiPopover", isSignal: true, isRequired: true, transformFunction: null }, popoverOffset: { classPropertyName: "popoverOffset", publicName: "popoverOffset", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverOpen: { classPropertyName: "popoverOpen", publicName: "popoverOpen", isSignal: true, isRequired: false, transformFunction: null }, popoverCard: { classPropertyName: "popoverCard", publicName: "popoverCard", isSignal: true, isRequired: false, transformFunction: null }, popoverCardSize: { classPropertyName: "popoverCardSize", publicName: "popoverCardSize", isSignal: true, isRequired: false, transformFunction: null }, popoverTrigger: { classPropertyName: "popoverTrigger", publicName: "popoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, popoverAriaLabel: { classPropertyName: "popoverAriaLabel", publicName: "popoverAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, uiPopoverDisabled: { classPropertyName: "uiPopoverDisabled", publicName: "uiPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, exportAs: ["uiPopover"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PopoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiPopover]',
-                    exportAs: 'uiPopover',
-                    standalone: true,
-                }]
-        }], propDecorators: { uiPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopover", required: true }] }], popoverOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOffset", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], popoverOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOpen", required: false }] }], popoverCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCard", required: false }] }], popoverCardSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCardSize", required: false }] }], popoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTrigger", required: false }] }], popoverAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAriaLabel", required: false }] }], uiPopoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopoverDisabled", required: false }] }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-// PopoverComponent is internal — not part of the public API
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { Overlay } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, HostListener, Injector, NgZone, inject, input, signal } from "@angular/core";
+import { Subscription } from "rxjs";
+import { CdkTrapFocus } from "@angular/cdk/a11y";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i1 from "@testgorilla/tgo-ui/components/card";
+import { CardComponentModule } from "@testgorilla/tgo-ui/components/card";
+var PopoverComponent = class PopoverComponent {
+	constructor() {
+		this.templateRef = input(null, ...ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []);
+		this.ctx = input({}, ...ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []);
+		this.popoverCard = input(true, ...ngDevMode ? [{ debugName: "popoverCard" }] : /* istanbul ignore next */ []);
+		this.popoverCardSize = input("medium", ...ngDevMode ? [{ debugName: "popoverCardSize" }] : /* istanbul ignore next */ []);
+		this.trapFocus = input(false, ...ngDevMode ? [{ debugName: "trapFocus" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PopoverComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: PopoverComponent,
+			isStandalone: true,
+			selector: "ui-popover",
+			inputs: {
+				templateRef: {
+					classPropertyName: "templateRef",
+					publicName: "templateRef",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ctx: {
+					classPropertyName: "ctx",
+					publicName: "ctx",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverCard: {
+					classPropertyName: "popoverCard",
+					publicName: "popoverCard",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverCardSize: {
+					classPropertyName: "popoverCardSize",
+					publicName: "popoverCardSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				trapFocus: {
+					classPropertyName: "trapFocus",
+					publicName: "trapFocus",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: "@if (templateRef()) {\n  <div class=\"popover-focus-scope\" [cdkTrapFocus]=\"trapFocus()\" [cdkTrapFocusAutoCapture]=\"trapFocus()\">\n    <div\n      class=\"popover-surface\"\n      [attr.role]=\"trapFocus() ? 'dialog' : null\"\n      [attr.aria-label]=\"trapFocus() && ariaLabel() ? ariaLabel() : null\"\n      [attr.tabindex]=\"trapFocus() ? '-1' : null\"\n      [attr.cdkFocusInitial]=\"trapFocus() ? '' : null\"\n    >\n      @if (popoverCard()) {\n        <ui-card [size]=\"popoverCardSize()\">\n          <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n        </ui-card>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n      }\n    </div>\n  </div>\n}\n",
+			styles: [".popover-focus-scope{display:contents}.popover-surface{display:block}.popover-surface:focus,.popover-surface:focus-visible{outline:none}:host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: CardComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.CardComponent,
+					selector: "ui-card",
+					inputs: [
+						"size",
+						"sizeVariant",
+						"variant",
+						"applicationTheme",
+						"errors",
+						"errorsSize",
+						"selected",
+						"allowSelect",
+						"allowFocus",
+						"testId"
+					],
+					outputs: ["cardSelected"]
+				},
+				{
+					kind: "directive",
+					type: CdkTrapFocus,
+					selector: "[cdkTrapFocus]",
+					inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+					exportAs: ["cdkTrapFocus"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PopoverComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-popover",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				CardComponentModule,
+				CdkTrapFocus
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (templateRef()) {\n  <div class=\"popover-focus-scope\" [cdkTrapFocus]=\"trapFocus()\" [cdkTrapFocusAutoCapture]=\"trapFocus()\">\n    <div\n      class=\"popover-surface\"\n      [attr.role]=\"trapFocus() ? 'dialog' : null\"\n      [attr.aria-label]=\"trapFocus() && ariaLabel() ? ariaLabel() : null\"\n      [attr.tabindex]=\"trapFocus() ? '-1' : null\"\n      [attr.cdkFocusInitial]=\"trapFocus() ? '' : null\"\n    >\n      @if (popoverCard()) {\n        <ui-card [size]=\"popoverCardSize()\">\n          <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n        </ui-card>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n      }\n    </div>\n  </div>\n}\n",
+			styles: [".popover-focus-scope{display:contents}.popover-surface{display:block}.popover-surface:focus,.popover-surface:focus-visible{outline:none}:host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		templateRef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "templateRef",
+				required: false
+			}]
+		}],
+		ctx: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ctx",
+				required: false
+			}]
+		}],
+		popoverCard: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverCard",
+				required: false
+			}]
+		}],
+		popoverCardSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverCardSize",
+				required: false
+			}]
+		}],
+		trapFocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trapFocus",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var PopoverDirective = class PopoverDirective {
+	constructor() {
+		this.uiPopover = input.required(...ngDevMode ? [{ debugName: "uiPopover" }] : /* istanbul ignore next */ []);
+		this.popoverOffset = input(4, ...ngDevMode ? [{ debugName: "popoverOffset" }] : /* istanbul ignore next */ []);
+		this.popoverAlign = input("center", ...ngDevMode ? [{ debugName: "popoverAlign" }] : /* istanbul ignore next */ []);
+		this.popoverOpen = input(false, ...ngDevMode ? [{ debugName: "popoverOpen" }] : /* istanbul ignore next */ []);
+		this.popoverCard = input(true, ...ngDevMode ? [{ debugName: "popoverCard" }] : /* istanbul ignore next */ []);
+		this.popoverCardSize = input("medium", ...ngDevMode ? [{ debugName: "popoverCardSize" }] : /* istanbul ignore next */ []);
+		this.popoverTrigger = input("hover", ...ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []);
+		this.popoverAriaLabel = input("", ...ngDevMode ? [{ debugName: "popoverAriaLabel" }] : /* istanbul ignore next */ []);
+		this.uiPopoverDisabled = input(false, ...ngDevMode ? [{ debugName: "uiPopoverDisabled" }] : /* istanbul ignore next */ []);
+		this.openState = signal(false, ...ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []);
+		this.isOpen = this.openState.asReadonly();
+		this.overlay = inject(Overlay);
+		this.elementRef = inject(ElementRef);
+		this.injector = inject(Injector);
+		this.ngZone = inject(NgZone);
+		this.overlayRef = null;
+		this.openTimeout = null;
+		this.closeTimeout = null;
+		this.overlayListeners = null;
+		this.dismissSubscriptions = null;
+	}
+	onMouseEnter() {
+		if (this.popoverTrigger() !== "hover" || this.uiPopoverDisabled()) return;
+		this.cancelClose();
+		this.scheduleOpen();
+	}
+	onMouseLeave() {
+		if (this.popoverTrigger() !== "hover") return;
+		this.cancelOpen();
+		this.scheduleClose();
+	}
+	onClick() {
+		if (this.popoverTrigger() !== "click") return;
+		this.toggle();
+	}
+	open() {
+		if (this.uiPopoverDisabled()) return;
+		if (!this.overlayRef) this.createOverlay();
+		const overlayRef = this.overlayRef;
+		if (!overlayRef || overlayRef.hasAttached()) return;
+		const portal = new ComponentPortal(PopoverComponent, null, this.injector);
+		const ref = overlayRef.attach(portal);
+		ref.setInput("templateRef", this.uiPopover());
+		ref.setInput("ctx", { close: () => this.close() });
+		ref.setInput("popoverCard", this.popoverCard());
+		ref.setInput("popoverCardSize", this.popoverCardSize());
+		ref.setInput("trapFocus", this.popoverTrigger() === "click");
+		ref.setInput("ariaLabel", this.popoverAriaLabel());
+		if (this.popoverTrigger() === "hover") {
+			const el = overlayRef.overlayElement;
+			const enter = () => this.ngZone.run(() => this.cancelClose());
+			const leave = () => this.ngZone.run(() => this.scheduleClose());
+			el.addEventListener("mouseenter", enter);
+			el.addEventListener("mouseleave", leave);
+			this.overlayListeners = {
+				enter,
+				leave
+			};
+		}
+		this.openState.set(true);
+	}
+	close() {
+		if (!this.overlayRef) return;
+		if (this.overlayListeners) {
+			const el = this.overlayRef.overlayElement;
+			el.removeEventListener("mouseenter", this.overlayListeners.enter);
+			el.removeEventListener("mouseleave", this.overlayListeners.leave);
+			this.overlayListeners = null;
+		}
+		this.overlayRef.detach();
+		this.openState.set(false);
+	}
+	toggle() {
+		if (this.isOpen()) this.close();
+		else this.open();
+	}
+	createOverlay() {
+		const align = this.popoverAlign();
+		const positionStrategy = this.overlay.position().flexibleConnectedTo(this.elementRef).withPositions([{
+			originX: align,
+			originY: "bottom",
+			overlayX: align,
+			overlayY: "top",
+			offsetY: this.popoverOffset()
+		}, {
+			originX: align,
+			originY: "top",
+			overlayX: align,
+			overlayY: "bottom",
+			offsetY: -this.popoverOffset()
+		}]);
+		this.overlayRef = this.overlay.create({
+			positionStrategy,
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			hasBackdrop: false
+		});
+		if (this.popoverTrigger() === "click") this.listenForDismiss(this.overlayRef);
+	}
+	listenForDismiss(overlayRef) {
+		const subscriptions = new Subscription();
+		subscriptions.add(overlayRef.outsidePointerEvents().subscribe((event) => {
+			if (this.elementRef.nativeElement.contains(event.target)) return;
+			this.close();
+		}));
+		subscriptions.add(overlayRef.keydownEvents().subscribe((event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			this.close();
+		}));
+		this.dismissSubscriptions = subscriptions;
+	}
+	scheduleOpen() {
+		this.openTimeout = setTimeout(() => this.open(), 100);
+	}
+	cancelOpen() {
+		if (this.openTimeout) {
+			clearTimeout(this.openTimeout);
+			this.openTimeout = null;
+		}
+	}
+	scheduleClose() {
+		this.closeTimeout = setTimeout(() => this.close(), 150);
+	}
+	cancelClose() {
+		if (this.closeTimeout) {
+			clearTimeout(this.closeTimeout);
+			this.closeTimeout = null;
+		}
+	}
+	ngOnInit() {
+		if (this.popoverOpen()) this.open();
+	}
+	ngOnDestroy() {
+		this.cancelOpen();
+		this.cancelClose();
+		this.close();
+		this.dismissSubscriptions?.unsubscribe();
+		this.overlayRef?.dispose();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PopoverDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.4",
+			type: PopoverDirective,
+			isStandalone: true,
+			selector: "[uiPopover]",
+			inputs: {
+				uiPopover: {
+					classPropertyName: "uiPopover",
+					publicName: "uiPopover",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				popoverOffset: {
+					classPropertyName: "popoverOffset",
+					publicName: "popoverOffset",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverAlign: {
+					classPropertyName: "popoverAlign",
+					publicName: "popoverAlign",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverOpen: {
+					classPropertyName: "popoverOpen",
+					publicName: "popoverOpen",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverCard: {
+					classPropertyName: "popoverCard",
+					publicName: "popoverCard",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverCardSize: {
+					classPropertyName: "popoverCardSize",
+					publicName: "popoverCardSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverTrigger: {
+					classPropertyName: "popoverTrigger",
+					publicName: "popoverTrigger",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				popoverAriaLabel: {
+					classPropertyName: "popoverAriaLabel",
+					publicName: "popoverAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				uiPopoverDisabled: {
+					classPropertyName: "uiPopoverDisabled",
+					publicName: "uiPopoverDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { listeners: {
+				"mouseenter": "onMouseEnter()",
+				"mouseleave": "onMouseLeave()",
+				"click": "onClick()"
+			} },
+			exportAs: ["uiPopover"],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PopoverDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopover]",
+			exportAs: "uiPopover",
+			standalone: true
+		}]
+	}],
+	propDecorators: {
+		uiPopover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiPopover",
+				required: true
+			}]
+		}],
+		popoverOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverOffset",
+				required: false
+			}]
+		}],
+		popoverAlign: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverAlign",
+				required: false
+			}]
+		}],
+		popoverOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverOpen",
+				required: false
+			}]
+		}],
+		popoverCard: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverCard",
+				required: false
+			}]
+		}],
+		popoverCardSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverCardSize",
+				required: false
+			}]
+		}],
+		popoverTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverTrigger",
+				required: false
+			}]
+		}],
+		popoverAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popoverAriaLabel",
+				required: false
+			}]
+		}],
+		uiPopoverDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiPopoverDisabled",
+				required: false
+			}]
+		}],
+		onMouseEnter: [{
+			type: HostListener,
+			args: ["mouseenter"]
+		}],
+		onMouseLeave: [{
+			type: HostListener,
+			args: ["mouseleave"]
+		}],
+		onClick: [{
+			type: HostListener,
+			args: ["click"]
+		}]
+	}
+});
 export { PopoverDirective };
-//# sourceMappingURL=testgorilla-tgo-ui-components-popover.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-popover.mjs.map