primeng/fesm2022/primeng-panel.mjs

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

export * from 'primeng/types/panel';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, model, output, contentChild, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { uuid } from '@primeuix/utils';
import { Footer, SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { ButtonDirective } from 'primeng/button';
import { Minus } from '@primeicons/angular/minus';
import { Plus } from '@primeicons/angular/plus';
import * as i2 from 'primeng/motion';
import { MotionModule } from 'primeng/motion';
import { style } from '@primeuix/styles/panel';
import { BaseStyle } from 'primeng/base';

const classes = {
    root: ({ instance }) => {
        return [
            'p-panel p-component',
            {
                'p-panel-toggleable': instance.toggleable()
            }
        ];
    },
    header: 'p-panel-header',
    title: 'p-panel-title',
    headerActions: ({ instance }) => {
        const iconPos = instance.iconPos();
        return [
            'p-panel-header-actions',
            {
                'p-panel-icons-start': iconPos === 'start',
                'p-panel-icons-end': iconPos === 'end',
                'p-panel-icons-center': iconPos === 'center'
            }
        ];
    },
    pcToggleButton: 'p-panel-toggle-button',
    contentContainer: 'p-panel-content-container',
    contentWrapper: 'p-panel-content-wrapper',
    content: 'p-panel-content',
    footer: 'p-panel-footer'
};
class PanelStyle extends BaseStyle {
    name = 'panel';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Panel is a container with the optional content toggle feature.
 *
 * [Live Demo](https://www.primeng.org/panel/)
 *
 * @module panelstyle
 *
 */
var PanelClasses;
(function (PanelClasses) {
    /**
     * Class name of the root element
     */
    PanelClasses["root"] = "p-panel";
    /**
     * Class name of the header element
     */
    PanelClasses["header"] = "p-panel-header";
    /**
     * Class name of the title element
     */
    PanelClasses["title"] = "p-panel-title";
    /**
     * Class name of the header actions element
     */
    PanelClasses["headerActions"] = "p-panel-header-actions";
    /**
     * Class name of the toggle button element
     */
    PanelClasses["pcToggleButton"] = "p-panel-toggle-button";
    /**
     * Class name of the content container element
     */
    PanelClasses["contentContainer"] = "p-panel-content-container";
    /**
     * Class name of the content wrapper element
     */
    PanelClasses["contentWrapper"] = "p-panel-content-wrapper";
    /**
     * Class name of the content element
     */
    PanelClasses["content"] = "p-panel-content";
    /**
     * Class name of the footer element
     */
    PanelClasses["footer"] = "p-panel-footer";
})(PanelClasses || (PanelClasses = {}));

const PANEL_INSTANCE = new InjectionToken('PANEL_INSTANCE');
/**
 * Panel is a container with the optional content toggle feature.
 * @group Components
 */
class Panel extends BaseComponent {
    componentName = 'Panel';
    $pcPanel = inject(PANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    _componentStyle = inject(PanelStyle);
    bindDirectiveInstance = inject(Bind, { self: true });
    /**
     * Id of the component.
     */
    id = input(uuid('pn_id_'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    /**
     * Defines if content of panel can be expanded and collapsed.
     * @group Props
     */
    toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Header text of the panel.
     * @group Props
     */
    header = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
    /**
     * Defines the initial state of panel content, supports one or two-way binding as well.
     * @group Props
     */
    collapsed = model(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
    /**
     * Position of the icons.
     * @group Props
     */
    iconPos = input('end', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
    /**
     * Specifies if header of panel cannot be displayed.
     * @group Props
     */
    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Specifies the toggler element to toggle the panel content.
     * @group Props
     */
    toggler = input('icon', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "toggler" }] : /* istanbul ignore next */ []));
    /**
     * Configuration object forwarded to the toggle button.
     * @group Props
     */
    toggleButtonProps = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "toggleButtonProps" }] : /* istanbul ignore next */ []));
    /**
     * The motion options.
     * @group Props
     */
    motionOptions = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
    /**
     * Callback to invoke before panel toggle.
     * @param {PanelBeforeToggleEvent} event - Custom panel toggle event
     * @group Emits
     */
    onBeforeToggle = output();
    /**
     * Callback to invoke after panel toggle.
     * @param {PanelAfterToggleEvent} event - Custom panel toggle event
     * @group Emits
     */
    onAfterToggle = output();
    footerFacet = contentChild(Footer, { ...(ngDevMode ? { debugName: "footerFacet" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Defines template option for header.
     * @example
     * ```html
     * <ng-template #header> </ng-template>
     * ```
     * @group Templates
     */
    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Defines template option for icon.
     * @example
     * ```html
     * <ng-template #icons> </ng-template>
     * ```
     * @group Templates
     */
    iconTemplate = contentChild('icons', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Defines template option for content.
     * @example
     * ```html
     * <ng-template #content> </ng-template>
     * ```
     * @group Templates
     */
    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Defines template option for footer.
     * @example
     * ```html
     * <ng-template #footer> </ng-template>
     * ```
     * @group Templates
     */
    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Defines template option for headerIcon.
     * @param {PanelHeaderIconsTemplateContext} context - context of the template.
     * @example
     * ```html
     * <ng-template #headericons let-collapsed> </ng-template>
     * ```
     * @see {@link PanelHeaderIconsTemplateContext}
     * @group Templates
     */
    headerIconsTemplate = contentChild('headericons', { ...(ngDevMode ? { debugName: "headerIconsTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    contentWrapperViewChild = viewChild('contentWrapper', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentWrapperViewChild" }] : /* istanbul ignore next */ []));
    titlebarId = computed(() => this.id() + '-titlebar', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "titlebarId" }] : /* istanbul ignore next */ []));
    headerId = computed(() => this.id() + '_header', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
    contentId = computed(() => this.id() + '_content', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
    buttonAriaLabel = computed(() => this.header(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "buttonAriaLabel" }] : /* istanbul ignore next */ []));
    dataP = computed(() => this.cn({ toggleable: this.toggleable() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
    hasFooter = computed(() => !!(this.footerFacet() || this.footerTemplate()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
    showDefaultIcon = computed(() => !this.headerIconsTemplate(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "showDefaultIcon" }] : /* istanbul ignore next */ []));
    contentTabindex = computed(() => (this.collapsed() ? '-1' : undefined), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentTabindex" }] : /* istanbul ignore next */ []));
    headerIconsContext = computed(() => ({ $implicit: this.collapsed() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "headerIconsContext" }] : /* istanbul ignore next */ []));
    isContentVisible = computed(() => !this.toggleable() || (this.toggleable() && !this.collapsed()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isContentVisible" }] : /* istanbul ignore next */ []));
    computedMotionOptions = computed(() => {
        return {
            ...this.ptm('motion'),
            ...this.motionOptions()
        };
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    onHeaderClick(event) {
        if (this.toggler() === 'header') {
            this.toggle(event);
        }
    }
    onIconClick(event) {
        if (this.toggler() === 'icon') {
            this.toggle(event);
        }
    }
    toggle(event) {
        this.onBeforeToggle.emit({ originalEvent: event, collapsed: this.collapsed() });
        if (this.collapsed())
            this.expand();
        else
            this.collapse();
        event.preventDefault();
    }
    expand() {
        this.collapsed.set(false);
        this.updateTabIndex();
    }
    collapse() {
        this.collapsed.set(true);
        this.updateTabIndex();
    }
    getBlockableElement() {
        return this.el.nativeElement;
    }
    updateTabIndex() {
        const contentWrapper = this.contentWrapperViewChild();
        if (contentWrapper) {
            const focusableElements = contentWrapper.nativeElement.querySelectorAll('input, button, select, a, textarea, [tabindex]');
            focusableElements.forEach((element) => {
                if (this.collapsed()) {
                    element.setAttribute('tabindex', '-1');
                }
                else {
                    element.removeAttribute('tabindex');
                }
            });
        }
    }
    onKeyDown(event) {
        if (event.code === 'Enter' || event.code === 'Space') {
            this.toggle(event);
            event.preventDefault();
        }
    }
    onToggleDone(event) {
        this.onAfterToggle.emit({ originalEvent: event, collapsed: this.collapsed() });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Panel, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Panel, isStandalone: true, selector: "p-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, toggler: { classPropertyName: "toggler", publicName: "toggler", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonProps: { classPropertyName: "toggleButtonProps", publicName: "toggleButtonProps", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { properties: { "id": "id()", "class": "cx('root')", "attr.data-p": "dataP()" } }, providers: [PanelStyle, { provide: PANEL_INSTANCE, useExisting: Panel }, { provide: PARENT_INSTANCE, useExisting: Panel }], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ["icons"], isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "headerIconsTemplate", first: true, predicate: ["headericons"], isSignal: true }], viewQueries: [{ propertyName: "contentWrapperViewChild", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        @if (showHeader()) {
            <div [pBind]="ptm('header')" [class]="cx('header')" (click)="onHeaderClick($event)" [attr.id]="titlebarId()" [attr.data-p]="dataP()">
                @if (header()) {
                    <span [pBind]="ptm('title')" [class]="cx('title')" [attr.id]="headerId()">{{ header() }}</span>
                }
                <ng-content select="p-header"></ng-content>
                <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
                <div [pBind]="ptm('headerActions')" [class]="cx('headerActions')">
                    <ng-container *ngTemplateOutlet="iconTemplate()"></ng-container>
                    @if (toggleable()) {
                        <button
                            type="button"
                            iconOnly
                            [pButton]="toggleButtonProps()"
                            severity="secondary"
                            [text]="true"
                            [rounded]="true"
                            role="button"
                            [class]="cx('pcToggleButton')"
                            [attr.id]="headerId()"
                            [attr.aria-label]="buttonAriaLabel()"
                            [attr.aria-controls]="contentId()"
                            [attr.aria-expanded]="!collapsed()"
                            [pButtonPT]="ptm('pcToggleButton')"
                            [pButtonUnstyled]="unstyled()"
                            (click)="onIconClick($event)"
                            (keydown)="onKeyDown($event)"
                        >
                            @if (showDefaultIcon()) {
                                @if (!collapsed()) {
                                    <svg data-p-icon="minus" [pBind]="ptm('pcToggleButton.icon')" />
                                } @else {
                                    <svg data-p-icon="plus" [pBind]="ptm('pcToggleButton.icon')" />
                                }
                            }
                            <ng-container *ngTemplateOutlet="headerIconsTemplate(); context: headerIconsContext()"></ng-container>
                        </button>
                    }
                </div>
            </div>
        }
        <div
            [pBind]="ptm('contentContainer')"
            [pMotion]="isContentVisible()"
            pMotionName="p-collapsible"
            [pMotionOptions]="computedMotionOptions()"
            [class]="cx('contentContainer')"
            [id]="contentId()"
            role="region"
            [attr.aria-labelledby]="headerId()"
            [attr.aria-hidden]="collapsed()"
            [attr.tabindex]="contentTabindex()"
            (pMotionOnAfterEnter)="onToggleDone($event)"
        >
            <div [pBind]="ptm('contentWrapper')" [class]="cx('contentWrapper')">
                <div [pBind]="ptm('content')" [class]="cx('content')" #contentWrapper>
                    <ng-content></ng-content>
                    <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
                </div>
                @if (hasFooter()) {
                    <div [pBind]="ptm('footer')" [class]="cx('footer')">
                        <ng-content select="p-footer"></ng-content>
                        <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
                    </div>
                }
            </div>
        </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Plus, selector: "svg[data-p-icon=\"plus\"]" }, { kind: "component", type: Minus, selector: "svg[data-p-icon=\"minus\"]" }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i2.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Panel, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-panel',
                    standalone: true,
                    imports: [NgTemplateOutlet, Plus, Minus, ButtonDirective, SharedModule, BindModule, MotionModule],
                    template: `
        @if (showHeader()) {
            <div [pBind]="ptm('header')" [class]="cx('header')" (click)="onHeaderClick($event)" [attr.id]="titlebarId()" [attr.data-p]="dataP()">
                @if (header()) {
                    <span [pBind]="ptm('title')" [class]="cx('title')" [attr.id]="headerId()">{{ header() }}</span>
                }
                <ng-content select="p-header"></ng-content>
                <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
                <div [pBind]="ptm('headerActions')" [class]="cx('headerActions')">
                    <ng-container *ngTemplateOutlet="iconTemplate()"></ng-container>
                    @if (toggleable()) {
                        <button
                            type="button"
                            iconOnly
                            [pButton]="toggleButtonProps()"
                            severity="secondary"
                            [text]="true"
                            [rounded]="true"
                            role="button"
                            [class]="cx('pcToggleButton')"
                            [attr.id]="headerId()"
                            [attr.aria-label]="buttonAriaLabel()"
                            [attr.aria-controls]="contentId()"
                            [attr.aria-expanded]="!collapsed()"
                            [pButtonPT]="ptm('pcToggleButton')"
                            [pButtonUnstyled]="unstyled()"
                            (click)="onIconClick($event)"
                            (keydown)="onKeyDown($event)"
                        >
                            @if (showDefaultIcon()) {
                                @if (!collapsed()) {
                                    <svg data-p-icon="minus" [pBind]="ptm('pcToggleButton.icon')" />
                                } @else {
                                    <svg data-p-icon="plus" [pBind]="ptm('pcToggleButton.icon')" />
                                }
                            }
                            <ng-container *ngTemplateOutlet="headerIconsTemplate(); context: headerIconsContext()"></ng-container>
                        </button>
                    }
                </div>
            </div>
        }
        <div
            [pBind]="ptm('contentContainer')"
            [pMotion]="isContentVisible()"
            pMotionName="p-collapsible"
            [pMotionOptions]="computedMotionOptions()"
            [class]="cx('contentContainer')"
            [id]="contentId()"
            role="region"
            [attr.aria-labelledby]="headerId()"
            [attr.aria-hidden]="collapsed()"
            [attr.tabindex]="contentTabindex()"
            (pMotionOnAfterEnter)="onToggleDone($event)"
        >
            <div [pBind]="ptm('contentWrapper')" [class]="cx('contentWrapper')">
                <div [pBind]="ptm('content')" [class]="cx('content')" #contentWrapper>
                    <ng-content></ng-content>
                    <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
                </div>
                @if (hasFooter()) {
                    <div [pBind]="ptm('footer')" [class]="cx('footer')">
                        <ng-content select="p-footer"></ng-content>
                        <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
                    </div>
                }
            </div>
        </div>
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [PanelStyle, { provide: PANEL_INSTANCE, useExisting: Panel }, { provide: PARENT_INSTANCE, useExisting: Panel }],
                    host: {
                        '[id]': 'id()',
                        '[class]': "cx('root')",
                        '[attr.data-p]': 'dataP()'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], toggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggler", required: false }] }], toggleButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleButtonProps", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onBeforeToggle: [{ type: i0.Output, args: ["onBeforeToggle"] }], onAfterToggle: [{ type: i0.Output, args: ["onAfterToggle"] }], footerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: ['icons', { ...{ descendants: false }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], headerIconsTemplate: [{ type: i0.ContentChild, args: ['headericons', { ...{ descendants: false }, isSignal: true }] }], contentWrapperViewChild: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }] } });
class PanelModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule, BindModule], exports: [Panel, SharedModule, BindModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule, BindModule, SharedModule, BindModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Panel, SharedModule, BindModule],
                    exports: [Panel, SharedModule, BindModule]
                }]
        }] });

// Backwards compatibility

/**
 * Generated bundle index. Do not edit.
 */

export { Panel, PanelClasses, PanelModule, PanelStyle };
//# sourceMappingURL=primeng-panel.mjs.map