@acontplus/ng-components 2.1.9 → 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.
|
@@ -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
|
/**
|
|
@@ -4740,7 +4804,7 @@ class AcpPopover {
|
|
|
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.
|