@lucca-front/ng 7.2.0 → 8.0.0-alpha.1

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

@@ -0,0 +1,1031 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule, Directive, HostBinding, HostListener } from '@angular/core';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+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 { TemplatePortal } from '@angular/cdk/portal';
+import { generateId } from '@lucca-front/ng/core';
+import { Subject, timer, Subscription } from 'rxjs';
+import { debounce, map, distinctUntilChanged } 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 positiopn 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 */
+    onMouseDown($event) { }
+    _handleKeydown(event) {
+        switch (event.keyCode) {
+            case ESCAPE:
+                this._emitCloseEvent();
+                return;
+        }
+    }
+}
+
+// import { standardPopoverTemplate } from './popover.template';
+class LuPopoverPanelComponent extends ALuPopoverPanel {
+    constructor() {
+        super();
+        /** Event emitted when the popover is closed. */
+        this.close = new EventEmitter();
+        this.open = new EventEmitter();
+        this.hovered = new EventEmitter();
+    }
+    /** 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;
+    }
+    ngOnDestroy() {
+        this.onClose();
+        this.close.complete();
+    }
+    _emitCloseEvent() {
+        this.close.emit();
+    }
+    _emitOpenEvent() {
+        this.open.emit();
+    }
+    _emitHoveredEvent(hovered) {
+        this.hovered.emit(hovered);
+    }
+}
+LuPopoverPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LuPopoverPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuPopoverPanelComponent, 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 class=\"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($event)\"\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", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-popover', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], exportAs: 'LuPopoverPanel', template: "<ng-template>\r\n\t<div class=\"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($event)\"\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 {
+}
+LuPopoverPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuPopoverPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverPanelModule, declarations: [LuPopoverPanelComponent], imports: [CommonModule,
+        OverlayModule,
+        A11yModule], exports: [LuPopoverPanelComponent] });
+LuPopoverPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverPanelModule, imports: [[
+            CommonModule,
+            OverlayModule,
+            A11yModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        A11yModule,
+                    ],
+                    declarations: [
+                        LuPopoverPanelComponent,
+                    ],
+                    exports: [
+                        LuPopoverPanelComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Throws an exception for the case when popover's LuPopoverPosition value isn't valid.
+ */
+function throwLuPopoverInvalidPosition() {
+    throw Error(`LuPopoverPosition value must be 'above', 'below', 'before' or 'after'.
+      Example: <lu-popover [position]="'before'" #popover="LuPopover"></lu-popover>`);
+}
+/**
+ * Throws an exception for the case when popover's LuPopoverAlignement value isn't valid.
+ */
+function throwLuPopoverInvalidAlignement() {
+    throw Error(`LuPopoverAlignment value must be 'top', 'bottom', 'right' or 'left'.
+      Example: <lu-popover [position]="above" [alignment]="left" #popover="LuPopover"></lu-popover>`);
+}
+
+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') {
+            throwLuPopoverInvalidPosition();
+        }
+        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') {
+            throwLuPopoverInvalidAlignement();
+        }
+        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; }
+}
+LuPopoverTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTargetDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+LuPopoverTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LuPopoverTargetDirective, 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: "13.0.2", ngImport: i0, type: LuPopoverTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luPopoverTarget]',
+                    exportAs: 'LuPopoverTarget',
+                }]
+        }], 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 {
+}
+LuPopoverTargetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTargetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuPopoverTargetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTargetModule, declarations: [LuPopoverTargetDirective], imports: [CommonModule,
+        OverlayModule], exports: [LuPopoverTargetDirective] });
+LuPopoverTargetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTargetModule, imports: [[
+            CommonModule,
+            OverlayModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTargetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                    ],
+                    declarations: [
+                        LuPopoverTargetDirective,
+                    ],
+                    exports: [
+                        LuPopoverTargetDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Throws an exception for the case when popover trigger doesn't have a valid lu-popover instance
+ */
+function throwLuPopoverMissingPanelError() {
+    throw Error(`lu-popover-trigger: must pass in a lu-popover instance.
+    Example:
+      <lu-popover #popover="LuPopover"></lu-popover>
+      <button [luPopover]="popover"></button>`);
+}
+function throwLuPopoverMissingTargetError() {
+    throw Error(`lu-popover-trigger: must pass in a popover target instance.`);
+}
+
+// tslint:disable-next-line: max-line-length
+class ALuPopoverTrigger {
+    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._triggerId = `popoverTrigger_${generateId()}`;
+        this._panelId = `popoverPanel_${generateId()}`;
+    }
+    /** 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(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; }
+    onClick() {
+        if (this.triggerEvent === 'click') {
+            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._createOverlay();
+            this._overlayRef.attach(this._portal);
+            /** 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 && 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');
+    }
+    /**
+     * 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 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) {
+            throwLuPopoverMissingPanelError();
+        }
+    }
+    _checkTarget() {
+        if (!this.target) {
+            throwLuPopoverMissingTargetError();
+        }
+    }
+    /**
+     *  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.panel.scrollStrategy;
+        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();
+        }
+    }
+}
+
+/**
+* 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 {
+    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. */
+        this.onOpen = new EventEmitter();
+        /** Event emitted when the associated popover is closed. */
+        this.onClose = new EventEmitter();
+        this.target = new LuPopoverTarget();
+        this.target.elementRef = this._elementRef;
+        this._triggerId = this._elementRef.nativeElement.getAttribute('id') || this._triggerId;
+    }
+    /** 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; }
+    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();
+    }
+}
+LuPopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTriggerDirective, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+LuPopoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LuPopoverTriggerDirective, 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: "13.0.2", ngImport: i0, type: LuPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luPopover]',
+                    exportAs: 'LuPopoverTrigger',
+                }]
+        }], 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 {
+}
+LuPopoverTriggerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuPopoverTriggerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTriggerModule, declarations: [LuPopoverTriggerDirective], imports: [CommonModule,
+        OverlayModule,
+        LuPopoverPanelModule,
+        LuPopoverTargetModule], exports: [LuPopoverTriggerDirective] });
+LuPopoverTriggerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTriggerModule, imports: [[
+            CommonModule,
+            OverlayModule,
+            LuPopoverPanelModule,
+            LuPopoverTargetModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverTriggerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        LuPopoverPanelModule,
+                        LuPopoverTargetModule,
+                    ],
+                    declarations: [
+                        LuPopoverTriggerDirective,
+                    ],
+                    exports: [
+                        LuPopoverTriggerDirective,
+                    ],
+                }]
+        }] });
+
+class LuPopoverModule {
+}
+LuPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelModule,
+        LuPopoverTargetModule,
+        LuPopoverTriggerModule], exports: [LuPopoverPanelModule,
+        LuPopoverTargetModule,
+        LuPopoverTriggerModule] });
+LuPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverModule, imports: [[
+            LuPopoverPanelModule,
+            LuPopoverTargetModule,
+            LuPopoverTriggerModule,
+        ], LuPopoverPanelModule,
+        LuPopoverTargetModule,
+        LuPopoverTriggerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuPopoverPanelModule,
+                        LuPopoverTargetModule,
+                        LuPopoverTriggerModule,
+                    ],
+                    exports: [
+                        LuPopoverPanelModule,
+                        LuPopoverTargetModule,
+                        LuPopoverTriggerModule,
+                    ],
+                }]
+        }] });
+
+/*
+ * 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