primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-overlaypanel.mjs

@@ -1,657 +0,0 @@
-import { trigger, state, transition, style, 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, HostListener, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, 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';
-import { $dt } from '@primeuix/styled';
-
-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: calc(${dt('popover.arrow.offset')} + ${dt('popover.arrow.left')});
-    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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PopoverStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PopoverStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PopoverStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * 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 = {}));
-
-/**
- * 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($dt('popover.arrow.left').name, `${arrowLeft}px`);
-        if (containerOffset.top < targetOffset.top) {
-            this.container.setAttribute('data-p-popover-flipped', 'true');
-            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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OverlayPanel, deps: [{ token: i0.NgZone }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: OverlayPanel, isStandalone: false, selector: "p-overlayPanel, p-overlaypanel", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dismissable: ["dismissable", "dismissable", booleanAttribute], showCloseIcon: ["showCloseIcon", "showCloseIcon", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], ariaCloseLabel: "ariaCloseLabel", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" } }, providers: [PopoverStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, 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>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], 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: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OverlayPanel, decorators: [{
-            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]
-                }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.OverlayService }], propDecorators: { 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']]
-            }] } });
-class OverlayPanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OverlayPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: OverlayPanelModule, declarations: [OverlayPanel], imports: [CommonModule, Ripple, SharedModule, TimesIcon], exports: [OverlayPanel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OverlayPanelModule, imports: [CommonModule, SharedModule, TimesIcon, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OverlayPanelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, Ripple, SharedModule, TimesIcon],
-                    exports: [OverlayPanel, SharedModule],
-                    declarations: [OverlayPanel]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { OverlayPanel, OverlayPanelModule, PopoverClasses, PopoverStyle };
-//# sourceMappingURL=primeng-overlaypanel.mjs.map