UNPKG

primeng

Version:

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

676 lines (658 loc) 26.4 kB
import { trigger, state, style, transition, animate } from '@angular/animations'; import * as i2 from '@angular/common'; import { isPlatformBrowser, CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { Injectable, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core'; import { isIOS, appendChild, absolutePosition, getOffset, addClass, findSingle, isTouchDevice } from '@primeuix/utils'; import * as i1 from 'primeng/api'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { BaseComponent } from 'primeng/basecomponent'; import { ConnectedOverlayScrollHandler } from 'primeng/dom'; import { TimesIcon } from 'primeng/icons'; import { Ripple } from 'primeng/ripple'; import { ZIndexUtils } from 'primeng/utils'; import { BaseStyle } from 'primeng/base'; const theme = ({ dt }) => ` .p-popover { margin-top: ${dt('popover.gutter')}; background: ${dt('popover.background')}; color: ${dt('popover.color')}; border: 1px solid ${dt('popover.border.color')}; border-radius: ${dt('popover.border.radius')}; box-shadow: ${dt('popover.shadow')}; position: absolute } .p-popover-content { padding: ${dt('popover.content.padding')}; } .p-popover-flipped { margin-top: calc(${dt('popover.gutter')} * -1); margin-bottom: ${dt('popover.gutter')}; } .p-popover-enter-from { opacity: 0; transform: scaleY(0.8); } .p-popover-leave-to { opacity: 0; } .p-popover-enter-active { transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); } .p-popover-leave-active { transition: opacity 0.1s linear; } .p-popover:after, .p-popover:before { bottom: 100%; left: ${dt('popover.arrow.offset')}; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .p-popover:after { border-width: calc(${dt('popover.gutter')} - 2px); margin-left: calc(-1 * (${dt('popover.gutter')} - 2px)); border-style: solid; border-color: transparent; border-bottom-color: ${dt('popover.background')}; } .p-popover:before { border-width: ${dt('popover.gutter')}; margin-left: calc(-1 * ${dt('popover.gutter')}); border-style: solid; border-color: transparent; border-bottom-color: ${dt('popover.border.color')}; } .p-popover-flipped:after, .p-popover-flipped:before { bottom: auto; top: 100%; } .p-popover.p-popover-flipped:after { border-bottom-color: transparent; border-top-color: ${dt('popover.background')}; } .p-popover.p-popover-flipped:before { border-bottom-color: transparent; border-top-color: ${dt('popover.border.color')}; } `; const classes = { root: 'p-popover p-component', content: 'p-popover-content' }; class PopoverStyle extends BaseStyle { name = 'popover'; theme = theme; classes = classes; static ɵfac = /*@__PURE__*/ (() => { let ɵPopoverStyle_BaseFactory; return function PopoverStyle_Factory(__ngFactoryType__) { returnPopoverStyle_BaseFactory || (ɵPopoverStyle_BaseFactory = i0.ɵɵgetInheritedFactory(PopoverStyle)))(__ngFactoryType__ || PopoverStyle); }; })(); static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PopoverStyle, factory: PopoverStyle.ɵfac }); } (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PopoverStyle, [{ type: Injectable }], null, null); })(); /** * * Popover is a container component positioned as connected to its target. * * [Live Demo](https://www.primeng.org/popover) * * @module popoverstyle * */ var PopoverClasses; (function (PopoverClasses) { /** * Class name of the root element */ PopoverClasses["root"] = "p-popover"; /** * Class name of the content element */ PopoverClasses["content"] = "p-popover-content"; })(PopoverClasses || (PopoverClasses = {})); const _c0 = ["content"]; const _c1 = ["closeicon"]; const _c2 = ["*"]; const _c3 = (a0, a1) => ({ showTransitionParams: a0, hideTransitionParams: a1 }); const _c4 = (a0, a1) => ({ value: a0, params: a1 }); function OverlayPanel_div_0_ng_container_3_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainer(0); } } function OverlayPanel_div_0_Template(rf, ctx) { if (rf & 1) { const _r1 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "div", 1); i0.ɵɵlistener("click", function OverlayPanel_div_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOverlayClick($event)); })("@animation.start", function OverlayPanel_div_0_Template_div_animation_animation_start_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAnimationStart($event)); })("@animation.done", function OverlayPanel_div_0_Template_div_animation_animation_done_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAnimationEnd($event)); }); i0.ɵɵelementStart(1, "div", 2); i0.ɵɵlistener("click", function OverlayPanel_div_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContentClick($event)); })("mousedown", function OverlayPanel_div_0_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContentClick($event)); }); i0.ɵɵprojection(2); i0.ɵɵtemplate(3, OverlayPanel_div_0_ng_container_3_Template, 1, 0, "ng-container", 3); i0.ɵɵelementEnd()(); } if (rf & 2) { const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵclassMap(ctx_r1.styleClass); i0.ɵɵproperty("ngClass", "p-popover p-component")("ngStyle", ctx_r1.style)("@animation", i0.ɵɵpureFunction2(12, _c4, ctx_r1.overlayVisible ? "open" : "close", i0.ɵɵpureFunction2(9, _c3, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions))); i0.ɵɵattribute("aria-modal", ctx_r1.overlayVisible)("aria-label", ctx_r1.ariaLabel)("aria-labelledBy", ctx_r1.ariaLabelledBy); i0.ɵɵadvance(3); i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate || ctx_r1._contentTemplate); } } /** * OverlayPanel is a container component positioned as connected to its target. * @group Components * @deprecated Use Popover component instead. */ class OverlayPanel extends BaseComponent { zone; overlayService; /** * Defines a string that labels the input for accessibility. * @group Props */ ariaLabel; /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. * @group Props */ ariaLabelledBy; /** * Enables to hide the overlay when outside is clicked. * @group Props */ dismissable = true; /** * When enabled, displays a close icon at top right corner. * @group Props */ showCloseIcon; /** * Inline style of the component. * @group Props */ style; /** * Style class of the component. * @group Props */ styleClass; /** * Target element to attach the panel, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). * @group Props */ appendTo = 'body'; /** * Whether to automatically manage layering. * @group Props */ autoZIndex = true; /** * Aria label of the close icon. * @group Props */ ariaCloseLabel; /** * Base zIndex value to use in layering. * @group Props */ baseZIndex = 0; /** * When enabled, first button receives focus on show. * @group Props */ focusOnShow = true; /** * Transition options of the show animation. * @group Props */ showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; /** * Transition options of the hide animation. * @group Props */ hideTransitionOptions = '.1s linear'; /** * Callback to invoke when an overlay becomes visible. * @group Emits */ onShow = new EventEmitter(); /** * Callback to invoke when an overlay gets hidden. * @group Emits */ onHide = new EventEmitter(); container; overlayVisible = false; render = false; isOverlayAnimationInProgress = false; selfClick = false; documentClickListener; target; willHide; scrollHandler; documentResizeListener; contentTemplate; closeIconTemplate; templates; _contentTemplate; destroyCallback; overlayEventListener; overlaySubscription; _componentStyle = inject(PopoverStyle); constructor(zone, overlayService) { super(); this.zone = zone; this.overlayService = overlayService; console.log('OverlayPanel is deprecated. Use Popover instead.'); } ngAfterContentInit() { this.templates?.forEach((item) => { switch (item.getType()) { case 'content': this._contentTemplate = item.template; break; default: this._contentTemplate = item.template; break; } this.cd.markForCheck(); }); } bindDocumentClickListener() { if (isPlatformBrowser(this.platformId)) { if (!this.documentClickListener) { let documentEvent = isIOS() ? 'touchstart' : 'click'; const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document; this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => { if (!this.dismissable) { return; } if (!this.container?.contains(event.target) && this.target !== event.target && !this.target.contains(event.target) && !this.selfClick) { this.hide(); } this.selfClick = false; this.cd.markForCheck(); }); } } } unbindDocumentClickListener() { if (this.documentClickListener) { this.documentClickListener(); this.documentClickListener = null; this.selfClick = false; } } /** * Toggles the visibility of the panel. * @param {Event} event - Browser event * @param {Target} target - Target element. * @group Method */ toggle(event, target) { if (this.isOverlayAnimationInProgress) { return; } if (this.overlayVisible) { if (this.hasTargetChanged(event, target)) { this.destroyCallback = () => { this.show(null, target || event.currentTarget || event.target); }; } this.hide(); } else { this.show(event, target); } } /** * Displays the panel. * @param {Event} event - Browser event * @param {Target} target - Target element. * @group Method */ show(event, target) { target && event && event.stopPropagation(); if (this.isOverlayAnimationInProgress) { return; } this.target = target || event.currentTarget || event.target; this.overlayVisible = true; this.render = true; this.cd.markForCheck(); } onOverlayClick(event) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); this.selfClick = true; } onContentClick(event) { const targetElement = event.target; this.selfClick = event.offsetX < targetElement.clientWidth && event.offsetY < targetElement.clientHeight; } hasTargetChanged(event, target) { return this.target != null && this.target !== (target || event.currentTarget || event.target); } appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.container); else appendChild(this.appendTo, this.container); } } restoreAppend() { if (this.container && this.appendTo) { this.renderer.appendChild(this.el.nativeElement, this.container); } } align() { if (this.autoZIndex) { ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay); } absolutePosition(this.container, this.target, false); const containerOffset = getOffset(this.container); const targetOffset = getOffset(this.target); const borderRadius = this.document.defaultView?.getComputedStyle(this.container).getPropertyValue('border-radius'); let arrowLeft = 0; if (containerOffset.left < targetOffset.left) { arrowLeft = targetOffset.left - containerOffset.left - parseFloat(borderRadius) * 2; } this.container?.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`); if (containerOffset.top < targetOffset.top) { addClass(this.container, 'p-popover-flipped'); if (this.showCloseIcon) { this.renderer.setStyle(this.container, 'margin-top', '-30px'); } } } onAnimationStart(event) { if (event.toState === 'open') { this.container = event.element; this.appendContainer(); this.align(); this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); if (this.focusOnShow) { this.focus(); } this.overlayEventListener = (e) => { if (this.container && this.container.contains(e.target)) { this.selfClick = true; } }; this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener); this.onShow.emit(null); } this.isOverlayAnimationInProgress = true; } onAnimationEnd(event) { switch (event.toState) { case 'void': if (this.destroyCallback) { this.destroyCallback(); this.destroyCallback = null; } if (this.overlaySubscription) { this.overlaySubscription.unsubscribe(); } break; case 'close': if (this.autoZIndex) { ZIndexUtils.clear(this.container); } if (this.overlaySubscription) { this.overlaySubscription.unsubscribe(); } this.onContainerDestroy(); this.onHide.emit({}); this.render = false; break; } this.isOverlayAnimationInProgress = false; } focus() { let focusable = findSingle(this.container, '[autofocus]'); if (focusable) { this.zone.runOutsideAngular(() => { setTimeout(() => focusable.focus(), 5); }); } } /** * Hides the panel. * @group Method */ hide() { this.overlayVisible = false; this.cd.markForCheck(); } onCloseClick(event) { this.hide(); event.preventDefault(); } onEscapeKeydown(event) { this.hide(); } onWindowResize() { if (this.overlayVisible && !isTouchDevice()) { this.hide(); } } bindDocumentResizeListener() { if (isPlatformBrowser(this.platformId)) { if (!this.documentResizeListener) { const window = this.document.defaultView; this.documentResizeListener = this.renderer.listen(window, 'resize', this.onWindowResize.bind(this)); } } } unbindDocumentResizeListener() { if (this.documentResizeListener) { this.documentResizeListener(); this.documentResizeListener = null; } } bindScrollListener() { if (isPlatformBrowser(this.platformId)) { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => { if (this.overlayVisible) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } onContainerDestroy() { if (!this.cd.destroyed) { this.target = null; } this.unbindDocumentClickListener(); this.unbindDocumentResizeListener(); this.unbindScrollListener(); } ngOnDestroy() { if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } if (this.container && this.autoZIndex) { ZIndexUtils.clear(this.container); } if (!this.cd.destroyed) { this.target = null; } this.destroyCallback = null; if (this.container) { this.restoreAppend(); this.onContainerDestroy(); } if (this.overlaySubscription) { this.overlaySubscription.unsubscribe(); } super.ngOnDestroy(); } static ɵfac = function OverlayPanel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverlayPanel)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.OverlayService)); }; static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayPanel, selectors: [["p-overlayPanel"], ["p-overlaypanel"]], contentQueries: function OverlayPanel_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) { i0.ɵɵcontentQuery(dirIndex, _c0, 4); i0.ɵɵcontentQuery(dirIndex, _c1, 4); i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4); } if (rf & 2) { let _t; i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first); i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeIconTemplate = _t.first); i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t); } }, hostBindings: function OverlayPanel_HostBindings(rf, ctx) { if (rf & 1) { i0.ɵɵlistener("keydown.escape", function OverlayPanel_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKeydown($event); }, false, i0.ɵɵresolveDocument); } }, inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dismissable: [2, "dismissable", "dismissable", booleanAttribute], showCloseIcon: [2, "showCloseIcon", "showCloseIcon", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], ariaCloseLabel: "ariaCloseLabel", baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], focusOnShow: [2, "focusOnShow", "focusOnShow", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, standalone: false, features: [i0.ɵɵProvidersFeature([PopoverStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2, decls: 1, vars: 1, consts: [["role", "dialog", 3, "ngClass", "ngStyle", "class", "click", 4, "ngIf"], ["role", "dialog", 3, "click", "ngClass", "ngStyle"], [1, "p-popover-content", 3, "click", "mousedown"], [4, "ngTemplateOutlet"]], template: function OverlayPanel_Template(rf, ctx) { if (rf & 1) { i0.ɵɵprojectionDef(); i0.ɵɵtemplate(0, OverlayPanel_div_0_Template, 4, 15, "div", 0); } if (rf & 2) { i0.ɵɵproperty("ngIf", ctx.render); } }, dependencies: [i2.NgClass, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle], encapsulation: 2, data: { animation: [ trigger('animation', [ state('void', style({ transform: 'scaleY(0.8)', opacity: 0 })), state('close', style({ opacity: 0 })), state('open', style({ transform: 'translateY(0)', opacity: 1 })), transition('void => open', animate('{{showTransitionParams}}')), transition('open => close', animate('{{hideTransitionParams}}')) ]) ] }, changeDetection: 0 }); } (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayPanel, [{ type: Component, args: [{ selector: 'p-overlayPanel, p-overlaypanel', standalone: false, template: ` <div *ngIf="render" [ngClass]="'p-popover p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)" [@animation]="{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }" (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog" [attr.aria-modal]="overlayVisible" [attr.aria-label]="ariaLabel" [attr.aria-labelledBy]="ariaLabelledBy" > <div class="p-popover-content" (click)="onContentClick($event)" (mousedown)="onContentClick($event)"> <ng-content></ng-content> <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container> </div> </div> `, animations: [ trigger('animation', [ state('void', style({ transform: 'scaleY(0.8)', opacity: 0 })), state('close', style({ opacity: 0 })), state('open', style({ transform: 'translateY(0)', opacity: 1 })), transition('void => open', animate('{{showTransitionParams}}')), transition('open => close', animate('{{hideTransitionParams}}')) ]) ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [PopoverStyle] }] }], () => [{ type: i0.NgZone }, { type: i1.OverlayService }], { ariaLabel: [{ type: Input }], ariaLabelledBy: [{ type: Input }], dismissable: [{ type: Input, args: [{ transform: booleanAttribute }] }], showCloseIcon: [{ type: Input, args: [{ transform: booleanAttribute }] }], style: [{ type: Input }], styleClass: [{ type: Input }], appendTo: [{ type: Input }], autoZIndex: [{ type: Input, args: [{ transform: booleanAttribute }] }], ariaCloseLabel: [{ type: Input }], baseZIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], focusOnShow: [{ type: Input, args: [{ transform: booleanAttribute }] }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], onShow: [{ type: Output }], onHide: [{ type: Output }], contentTemplate: [{ type: ContentChild, args: ['content', { descendants: false }] }], closeIconTemplate: [{ type: ContentChild, args: ['closeicon', { descendants: false }] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }], onEscapeKeydown: [{ type: HostListener, args: ['document:keydown.escape', ['$event']] }] }); })(); (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverlayPanel, { className: "OverlayPanel", filePath: "overlaypanel.ts", lineNumber: 98 }); })(); class OverlayPanelModule { static ɵfac = function OverlayPanelModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverlayPanelModule)(); }; static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: OverlayPanelModule }); static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, SharedModule, TimesIcon, SharedModule] }); } (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayPanelModule, [{ type: NgModule, args: [{ imports: [CommonModule, Ripple, SharedModule, TimesIcon], exports: [OverlayPanel, SharedModule], declarations: [OverlayPanel] }] }], null, null); })(); (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(OverlayPanelModule, { declarations: [OverlayPanel], imports: [CommonModule, Ripple, SharedModule, TimesIcon], exports: [OverlayPanel, SharedModule] }); })(); /** * Generated bundle index. Do not edit. */ export { OverlayPanel, OverlayPanelModule, PopoverClasses, PopoverStyle }; //# sourceMappingURL=primeng-overlaypanel.mjs.map