cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-popover.mjs

@@ -4,11 +4,10 @@ import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, TemplateRef, Input, HostBinding, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewContainerRef, DestroyRef, HostListener, Directive } from '@angular/core';
+import { output, viewChild, TemplateRef, input, model, EventEmitter, inject, ElementRef, signal, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewContainerRef, DestroyRef, effect, untracked, HostListener, HostBinding, Directive } from '@angular/core';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject } from 'rxjs';
 
 function throwCmatPopoverMissingError() {
     throw Error(`cmat-popover-trigger: must pass in an cmat-popover instance.
@@ -26,40 +25,60 @@ function throwCmatPopoverInvalidPositionEnd() {
     Example: <cmat-popover [position]="['below', 'after']" #popover="cmatPopover"></cmat-popover>`);
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/member-ordering */
 class CmatPopoverComponent {
     constructor() {
-        this.closed = new EventEmitter();
-        this.role = 'dialog';
-        this.popoverPanelStyles = {};
-        this.popoverArrowStyles = {};
-        this.popoverContentStyles = {};
+        this.closed = output();
+        this.templateRef = viewChild(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+        this.popoverPanelStyles = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popoverPanelStyles" }] : /* istanbul ignore next */ []));
+        this.popoverContentStyles = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popoverContentStyles" }] : /* istanbul ignore next */ []));
+        this.popoverArrowStyles = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popoverArrowStyles" }] : /* istanbul ignore next */ []));
         this.containerPositioning = false;
         this.closeDisabled = false;
         this.classList = {};
         this._onAnimationStateChange = new EventEmitter();
         this._hostElementRef = inject(ElementRef);
         this._dir = inject(Directionality, { optional: true });
-        this._position = ['below', 'after'];
-        this._triggerEvent = 'hover';
-        this._scrollStrategy = 'reposition';
-        this._enterDelay = 100;
-        this._leaveDelay = 100;
-        this._panelOffsetX = 0;
-        this._panelOffsetY = 0;
-        this._closeOnPanelClick = false;
-        this._closeOnBackdropClick = true;
-        this._disableAnimation = false;
-        this._focusTrapEnabled = true;
-        this._focusTrapAutoCaptureEnabled = true;
-        this._arrowOffsetX = 20;
-        this._arrowOffsetY = 20;
-        this._arrowWidth = 16;
-        this._arrowHeight = 16;
+        this._position = signal(['below', 'after'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
+        this._triggerEvent = signal('hover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_triggerEvent" }] : /* istanbul ignore next */ []));
+        this._scrollStrategy = signal('reposition', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_scrollStrategy" }] : /* istanbul ignore next */ []));
+        this._enterDelay = signal(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_enterDelay" }] : /* istanbul ignore next */ []));
+        this._leaveDelay = signal(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_leaveDelay" }] : /* istanbul ignore next */ []));
+        this._panelOffsetX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_panelOffsetX" }] : /* istanbul ignore next */ []));
+        this._panelOffsetY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_panelOffsetY" }] : /* istanbul ignore next */ []));
+        this._closeOnPanelClick = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_closeOnPanelClick" }] : /* istanbul ignore next */ []));
+        this._closeOnBackdropClick = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+        this._disableAnimation = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disableAnimation" }] : /* istanbul ignore next */ []));
+        this._focusTrapEnabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_focusTrapEnabled" }] : /* istanbul ignore next */ []));
+        this._focusTrapAutoCaptureEnabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_focusTrapAutoCaptureEnabled" }] : /* istanbul ignore next */ []));
+        this._arrowOffsetX = signal(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_arrowOffsetX" }] : /* istanbul ignore next */ []));
+        this._arrowOffsetY = signal(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_arrowOffsetY" }] : /* istanbul ignore next */ []));
+        this._arrowWidth = signal(16, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_arrowWidth" }] : /* istanbul ignore next */ []));
+        this._arrowHeight = signal(16, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_arrowHeight" }] : /* istanbul ignore next */ []));
         this.setPositionClasses();
     }
     get position() {
-        return this._position;
+        return this._position();
     }
     set position(value) {
         if (!['before', 'after', 'above', 'below'].includes(value[0])) {
@@ -68,117 +87,104 @@ class CmatPopoverComponent {
         if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
             throwCmatPopoverInvalidPositionEnd();
         }
-        this._position = value;
+        this._position.set(value);
         this.setPositionClasses();
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get triggerEvent() {
-        return this._triggerEvent;
+        return this._triggerEvent();
     }
     set triggerEvent(value) {
-        this._triggerEvent = value;
+        this._triggerEvent.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get scrollStrategy() {
-        return this._scrollStrategy;
+        return this._scrollStrategy();
     }
     set scrollStrategy(value) {
-        this._scrollStrategy = value;
+        this._scrollStrategy.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get enterDelay() {
-        return this._enterDelay;
+        return this._enterDelay();
     }
     set enterDelay(value) {
-        this._enterDelay = value;
+        this._enterDelay.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get leaveDelay() {
-        return this._leaveDelay;
+        return this._leaveDelay();
     }
     set leaveDelay(value) {
-        this._leaveDelay = value;
+        this._leaveDelay.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get xOffset() {
-        return this._panelOffsetX;
+        return this._panelOffsetX();
     }
     set xOffset(value) {
-        this._panelOffsetX = value;
+        this._panelOffsetX.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get yOffset() {
-        return this._panelOffsetY;
+        return this._panelOffsetY();
     }
     set yOffset(value) {
-        this._panelOffsetY = value;
+        this._panelOffsetY.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowOffsetX() {
-        return this._arrowOffsetX;
+        return this._arrowOffsetX();
     }
     set arrowOffsetX(value) {
-        this._arrowOffsetX = value;
+        this._arrowOffsetX.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowOffsetY() {
-        return this._arrowOffsetY;
+        return this._arrowOffsetY();
     }
     set arrowOffsetY(value) {
-        this._arrowOffsetY = value;
+        this._arrowOffsetY.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowWidth() {
-        return this._arrowWidth;
+        return this._arrowWidth();
     }
     set arrowWidth(value) {
-        this._arrowWidth = value;
+        this._arrowWidth.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowHeight() {
-        return this._arrowHeight;
+        return this._arrowHeight();
     }
     set arrowHeight(value) {
-        this._arrowHeight = value;
+        this._arrowHeight.set(value);
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get closeOnPanelClick() {
-        return this._closeOnPanelClick;
+        return this._closeOnPanelClick();
     }
     set closeOnPanelClick(value) {
-        this._closeOnPanelClick = coerceBooleanProperty(value);
+        this._closeOnPanelClick.set(coerceBooleanProperty(value));
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get closeOnBackdropClick() {
-        return this._closeOnBackdropClick;
+        return this._closeOnBackdropClick();
     }
     set closeOnBackdropClick(value) {
-        this._closeOnBackdropClick = coerceBooleanProperty(value);
+        this._closeOnBackdropClick.set(coerceBooleanProperty(value));
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get disableAnimation() {
-        return this._disableAnimation;
+        return this._disableAnimation();
     }
     set disableAnimation(value) {
-        this._disableAnimation = coerceBooleanProperty(value);
+        this._disableAnimation.set(coerceBooleanProperty(value));
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get focusTrapEnabled() {
-        return this._focusTrapEnabled;
+        return this._focusTrapEnabled();
     }
     set focusTrapEnabled(value) {
-        this._focusTrapEnabled = coerceBooleanProperty(value);
+        this._focusTrapEnabled.set(coerceBooleanProperty(value));
     }
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get focusTrapAutoCaptureEnabled() {
-        return this._focusTrapAutoCaptureEnabled;
+        return this._focusTrapAutoCaptureEnabled();
     }
     set focusTrapAutoCaptureEnabled(value) {
-        this._focusTrapAutoCaptureEnabled = coerceBooleanProperty(value);
+        this._focusTrapAutoCaptureEnabled.set(coerceBooleanProperty(value));
     }
     set panelClass(classes) {
         if (classes?.length) {
-            this.classList = classes.split(' ').reduce((obj, className) => {
+            this.classList = classes
+                .split(' ')
+                .reduce((obj, className) => {
                 obj[className] = true;
                 return obj;
             }, {});
@@ -188,7 +194,6 @@ class CmatPopoverComponent {
     }
     ngOnDestroy() {
         this.emitCloseEvent();
-        this.closed.complete();
     }
     handleKeydown(event) {
         switch (event.code) {
@@ -232,52 +237,49 @@ class CmatPopoverComponent {
                 ? `calc(50% - ${this.arrowHeight / 2}px)`
                 : '';
         const top = pos[1] === 'below' ? `${this.arrowOffsetY - this.arrowHeight / 2}px` : '';
-        this.popoverArrowStyles =
-            pos[0] === 'above' || pos[0] === 'below'
-                ? {
-                    left: this._dir.value === 'ltr' ? left : right,
-                    right: this._dir.value === 'ltr' ? right : left,
-                }
-                : {
-                    top,
-                    bottom,
-                };
+        this.popoverArrowStyles.set(pos[0] === 'above' || pos[0] === 'below'
+            ? {
+                left: this._dir.value === 'ltr' ? left : right,
+                right: this._dir.value === 'ltr' ? right : left,
+            }
+            : {
+                top,
+                bottom,
+            });
     }
     setPositionClasses(pos = this.position) {
-        this.classList['cmat-popover-before-above'] = pos[0] === 'before' && pos[1] === 'above';
-        this.classList['cmat-popover-before-center'] = pos[0] === 'before' && pos[1] === 'center';
-        this.classList['cmat-popover-before-below'] = pos[0] === 'before' && pos[1] === 'below';
-        this.classList['cmat-popover-after-above'] = pos[0] === 'after' && pos[1] === 'above';
-        this.classList['cmat-popover-after-center'] = pos[0] === 'after' && pos[1] === 'center';
-        this.classList['cmat-popover-after-below'] = pos[0] === 'after' && pos[1] === 'below';
-        this.classList['cmat-popover-above-before'] = pos[0] === 'above' && pos[1] === 'before';
-        this.classList['cmat-popover-above-center'] = pos[0] === 'above' && pos[1] === 'center';
-        this.classList['cmat-popover-above-after'] = pos[0] === 'above' && pos[1] === 'after';
-        this.classList['cmat-popover-below-before'] = pos[0] === 'below' && pos[1] === 'before';
-        this.classList['cmat-popover-below-center'] = pos[0] === 'below' && pos[1] === 'center';
-        this.classList['cmat-popover-below-after'] = pos[0] === 'below' && pos[1] === 'after';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatPopoverComponent, isStandalone: true, selector: "cmat-popover", inputs: { popoverPanelStyles: "popoverPanelStyles", popoverArrowStyles: "popoverArrowStyles", popoverContentStyles: "popoverContentStyles", position: "position", triggerEvent: "triggerEvent", scrollStrategy: "scrollStrategy", enterDelay: "enterDelay", leaveDelay: "leaveDelay", xOffset: "xOffset", yOffset: "yOffset", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", closeOnPanelClick: "closeOnPanelClick", closeOnBackdropClick: "closeOnBackdropClick", disableAnimation: "disableAnimation", focusTrapEnabled: "focusTrapEnabled", focusTrapAutoCaptureEnabled: "focusTrapAutoCaptureEnabled", panelClass: "panelClass" }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "this.role" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatPopover"], ngImport: i0, template: "<ng-template>\r\n    <div class=\"cmat-popover-panel shadow\" role=\"dialog\" [ngClass]=\"classList\" [ngStyle]=\"popoverPanelStyles\"\r\n        [class.zoom-in-animation]=\"!disableAnimation\" (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\"\r\n        (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\">\r\n        <div class=\"cmat-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\"></div>\r\n        <div class=\"cmat-popover-content\" [ngStyle]=\"popoverContentStyles\" [cdkTrapFocus]=\"focusTrapEnabled\"\r\n            [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        this.classList['cmat-popover-before-above'] =
+            pos[0] === 'before' && pos[1] === 'above';
+        this.classList['cmat-popover-before-center'] =
+            pos[0] === 'before' && pos[1] === 'center';
+        this.classList['cmat-popover-before-below'] =
+            pos[0] === 'before' && pos[1] === 'below';
+        this.classList['cmat-popover-after-above'] =
+            pos[0] === 'after' && pos[1] === 'above';
+        this.classList['cmat-popover-after-center'] =
+            pos[0] === 'after' && pos[1] === 'center';
+        this.classList['cmat-popover-after-below'] =
+            pos[0] === 'after' && pos[1] === 'below';
+        this.classList['cmat-popover-above-before'] =
+            pos[0] === 'above' && pos[1] === 'before';
+        this.classList['cmat-popover-above-center'] =
+            pos[0] === 'above' && pos[1] === 'center';
+        this.classList['cmat-popover-above-after'] =
+            pos[0] === 'above' && pos[1] === 'after';
+        this.classList['cmat-popover-below-before'] =
+            pos[0] === 'below' && pos[1] === 'before';
+        this.classList['cmat-popover-below-center'] =
+            pos[0] === 'below' && pos[1] === 'center';
+        this.classList['cmat-popover-below-after'] =
+            pos[0] === 'below' && pos[1] === 'after';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: CmatPopoverComponent, isStandalone: true, selector: "cmat-popover", inputs: { popoverPanelStyles: { classPropertyName: "popoverPanelStyles", publicName: "popoverPanelStyles", isSignal: true, isRequired: false, transformFunction: null }, popoverContentStyles: { classPropertyName: "popoverContentStyles", publicName: "popoverContentStyles", isSignal: true, isRequired: false, transformFunction: null }, popoverArrowStyles: { classPropertyName: "popoverArrowStyles", publicName: "popoverArrowStyles", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, triggerEvent: { classPropertyName: "triggerEvent", publicName: "triggerEvent", isSignal: false, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: false, isRequired: false, transformFunction: null }, enterDelay: { classPropertyName: "enterDelay", publicName: "enterDelay", isSignal: false, isRequired: false, transformFunction: null }, leaveDelay: { classPropertyName: "leaveDelay", publicName: "leaveDelay", isSignal: false, isRequired: false, transformFunction: null }, xOffset: { classPropertyName: "xOffset", publicName: "xOffset", isSignal: false, isRequired: false, transformFunction: null }, yOffset: { classPropertyName: "yOffset", publicName: "yOffset", isSignal: false, isRequired: false, transformFunction: null }, arrowOffsetX: { classPropertyName: "arrowOffsetX", publicName: "arrowOffsetX", isSignal: false, isRequired: false, transformFunction: null }, arrowOffsetY: { classPropertyName: "arrowOffsetY", publicName: "arrowOffsetY", isSignal: false, isRequired: false, transformFunction: null }, arrowWidth: { classPropertyName: "arrowWidth", publicName: "arrowWidth", isSignal: false, isRequired: false, transformFunction: null }, arrowHeight: { classPropertyName: "arrowHeight", publicName: "arrowHeight", isSignal: false, isRequired: false, transformFunction: null }, closeOnPanelClick: { classPropertyName: "closeOnPanelClick", publicName: "closeOnPanelClick", isSignal: false, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: false, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: false, isRequired: false, transformFunction: null }, focusTrapEnabled: { classPropertyName: "focusTrapEnabled", publicName: "focusTrapEnabled", isSignal: false, isRequired: false, transformFunction: null }, focusTrapAutoCaptureEnabled: { classPropertyName: "focusTrapAutoCaptureEnabled", publicName: "focusTrapAutoCaptureEnabled", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", popoverArrowStyles: "popoverArrowStylesChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["cmatPopover"], ngImport: i0, template: "<ng-template>\r\n  <div\r\n    class=\"cmat-popover-panel shadow\"\r\n    role=\"dialog\"\r\n    [ngClass]=\"classList\"\r\n    [ngStyle]=\"popoverPanelStyles()\"\r\n    [class.zoom-in-animation]=\"!disableAnimation\"\r\n    (keydown)=\"handleKeydown($event)\"\r\n    (click)=\"onClick()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseover)=\"onMouseOver()\"\r\n    (mouseleave)=\"onMouseLeave()\"\r\n  >\r\n    <div\r\n      class=\"cmat-popover-direction-arrow\"\r\n      [ngStyle]=\"popoverArrowStyles()\"\r\n    ></div>\r\n    <div\r\n      class=\"cmat-popover-content\"\r\n      [ngStyle]=\"popoverContentStyles()\"\r\n      [cdkTrapFocus]=\"focusTrapEnabled\"\r\n      [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPopover', imports: [NgStyle, NgClass, A11yModule], template: "<ng-template>\r\n    <div class=\"cmat-popover-panel shadow\" role=\"dialog\" [ngClass]=\"classList\" [ngStyle]=\"popoverPanelStyles\"\r\n        [class.zoom-in-animation]=\"!disableAnimation\" (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\"\r\n        (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\">\r\n        <div class=\"cmat-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\"></div>\r\n        <div class=\"cmat-popover-content\" [ngStyle]=\"popoverContentStyles\" [cdkTrapFocus]=\"focusTrapEnabled\"\r\n            [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { closed: [{
-                type: Output
-            }], templateRef: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], popoverPanelStyles: [{
-                type: Input
-            }], popoverArrowStyles: [{
-                type: Input
-            }], popoverContentStyles: [{
-                type: Input
-            }], position: [{
+            args: [{ selector: 'cmat-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPopover', imports: [NgStyle, NgClass, A11yModule], template: "<ng-template>\r\n  <div\r\n    class=\"cmat-popover-panel shadow\"\r\n    role=\"dialog\"\r\n    [ngClass]=\"classList\"\r\n    [ngStyle]=\"popoverPanelStyles()\"\r\n    [class.zoom-in-animation]=\"!disableAnimation\"\r\n    (keydown)=\"handleKeydown($event)\"\r\n    (click)=\"onClick()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseover)=\"onMouseOver()\"\r\n    (mouseleave)=\"onMouseLeave()\"\r\n  >\r\n    <div\r\n      class=\"cmat-popover-direction-arrow\"\r\n      [ngStyle]=\"popoverArrowStyles()\"\r\n    ></div>\r\n    <div\r\n      class=\"cmat-popover-content\"\r\n      [ngStyle]=\"popoverContentStyles()\"\r\n      [cdkTrapFocus]=\"focusTrapEnabled\"\r\n      [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cmat-popover-panel{max-height:calc(100vh - 48px);padding:.5rem;border-radius:.5rem;font-size:1rem;border-top-width:1px;transform:scale(1)}.cmat-popover-panel[class*=cmat-popover-below]{border-top-width:0;margin-top:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-above]{margin-bottom:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.cmat-popover-panel[class*=cmat-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .cmat-popover-panel[class*=cmat-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.cmat-popover-direction-arrow{position:absolute}.cmat-popover-direction-arrow:before,.cmat-popover-direction-arrow:after{position:absolute;display:inline-block;border-style:solid;content:\"\"}.cmat-popover-direction-arrow:before{border-width:.5em;border-color:var(--cmat-divider)}.cmat-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--cmat-bg-card)}[class*=cmat-popover-below] .cmat-popover-direction-arrow,[class*=cmat-popover-above] .cmat-popover-direction-arrow{width:1em}[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[dir=rtl] [class*=cmat-popover-above] .cmat-popover-direction-arrow:after{right:1px;left:auto}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after,[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=cmat-popover-below] .cmat-popover-direction-arrow{top:0}[class*=cmat-popover-below] .cmat-popover-direction-arrow:before,[class*=cmat-popover-below] .cmat-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow{bottom:0}[class*=cmat-popover-above] .cmat-popover-direction-arrow:before,[class*=cmat-popover-above] .cmat-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow,[class*=cmat-popover-after] .cmat-popover-direction-arrow{height:1em}[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{top:1px}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after,[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=cmat-popover-before] .cmat-popover-direction-arrow{right:0}[class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=cmat-popover-before] .cmat-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=cmat-popover-after] .cmat-popover-direction-arrow{left:0}[class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before,[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=cmat-popover-after] .cmat-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n", ".zoom-in-animation{opacity:1;transform:scale(1);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.zoom-in-animation{opacity:0;transform:scale(.5)}}.zoom-out-animation{opacity:0;transform:scale(.5);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.zoom-out-animation{opacity:1;transform:scale(1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { closed: [{ type: i0.Output, args: ["closed"] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], popoverPanelStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverPanelStyles", required: false }] }], popoverContentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverContentStyles", required: false }] }], popoverArrowStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverArrowStyles", required: false }] }, { type: i0.Output, args: ["popoverArrowStylesChange"] }], position: [{
                 type: Input
             }], triggerEvent: [{
                 type: Input
@@ -316,10 +318,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class CmatPopoverTriggerDirective {
     constructor() {
         this.ariaHaspopup = true;
-        this.popoverOpened = new EventEmitter();
-        this.popoverClosed = new EventEmitter();
-        this.popoverOpened$ = new Subject();
-        this.popoverClosed$ = new Subject();
+        this.popoverOpened = output();
+        this.popoverClosed = output();
+        this.popover = input.required({ ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), alias: 'cmatPopoverTriggerFor' });
+        this.targetElement = input(undefined, { ...(ngDevMode ? { debugName: "targetElement" } : /* istanbul ignore next */ {}), alias: 'cmatPopoverTargetAt' });
+        this.triggerEvent = input.required({ ...(ngDevMode ? { debugName: "triggerEvent" } : /* istanbul ignore next */ {}), alias: 'cmatPopoverTriggerOn' });
         this._overlay = inject(Overlay);
         this._elementRef = inject(ElementRef);
         this._viewContainerRef = inject(ViewContainerRef);
@@ -332,6 +335,12 @@ class CmatPopoverTriggerDirective {
         this._leaveTimeoutId = null;
         this._mouseoverTimer = null;
         this._openedByMouse = false;
+        effect(() => {
+            const triggerEvent = this.triggerEvent();
+            untracked(() => {
+                this._setCurrentConfig(triggerEvent);
+            });
+        });
     }
     get popoverOpen() {
         return this._popoverOpen;
@@ -340,20 +349,22 @@ class CmatPopoverTriggerDirective {
         return this._dir?.value === 'rtl' ? 'rtl' : 'ltr';
     }
     onClick() {
-        if (this.popover.triggerEvent === 'click') {
+        if (this.popover().triggerEvent === 'click') {
             this.togglePopover();
         }
     }
     onMouseEnter() {
         this._halt = false;
-        if (this.popover.triggerEvent === 'hover') {
+        const popover = this.popover();
+        if (popover.triggerEvent === 'hover') {
             this._mouseoverTimer = Number(setTimeout(() => {
                 this.openPopover();
-            }, this.popover.enterDelay));
+            }, popover.enterDelay));
         }
     }
     onMouseLeave() {
-        if (this.popover.triggerEvent === 'hover') {
+        const popover = this.popover();
+        if (popover.triggerEvent === 'hover') {
             if (this._mouseoverTimer !== null) {
                 clearTimeout(this._mouseoverTimer);
                 this._mouseoverTimer = null;
@@ -361,10 +372,10 @@ class CmatPopoverTriggerDirective {
             if (this._popoverOpen) {
                 this._leaveTimeoutId = window.setTimeout(() => {
                     this._leaveTimeoutId = null;
-                    if (!this.popover.closeDisabled) {
+                    if (!this.popover().closeDisabled) {
                         this.closePopover();
                     }
-                }, this.popover.leaveDelay);
+                }, popover.leaveDelay);
             }
             else {
                 this._halt = true;
@@ -376,23 +387,13 @@ class CmatPopoverTriggerDirective {
             this._openedByMouse = true;
         }
     }
-    ngOnChanges(changes) {
-        if (changes['triggerEvent']) {
-            this._setCurrentConfig();
-        }
-    }
     ngAfterViewInit() {
         this._checkPopover();
-        this._setCurrentConfig();
-        this.popover.closed
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => this.closePopover());
+        this.popover().closed.subscribe(() => this.closePopover());
     }
     ngOnDestroy() {
         this._clearLeaveTimeout();
         this.destroyPopover();
-        this.popoverOpened$.complete();
-        this.popoverClosed$.complete();
     }
     togglePopover() {
         return this._popoverOpen ? this.closePopover() : this.openPopover();
@@ -428,12 +429,13 @@ class CmatPopoverTriggerDirective {
     }
     _subscribeToBackdrop() {
         if (this._overlayRef) {
-            if (this.triggerEvent === 'click' && this.popover.closeOnBackdropClick === true) {
+            if (this.triggerEvent() === 'click' &&
+                this.popover().closeOnBackdropClick === true) {
                 this._overlayRef
                     .backdropClick()
                     .pipe(takeUntilDestroyed(this._destroyRef))
                     .subscribe(() => {
-                    this.popover.emitCloseEvent();
+                    this.popover().emitCloseEvent();
                 });
             }
         }
@@ -461,25 +463,27 @@ class CmatPopoverTriggerDirective {
     _setPopoverOpened() {
         if (!this._popoverOpen) {
             this._popoverOpen = true;
-            this.popoverOpened$.next();
             this.popoverOpened.emit();
         }
     }
     _setPopoverClosed() {
         if (this._popoverOpen) {
             this._popoverOpen = false;
-            this.popoverClosed$.next();
             this.popoverClosed.emit();
         }
     }
     _checkPopover() {
-        if (!this.popover) {
+        if (!this.popover()) {
             throwCmatPopoverMissingError();
         }
     }
     _createOverlay() {
         if (!this._overlayRef) {
-            this._portal = new TemplatePortal(this.popover.templateRef, this._viewContainerRef);
+            const templateRef = this.popover().templateRef();
+            if (!templateRef) {
+                throw new Error('Popover templateRef is not available');
+            }
+            this._portal = new TemplatePortal(templateRef, this._viewContainerRef);
             const config = this._getOverlayConfig();
             this._subscribeToPositions(config.positionStrategy);
             this._overlayRef = this._overlay.create(config);
@@ -489,12 +493,12 @@ class CmatPopoverTriggerDirective {
     _getOverlayConfig() {
         const overlayState = new OverlayConfig();
         overlayState.positionStrategy = this._getPosition();
-        if (this.triggerEvent === 'click') {
+        if (this.triggerEvent() === 'click') {
             overlayState.hasBackdrop = true;
             overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
         }
         overlayState.direction = this._dir;
-        overlayState.scrollStrategy = this._getOverlayScrollStrategy(this.popover.scrollStrategy);
+        overlayState.scrollStrategy = this._getOverlayScrollStrategy(this.popover().scrollStrategy);
         return overlayState;
     }
     _getOverlayScrollStrategy(strategy) {
@@ -523,53 +527,80 @@ class CmatPopoverTriggerDirective {
                 : change.connectionPair.overlayY === 'bottom'
                     ? 'above'
                     : 'center';
-            const pos = this.popover.position[0] === 'above' || this.popover.position[0] === 'below'
+            const popover = this.popover();
+            const pos = popover.position[0] === 'above' || popover.position[0] === 'below'
                 ? [posY, posX]
                 : [posX, posY];
-            this.popover.setCurrentStyles(pos);
-            this.popover.setPositionClasses(pos);
+            this.popover().setCurrentStyles(pos);
+            this.popover().setPositionClasses(pos);
         });
     }
     _getPosition() {
-        const [originX, origin2ndX, origin3rdX] = this.popover.position[0] === 'before' || this.popover.position[1] === 'after'
+        const popover = this.popover();
+        const [originX, origin2ndX, origin3rdX] = popover.position[0] === 'before' || popover.position[1] === 'after'
             ? ['start', 'center', 'end']
-            : this.popover.position[0] === 'after' || this.popover.position[1] === 'before'
+            : popover.position[0] === 'after' || popover.position[1] === 'before'
                 ? ['end', 'center', 'start']
                 : ['center', 'start', 'end'];
-        const [originY, origin2ndY, origin3rdY] = this.popover.position[0] === 'above' || this.popover.position[1] === 'below'
+        const popoverValue = this.popover();
+        const [originY, origin2ndY, origin3rdY] = popoverValue.position[0] === 'above' ||
+            popoverValue.position[1] === 'below'
             ? ['top', 'center', 'bottom']
-            : this.popover.position[0] === 'below' || this.popover.position[1] === 'above'
+            : popoverValue.position[0] === 'below' ||
+                popoverValue.position[1] === 'above'
                 ? ['bottom', 'center', 'top']
                 : ['center', 'top', 'bottom'];
-        const [overlayX, overlayFallbackX] = this.popover.position[0] === 'below' || this.popover.position[0] === 'above'
+        const popoverVal = this.popover();
+        const [overlayX, overlayFallbackX] = popoverVal.position[0] === 'below' || popoverVal.position[0] === 'above'
             ? [originX, originX]
-            : this.popover.position[0] === 'before'
+            : popoverVal.position[0] === 'before'
                 ? ['end', 'start']
                 : ['start', 'end'];
-        const [overlayY, overlayFallbackY] = this.popover.position[0] === 'before' || this.popover.position[0] === 'after'
+        const popoverInput = this.popover();
+        const [overlayY, overlayFallbackY] = popoverInput.position[0] === 'before' ||
+            popoverInput.position[0] === 'after'
             ? [originY, originY]
-            : this.popover.position[0] === 'below'
+            : popoverInput.position[0] === 'below'
                 ? ['top', 'bottom']
                 : ['bottom', 'top'];
         const originFallbackX = overlayX;
         const originFallbackY = overlayY;
-        const offsetX = this.popover.xOffset && !isNaN(Number(this.popover.xOffset))
-            ? Number(this.dir === 'ltr' ? this.popover.xOffset : -this.popover.xOffset)
+        const popover1 = this.popover();
+        const offsetX = popover1.xOffset && !isNaN(Number(popover1.xOffset))
+            ? Number(this.dir === 'ltr' ? popover1.xOffset : -popover1.xOffset)
             : 0;
-        const offsetY = this.popover.yOffset && !isNaN(Number(this.popover.yOffset))
-            ? Number(this.popover.yOffset)
+        const popover2 = this.popover();
+        const offsetY = popover2.yOffset && !isNaN(Number(popover2.yOffset))
+            ? Number(popover2.yOffset)
             : 0;
         let element = this._elementRef;
-        if (typeof this.targetElement !== 'undefined') {
-            this.popover.containerPositioning = true;
-            element = this.targetElement._elementRef;
+        const popover3 = this.popover();
+        const targetElement = this.targetElement();
+        if (typeof targetElement !== 'undefined') {
+            popover3.containerPositioning = true;
+            element = targetElement._elementRef;
         }
-        let positions = [{ originX, originY, overlayX, overlayY }];
-        if (this.popover.position[0] === 'above' || this.popover.position[0] === 'below') {
+        let positions = [
+            { originX, originY, overlayX, overlayY },
+        ];
+        if (popover3.position[0] === 'above' ||
+            popover3.position[0] === 'below') {
             positions = [
                 { originX, originY, overlayX, overlayY, offsetY },
-                { originX: origin2ndX, originY, overlayX: origin2ndX, overlayY, offsetY },
-                { originX: origin3rdX, originY, overlayX: origin3rdX, overlayY, offsetY },
+                {
+                    originX: origin2ndX,
+                    originY,
+                    overlayX: origin2ndX,
+                    overlayY,
+                    offsetY,
+                },
+                {
+                    originX: origin3rdX,
+                    originY,
+                    overlayX: origin3rdX,
+                    overlayY,
+                    offsetY,
+                },
                 {
                     originX,
                     originY: originFallbackY,
@@ -593,11 +624,24 @@ class CmatPopoverTriggerDirective {
                 },
             ];
         }
-        if (this.popover.position[0] === 'before' || this.popover.position[0] === 'after') {
+        if (popover3.position[0] === 'before' ||
+            popover3.position[0] === 'after') {
             positions = [
                 { originX, originY, overlayX, overlayY, offsetX },
-                { originX, originY: origin2ndY, overlayX, overlayY: origin2ndY, offsetX },
-                { originX, originY: origin3rdY, overlayX, overlayY: origin3rdY, offsetX },
+                {
+                    originX,
+                    originY: origin2ndY,
+                    overlayX,
+                    overlayY: origin2ndY,
+                    offsetX,
+                },
+                {
+                    originX,
+                    originY: origin3rdY,
+                    overlayX,
+                    overlayY: origin3rdY,
+                    offsetX,
+                },
                 {
                     originX: originFallbackX,
                     originY,
@@ -641,38 +685,26 @@ class CmatPopoverTriggerDirective {
             this._leaveTimeoutId = null;
         }
     }
-    _setCurrentConfig() {
-        if (this.triggerEvent) {
-            this.popover.triggerEvent = this.triggerEvent;
+    _setCurrentConfig(triggerEvent) {
+        const popover = this.popover();
+        if (triggerEvent) {
+            popover.triggerEvent = triggerEvent;
         }
-        this.popover.setCurrentStyles();
+        popover.setCurrentStyles();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: CmatPopoverTriggerDirective, isStandalone: true, selector: "[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]", inputs: { popover: ["cmatPopoverTriggerFor", "popover"], targetElement: ["cmatPopoverTargetAt", "targetElement"], triggerEvent: ["cmatPopoverTriggerOn", "triggerEvent"] }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "mousedown": "handleMousedown($event)" }, properties: { "attr.aria-haspopup": "this.ariaHaspopup" } }, exportAs: ["cmatPopoverTrigger"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: CmatPopoverTriggerDirective, isStandalone: true, selector: "[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]", inputs: { popover: { classPropertyName: "popover", publicName: "cmatPopoverTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, targetElement: { classPropertyName: "targetElement", publicName: "cmatPopoverTargetAt", isSignal: true, isRequired: false, transformFunction: null }, triggerEvent: { classPropertyName: "triggerEvent", publicName: "cmatPopoverTriggerOn", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "mousedown": "handleMousedown($event)" }, properties: { "attr.aria-haspopup": "this.ariaHaspopup" } }, exportAs: ["cmatPopoverTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]',
-                    exportAs: 'cmatPopoverTrigger'
+                    exportAs: 'cmatPopoverTrigger',
                 }]
-        }], propDecorators: { ariaHaspopup: [{
+        }], ctorParameters: () => [], propDecorators: { ariaHaspopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']
-            }], popover: [{
-                type: Input,
-                args: ['cmatPopoverTriggerFor']
-            }], targetElement: [{
-                type: Input,
-                args: ['cmatPopoverTargetAt']
-            }], triggerEvent: [{
-                type: Input,
-                args: ['cmatPopoverTriggerOn']
-            }], popoverOpened: [{
-                type: Output
-            }], popoverClosed: [{
-                type: Output
-            }], onClick: [{
+            }], popoverOpened: [{ type: i0.Output, args: ["popoverOpened"] }], popoverClosed: [{ type: i0.Output, args: ["popoverClosed"] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmatPopoverTriggerFor", required: true }] }], targetElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmatPopoverTargetAt", required: false }] }], triggerEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmatPopoverTriggerOn", required: true }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], onMouseEnter: [{
@@ -690,10 +722,10 @@ class CmatPopoverTargetDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPopoverTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPopoverTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'cmat-popover-target, [cmatPopoverTarget]',