@lucca-front/ng 21.3.0-rc.5 → 22.0.0-rc.2

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

@@ -5,9 +5,10 @@ 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 { EventEmitter, TemplateRef, ViewChild, Output, Input, ChangeDetectionStrategy, Component, NgModule, Directive, HostListener, HostBinding } 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 { 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';
 
@@ -147,69 +148,63 @@ 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();
-        /** Event emitted when the popover is closed. */
-        // eslint-disable-next-line @angular-eslint/no-output-native
+        /** 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' });
         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();
@@ -224,52 +219,23 @@ class LuPopoverPanelComponent extends ALuPopoverPanel {
     _emitHoveredEvent(hovered) {
         this.hovered.emit(hovered);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverPanelComponent, decorators: [{
+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: 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 }]
-            }] } });
+            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 }] }] } });
 
 /**
  * @deprecated use `LuPopoverPanelComponent` instead
  */
 class LuPopoverPanelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverPanelModule, imports: [LuPopoverPanelComponent], exports: [LuPopoverPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverPanelModule, imports: [LuPopoverPanelComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverPanelModule, imports: [LuPopoverPanelComponent], exports: [LuPopoverPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverPanelModule, imports: [LuPopoverPanelComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuPopoverPanelComponent],
@@ -345,51 +311,31 @@ 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;
-    }
-    /** 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.15", ngImport: i0, type: LuPopoverTargetDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", 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 }); }
+        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));
+    }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luPopoverTarget]',
                     exportAs: 'LuPopoverTarget',
                 }]
-        }], 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']
-            }] } });
+        }], 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 }] }] } });
 
 // tslint:disable-next-line: max-line-length
 class ALuPopoverTrigger {
@@ -554,7 +500,9 @@ class ALuPopoverTrigger {
         return position === 'below' || position === 'above';
     }
     _attachPortalToOverlay() {
-        this._overlayRef.attach(this._portal);
+        if (this._overlayRef) {
+            this._overlayRef.attach(this._portal);
+        }
     }
     _getPanelScrollStrategy() {
         return this.panel.scrollStrategy;
@@ -610,7 +558,9 @@ class ALuPopoverTrigger {
         this._setIsPopoverOpen(true);
         this.panel.panelId = this._panelId;
         this.panel.triggerId = this._triggerId;
-        this.panel.keydownEvents$ = this._overlayRef.keydownEvents();
+        if (this._overlayRef) {
+            this.panel.keydownEvents$ = this._overlayRef.keydownEvents();
+        }
         this._subscribeToPanelEvents();
     }
     /**
@@ -861,48 +811,6 @@ 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;
@@ -920,15 +828,49 @@ class LuPopoverTriggerDirective extends ALuPopoverTrigger {
         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
+        /** 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' });
         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();
+        /** 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' });
         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();
@@ -962,89 +904,36 @@ class LuPopoverTriggerDirective extends ALuPopoverTrigger {
     _emitClose() {
         this.onClose.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", 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: "21.2.15", 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverTriggerDirective, decorators: [{
+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: 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']
-            }] } });
+        }], 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 }] }] } });
 
 /**
  * @deprecated use `LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective` instead
  */
 class LuPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective], exports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective], exports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverModule, imports: [LuPopoverPanelComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective],