@lucca-front/ng 15.3.0 → 16.0.0

package/fesm2022/lucca-front-ng-popover.mjs

@@ -0,0 +1,1087 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule, Directive, HostBinding, HostListener } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { generateId } from '@lucca-front/ng/core';
+import { timer, Subject, Subscription } from 'rxjs';
+import { distinctUntilChanged, debounce, map } from 'rxjs/operators';
+
+const luTransformPopover = trigger('transformPopover', [
+    state('enter', style({
+        opacity: 1,
+        transform: `scale(1)`,
+    })),
+    transition('void => *', [
+        style({
+            opacity: 0,
+            transform: `scale(0)`,
+        }),
+        animate(`150ms cubic-bezier(0.25, 0.8, 0.25, 1)`),
+    ]),
+    transition('* => void', [animate('50ms 100ms linear', style({ opacity: 0 }))]),
+]);
+
+/**
+ * abstract class for basic implementation of a popover panel
+ */
+class ALuPopoverPanel {
+    constructor() {
+        this._closeOnClick = false;
+        this._trapFocus = false;
+        this._scrollStrategy = 'reposition';
+        this._positionClassesMap = {};
+        this._panelClasses = '';
+        this._contentClasses = '';
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    get closeOnClick() {
+        return this._closeOnClick;
+    }
+    set closeOnClick(coc) {
+        this._closeOnClick = coc;
+    }
+    get trapFocus() {
+        return this._trapFocus;
+    }
+    set trapFocus(tf) {
+        this._trapFocus = tf;
+    }
+    get scrollStrategy() {
+        return this._scrollStrategy;
+    }
+    set scrollStrategy(ss) {
+        this._scrollStrategy = ss;
+    }
+    get templateRef() {
+        return this._templateRef;
+    }
+    set templateRef(tr) {
+        this._templateRef = tr;
+    }
+    get panelClasses() {
+        return this._panelClasses;
+    }
+    set panelClasses(cl) {
+        this._panelClasses = cl;
+    }
+    get panelClassesMap() {
+        const map = this._panelClasses
+            .split(' ')
+            .filter((c) => !!c)
+            .reduce((obj, className) => {
+            obj[className] = true;
+            return obj;
+        }, {});
+        // also add position classes
+        return { ...map, ...this._positionClassesMap };
+    }
+    get contentClasses() {
+        return this._contentClasses;
+    }
+    set contentClasses(cl) {
+        this._contentClasses = cl;
+    }
+    get contentClassesMap() {
+        return this._contentClasses.split(' ').reduce((obj, className) => {
+            obj[className] = true;
+            return obj;
+        }, {});
+    }
+    get overlayPaneClass() {
+        return this._overlayPaneClass;
+    }
+    set overlayPaneClass(opc) {
+        this._overlayPaneClass = opc;
+    }
+    set keydownEvents$(evt$) {
+        if (!this._keydownEventsSub) {
+            this._keydownEventsSub = evt$.subscribe((e) => this._handleKeydown(e));
+        }
+    }
+    setPositionClasses(posX, posY) {
+        this._positionClassesMap['is-before'] = posX === 'end';
+        this._positionClassesMap['is-after'] = posX === 'start';
+        this._positionClassesMap['is-above'] = posY === 'bottom';
+        this._positionClassesMap['is-below'] = posY === 'top';
+    }
+    onClick() {
+        if (this.closeOnClick) {
+            this._emitCloseEvent();
+        }
+    }
+    onOpen() {
+        this._isOpen = true;
+    }
+    onClose() {
+        this._isOpen = false;
+    }
+    /**
+     * TODO: Refactor when @angular/cdk includes feature I mentioned on github see link below.
+     * https://github.com/angular/material2/pull/5493#issuecomment-313085323
+     */
+    /** Disables close of popover when leaving trigger element and mouse over the popover */
+    onMouseOver() {
+        this._emitHoveredEvent(true);
+    }
+    /** Enables close of popover when mouse leaving popover element */
+    onMouseLeave() {
+        this._emitHoveredEvent(false);
+    }
+    /** does nothing but must be overridable */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onMouseDown() { }
+    _handleKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this._emitCloseEvent();
+                return;
+        }
+    }
+}
+
+// import { standardPopoverTemplate } from './popover.template';
+class LuPopoverPanelComponent extends ALuPopoverPanel {
+    /** Template to Use for the popover */
+    get template() {
+        return this._template;
+    }
+    set template(value) {
+        this._template = value;
+    }
+    /** Template context to use for the popover when created using a template */
+    get templateContext() {
+        return this._templateContext;
+    }
+    set templateContext(value) {
+        this._templateContext = value;
+    }
+    /**
+     * Popover container close on click
+     * default: false
+     */
+    set inputCloseOnClick(v) {
+        this.closeOnClick = v;
+    }
+    /**
+     * Popover focus trap using cdkTrapFocus
+     * default: false
+     */
+    set inputTrapFocus(v) {
+        this.trapFocus = v;
+    }
+    /**
+     * Popover scrollStrategy
+     * default: reposition
+     */
+    set inputScrollStrategy(v) {
+        this.scrollStrategy = v;
+    }
+    /**
+     * This method takes classes set on the host lu-popover element and applies them on the
+     * popover template that displays in the overlay container.  Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @param classes list of class names
+     */
+    set inputPanelClasses(classes) {
+        this.panelClasses = classes;
+    }
+    /**
+     * This method takes classes set on the host lu-popover element and applies them on the
+     * popover template that displays in the overlay container. Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @param classes list of class names
+     */
+    set inputContentClasses(classes) {
+        this.contentClasses = classes;
+    }
+    set vcTemplateRef(tr) {
+        this.templateRef = tr;
+    }
+    constructor() {
+        super();
+        /** Event emitted when the popover is closed. */
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.close = new EventEmitter();
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.open = new EventEmitter();
+        this.hovered = new EventEmitter();
+    }
+    ngOnDestroy() {
+        this.onClose();
+        this.close.complete();
+    }
+    _emitCloseEvent() {
+        this.close.emit();
+    }
+    _emitOpenEvent() {
+        this.open.emit();
+    }
+    _emitHoveredEvent(hovered) {
+        this.hovered.emit(hovered);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: LuPopoverPanelComponent, isStandalone: true, selector: "lu-popover", inputs: { template: "template", templateContext: ["template-context", "templateContext"], inputCloseOnClick: ["close-on-click", "inputCloseOnClick"], inputTrapFocus: ["trap-focus", "inputTrapFocus"], inputScrollStrategy: ["scroll-strategy", "inputScrollStrategy"], inputPanelClasses: ["panel-classes", "inputPanelClasses"], inputContentClasses: ["content-classes", "inputContentClasses"] }, outputs: { close: "close", open: "open", hovered: "hovered" }, viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["LuPopoverPanel"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-popover-panel\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(keydown)=\"_handleKeydown($event)\"\r\n\t\t(click)=\"onClick()\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t(mousedown)=\"onMouseDown()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[attr.aria-labelledby]=\"triggerId\"\r\n\t\t[@transformPopover]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-popover-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\r\n\t\t\t<ng-content></ng-content><ng-container *ngTemplateOutlet=\"template; context: templateContext\"></ng-container>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-popover', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], standalone: true, imports: [CommonModule, OverlayModule, A11yModule], exportAs: 'LuPopoverPanel', template: "<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-popover-panel\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(keydown)=\"_handleKeydown($event)\"\r\n\t\t(click)=\"onClick()\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t(mousedown)=\"onMouseDown()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[attr.aria-labelledby]=\"triggerId\"\r\n\t\t[@transformPopover]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-popover-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\r\n\t\t\t<ng-content></ng-content><ng-container *ngTemplateOutlet=\"template; context: templateContext\"></ng-container>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { template: [{
+                type: Input
+            }], templateContext: [{
+                type: Input,
+                args: ['template-context']
+            }], inputCloseOnClick: [{
+                type: Input,
+                args: ['close-on-click']
+            }], inputTrapFocus: [{
+                type: Input,
+                args: ['trap-focus']
+            }], inputScrollStrategy: [{
+                type: Input,
+                args: ['scroll-strategy']
+            }], inputPanelClasses: [{
+                type: Input,
+                args: ['panel-classes']
+            }], inputContentClasses: [{
+                type: Input,
+                args: ['content-classes']
+            }], close: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], hovered: [{
+                type: Output
+            }], vcTemplateRef: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class LuPopoverPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverPanelModule, imports: [LuPopoverPanelComponent], exports: [LuPopoverPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverPanelModule, imports: [LuPopoverPanelComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuPopoverPanelComponent],
+                    exports: [LuPopoverPanelComponent],
+                }]
+        }] });
+
+class ALuPopoverTarget {
+    constructor() {
+        this._position = 'below';
+        this._alignment = 'center';
+        this._overlap = false;
+        this._offsetX = 0;
+        this._offsetY = 0;
+    }
+    /** the element used to position the panel */
+    get elementRef() {
+        return this._elementRef;
+    }
+    set elementRef(ref) {
+        this._elementRef = ref;
+    }
+    /** how you want to position the panel relative to the target, allowed values: above, below, before, after */
+    get position() {
+        return this._position;
+    }
+    set position(position) {
+        if (position !== 'above' && position !== 'below' && position !== 'after' && position !== 'before') {
+            throw Error(`LuPopoverPosition value must be 'above', 'below', 'before' or 'after'. Got "${position}".
+      Example: <lu-popover [position]="'before'" #popover="LuPopover"></lu-popover>`);
+        }
+        this._position = position;
+        // this.setPositionClasses(this._position, this._alignment);
+    }
+    /** how the panel will be align with the target, allowed values: top, bottom, left, right */
+    get alignment() {
+        return this._alignment;
+    }
+    set alignment(alignment) {
+        if (alignment !== 'center' && alignment !== 'top' && alignment !== 'bottom' && alignment !== 'right' && alignment !== 'left') {
+            throw Error(`LuPopoverAlignment value must be 'top', 'bottom', 'right' or 'left'. Got "${alignment}".
+      Example: <lu-popover [position]="above" [alignment]="left" #popover="LuPopover"></lu-popover>`);
+        }
+        this._alignment = alignment;
+        // this.setPositionClasses(this._position, this._alignment);
+    }
+    /** set to true if you want the panel to appear on top of the target */
+    get overlap() {
+        return this._overlap;
+    }
+    set overlap(ot) {
+        this._overlap = ot;
+    }
+    get offsetX() {
+        return this._offsetX;
+    }
+    set offsetX(ox) {
+        this._offsetX = ox;
+    }
+    get offsetY() {
+        return this._offsetY;
+    }
+    set offsetY(oy) {
+        this._offsetY = oy;
+    }
+}
+class LuPopoverTarget extends ALuPopoverTarget {
+    constructor() {
+        super();
+    }
+}
+
+class LuPopoverTargetDirective extends ALuPopoverTarget {
+    constructor(ref) {
+        super();
+        this.elementRef = ref;
+    }
+    /** how you want to position the panel relative to the target, allowed values: above, below, before, after */
+    set inputPosition(pos) {
+        this.position = pos;
+    }
+    /** how the panel will be align with the target, allowed values: top, bottom, left, right */
+    set inputAlignment(al) {
+        this.alignment = al;
+    }
+    /** set to true if you want the panel to appear on top of the target */
+    set inputOverlap(ov) {
+        this.overlap = ov;
+    }
+    set inputOffsetX(ox) {
+        this.offsetX = ox;
+    }
+    set inputOffsetY(oy) {
+        this.offsetY = oy;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTargetDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: LuPopoverTargetDirective, isStandalone: true, selector: "[luPopoverTarget]", inputs: { inputPosition: ["luPopoverPosition", "inputPosition"], inputAlignment: ["luPopoverAlignment", "inputAlignment"], inputOverlap: ["luPopoverOverlap", "inputOverlap"], inputOffsetX: ["luPopoverOffsetX", "inputOffsetX"], inputOffsetY: ["luPopoverOffsetY", "inputOffsetY"] }, exportAs: ["LuPopoverTarget"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luPopoverTarget]',
+                    exportAs: 'LuPopoverTarget',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { inputPosition: [{
+                type: Input,
+                args: ['luPopoverPosition']
+            }], inputAlignment: [{
+                type: Input,
+                args: ['luPopoverAlignment']
+            }], inputOverlap: [{
+                type: Input,
+                args: ['luPopoverOverlap']
+            }], inputOffsetX: [{
+                type: Input,
+                args: ['luPopoverOffsetX']
+            }], inputOffsetY: [{
+                type: Input,
+                args: ['luPopoverOffsetY']
+            }] } });
+
+class LuPopoverTargetModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTargetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTargetModule, imports: [LuPopoverTargetDirective], exports: [LuPopoverTargetDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTargetModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTargetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuPopoverTargetDirective],
+                    exports: [LuPopoverTargetDirective],
+                }]
+        }] });
+
+// tslint:disable-next-line: max-line-length
+class ALuPopoverTrigger {
+    /** References the popover instance that the trigger is associated with. */
+    get panel() {
+        return this._panel;
+    }
+    set panel(p) {
+        this._panel = p;
+    }
+    /** References the popover target instance that the trigger is associated with. */
+    get target() {
+        return this._target;
+    }
+    set target(t) {
+        this._target = t;
+    }
+    get triggerEvent() {
+        return this._triggerEvent;
+    }
+    set triggerEvent(te) {
+        this._triggerEvent = te;
+        if (te === 'hover' || te === 'focus') {
+            if (this._hoveredSubscription) {
+                this._hoveredSubscription.unsubscribe();
+            }
+            this._hoveredSubscription = this._hovered$
+                .pipe(distinctUntilChanged(), debounce((h) => (h ? timer(this.enterDelay) : timer(this.leaveDelay))))
+                .subscribe((h) => (h ? this.openPopover() : this.closePopover()));
+        }
+    }
+    get enterDelay() {
+        return this._enterDelay;
+    }
+    set enterDelay(d) {
+        this._enterDelay = d;
+    }
+    get leaveDelay() {
+        return this._leaveDelay;
+    }
+    set leaveDelay(d) {
+        this._leaveDelay = d;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(d) {
+        this._disabled = d;
+    }
+    get whenEllipsis() {
+        return this._whenEllipsis;
+    }
+    set whenEllipsis(we) {
+        this._whenEllipsis = we;
+    }
+    constructor(_overlay, _elementRef, _viewContainerRef) {
+        this._overlay = _overlay;
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._overlayRef = null;
+        this._popoverOpen = false;
+        this._hovered$ = new Subject();
+        // tracking input type is necessary so it's possible to only auto-focus
+        // the first item of the list when the popover is opened via the keyboard
+        this._openedByMouse = false;
+        this._triggerEvent = 'click';
+        this._enterDelay = 50;
+        this._leaveDelay = 50;
+        this._disabled = false;
+        this._whenEllipsis = false;
+        this._triggerId = `popoverTrigger_${generateId()}`;
+        this._panelId = `popoverPanel_${generateId()}`;
+    }
+    onClick() {
+        if (this.triggerEvent === 'click' && !this.disabled) {
+            this.togglePopover();
+        }
+    }
+    onMouseEnter() {
+        if (this.triggerEvent === 'hover' || this.triggerEvent === 'focus') {
+            this._hovered$.next(true);
+        }
+    }
+    onMouseLeave() {
+        if (this.triggerEvent === 'hover' || this.triggerEvent === 'focus') {
+            this._hovered$.next(false);
+        }
+    }
+    onFocus() {
+        if (this.triggerEvent === 'hover' || this.triggerEvent === 'focus') {
+            this.openPopover();
+        }
+    }
+    onBlur() {
+        if (this.triggerEvent === 'hover' || this.triggerEvent === 'focus') {
+            this.closePopover();
+        }
+    }
+    /** Toggles the popover between the open and closed states. */
+    togglePopover() {
+        return this._popoverOpen ? this.closePopover() : this.openPopover();
+    }
+    /** Opens the popover. */
+    openPopover() {
+        if (!this._popoverOpen && !this._disabled && (!this._whenEllipsis || this._hasEllipsis())) {
+            this._createOverlay();
+            this._attachPortalToOverlay();
+            /** Only subscribe to overlay detachments if trigger event is hover or focus */
+            if (this.triggerEvent === 'hover' || this.triggerEvent === 'focus') {
+                this._subscribeToOverlayDetachments();
+            }
+            /** Only subscribe to backdrop if trigger event is click */
+            if (this.triggerEvent === 'click') {
+                this._subscribeToBackdrop();
+            }
+            /** Only subscribe to mouse enter/leave of the panel if trigger = hover */
+            this._initPopover();
+            this._emitOpen();
+        }
+    }
+    /** Closes the popover. */
+    closePopover() {
+        if (this._overlayRef) {
+            /** Overlay can still be attached if close has been triggered by mouse leave. */
+            if (this._overlayRef.hasAttached()) {
+                this._overlayRef.detach();
+            }
+            /** unsubscribe to backdrop click if it was defined */
+            if (this._backdropSubscription) {
+                // if (this.popover.triggerEvent === 'click') {
+                this._backdropSubscription.unsubscribe();
+            }
+            this._resetPopover();
+            this._emitClose();
+        }
+    }
+    /** Removes the popover from the DOM. */
+    destroyPopover() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+            this._cleanUpSubscriptions();
+        }
+    }
+    /** Focuses the popover trigger. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    _handleMousedown(event) {
+        if (!isFakeMousedownFromScreenReader(event)) {
+            this._openedByMouse = true;
+        }
+    }
+    /** The text direction of the containing app. */
+    get dir() {
+        // return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+        return 'ltr';
+    }
+    /** Return if the popover main positionning is vertical */
+    get isVerticallyPositionned() {
+        const position = this.target.position;
+        return position === 'below' || position === 'above';
+    }
+    _attachPortalToOverlay() {
+        this._overlayRef.attach(this._portal);
+    }
+    _getPanelScrollStrategy() {
+        return this.panel.scrollStrategy;
+    }
+    /**
+     * This method ensures that the popover
+     */
+    _subscribeToPanelEvents() {
+        if (this._overlayRef) {
+            this._panelEventsSubscriptions = new Subscription();
+            if (this.triggerEvent === 'hover' || this.triggerEvent === 'focus') {
+                this._panelEventsSubscriptions.add(this.panel.hovered.subscribe((hovered) => {
+                    this._hovered$.next(hovered);
+                }));
+            }
+            this._panelEventsSubscriptions.add(this.panel.close.subscribe(() => {
+                this.closePopover();
+            }));
+            this._panelEventsSubscriptions.add(this.panel.open.subscribe(() => {
+                this.openPopover();
+            }));
+        }
+    }
+    /**
+     * This method ensures that the popover closes when the overlay has been detached
+     * Detach can occur if we scroll while popover is opened
+     */
+    _subscribeToOverlayDetachments() {
+        if (this._overlayRef) {
+            this._overlayDetachmentsSubscription = this._overlayRef.detachments().subscribe(() => {
+                this._hovered$.next(false);
+            });
+        }
+    }
+    /**
+     * This method ensures that the popover closes when the overlay backdrop is clicked.
+     * We do not use first() here because doing so would not catch clicks from within
+     * the popover, and it would fail to unsubscribe properly. Instead, we unsubscribe
+     * explicitly when the popover is closed or destroyed.
+     */
+    _subscribeToBackdrop() {
+        if (this._overlayRef) {
+            this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => {
+                this.closePopover();
+            });
+        }
+    }
+    /**
+     * This method sets the popover state to open and focuses the first item if
+     * the popover was opened via the keyboard.
+     */
+    _initPopover() {
+        this._setIsPopoverOpen(true);
+        this.panel.panelId = this._panelId;
+        this.panel.triggerId = this._triggerId;
+        this.panel.keydownEvents$ = this._overlayRef.keydownEvents();
+        this._subscribeToPanelEvents();
+    }
+    /**
+     * This method resets the popover when it's closed, most importantly restoring
+     * focus to the popover trigger if the popover was opened via the keyboard.
+     */
+    _resetPopover() {
+        this._setIsPopoverOpen(false);
+        // Focus only needs to be reset to the host element if the popover was opened
+        // by the keyboard and manually shifted to the first popover item.
+        if (!this._openedByMouse && this.triggerEvent === 'click') {
+            this.focus();
+        }
+        this._openedByMouse = false;
+    }
+    /** set state rather than toggle to support triggers sharing a popover */
+    _setIsPopoverOpen(isOpen) {
+        this._popoverOpen = isOpen;
+        // tell the panel it's opening/closing
+        isOpen ? this.panel.onOpen() : this.panel.onClose();
+    }
+    /**
+     *  This method checks that a valid instance of MdPopover has been passed into
+     *  mdPopoverTriggerFor. If not, an exception is thrown.
+     */
+    _checkPanel() {
+        if (!this.panel) {
+            throw Error(`lu-popover-trigger: must pass in a lu-popover instance.
+      Example:
+      <lu-popover #popover="LuPopover"></lu-popover>
+      <button type="button" [luPopover]="popover"></button>`);
+        }
+    }
+    _checkTarget() {
+        if (!this.target) {
+            throw Error(`lu-popover-trigger: must pass in a popover target instance.`);
+        }
+    }
+    /**
+     *  This method creates the overlay from the provided popover's template and saves its
+     *  OverlayRef so that it can be attached to the DOM when openPopover is called.
+     */
+    _createOverlay() {
+        if (!this._overlayRef) {
+            this._portal = new TemplatePortal(this.panel.templateRef, this._viewContainerRef);
+            const config = this._getOverlayConfig();
+            this._subscribeToPositions(config.positionStrategy);
+            this._overlayRef = this._overlay.create(config);
+        }
+        return this._overlayRef;
+    }
+    /**
+     * This method builds the configuration object needed to create the overlay, the OverlayConfig.
+     * @returns OverlayConfig
+     */
+    _getOverlayConfig() {
+        const overlayState = new OverlayConfig();
+        overlayState.positionStrategy = this._getPosition();
+        /** Display overlay backdrop if trigger event is click */
+        if (this.triggerEvent === 'click') {
+            overlayState.hasBackdrop = true;
+            overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
+        }
+        overlayState.direction = this.dir;
+        const scrollStrategy = this._getPanelScrollStrategy();
+        switch (scrollStrategy) {
+            case 'block':
+                overlayState.scrollStrategy = this._overlay.scrollStrategies.block();
+                break;
+            case 'close':
+                overlayState.scrollStrategy = this._overlay.scrollStrategies.close();
+                break;
+            default:
+                overlayState.scrollStrategy = this._overlay.scrollStrategies.reposition();
+                break;
+        }
+        return overlayState;
+    }
+    /**
+     * Listens to changes in the position of the overlay and sets the correct classes
+     * on the popover based on the new position. This ensures the animation origin is always
+     * correct, even if a fallback position is used for the overlay.
+     */
+    _subscribeToPositions(position) {
+        this._positionSubscription = position.positionChanges
+            .pipe(map((c) => c.connectionPair), distinctUntilChanged())
+            .subscribe((connectionPair) => {
+            this.panel.setPositionClasses(connectionPair.overlayX, connectionPair.overlayY);
+        });
+    }
+    /**
+     * This method builds the position strategy for the overlay, so the popover is properly connected
+     * to the trigger.
+     * @returns FlexibleConnectedPositionStrategy
+     */
+    _getPosition() {
+        /**
+         * For overriding position element, when LuPopoverTargetAt has a valid element reference.
+         * Useful for sticking popover to parent element and offsetting arrow to trigger element.
+         * If undefined defaults to the trigger element reference.
+         */
+        const element = this.target.elementRef;
+        // if (typeof this.targetElement !== 'undefined' && this.popover) {
+        // 	this.popover.containerPositioning = true;
+        // 	element = this.targetElement._elementRef;
+        // }
+        const connectionPosition = {
+            originX: 'start',
+            originY: 'top',
+        };
+        // Position
+        const position = this.target.position;
+        const overlap = this.target.overlap;
+        if (position === 'above') {
+            connectionPosition.originY = overlap ? 'bottom' : 'top';
+        }
+        else if (position === 'below') {
+            connectionPosition.originY = overlap ? 'top' : 'bottom';
+        }
+        else if (position === 'before') {
+            connectionPosition.originX = overlap ? 'end' : 'start';
+        }
+        else if (position === 'after') {
+            connectionPosition.originX = overlap ? 'start' : 'end';
+        }
+        // Alignment
+        const alignment = this.target.alignment;
+        if (this.isVerticallyPositionned) {
+            if (alignment === 'left') {
+                connectionPosition.originX = 'start';
+            }
+            else if (alignment === 'right') {
+                connectionPosition.originX = 'end';
+            }
+            else {
+                connectionPosition.originX = 'center';
+            }
+        }
+        else {
+            if (alignment === 'top') {
+                connectionPosition.originY = 'top';
+            }
+            else if (alignment === 'bottom') {
+                connectionPosition.originY = 'bottom';
+            }
+            else {
+                connectionPosition.originY = 'center';
+            }
+        }
+        const overlayPosition = {
+            overlayX: 'start',
+            overlayY: 'top',
+        };
+        if (overlap) {
+            overlayPosition.overlayX = connectionPosition.originX;
+            overlayPosition.overlayY = connectionPosition.originY;
+        }
+        else if (this.isVerticallyPositionned) {
+            overlayPosition.overlayX = connectionPosition.originX;
+            overlayPosition.overlayY = position === 'above' ? 'bottom' : 'top';
+        }
+        else {
+            overlayPosition.overlayX = position === 'before' ? 'end' : 'start';
+            overlayPosition.overlayY = connectionPosition.originY;
+        }
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(element)
+            .withPositions([
+            {
+                originX: connectionPosition.originX,
+                originY: connectionPosition.originY,
+                overlayX: overlayPosition.overlayX,
+                overlayY: overlayPosition.overlayY,
+            },
+            {
+                originX: connectionPosition.originX,
+                originY: this._invertVerticalPos(connectionPosition.originY),
+                overlayX: overlayPosition.overlayX,
+                overlayY: this._invertVerticalPos(overlayPosition.overlayY),
+            },
+            {
+                originX: this._invertHorizontalPos(connectionPosition.originX),
+                originY: connectionPosition.originY,
+                overlayX: this._invertHorizontalPos(overlayPosition.overlayX),
+                overlayY: overlayPosition.overlayY,
+            },
+            {
+                originX: this._invertHorizontalPos(connectionPosition.originX),
+                originY: this._invertVerticalPos(connectionPosition.originY),
+                overlayX: this._invertHorizontalPos(overlayPosition.overlayX),
+                overlayY: this._invertVerticalPos(overlayPosition.overlayY),
+            },
+        ])
+            .withDefaultOffsetX(this.target.offsetX)
+            .withDefaultOffsetY(this.target.offsetY);
+    }
+    _invertVerticalPos(y) {
+        if (y === 'top') {
+            y = 'bottom';
+        }
+        else if (y === 'bottom') {
+            y = 'top';
+        }
+        return y;
+    }
+    _invertHorizontalPos(x) {
+        if (x === 'end') {
+            x = 'start';
+        }
+        else if (x === 'start') {
+            x = 'end';
+        }
+        return x;
+    }
+    _cleanUpSubscriptions() {
+        if (this._backdropSubscription) {
+            this._backdropSubscription.unsubscribe();
+        }
+        if (this._positionSubscription) {
+            this._positionSubscription.unsubscribe();
+        }
+        if (this._hoveredSubscription) {
+            this._hoveredSubscription.unsubscribe();
+        }
+        if (this._panelEventsSubscriptions) {
+            this._panelEventsSubscriptions.unsubscribe();
+        }
+        if (this._overlayDetachmentsSubscription) {
+            this._overlayDetachmentsSubscription.unsubscribe();
+        }
+    }
+    _hasEllipsis() {
+        if (!(this._elementRef.nativeElement instanceof HTMLElement)) {
+            return false;
+        }
+        const { scrollWidth, scrollHeight, clientWidth, clientHeight } = this._elementRef.nativeElement;
+        const textClampedByWidth = scrollWidth > clientWidth;
+        const textClampedByHeight = scrollHeight > clientHeight;
+        return textClampedByWidth || textClampedByHeight;
+    }
+}
+
+/**
+ * This directive is intended to be used in conjunction with an lu-popover tag.  It is
+ * responsible for toggling the display of the provided popover instance.
+ */
+class LuPopoverTriggerDirective extends ALuPopoverTrigger {
+    /** References the popover instance that the trigger is associated with. */
+    set inputPanel(p) {
+        this.panel = p;
+    }
+    /** References the popover target instance that the trigger is associated with. */
+    set inputTarget(t) {
+        this.target = t;
+    }
+    /** References the popover target instance that the trigger is associated with. */
+    set inputTriggerEvent(te) {
+        this.triggerEvent = te;
+    }
+    /** how you want to position the panel relative to the target, allowed values: above, below, before, after */
+    set inputPosition(pos) {
+        this.target.position = pos;
+    }
+    /** how the panel will be align with the target, allowed values: top, bottom, left, right */
+    set inputAlignment(al) {
+        this.target.alignment = al;
+    }
+    /** when trigger = hover, delay before the popover panel appears */
+    set inputEnterDelay(d) {
+        this.enterDelay = d;
+    }
+    /** when trigger = hover, delay before the popover panel disappears */
+    set inputLeaveDelay(d) {
+        this.leaveDelay = d;
+    }
+    /** disable popover apparition */
+    set inputDisabled(d) {
+        this.disabled = d;
+    }
+    /** set to true if you want the panel to appear on top of the target */
+    set inputOverlap(ov) {
+        this.target.overlap = ov;
+    }
+    set inputOffsetX(ox) {
+        this.target.offsetX = ox;
+    }
+    set inputOffsetY(oy) {
+        this.target.offsetY = oy;
+    }
+    /** accessibility attribute - dont override */
+    get _attrAriaExpanded() {
+        return this._popoverOpen;
+    }
+    /** accessibility attribute - dont override */
+    get _attrId() {
+        return this._triggerId;
+    }
+    /** accessibility attribute - dont override */
+    get _attrAriaControls() {
+        return this._panelId;
+    }
+    constructor(_overlay, _elementRef, _viewContainerRef) {
+        super(_overlay, _elementRef, _viewContainerRef);
+        this._overlay = _overlay;
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        /** Event emitted when the associated popover is opened. */
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onOpen = new EventEmitter();
+        /** Event emitted when the associated popover is closed. */
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onClose = new EventEmitter();
+        this.target = new LuPopoverTarget();
+        this.target.elementRef = this._elementRef;
+        this._triggerId = this._elementRef.nativeElement.getAttribute('id') || this._triggerId;
+    }
+    onClick() {
+        super.onClick();
+    }
+    onMouseEnter() {
+        super.onMouseEnter();
+    }
+    onMouseLeave() {
+        super.onMouseLeave();
+    }
+    onFocus() {
+        super.onFocus();
+    }
+    onBlur() {
+        super.onBlur();
+    }
+    ngAfterViewInit() {
+        this._checkPanel();
+        this._checkTarget();
+    }
+    ngOnDestroy() {
+        this._cleanUpSubscriptions();
+        if (this._popoverOpen) {
+            this.closePopover();
+        }
+        this.destroyPopover();
+    }
+    _emitOpen() {
+        this.onOpen.emit();
+    }
+    _emitClose() {
+        this.onClose.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTriggerDirective, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: LuPopoverTriggerDirective, isStandalone: true, selector: "[luPopover]", inputs: { inputPanel: ["luPopover", "inputPanel"], inputTarget: ["luPopoverTarget", "inputTarget"], inputTriggerEvent: ["luPopoverTrigger", "inputTriggerEvent"], inputPosition: ["luPopoverPosition", "inputPosition"], inputAlignment: ["luPopoverAlignment", "inputAlignment"], inputEnterDelay: ["luPopoverEnterDelay", "inputEnterDelay"], inputLeaveDelay: ["luPopoverLeaveDelay", "inputLeaveDelay"], inputDisabled: ["luPopoverDisabled", "inputDisabled"], inputOverlap: ["luPopoverOverlap", "inputOverlap"], inputOffsetX: ["luPopoverOffsetX", "inputOffsetX"], inputOffsetY: ["luPopoverOffsetY", "inputOffsetY"] }, outputs: { onOpen: "luPopoverOnOpen", onClose: "luPopoverOnClose" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-expanded": "this._attrAriaExpanded", "attr.id": "this._attrId", "attr.aria-controls": "this._attrAriaControls" } }, exportAs: ["LuPopoverTrigger"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luPopover]',
+                    exportAs: 'LuPopoverTrigger',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { inputPanel: [{
+                type: Input,
+                args: ['luPopover']
+            }], inputTarget: [{
+                type: Input,
+                args: ['luPopoverTarget']
+            }], inputTriggerEvent: [{
+                type: Input,
+                args: ['luPopoverTrigger']
+            }], onOpen: [{
+                type: Output,
+                args: ['luPopoverOnOpen']
+            }], onClose: [{
+                type: Output,
+                args: ['luPopoverOnClose']
+            }], inputPosition: [{
+                type: Input,
+                args: ['luPopoverPosition']
+            }], inputAlignment: [{
+                type: Input,
+                args: ['luPopoverAlignment']
+            }], inputEnterDelay: [{
+                type: Input,
+                args: ['luPopoverEnterDelay']
+            }], inputLeaveDelay: [{
+                type: Input,
+                args: ['luPopoverLeaveDelay']
+            }], inputDisabled: [{
+                type: Input,
+                args: ['luPopoverDisabled']
+            }], inputOverlap: [{
+                type: Input,
+                args: ['luPopoverOverlap']
+            }], inputOffsetX: [{
+                type: Input,
+                args: ['luPopoverOffsetX']
+            }], inputOffsetY: [{
+                type: Input,
+                args: ['luPopoverOffsetY']
+            }], _attrAriaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], _attrId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], _attrAriaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class LuPopoverTriggerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTriggerModule, imports: [LuPopoverTriggerDirective, OverlayModule], exports: [LuPopoverTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTriggerModule, imports: [OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverTriggerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuPopoverTriggerDirective, OverlayModule],
+                    exports: [LuPopoverTriggerDirective],
+                }]
+        }] });
+
+class LuPopoverModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective], exports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: LuPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective],
+                    exports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective],
+                }]
+        }] });
+
+/*
+ * Public API Surface of safe-content
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALuPopoverPanel, ALuPopoverTarget, ALuPopoverTrigger, LuPopoverModule, LuPopoverPanelComponent, LuPopoverPanelModule, LuPopoverTarget, LuPopoverTargetDirective, LuPopoverTargetModule, LuPopoverTriggerDirective, LuPopoverTriggerModule, luTransformPopover };
+//# sourceMappingURL=lucca-front-ng-popover.mjs.map