@lucca-front/ng 22.0.0-rc.2 → 22.0.0-rc.3

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

@@ -5,10 +5,9 @@ import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, EventEmitter, viewChild, TemplateRef, ChangeDetectionStrategy, Component, NgModule, Directive } from '@angular/core';
-import { outputFromObservable } from '@angular/core/rxjs-interop';
-import { syncInputSignal, ɵeffectWithDeps as _effectWithDeps, isNotNil, generateId } from '@lucca-front/ng/core';
+import { EventEmitter, TemplateRef, ViewChild, Output, Input, ChangeDetectionStrategy, Component, NgModule, Directive, HostListener, HostBinding } 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';
 
@@ -148,63 +147,69 @@ class ALuPopoverPanel {
 
 // 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();
-        /** Template to Use for the popover */
-        this.template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
-        /** Template context to use for the popover when created using a template */
-        this.templateContext = input(undefined, { ...(ngDevMode ? { debugName: "templateContext" } : /* istanbul ignore next */ {}), alias: 'template-context' });
-        /**
-         * Popover container close on click
-         * default: false
-         */
-        this.inputCloseOnClick = input(false, { ...(ngDevMode ? { debugName: "inputCloseOnClick" } : /* istanbul ignore next */ {}), alias: 'close-on-click' });
-        /**
-         * Popover focus trap using cdkTrapFocus
-         * default: false
-         */
-        this.inputTrapFocus = input(false, { ...(ngDevMode ? { debugName: "inputTrapFocus" } : /* istanbul ignore next */ {}), alias: 'trap-focus' });
-        /**
-         * Popover scrollStrategy
-         * default: reposition
-         */
-        this.inputScrollStrategy = input('reposition', { ...(ngDevMode ? { debugName: "inputScrollStrategy" } : /* istanbul ignore next */ {}), alias: 'scroll-strategy' });
-        /**
-         * 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
-         */
-        this.inputPanelClasses = input('', { ...(ngDevMode ? { debugName: "inputPanelClasses" } : /* istanbul ignore next */ {}), alias: 'panel-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
-         */
-        this.inputContentClasses = input('', { ...(ngDevMode ? { debugName: "inputContentClasses" } : /* istanbul ignore next */ {}), alias: 'content-classes' });
+        /** Event emitted when the popover is closed. */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = new EventEmitter();
         this.open = new EventEmitter();
         this.hovered = new EventEmitter();
-        /** Event emitted when the popover is closed. */
-        this.closeOutput = outputFromObservable(this.close, { alias: 'close' });
-        /** Event emitted when the popover is open. */
-        this.openOutput = outputFromObservable(this.open, { alias: 'open' });
-        /** Event emitted when the popover is hovered. */
-        this.hoveredOutput = outputFromObservable(this.hovered, { alias: 'hovered' });
-        this.vcTemplateRef = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "vcTemplateRef" }] : /* istanbul ignore next */ []));
-        syncInputSignal(this.template, (template) => (this._template = template));
-        syncInputSignal(this.templateContext, (templateContext) => (this._templateContext = templateContext));
-        syncInputSignal(this.inputCloseOnClick, (closeOnClick) => (this.closeOnClick = closeOnClick));
-        syncInputSignal(this.inputTrapFocus, (trapFocus) => (this.trapFocus = trapFocus));
-        syncInputSignal(this.inputScrollStrategy, (scrollStrategy) => (this.scrollStrategy = scrollStrategy));
-        syncInputSignal(this.inputPanelClasses, (panelClasses) => (this.panelClasses = panelClasses));
-        syncInputSignal(this.inputContentClasses, (contentClasses) => (this.contentClasses = contentClasses));
-        _effectWithDeps([this.vcTemplateRef], (vcTemplateRef) => {
-            if (isNotNil(vcTemplateRef)) {
-                this.templateRef = vcTemplateRef;
-            }
-        });
     }
     ngOnDestroy() {
         this.onClose();
@@ -220,12 +225,41 @@ class LuPopoverPanelComponent extends ALuPopoverPanel {
         this.hovered.emit(hovered);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: LuPopoverPanelComponent, isStandalone: true, selector: "lu-popover", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "template-context", isSignal: true, isRequired: false, transformFunction: null }, inputCloseOnClick: { classPropertyName: "inputCloseOnClick", publicName: "close-on-click", isSignal: true, isRequired: false, transformFunction: null }, inputTrapFocus: { classPropertyName: "inputTrapFocus", publicName: "trap-focus", isSignal: true, isRequired: false, transformFunction: null }, inputScrollStrategy: { classPropertyName: "inputScrollStrategy", publicName: "scroll-strategy", isSignal: true, isRequired: false, transformFunction: null }, inputPanelClasses: { classPropertyName: "inputPanelClasses", publicName: "panel-classes", isSignal: true, isRequired: false, transformFunction: null }, inputContentClasses: { classPropertyName: "inputContentClasses", publicName: "content-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeOutput: "close", openOutput: "open", hoveredOutput: "hovered" }, viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["LuPopoverPanel"], usesInheritance: true, ngImport: i0, template: "<ng-template>\n\t<div\n\t\tclass=\"lu-popover-panel\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(keydown)=\"_handleKeydown($event)\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t\t[attr.id]=\"panelId\"\n\t\t[attr.aria-labelledby]=\"triggerId\"\n\t\t[@transformPopover]=\"'enter'\"\n\t>\n\t\t<div class=\"lu-popover-content\" [class]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\n\t\t\t<ng-content /><ng-container *ngTemplateOutlet=\"template(); context: templateContext()\" />\n\t\t</div>\n\t</div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", 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>\n\t<div\n\t\tclass=\"lu-popover-panel\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(keydown)=\"_handleKeydown($event)\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t\t[attr.id]=\"panelId\"\n\t\t[attr.aria-labelledby]=\"triggerId\"\n\t\t[@transformPopover]=\"'enter'\"\n\t>\n\t\t<div class=\"lu-popover-content\" [class]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\n\t\t\t<ng-content /><ng-container *ngTemplateOutlet=\"template; context: templateContext\" />\n\t\t</div>\n\t</div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-popover', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], imports: [NgTemplateOutlet, OverlayModule, A11yModule], exportAs: 'LuPopoverPanel', template: "<ng-template>\n\t<div\n\t\tclass=\"lu-popover-panel\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(keydown)=\"_handleKeydown($event)\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t\t[attr.id]=\"panelId\"\n\t\t[attr.aria-labelledby]=\"triggerId\"\n\t\t[@transformPopover]=\"'enter'\"\n\t>\n\t\t<div class=\"lu-popover-content\" [class]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\n\t\t\t<ng-content /><ng-container *ngTemplateOutlet=\"template(); context: templateContext()\" />\n\t\t</div>\n\t</div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], templateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "template-context", required: false }] }], inputCloseOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "close-on-click", required: false }] }], inputTrapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trap-focus", required: false }] }], inputScrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-strategy", required: false }] }], inputPanelClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel-classes", required: false }] }], inputContentClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-classes", required: false }] }], closeOutput: [{ type: i0.Output, args: ["close"] }], openOutput: [{ type: i0.Output, args: ["open"] }], hoveredOutput: [{ type: i0.Output, args: ["hovered"] }], vcTemplateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+            args: [{ selector: 'lu-popover', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], imports: [NgTemplateOutlet, OverlayModule, A11yModule], exportAs: 'LuPopoverPanel', template: "<ng-template>\n\t<div\n\t\tclass=\"lu-popover-panel\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(keydown)=\"_handleKeydown($event)\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t\t[attr.id]=\"panelId\"\n\t\t[attr.aria-labelledby]=\"triggerId\"\n\t\t[@transformPopover]=\"'enter'\"\n\t>\n\t\t<div class=\"lu-popover-content\" [class]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\n\t\t\t<ng-content /><ng-container *ngTemplateOutlet=\"template; context: templateContext\" />\n\t\t</div>\n\t</div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], 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 }]
+            }] } });
 
 /**
  * @deprecated use `LuPopoverPanelComponent` instead
@@ -311,23 +345,28 @@ class LuPopoverTarget extends ALuPopoverTarget {
 class LuPopoverTargetDirective extends ALuPopoverTarget {
     constructor(ref) {
         super();
-        /** how you want to position the panel relative to the target, allowed values: above, below, before, after */
-        this.inputPosition = input(undefined, { ...(ngDevMode ? { debugName: "inputPosition" } : /* istanbul ignore next */ {}), alias: 'luPopoverPosition' });
-        /** how the panel will be align with the target, allowed values: top, bottom, left, right */
-        this.inputAlignment = input(undefined, { ...(ngDevMode ? { debugName: "inputAlignment" } : /* istanbul ignore next */ {}), alias: 'luPopoverAlignment' });
-        /** set to true if you want the panel to appear on top of the target */
-        this.inputOverlap = input(undefined, { ...(ngDevMode ? { debugName: "inputOverlap" } : /* istanbul ignore next */ {}), alias: 'luPopoverOverlap' });
-        this.inputOffsetX = input(undefined, { ...(ngDevMode ? { debugName: "inputOffsetX" } : /* istanbul ignore next */ {}), alias: 'luPopoverOffsetX' });
-        this.inputOffsetY = input(undefined, { ...(ngDevMode ? { debugName: "inputOffsetY" } : /* istanbul ignore next */ {}), alias: 'luPopoverOffsetY' });
         this.elementRef = ref;
-        syncInputSignal(this.inputPosition, (inputPosition) => (this.position = inputPosition));
-        syncInputSignal(this.inputAlignment, (inputAlignment) => (this.alignment = inputAlignment));
-        syncInputSignal(this.inputOverlap, (inputOverlap) => (this.overlap = inputOverlap));
-        syncInputSignal(this.inputOffsetX, (inputOffsetX) => (this.offsetX = inputOffsetX));
-        syncInputSignal(this.inputOffsetY, (inputOffsetY) => (this.offsetY = inputOffsetY));
+    }
+    /** 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: "21.2.14", ngImport: i0, type: LuPopoverTargetDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuPopoverTargetDirective, isStandalone: true, selector: "[luPopoverTarget]", inputs: { inputPosition: { classPropertyName: "inputPosition", publicName: "luPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, inputAlignment: { classPropertyName: "inputAlignment", publicName: "luPopoverAlignment", isSignal: true, isRequired: false, transformFunction: null }, inputOverlap: { classPropertyName: "inputOverlap", publicName: "luPopoverOverlap", isSignal: true, isRequired: false, transformFunction: null }, inputOffsetX: { classPropertyName: "inputOffsetX", publicName: "luPopoverOffsetX", isSignal: true, isRequired: false, transformFunction: null }, inputOffsetY: { classPropertyName: "inputOffsetY", publicName: "luPopoverOffsetY", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["LuPopoverTarget"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", 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: "21.2.14", ngImport: i0, type: LuPopoverTargetDirective, decorators: [{
             type: Directive,
@@ -335,7 +374,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     selector: '[luPopoverTarget]',
                     exportAs: 'LuPopoverTarget',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverPosition", required: false }] }], inputAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverAlignment", required: false }] }], inputOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverOverlap", required: false }] }], inputOffsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverOffsetX", required: false }] }], inputOffsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverOffsetY", required: false }] }] } });
+        }], ctorParameters: () => [{ 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']
+            }] } });
 
 // tslint:disable-next-line: max-line-length
 class ALuPopoverTrigger {
@@ -811,6 +865,48 @@ class ALuPopoverTrigger {
 }
 
 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;
@@ -828,49 +924,15 @@ class LuPopoverTriggerDirective extends ALuPopoverTrigger {
         this._overlay = _overlay;
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
-        /** References the popover instance that the trigger is associated with. */
-        this.inputPanel = input(undefined, { ...(ngDevMode ? { debugName: "inputPanel" } : /* istanbul ignore next */ {}), alias: 'luPopover' });
-        /** References the popover target instance that the trigger is associated with. */
-        this.inputTarget = input(undefined, { ...(ngDevMode ? { debugName: "inputTarget" } : /* istanbul ignore next */ {}), alias: 'luPopoverTarget' });
-        /** References the popover target instance that the trigger is associated with. */
-        this.inputTriggerEvent = input(undefined, { ...(ngDevMode ? { debugName: "inputTriggerEvent" } : /* istanbul ignore next */ {}), alias: 'luPopoverTrigger' });
+        /** Event emitted when the associated popover is opened. */
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onOpen = new EventEmitter();
-        this.onClose = new EventEmitter();
         /** Event emitted when the associated popover is closed. */
-        this.onCloseOutput = outputFromObservable(this.onClose, { alias: 'luPopoverOnClose' });
-        /** Event emitted when the associated popover is opened. */
-        this.onOpenOutput = outputFromObservable(this.onOpen, { alias: 'luPopoverOnOpen' });
-        /** how you want to position the panel relative to the target, allowed values: above, below, before, after */
-        this.inputPosition = input(undefined, { ...(ngDevMode ? { debugName: "inputPosition" } : /* istanbul ignore next */ {}), alias: 'luPopoverPosition' });
-        /** how the panel will be align with the target, allowed values: top, bottom, left, right */
-        this.inputAlignment = input(undefined, { ...(ngDevMode ? { debugName: "inputAlignment" } : /* istanbul ignore next */ {}), alias: 'luPopoverAlignment' });
-        /** when trigger = hover, delay before the popover panel appears */
-        this.inputEnterDelay = input(undefined, { ...(ngDevMode ? { debugName: "inputEnterDelay" } : /* istanbul ignore next */ {}), alias: 'luPopoverEnterDelay' });
-        /** when trigger = hover, delay before the popover panel disappears */
-        this.inputLeaveDelay = input(undefined, { ...(ngDevMode ? { debugName: "inputLeaveDelay" } : /* istanbul ignore next */ {}), alias: 'luPopoverLeaveDelay' });
-        /** disable popover apparition */
-        this.inputDisabled = input(undefined, { ...(ngDevMode ? { debugName: "inputDisabled" } : /* istanbul ignore next */ {}), alias: 'luPopoverDisabled' });
-        /** set to true if you want the panel to appear on top of the target */
-        this.inputOverlap = input(undefined, { ...(ngDevMode ? { debugName: "inputOverlap" } : /* istanbul ignore next */ {}), alias: 'luPopoverOverlap' });
-        this.inputOffsetX = input(undefined, { ...(ngDevMode ? { debugName: "inputOffsetX" } : /* istanbul ignore next */ {}), alias: 'luPopoverOffsetX' });
-        this.inputOffsetY = input(undefined, { ...(ngDevMode ? { debugName: "inputOffsetY" } : /* istanbul ignore next */ {}), alias: 'luPopoverOffsetY' });
+        // 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;
-        this.#initTarget();
-        syncInputSignal(this.inputPanel, (inputPanel) => (this.panel = inputPanel));
-        syncInputSignal(this.inputTriggerEvent, (inputTriggerEvent) => (this.triggerEvent = inputTriggerEvent));
-        syncInputSignal(this.inputEnterDelay, (inputEnterDelay) => (this.enterDelay = inputEnterDelay));
-        syncInputSignal(this.inputLeaveDelay, (inputLeaveDelay) => (this.leaveDelay = inputLeaveDelay));
-        syncInputSignal(this.inputDisabled, (inputDisabled) => (this.disabled = inputDisabled));
-    }
-    #initTarget() {
-        syncInputSignal(this.inputTarget, (inputTarget) => (this.target = inputTarget));
-        syncInputSignal(this.inputPosition, (inputPosition) => (this.target.position = inputPosition));
-        syncInputSignal(this.inputAlignment, (inputAlignment) => (this.target.alignment = inputAlignment));
-        syncInputSignal(this.inputOverlap, (inputOverlap) => (this.target.overlap = inputOverlap));
-        syncInputSignal(this.inputOffsetX, (inputOffsetX) => (this.target.offsetX = inputOffsetX));
-        syncInputSignal(this.inputOffsetY, (inputOffsetY) => (this.target.offsetY = inputOffsetY));
     }
     onClick() {
         super.onClick();
@@ -905,25 +967,78 @@ class LuPopoverTriggerDirective extends ALuPopoverTrigger {
         this.onClose.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", 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: "17.1.0", version: "21.2.14", type: LuPopoverTriggerDirective, isStandalone: true, selector: "[luPopover]", inputs: { inputPanel: { classPropertyName: "inputPanel", publicName: "luPopover", isSignal: true, isRequired: false, transformFunction: null }, inputTarget: { classPropertyName: "inputTarget", publicName: "luPopoverTarget", isSignal: true, isRequired: false, transformFunction: null }, inputTriggerEvent: { classPropertyName: "inputTriggerEvent", publicName: "luPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, inputPosition: { classPropertyName: "inputPosition", publicName: "luPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, inputAlignment: { classPropertyName: "inputAlignment", publicName: "luPopoverAlignment", isSignal: true, isRequired: false, transformFunction: null }, inputEnterDelay: { classPropertyName: "inputEnterDelay", publicName: "luPopoverEnterDelay", isSignal: true, isRequired: false, transformFunction: null }, inputLeaveDelay: { classPropertyName: "inputLeaveDelay", publicName: "luPopoverLeaveDelay", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "luPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null }, inputOverlap: { classPropertyName: "inputOverlap", publicName: "luPopoverOverlap", isSignal: true, isRequired: false, transformFunction: null }, inputOffsetX: { classPropertyName: "inputOffsetX", publicName: "luPopoverOffsetX", isSignal: true, isRequired: false, transformFunction: null }, inputOffsetY: { classPropertyName: "inputOffsetY", publicName: "luPopoverOffsetY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCloseOutput: "luPopoverOnClose", onOpenOutput: "luPopoverOnOpen" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-expanded": "_attrAriaExpanded", "attr.id": "_attrId", "attr.aria-controls": "_attrAriaControls" } }, exportAs: ["LuPopoverTrigger"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", 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: "21.2.14", ngImport: i0, type: LuPopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luPopover]',
                     exportAs: 'LuPopoverTrigger',
-                    host: {
-                        '[attr.aria-expanded]': '_attrAriaExpanded',
-                        '[attr.id]': '_attrId',
-                        '[attr.aria-controls]': '_attrAriaControls',
-                        '(click)': 'onClick()',
-                        '(mouseenter)': 'onMouseEnter()',
-                        '(mouseleave)': 'onMouseLeave()',
-                        '(focus)': 'onFocus()',
-                        '(blur)': 'onBlur()',
-                    },
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { inputPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopover", required: false }] }], inputTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverTarget", required: false }] }], inputTriggerEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverTrigger", required: false }] }], onCloseOutput: [{ type: i0.Output, args: ["luPopoverOnClose"] }], onOpenOutput: [{ type: i0.Output, args: ["luPopoverOnOpen"] }], inputPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverPosition", required: false }] }], inputAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverAlignment", required: false }] }], inputEnterDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverEnterDelay", required: false }] }], inputLeaveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverLeaveDelay", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverDisabled", required: false }] }], inputOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverOverlap", required: false }] }], inputOffsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverOffsetX", required: false }] }], inputOffsetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "luPopoverOffsetY", required: false }] }] } });
+        }], ctorParameters: () => [{ 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']
+            }] } });
 
 /**
  * @deprecated use `LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective` instead