cmat 0.0.6 → 0.0.8

package/fesm2022/cmat-components-popover.mjs

@@ -1,11 +1,16 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Output, ViewChild, HostBinding, Input } from '@angular/core';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { cmatAnimations } from 'cmat/animations';
 import { NgStyle, NgClass } from '@angular/common';
-import * as i2 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Output, ViewChild, HostBinding, Input, Directive, HostListener } from '@angular/core';
+import { cmatAnimations } from 'cmat/animations';
 import * as i1 from '@angular/cdk/bidi';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+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
@@ -34,7 +39,6 @@ function throwCmatPopoverInvalidPositionEnd() {
     Example: <cmat-popover [position]="['below', 'after']" #popover="cmatPopover"></cmat-popover>`);
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
 class CmatPopoverComponent {
     constructor(_dir, _elementRef, zone) {
         this._dir = _dir;
@@ -317,10 +321,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: "17.2.4", ngImport: i0, type: CmatPopoverComponent, deps: [{ token: i1.Directionality, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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        (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\" (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\"\r\n        [@.disabled]=\"disableAnimation\" [@transform]=\"'enter'\">\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}.cmat-popover-panel[class*=cmat-popover-below]{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"], 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: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [cmatAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPopoverComponent, deps: [{ token: i1.Directionality, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.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        (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\" (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\"\r\n        [@.disabled]=\"disableAnimation\" [@transform]=\"'enter'\">\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}.cmat-popover-panel[class*=cmat-popover-below]{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"], 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: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [cmatAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [cmatAnimations], exportAs: 'cmatPopover', standalone: true, imports: [NgStyle, NgClass, A11yModule], template: "<ng-template>\r\n    <div  class=\"cmat-popover-panel shadow\" role=\"dialog\" [ngClass]=\"classList\" [ngStyle]=\"popoverPanelStyles\"\r\n        (keydown)=\"handleKeydown($event)\" (click)=\"onClick()\" (focus)=\"onFocus()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\"\r\n        [@.disabled]=\"disableAnimation\" [@transform]=\"'enter'\">\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}.cmat-popover-panel[class*=cmat-popover-below]{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"] }]
         }], ctorParameters: () => [{ type: i1.Directionality, decorators: [{
@@ -375,9 +379,459 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", 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(_overlay, _elementRef, _viewContainerRef, _dir, _changeDetectorRef) {
+        this._overlay = _overlay;
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._dir = _dir;
+        this._changeDetectorRef = _changeDetectorRef;
+        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();
+        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 && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+    }
+    onClick() {
+        if (this.popover.triggerEvent === 'click') {
+            this.togglePopover();
+        }
+    }
+    onMouseEnter() {
+        this._halt = false;
+        if (this.popover.triggerEvent === 'hover') {
+            this._mouseoverTimer = setTimeout(() => {
+                this.openPopover();
+            }, this.popover.enterDelay);
+        }
+    }
+    onMouseLeave() {
+        if (this.popover.triggerEvent === 'hover') {
+            if (this._mouseoverTimer) {
+                clearTimeout(this._mouseoverTimer);
+                this._mouseoverTimer = null;
+            }
+            if (this._popoverOpen) {
+                setTimeout(() => {
+                    if (!this.popover.closeDisabled) {
+                        this.closePopover();
+                    }
+                }, this.popover.leaveDelay);
+            }
+            else {
+                this._halt = true;
+            }
+        }
+    }
+    handleMousedown(event) {
+        if (event && !isFakeMousedownFromScreenReader(event)) {
+            this._openedByMouse = true;
+        }
+    }
+    ngAfterViewInit() {
+        this._checkPopover();
+        this._setCurrentConfig();
+        this.popover.closed.subscribe(() => this.closePopover());
+    }
+    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);
+            this._subscribeToBackdrop();
+            this._subscribeToDetachments();
+            this._initPopover();
+        }
+    }
+    /** Closes the popover. */
+    closePopover() {
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+            this._resetPopover();
+        }
+        this.destroyPopover();
+    }
+    /** Removes the popover from the DOM. */
+    destroyPopover() {
+        if (this._mouseoverTimer) {
+            clearTimeout(this._mouseoverTimer);
+            this._mouseoverTimer = null;
+        }
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            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))
+                    .subscribe(() => {
+                    this.popover.emitCloseEvent();
+                });
+            }
+        }
+    }
+    _subscribeToDetachments() {
+        if (this._overlayRef) {
+            this._overlayRef
+                .detachments()
+                .pipe(takeUntil(this.popoverClosed$), takeUntil(this._onDestroy))
+                .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;
+            this.popoverOpened$.next();
+            this.popoverOpened.emit();
+        }
+    }
+    /** set state rather than toggle to support triggers sharing a popover */
+    _setPopoverClosed() {
+        if (this._popoverOpen) {
+            this._popoverOpen = false;
+            this.popoverClosed$.next();
+            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);
+            const config = this._getOverlayConfig();
+            this._subscribeToPositions(config.positionStrategy);
+            this._overlayRef = this._overlay.create(config);
+        }
+        return this._overlayRef;
+    }
+    /**
+     * This method builds the configuration object needed to create the overlay, the OverlayConfig.
+     *
+     * @returns OverlayConfig
+     */
+    _getOverlayConfig() {
+        const overlayState = new OverlayConfig();
+        overlayState.positionStrategy = this._getPosition();
+        /** Display overlay backdrop if trigger event is click */
+        if (this.triggerEvent === 'click') {
+            overlayState.hasBackdrop = true;
+            overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
+        }
+        overlayState.direction = this._dir;
+        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':
+                return this._overlay.scrollStrategies.noop();
+            case 'close':
+                return this._overlay.scrollStrategies.close();
+            case 'block':
+                return this._overlay.scrollStrategies.block();
+            case 'reposition':
+            default:
+                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'
+                ? 'after'
+                : change.connectionPair.overlayX === 'end'
+                    ? 'before'
+                    : 'center';
+            const posY = change.connectionPair.overlayY === 'top'
+                ? 'below'
+                : change.connectionPair.overlayY === 'bottom'
+                    ? 'above'
+                    : 'center';
+            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.zone.run(() => {
+                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']
+            : this.popover.position[0] === 'after' || this.popover.position[1] === 'before'
+                ? ['end', 'center', 'start']
+                : ['center', 'start', 'end'];
+        const [originY, origin2ndY, origin3rdY] = this.popover.position[0] === 'above' || this.popover.position[1] === 'below'
+            ? ['top', 'center', 'bottom']
+            : this.popover.position[0] === 'below' || this.popover.position[1] === 'above'
+                ? ['bottom', 'center', 'top']
+                : ['center', 'top', 'bottom'];
+        const [overlayX, overlayFallbackX] = this.popover.position[0] === 'below' || this.popover.position[0] === 'above'
+            ? [originX, originX]
+            : this.popover.position[0] === 'before'
+                ? ['end', 'start']
+                : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.popover.position[0] === 'before' || this.popover.position[0] === 'after'
+            ? [originY, originY]
+            : this.popover.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)
+            : 0;
+        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;
+            element = this.targetElement._elementRef;
+        }
+        let positions = [{ originX, originY, overlayX, overlayY }];
+        if (this.popover.position[0] === 'above' || this.popover.position[0] === 'below') {
+            positions = [
+                { originX, originY, overlayX, overlayY, offsetY },
+                { originX: origin2ndX, originY, overlayX: origin2ndX, overlayY, offsetY },
+                { originX: origin3rdX, originY, overlayX: origin3rdX, overlayY, offsetY },
+                {
+                    originX,
+                    originY: originFallbackY,
+                    overlayX,
+                    overlayY: overlayFallbackY,
+                    offsetY: -offsetY,
+                },
+                {
+                    originX: origin2ndX,
+                    originY: originFallbackY,
+                    overlayX: origin2ndX,
+                    overlayY: overlayFallbackY,
+                    offsetY: -offsetY,
+                },
+                {
+                    originX: origin3rdX,
+                    originY: originFallbackY,
+                    overlayX: origin3rdX,
+                    overlayY: overlayFallbackY,
+                    offsetY: -offsetY,
+                },
+            ];
+        }
+        if (this.popover.position[0] === 'before' || this.popover.position[0] === 'after') {
+            positions = [
+                { originX, originY, overlayX, overlayY, offsetX },
+                { originX, originY: origin2ndY, overlayX, overlayY: origin2ndY, offsetX },
+                { originX, originY: origin3rdY, overlayX, overlayY: origin3rdY, offsetX },
+                {
+                    originX: originFallbackX,
+                    originY,
+                    overlayX: overlayFallbackX,
+                    overlayY,
+                    offsetX: -offsetX,
+                },
+                {
+                    originX: originFallbackX,
+                    originY: origin2ndY,
+                    overlayX: overlayFallbackX,
+                    overlayY: origin2ndY,
+                    offsetX: -offsetX,
+                },
+                {
+                    originX: originFallbackX,
+                    originY: origin3rdY,
+                    overlayX: overlayFallbackX,
+                    overlayY: origin3rdY,
+                    offsetX: -offsetX,
+                },
+            ];
+        }
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(element)
+            .withLockedPosition()
+            .withPositions(positions)
+            .withDefaultOffsetX(offsetX)
+            .withDefaultOffsetY(offsetY);
+    }
+    _cleanUpSubscriptions() {
+        if (this._backdropSubscription) {
+            this._backdropSubscription.unsubscribe();
+        }
+        if (this._positionSubscription) {
+            this._positionSubscription.unsubscribe();
+        }
+        if (this._detachmentsSubscription) {
+            this._detachmentsSubscription.unsubscribe();
+        }
+    }
+    _setCurrentConfig() {
+        if (this.triggerEvent) {
+            this.popover.triggerEvent = this.triggerEvent;
+        }
+        this.popover.setCurrentStyles();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPopoverTriggerDirective, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.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"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cmatPopoverTriggerFor],[cmatPopoverTargetAt],[cmatPopoverTriggerOn]',
+                    standalone: true,
+                    exportAs: 'cmatPopoverTrigger'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], 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: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], handleMousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class CmatPopoverTargetDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPopoverTargetDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: CmatPopoverTargetDirective, isStandalone: true, selector: "cmat-popover-target, [cmatPopoverTarget]", exportAs: ["cmatPopoverTarget"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPopoverTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cmat-popover-target, [cmatPopoverTarget]',
+                    standalone: true,
+                    exportAs: 'cmatPopoverTarget',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CmatPopoverComponent };
+export { CmatPopoverComponent, CmatPopoverTargetDirective, CmatPopoverTriggerDirective };
 //# sourceMappingURL=cmat-components-popover.mjs.map