cmat 0.0.78 → 0.0.80

package/fesm2022/cmat-components-popover.mjs

@@ -4,15 +4,12 @@ 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, ChangeDetectorRef, HostListener, Directive } from '@angular/core';
+import { EventEmitter, inject, ElementRef, TemplateRef, Input, HostBinding, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewContainerRef, DestroyRef, HostListener, 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';
-import { takeUntil } from 'rxjs/operators';
 
-/**
- * Throws an exception for the case when popover trigger doesn't have a valid cmat-popover instance
- */
 function throwCmatPopoverMissingError() {
     throw Error(`cmat-popover-trigger: must pass in an cmat-popover instance.
 
@@ -20,18 +17,10 @@ function throwCmatPopoverMissingError() {
       <cmat-popover #popover="cmatPopover"></cmat-popover>
       <button [cmatPopoverTriggerFor]="popover"></button>`);
 }
-/**
- * Throws an exception for the case when popover's cmatPopoverPosition[0] value isn't valid.
- * In other words, it doesn't match 'above', 'below', 'before' or 'after'.
- */
 function throwCmatPopoverInvalidPositionStart() {
     throw Error(`cmatPopoverPosition[0] value must be either 'above', 'below', 'before' or 'after'.
     Example: <cmat-popover [position]="['below', 'after']" #popover="cmatPopover"></cmat-popover>`);
 }
-/**
- * Throws an exception for the case when popover's cmatPopoverPosition[1] value isn't valid.
- * In other words, it doesn't match 'above', 'below', 'before', 'after' or 'center'.
- */
 function throwCmatPopoverInvalidPositionEnd() {
     throw Error(`cmatPopoverPosition[1] value must be either 'above', 'below', 'before', 'after' or 'center'.
     Example: <cmat-popover [position]="['below', 'after']" #popover="cmatPopover"></cmat-popover>`);
@@ -40,26 +29,17 @@ function throwCmatPopoverInvalidPositionEnd() {
 /* eslint-disable @typescript-eslint/naming-convention */
 class CmatPopoverComponent {
     constructor() {
-        /** Event emitted when the popover is closed. */
         this.closed = new EventEmitter();
         this.role = 'dialog';
-        /** Config object to be passed into the popover's arrow ngStyle */
         this.popoverPanelStyles = {};
-        /** Config object to be passed into the popover's arrow ngStyle */
         this.popoverArrowStyles = {};
-        /** Config object to be passed into the popover's content ngStyle */
         this.popoverContentStyles = {};
-        /** Whether popover's `targetElement` is defined */
         this.containerPositioning = false;
-        /** Closing disabled on popover */
         this.closeDisabled = false;
-        /** Config object to be passed into the popover's ngClass */
         this.classList = {};
-        /** Emits the current animation state whenever it changes. */
         this._onAnimationStateChange = new EventEmitter();
         this._dir = inject(Directionality, { optional: true });
         this._elementRef = inject(ElementRef);
-        /** Settings for popover, view setters and getters for more detail */
         this._position = ['below', 'after'];
         this._triggerEvent = 'hover';
         this._scrollStrategy = 'reposition';
@@ -81,7 +61,6 @@ class CmatPopoverComponent {
     get position() {
         return this._position;
     }
-    /** Position of the popover. */
     set position(value) {
         if (!['before', 'after', 'above', 'below'].includes(value[0])) {
             throwCmatPopoverInvalidPositionStart();
@@ -92,7 +71,6 @@ class CmatPopoverComponent {
         this._position = value;
         this.setPositionClasses();
     }
-    /** Popover trigger event */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get triggerEvent() {
         return this._triggerEvent;
@@ -100,7 +78,6 @@ class CmatPopoverComponent {
     set triggerEvent(value) {
         this._triggerEvent = value;
     }
-    /** Popover scroll strategy */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get scrollStrategy() {
         return this._scrollStrategy;
@@ -108,7 +85,6 @@ class CmatPopoverComponent {
     set scrollStrategy(value) {
         this._scrollStrategy = value;
     }
-    /** Popover enter delay */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get enterDelay() {
         return this._enterDelay;
@@ -116,7 +92,6 @@ class CmatPopoverComponent {
     set enterDelay(value) {
         this._enterDelay = value;
     }
-    /** Popover leave delay */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get leaveDelay() {
         return this._leaveDelay;
@@ -124,7 +99,6 @@ class CmatPopoverComponent {
     set leaveDelay(value) {
         this._leaveDelay = value;
     }
-    /** Popover target offset x */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get xOffset() {
         return this._panelOffsetX;
@@ -132,7 +106,6 @@ class CmatPopoverComponent {
     set xOffset(value) {
         this._panelOffsetX = value;
     }
-    /** Popover target offset y */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get yOffset() {
         return this._panelOffsetY;
@@ -140,7 +113,6 @@ class CmatPopoverComponent {
     set yOffset(value) {
         this._panelOffsetY = value;
     }
-    /** Popover arrow offset x */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowOffsetX() {
         return this._arrowOffsetX;
@@ -148,7 +120,6 @@ class CmatPopoverComponent {
     set arrowOffsetX(value) {
         this._arrowOffsetX = value;
     }
-    /** Popover arrow offset y */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowOffsetY() {
         return this._arrowOffsetY;
@@ -156,7 +127,6 @@ class CmatPopoverComponent {
     set arrowOffsetY(value) {
         this._arrowOffsetY = value;
     }
-    /** Popover arrow width */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowWidth() {
         return this._arrowWidth;
@@ -164,7 +134,6 @@ class CmatPopoverComponent {
     set arrowWidth(value) {
         this._arrowWidth = value;
     }
-    /** Popover arrow height */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get arrowHeight() {
         return this._arrowHeight;
@@ -172,7 +141,6 @@ class CmatPopoverComponent {
     set arrowHeight(value) {
         this._arrowHeight = value;
     }
-    /** Popover close on container click */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get closeOnPanelClick() {
         return this._closeOnPanelClick;
@@ -180,7 +148,6 @@ class CmatPopoverComponent {
     set closeOnPanelClick(value) {
         this._closeOnPanelClick = coerceBooleanProperty(value);
     }
-    /** Popover close on backdrop click */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get closeOnBackdropClick() {
         return this._closeOnBackdropClick;
@@ -188,7 +155,6 @@ class CmatPopoverComponent {
     set closeOnBackdropClick(value) {
         this._closeOnBackdropClick = coerceBooleanProperty(value);
     }
-    /** Disable animations of popover and all child elements */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get disableAnimation() {
         return this._disableAnimation;
@@ -196,7 +162,6 @@ class CmatPopoverComponent {
     set disableAnimation(value) {
         this._disableAnimation = coerceBooleanProperty(value);
     }
-    /** Popover focus trap using cdkTrapFocus */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get focusTrapEnabled() {
         return this._focusTrapEnabled;
@@ -204,7 +169,6 @@ class CmatPopoverComponent {
     set focusTrapEnabled(value) {
         this._focusTrapEnabled = coerceBooleanProperty(value);
     }
-    /** Popover focus trap auto capture using cdkTrapFocusAutoCapture */
     // eslint-disable-next-line @typescript-eslint/member-ordering
     get focusTrapAutoCaptureEnabled() {
         return this._focusTrapAutoCaptureEnabled;
@@ -212,13 +176,6 @@ class CmatPopoverComponent {
     set focusTrapAutoCaptureEnabled(value) {
         this._focusTrapAutoCaptureEnabled = coerceBooleanProperty(value);
     }
-    /**
-     * This method takes classes set on the host md-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 panelClass(classes) {
         if (classes?.length) {
             this.classList = classes.split(' ').reduce((obj, className) => {
@@ -233,7 +190,6 @@ class CmatPopoverComponent {
         this.emitCloseEvent();
         this.closed.complete();
     }
-    /** Handle a keyboard event from the popover, delegating to the appropriate action. */
     handleKeydown(event) {
         switch (event.code) {
             case 'Escape':
@@ -241,42 +197,28 @@ class CmatPopoverComponent {
                 return;
         }
     }
-    /**
-     * This emits a close event to which the trigger is subscribed. When emitted, the
-     * trigger will close the popover.
-     */
     emitCloseEvent() {
         this.closed.emit();
     }
-    /** Close popover on click if closeOnPanelClick is true */
     onClick() {
         if (this.closeOnPanelClick) {
             this.emitCloseEvent();
         }
     }
-    /**
-     * TODO: Refactor when @angular/cdk includes feature I mentioned on github see link below.
-     * https://github.com/angular/material2/pull/5493#issuecomment-313085323
-     */
-    /** Disables close of popover when leaving trigger element and mouse over the popover */
     onMouseOver() {
         if (this.triggerEvent === 'hover') {
             this.closeDisabled = true;
         }
     }
     onFocus() {
-        //do someting
+        return;
     }
-    /** Enables close of popover when mouse leaving popover element */
     onMouseLeave() {
         if (this.triggerEvent === 'hover') {
             this.closeDisabled = false;
             this.emitCloseEvent();
         }
     }
-    // TODO: Refactor how styles are set and updated on the component, use best practices.
-    // TODO: If arrow left and right positioning is requested, see if flex direction can be used to work with order.
-    /** Sets the current styles for the popover to allow for dynamically changing settings */
     setCurrentStyles(pos = this.position) {
         const left = pos[1] === 'after'
             ? `${this.arrowOffsetX - this.arrowWidth / 2}px`
@@ -301,10 +243,6 @@ class CmatPopoverComponent {
                     bottom,
                 };
     }
-    /**
-     * It's necessary to set position-based classes to ensure the popover panel animation
-     * folds out from the correct direction.
-     */
     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';
@@ -319,10 +257,10 @@ class CmatPopoverComponent {
         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.7", ngImport: i0, type: CmatPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [{
@@ -375,16 +313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }] } });
 
-/**
- * This directive is intended to be used in conjunction with an cmat-popover tag. It is
- * responsible for toggling the display of the provided popover instance.
- */
 class CmatPopoverTriggerDirective {
     constructor() {
         this.ariaHaspopup = true;
-        /** Event emitted when the associated popover is opened. */
         this.popoverOpened = new EventEmitter();
-        /** Event emitted when the associated popover is closed. */
         this.popoverClosed = new EventEmitter();
         this.popoverOpened$ = new Subject();
         this.popoverClosed$ = new Subject();
@@ -392,20 +324,15 @@ class CmatPopoverTriggerDirective {
         this._elementRef = inject(ElementRef);
         this._viewContainerRef = inject(ViewContainerRef);
         this._dir = inject(Directionality, { optional: true });
-        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._destroyRef = inject(DestroyRef);
         this._overlayRef = null;
         this._popoverOpen = false;
         this._halt = false;
-        // tracking input type is necessary so it's possible to only auto-focus
-        // the first item of the list when the popover is opened via the keyboard
         this._openedByMouse = false;
-        this._onDestroy = new Subject();
     }
-    /** Whether the popover is open. */
     get popoverOpen() {
         return this._popoverOpen;
     }
-    /** The text direction of the containing app. */
     get dir() {
         return this._dir?.value === 'rtl' ? 'rtl' : 'ltr';
     }
@@ -458,11 +385,9 @@ class CmatPopoverTriggerDirective {
     ngOnDestroy() {
         this.destroyPopover();
     }
-    /** Toggles the popover between the open and closed states. */
     togglePopover() {
         return this._popoverOpen ? this.closePopover() : this.openPopover();
     }
-    /** Opens the popover. */
     openPopover() {
         if (!this._popoverOpen && !this._halt) {
             this._createOverlay().attach(this._portal);
@@ -471,7 +396,6 @@ class CmatPopoverTriggerDirective {
             this._initPopover();
         }
     }
-    /** Closes the popover. */
     closePopover() {
         if (this._overlayRef) {
             this._overlayRef.detach();
@@ -479,7 +403,6 @@ class CmatPopoverTriggerDirective {
         }
         this.destroyPopover();
     }
-    /** Removes the popover from the DOM. */
     destroyPopover() {
         if (this._mouseoverTimer) {
             clearTimeout(this._mouseoverTimer);
@@ -490,26 +413,16 @@ class CmatPopoverTriggerDirective {
             this._overlayRef = null;
             this._cleanUpSubscriptions();
         }
-        this._onDestroy.next();
-        this._onDestroy.complete();
     }
-    /** Focuses the popover trigger. */
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    /**
-     * This method ensures that the popover closes when the overlay backdrop is clicked.
-     * We do not use first() here because doing so would not catch clicks from within
-     * the popover, and it would fail to unsubscribe properly. Instead, we unsubscribe
-     * explicitly when the popover is closed or destroyed.
-     */
     _subscribeToBackdrop() {
         if (this._overlayRef) {
-            /** Only subscribe to backdrop if trigger event is click */
             if (this.triggerEvent === 'click' && this.popover.closeOnBackdropClick === true) {
                 this._overlayRef
                     .backdropClick()
-                    .pipe(takeUntil(this.popoverClosed$), takeUntil(this._onDestroy))
+                    .pipe(takeUntilDestroyed(this._destroyRef))
                     .subscribe(() => {
                     this.popover.emitCloseEvent();
                 });
@@ -520,33 +433,22 @@ class CmatPopoverTriggerDirective {
         if (this._overlayRef) {
             this._overlayRef
                 .detachments()
-                .pipe(takeUntil(this.popoverClosed$), takeUntil(this._onDestroy))
+                .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
                 this._setPopoverClosed();
             });
         }
     }
-    /**
-     * This method sets the popover state to open and focuses the first item if
-     * the popover was opened via the keyboard.
-     */
     _initPopover() {
         this._setPopoverOpened();
     }
-    /**
-     * This method resets the popover when it's closed, most importantly restoring
-     * focus to the popover trigger if the popover was opened via the keyboard.
-     */
     _resetPopover() {
         this._setPopoverClosed();
-        // Focus only needs to be reset to the host element if the popover was opened
-        // by the keyboard and manually shifted to the first popover item.
         if (!this._openedByMouse) {
             this.focus();
         }
         this._openedByMouse = false;
     }
-    /** set state rather than toggle to support triggers sharing a popover */
     _setPopoverOpened() {
         if (!this._popoverOpen) {
             this._popoverOpen = true;
@@ -554,7 +456,6 @@ class CmatPopoverTriggerDirective {
             this.popoverOpened.emit();
         }
     }
-    /** set state rather than toggle to support triggers sharing a popover */
     _setPopoverClosed() {
         if (this._popoverOpen) {
             this._popoverOpen = false;
@@ -562,19 +463,11 @@ class CmatPopoverTriggerDirective {
             this.popoverClosed.emit();
         }
     }
-    /**
-     *  This method checks that a valid instance of MdPopover has been passed into
-     *  mdPopoverTriggerFor. If not, an exception is thrown.
-     */
     _checkPopover() {
         if (!this.popover) {
             throwCmatPopoverMissingError();
         }
     }
-    /**
-     *  This method creates the overlay from the provided popover's template and saves its
-     *  OverlayRef so that it can be attached to the DOM when openPopover is called.
-     */
     _createOverlay() {
         if (!this._overlayRef) {
             this._portal = new TemplatePortal(this.popover.templateRef, this._viewContainerRef);
@@ -584,15 +477,9 @@ class CmatPopoverTriggerDirective {
         }
         return this._overlayRef;
     }
-    /**
-     * This method builds the configuration object needed to create the overlay, the OverlayConfig.
-     *
-     * @returns OverlayConfig
-     */
     _getOverlayConfig() {
         const overlayState = new OverlayConfig();
         overlayState.positionStrategy = this._getPosition();
-        /** Display overlay backdrop if trigger event is click */
         if (this.triggerEvent === 'click') {
             overlayState.hasBackdrop = true;
             overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
@@ -601,9 +488,6 @@ class CmatPopoverTriggerDirective {
         overlayState.scrollStrategy = this._getOverlayScrollStrategy(this.popover.scrollStrategy);
         return overlayState;
     }
-    /**
-     * This method returns the scroll strategy used by the cdk/overlay.
-     */
     _getOverlayScrollStrategy(strategy) {
         switch (strategy) {
             case 'noop':
@@ -617,11 +501,6 @@ class CmatPopoverTriggerDirective {
                 return this._overlay.scrollStrategies.reposition();
         }
     }
-    /**
-     * Listens to changes in the position of the overlay and sets the correct classes
-     * on the popover based on the new position. This ensures the animation origin is always
-     * correct, even if a fallback position is used for the overlay.
-     */
     _subscribeToPositions(position) {
         this._positionSubscription = position.positionChanges.subscribe((change) => {
             const posX = change.connectionPair.overlayX === 'start'
@@ -637,18 +516,10 @@ class CmatPopoverTriggerDirective {
             const pos = this.popover.position[0] === 'above' || this.popover.position[0] === 'below'
                 ? [posY, posX]
                 : [posX, posY];
-            // required for ChangeDetectionStrategy.OnPush
-            this._changeDetectorRef.markForCheck();
             this.popover.setCurrentStyles(pos);
             this.popover.setPositionClasses(pos);
         });
     }
-    /**
-     * This method builds the position strategy for the overlay, so the popover is properly connected
-     * to the trigger.
-     *
-     * @returns ConnectedPositionStrategy
-     */
     _getPosition() {
         const [originX, origin2ndX, origin3rdX] = this.popover.position[0] === 'before' || this.popover.position[1] === 'after'
             ? ['start', 'center', 'end']
@@ -678,11 +549,6 @@ class CmatPopoverTriggerDirective {
         const offsetY = this.popover.yOffset && !isNaN(Number(this.popover.yOffset))
             ? Number(this.popover.yOffset)
             : 0;
-        /**
-         * For overriding position element, when `cmatPopoverTargetAt` has a valid element reference.
-         * Useful for sticking popover to parent element and offsetting arrow to trigger element.
-         * If undefined defaults to the trigger element reference.
-         */
         let element = this._elementRef;
         if (typeof this.targetElement !== 'undefined') {
             this.popover.containerPositioning = true;
@@ -770,14 +636,13 @@ class CmatPopoverTriggerDirective {
         }
         this.popover.setCurrentStyles();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", 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: "21.2.9", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]',
-                    standalone: true,
                     exportAs: 'cmatPopoverTrigger'
                 }]
         }], propDecorators: { ariaHaspopup: [{
@@ -814,14 +679,13 @@ class CmatPopoverTargetDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPopoverTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'cmat-popover-target, [cmatPopoverTarget]',
-                    standalone: true,
                     exportAs: 'cmatPopoverTarget',
                 }]
         }] });