@acontplus/ng-components 2.1.8 → 2.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3921,7 +3921,7 @@ class AcpDrawerContainer extends CdkDialogContainer {
|
|
|
3921
3921
|
// Intentionally empty - focus is handled by the enter animation
|
|
3922
3922
|
}
|
|
3923
3923
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawerContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AcpDrawerContainer, isStandalone: true, selector: "acp-drawer-container", host: { attributes: { "tabindex": "-1" }, listeners: { "animationstart": "_handleAnimationEvent(true, $event.animationName)", "animationend": "_handleAnimationEvent(false, $event.animationName)", "animationcancel": "_handleAnimationEvent(false, $event.animationName)" }, properties: { "class": "_drawerPosition", "class.acp-drawer-container-animations-enabled": "!_animationsDisabled", "class.acp-drawer-container-enter": "_animationState === \"visible\"", "class.acp-drawer-container-exit": "_animationState === \"hidden\"", "class.acp-drawer-fullscreen": "_config.fullScreen", "id": "_config.id", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel" }, classAttribute: "acp-drawer-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: ["@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;position:relative;background-color:var(--
|
|
3924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AcpDrawerContainer, isStandalone: true, selector: "acp-drawer-container", host: { attributes: { "tabindex": "-1" }, listeners: { "animationstart": "_handleAnimationEvent(true, $event.animationName)", "animationend": "_handleAnimationEvent(false, $event.animationName)", "animationcancel": "_handleAnimationEvent(false, $event.animationName)" }, properties: { "class": "_drawerPosition", "class.acp-drawer-container-animations-enabled": "!_animationsDisabled", "class.acp-drawer-container-enter": "_animationState === \"visible\"", "class.acp-drawer-container-exit": "_animationState === \"hidden\"", "class.acp-drawer-fullscreen": "_config.fullScreen", "id": "_config.id", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel" }, classAttribute: "acp-drawer-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [":root{--acp-drawer-container-background-color: var(--mat-sys-surface-container-low, #f7f2fa);--acp-drawer-container-text-color: var(--mat-sys-on-surface, #1d1b20);--acp-drawer-container-elevation-shadow: var( --mat-sys-elevation-level2, 0px 2px 4px rgba(0, 0, 0, .14) );--acp-drawer-container-shape: var(--mat-sys-corner-large, 16px)}body.dark-theme,[data-theme=dark]{--acp-drawer-container-background-color: var(--mat-sys-surface-container-low, #1d1b1e);--acp-drawer-container-text-color: var(--mat-sys-on-surface, #e6e0e9);--acp-drawer-container-elevation-shadow: var( --mat-sys-elevation-level2, 0px 1px 2px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15) )}@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;position:relative;background-color:var(--acp-drawer-container-background-color, #f7f2fa);color:var(--acp-drawer-container-text-color, #1d1b20);box-shadow:var(--acp-drawer-container-elevation-shadow, 0px 2px 4px rgba(0, 0, 0, .14))}@media(forced-colors:active){.acp-drawer-container{outline:1px solid}}.acp-drawer-container.acp-drawer-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border-radius:0!important}.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-top,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-right,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-bottom,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-left{border-radius:0!important}:root.dark-theme .acp-drawer-container,body.dark-theme .acp-drawer-container{background-color:var(--mat-sys-surface-container-low, #121212);color:var(--mat-sys-on-surface, #e6e1e5);box-shadow:var(--mat-sys-elevation-level2, 0px 2px 4px rgba(0, 0, 0, .6))}.acp-drawer-container-animations-enabled.acp-drawer-container-enter{animation:_acp-drawer-enter .15s cubic-bezier(0,0,.2,1) forwards}.acp-drawer-container-animations-enabled.acp-drawer-container-exit{animation:_acp-drawer-exit .4s cubic-bezier(.25,.8,.25,1) backwards}.acp-drawer-container-animations-enabled.acp-drawer-right{transform:translate(100%)}.acp-drawer-container-animations-enabled.acp-drawer-left{transform:translate(-100%)}.acp-drawer-container-animations-enabled.acp-drawer-bottom{transform:translateY(100%)}.acp-drawer-container-animations-enabled.acp-drawer-top{transform:translateY(-100%)}.acp-drawer-right{border-top-left-radius:var(--acp-drawer-container-shape, 16px);border-bottom-left-radius:var(--acp-drawer-container-shape, 16px)}.acp-drawer-left{border-top-right-radius:var(--acp-drawer-container-shape, 16px);border-bottom-right-radius:var(--acp-drawer-container-shape, 16px)}.acp-drawer-bottom{border-top-left-radius:var(--acp-drawer-container-shape, 16px);border-top-right-radius:var(--acp-drawer-container-shape, 16px)}.acp-drawer-top{border-bottom-left-radius:var(--acp-drawer-container-shape, 16px);border-bottom-right-radius:var(--acp-drawer-container-shape, 16px)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
3925
3925
|
}
|
|
3926
3926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawerContainer, decorators: [{
|
|
3927
3927
|
type: Component,
|
|
@@ -3940,7 +3940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3940
3940
|
'(animationstart)': '_handleAnimationEvent(true, $event.animationName)',
|
|
3941
3941
|
'(animationend)': '_handleAnimationEvent(false, $event.animationName)',
|
|
3942
3942
|
'(animationcancel)': '_handleAnimationEvent(false, $event.animationName)',
|
|
3943
|
-
}, imports: [CdkPortalOutlet], template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: ["@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;position:relative;background-color:var(--
|
|
3943
|
+
}, imports: [CdkPortalOutlet], template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [":root{--acp-drawer-container-background-color: var(--mat-sys-surface-container-low, #f7f2fa);--acp-drawer-container-text-color: var(--mat-sys-on-surface, #1d1b20);--acp-drawer-container-elevation-shadow: var( --mat-sys-elevation-level2, 0px 2px 4px rgba(0, 0, 0, .14) );--acp-drawer-container-shape: var(--mat-sys-corner-large, 16px)}body.dark-theme,[data-theme=dark]{--acp-drawer-container-background-color: var(--mat-sys-surface-container-low, #1d1b1e);--acp-drawer-container-text-color: var(--mat-sys-on-surface, #e6e0e9);--acp-drawer-container-elevation-shadow: var( --mat-sys-elevation-level2, 0px 1px 2px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15) )}@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;position:relative;background-color:var(--acp-drawer-container-background-color, #f7f2fa);color:var(--acp-drawer-container-text-color, #1d1b20);box-shadow:var(--acp-drawer-container-elevation-shadow, 0px 2px 4px rgba(0, 0, 0, .14))}@media(forced-colors:active){.acp-drawer-container{outline:1px solid}}.acp-drawer-container.acp-drawer-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border-radius:0!important}.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-top,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-right,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-bottom,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-left{border-radius:0!important}:root.dark-theme .acp-drawer-container,body.dark-theme .acp-drawer-container{background-color:var(--mat-sys-surface-container-low, #121212);color:var(--mat-sys-on-surface, #e6e1e5);box-shadow:var(--mat-sys-elevation-level2, 0px 2px 4px rgba(0, 0, 0, .6))}.acp-drawer-container-animations-enabled.acp-drawer-container-enter{animation:_acp-drawer-enter .15s cubic-bezier(0,0,.2,1) forwards}.acp-drawer-container-animations-enabled.acp-drawer-container-exit{animation:_acp-drawer-exit .4s cubic-bezier(.25,.8,.25,1) backwards}.acp-drawer-container-animations-enabled.acp-drawer-right{transform:translate(100%)}.acp-drawer-container-animations-enabled.acp-drawer-left{transform:translate(-100%)}.acp-drawer-container-animations-enabled.acp-drawer-bottom{transform:translateY(100%)}.acp-drawer-container-animations-enabled.acp-drawer-top{transform:translateY(-100%)}.acp-drawer-right{border-top-left-radius:var(--acp-drawer-container-shape, 16px);border-bottom-left-radius:var(--acp-drawer-container-shape, 16px)}.acp-drawer-left{border-top-right-radius:var(--acp-drawer-container-shape, 16px);border-bottom-right-radius:var(--acp-drawer-container-shape, 16px)}.acp-drawer-bottom{border-top-left-radius:var(--acp-drawer-container-shape, 16px);border-top-right-radius:var(--acp-drawer-container-shape, 16px)}.acp-drawer-top{border-bottom-left-radius:var(--acp-drawer-container-shape, 16px);border-bottom-right-radius:var(--acp-drawer-container-shape, 16px)}\n"] }]
|
|
3944
3944
|
}] });
|
|
3945
3945
|
|
|
3946
3946
|
/**
|
|
@@ -4408,6 +4408,7 @@ const EXIT_ANIMATION = '_acp-popover-exit';
|
|
|
4408
4408
|
* various positioning options. It's built on top of Angular CDK Overlay
|
|
4409
4409
|
* and provides a flexible way to display contextual information.
|
|
4410
4410
|
*
|
|
4411
|
+
* ## Basic Usage
|
|
4411
4412
|
* @example
|
|
4412
4413
|
* ```html
|
|
4413
4414
|
* <acp-popover #popover="acpPopover" [position]="['below', 'after']">
|
|
@@ -4416,6 +4417,62 @@ const EXIT_ANIMATION = '_acp-popover-exit';
|
|
|
4416
4417
|
*
|
|
4417
4418
|
* <button [acpPopoverTriggerFor]="popover">Show popover</button>
|
|
4418
4419
|
* ```
|
|
4420
|
+
*
|
|
4421
|
+
* ## Closing Explicitly
|
|
4422
|
+
*
|
|
4423
|
+
* ### 1. Close from within popover content:
|
|
4424
|
+
* @example
|
|
4425
|
+
* ```html
|
|
4426
|
+
* <acp-popover #popover="acpPopover">
|
|
4427
|
+
* <div>
|
|
4428
|
+
* <p>Popover content</p>
|
|
4429
|
+
* <button (click)="popover.close()">Close</button>
|
|
4430
|
+
* <button (click)="popover.close('user-action')">Close with reason</button>
|
|
4431
|
+
* </div>
|
|
4432
|
+
* </acp-popover>
|
|
4433
|
+
* ```
|
|
4434
|
+
*
|
|
4435
|
+
* ### 2. Close from component using ViewChild:
|
|
4436
|
+
* @example
|
|
4437
|
+
* ```typescript
|
|
4438
|
+
* @Component({
|
|
4439
|
+
* template: `
|
|
4440
|
+
* <acp-popover #popover="acpPopover">
|
|
4441
|
+
* <div>Content with external close</div>
|
|
4442
|
+
* </acp-popover>
|
|
4443
|
+
* <button [acpPopoverTriggerFor]="popover">Open</button>
|
|
4444
|
+
* <button (click)="closePopover()">Close from outside</button>
|
|
4445
|
+
* `
|
|
4446
|
+
* })
|
|
4447
|
+
* export class MyComponent {
|
|
4448
|
+
* @ViewChild('popover') popover!: AcpPopover;
|
|
4449
|
+
*
|
|
4450
|
+
* closePopover() {
|
|
4451
|
+
* this.popover.close('programmatic');
|
|
4452
|
+
* }
|
|
4453
|
+
* }
|
|
4454
|
+
* ```
|
|
4455
|
+
*
|
|
4456
|
+
* ### 3. Close using trigger reference:
|
|
4457
|
+
* @example
|
|
4458
|
+
* ```html
|
|
4459
|
+
* <acp-popover #popover="acpPopover">
|
|
4460
|
+
* <div>Popover content</div>
|
|
4461
|
+
* </acp-popover>
|
|
4462
|
+
*
|
|
4463
|
+
* <button [acpPopoverTriggerFor]="popover" #trigger="acpPopoverTrigger">
|
|
4464
|
+
* Show popover
|
|
4465
|
+
* </button>
|
|
4466
|
+
* <button (click)="trigger.closePopover()">Close via trigger</button>
|
|
4467
|
+
* <button (click)="trigger.closePopoverWithReason('external')">Close with reason</button>
|
|
4468
|
+
* ```
|
|
4469
|
+
*
|
|
4470
|
+
* ## Automatic Closing
|
|
4471
|
+
* The popover automatically closes on:
|
|
4472
|
+
* - ESC key press
|
|
4473
|
+
* - Click outside (backdrop) when `closeOnBackdropClick` is true
|
|
4474
|
+
* - Mouse leave after delay when `triggerEvent` is 'hover'
|
|
4475
|
+
* - Click on panel when `closeOnPanelClick` is true
|
|
4419
4476
|
*/
|
|
4420
4477
|
class AcpPopover {
|
|
4421
4478
|
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
@@ -4538,6 +4595,13 @@ class AcpPopover {
|
|
|
4538
4595
|
}
|
|
4539
4596
|
/** Event emitted when the popover is closed. */
|
|
4540
4597
|
closed = new EventEmitter();
|
|
4598
|
+
/**
|
|
4599
|
+
* Programmatically closes the popover.
|
|
4600
|
+
* @param reason Optional reason for closing
|
|
4601
|
+
*/
|
|
4602
|
+
close(reason) {
|
|
4603
|
+
this.closed.emit(reason || 'programmatic');
|
|
4604
|
+
}
|
|
4541
4605
|
/** @docs-private */
|
|
4542
4606
|
templateRef;
|
|
4543
4607
|
/**
|
|
@@ -4736,11 +4800,11 @@ class AcpPopover {
|
|
|
4736
4800
|
this._changeDetectorRef.markForCheck();
|
|
4737
4801
|
}
|
|
4738
4802
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4739
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcpPopover, isStandalone: true, selector: "acp-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: "panelClass", classList: "classList" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ACP_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["acpPopover"], ngImport: i0, template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--
|
|
4803
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcpPopover, isStandalone: true, selector: "acp-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: "panelClass", classList: "classList" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ACP_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["acpPopover"], ngImport: i0, template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: [":root{--acp-popover-container-shape: var(--mat-sys-corner-medium, 12px);--acp-popover-background-color: var(--mat-sys-surface-container, #f3f3f3);--acp-popover-text-color: var(--mat-sys-on-surface, #1d1b20);--acp-popover-outline-color: var(--mat-sys-outline, #79747e)}body.dark-theme,[data-theme=dark]{--acp-popover-background-color: var(--mat-sys-surface-container, #2d2d2d);--acp-popover-text-color: var(--mat-sys-on-surface, #e6e0e9);--acp-popover-outline-color: var(--mat-sys-outline, #938f99)}@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--acp-popover-container-shape, 12px);background-color:var(--acp-popover-background-color, #f3f3f3);color:var(--acp-popover-text-color, #1d1b20);transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--acp-popover-outline-color, #79747e)}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--acp-popover-background-color, #f3f3f3)}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4740
4804
|
}
|
|
4741
4805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopover, decorators: [{
|
|
4742
4806
|
type: Component,
|
|
4743
|
-
args: [{ selector: 'acp-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'acpPopover',
|
|
4807
|
+
args: [{ selector: 'acp-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'acpPopover', imports: [CdkTrapFocus], template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: [":root{--acp-popover-container-shape: var(--mat-sys-corner-medium, 12px);--acp-popover-background-color: var(--mat-sys-surface-container, #f3f3f3);--acp-popover-text-color: var(--mat-sys-on-surface, #1d1b20);--acp-popover-outline-color: var(--mat-sys-outline, #79747e)}body.dark-theme,[data-theme=dark]{--acp-popover-background-color: var(--mat-sys-surface-container, #2d2d2d);--acp-popover-text-color: var(--mat-sys-on-surface, #e6e0e9);--acp-popover-outline-color: var(--mat-sys-outline, #938f99)}@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--acp-popover-container-shape, 12px);background-color:var(--acp-popover-background-color, #f3f3f3);color:var(--acp-popover-text-color, #1d1b20);transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--acp-popover-outline-color, #79747e)}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--acp-popover-background-color, #f3f3f3)}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"] }]
|
|
4744
4808
|
}], propDecorators: { backdropClass: [{
|
|
4745
4809
|
type: Input
|
|
4746
4810
|
}], ariaLabel: [{
|
|
@@ -4819,6 +4883,7 @@ const ACP_POPOVER_SCROLL_STRATEGY = new InjectionToken('acp-popover-scroll-strat
|
|
|
4819
4883
|
* The trigger handles various events (click, hover) and manages the popover's lifecycle,
|
|
4820
4884
|
* including opening, closing, positioning, and focus management.
|
|
4821
4885
|
*
|
|
4886
|
+
* ## Basic Usage
|
|
4822
4887
|
* @example
|
|
4823
4888
|
* ```html
|
|
4824
4889
|
* <acp-popover #popover="acpPopover">
|
|
@@ -4829,6 +4894,33 @@ const ACP_POPOVER_SCROLL_STRATEGY = new InjectionToken('acp-popover-scroll-strat
|
|
|
4829
4894
|
* Show popover
|
|
4830
4895
|
* </button>
|
|
4831
4896
|
* ```
|
|
4897
|
+
*
|
|
4898
|
+
* ## Programmatic Control
|
|
4899
|
+
* @example
|
|
4900
|
+
* ```html
|
|
4901
|
+
* <acp-popover #popover="acpPopover">
|
|
4902
|
+
* <div>Popover content</div>
|
|
4903
|
+
* </acp-popover>
|
|
4904
|
+
*
|
|
4905
|
+
* <button [acpPopoverTriggerFor]="popover" #trigger="acpPopoverTrigger">
|
|
4906
|
+
* Toggle popover
|
|
4907
|
+
* </button>
|
|
4908
|
+
*
|
|
4909
|
+
* <!-- Programmatic control -->
|
|
4910
|
+
* <button (click)="trigger.openPopover()">Open</button>
|
|
4911
|
+
* <button (click)="trigger.closePopover()">Close</button>
|
|
4912
|
+
* <button (click)="trigger.closePopoverWithReason('manual')">Close with reason</button>
|
|
4913
|
+
* <button (click)="trigger.togglePopover()">Toggle</button>
|
|
4914
|
+
* ```
|
|
4915
|
+
*
|
|
4916
|
+
* ## Custom Target
|
|
4917
|
+
* @example
|
|
4918
|
+
* ```html
|
|
4919
|
+
* <div acpPopoverTarget #target="acpPopoverTarget">Target element</div>
|
|
4920
|
+
* <button [acpPopoverTriggerFor]="popover" [targetElement]="target">
|
|
4921
|
+
* Trigger (popover appears at target)
|
|
4922
|
+
* </button>
|
|
4923
|
+
* ```
|
|
4832
4924
|
*/
|
|
4833
4925
|
class AcpPopoverTrigger {
|
|
4834
4926
|
_overlay = inject(Overlay);
|
|
@@ -5017,6 +5109,13 @@ class AcpPopoverTrigger {
|
|
|
5017
5109
|
closePopover() {
|
|
5018
5110
|
this.popover.closed.emit();
|
|
5019
5111
|
}
|
|
5112
|
+
/**
|
|
5113
|
+
* Programmatically closes the popover with a specific reason.
|
|
5114
|
+
* @param reason The reason for closing
|
|
5115
|
+
*/
|
|
5116
|
+
closePopoverWithReason(reason) {
|
|
5117
|
+
this.popover.closed.emit(reason);
|
|
5118
|
+
}
|
|
5020
5119
|
/**
|
|
5021
5120
|
* Focuses the popover trigger.
|
|
5022
5121
|
* @param origin Source of the popover trigger's focus.
|