primeng/fesm2022/primeng-fieldset.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/fieldset';
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 { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
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/fieldset';
import { BaseStyle } from 'primeng/base';

const classes = {
    root: ({ instance }) => {
        const toggleable = instance.toggleable();
        const collapsed = instance.collapsed();
        return [
            'p-fieldset p-component',
            {
                'p-fieldset-toggleable': toggleable
            }
        ];
    },
    legend: 'p-fieldset-legend',
    legendLabel: 'p-fieldset-legend-label',
    toggleButton: 'p-fieldset-toggle-button',
    toggleIcon: 'p-fieldset-toggle-icon',
    contentContainer: 'p-fieldset-content-container',
    contentWrapper: 'p-fieldset-content-wrapper',
    content: 'p-fieldset-content'
};
class FieldsetStyle extends BaseStyle {
    name = 'fieldset';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Fieldset is a grouping component with the optional content toggle feature.
 *
 * [Live Demo](https://www.primeng.org/fieldset/)
 *
 * @module fieldsetstyle
 *
 */
var FieldsetClasses;
(function (FieldsetClasses) {
    /**
     * Class name of the root element
     */
    FieldsetClasses["root"] = "p-fieldset";
    /**
     * Class name of the legend element
     */
    FieldsetClasses["legend"] = "p-fieldset-legend";
    /**
     * Class name of the legend label element
     */
    FieldsetClasses["legendLabel"] = "p-fieldset-legend-label";
    /**
     * Class name of the toggle icon element
     */
    FieldsetClasses["toggleIcon"] = "p-fieldset-toggle-icon";
    /**
     * Class name of the content container element
     */
    FieldsetClasses["contentContainer"] = "p-fieldset-content-container";
    /**
     * Class name of the content wrapper element
     */
    FieldsetClasses["contentWrapper"] = "p-fieldset-content-wrapper";
    /**
     * Class name of the content element
     */
    FieldsetClasses["content"] = "p-fieldset-content";
})(FieldsetClasses || (FieldsetClasses = {}));

const FIELDSET_INSTANCE = new InjectionToken('FIELDSET_INSTANCE');
/**
 * Fieldset is a grouping component with the optional content toggle feature.
 * @group Components
 */
class Fieldset extends BaseComponent {
    componentName = 'Fieldset';
    $pcFieldset = inject(FIELDSET_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    _componentStyle = inject(FieldsetStyle);
    bindDirectiveInstance = inject(Bind, { self: true });
    /**
     * Header text of the fieldset.
     * @group Props
     */
    legend = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "legend" }] : /* istanbul ignore next */ []));
    /**
     * When specified, content can toggled by clicking the legend.
     * @group Props
     * @defaultValue false
     */
    toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Defines the initial state of content, supports one or two-way binding as well.
     * @group Props
     */
    collapsed = model(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
    /**
     * Inline style of the component.
     * @group Props
     */
    style = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
    /**
     * Style class of the component.
     * @group Props
     */
    styleClass = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* 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 {FieldsetBeforeToggleEvent} event - Custom toggle event
     * @group Emits
     */
    onBeforeToggle = output();
    /**
     * Callback to invoke after panel toggle.
     * @param {FieldsetAfterToggleEvent} event - Custom toggle event
     * @group Emits
     */
    onAfterToggle = output();
    /**
     * Custom header template.
     * @group Templates
     */
    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom toggler icon template.
     * @group Templates
     */
    toggleIconTemplate = contentChild('toggleicon', { ...(ngDevMode ? { debugName: "toggleIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom expand icon template.
     * @group Templates
     */
    expandIconTemplate = contentChild('expandicon', { ...(ngDevMode ? { debugName: "expandIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom collapse icon template.
     * @group Templates
     */
    collapseIconTemplate = contentChild('collapseicon', { ...(ngDevMode ? { debugName: "collapseIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom content template.
     * @group Templates
     */
    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    contentWrapperViewChild = viewChild('contentWrapper', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentWrapperViewChild" }] : /* istanbul ignore next */ []));
    _id = uuid('pn_id_');
    get id() {
        return this._id;
    }
    get headerId() {
        return this.id + '_header';
    }
    get contentId() {
        return this.id + '_content';
    }
    buttonAriaLabel = computed(() => this.legend(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "buttonAriaLabel" }] : /* istanbul ignore next */ []));
    toggleIconContext = computed(() => ({ $implicit: this.collapsed(), collapsed: this.collapsed() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "toggleIconContext" }] : /* istanbul ignore next */ []));
    dataP = computed(() => this.cn({ toggleable: this.toggleable() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
    contentTabindex = computed(() => (this.collapsed() ? '-1' : undefined), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentTabindex" }] : /* 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.ptm('host'));
    }
    toggle(event) {
        this.onBeforeToggle.emit({ originalEvent: event, collapsed: this.collapsed() });
        if (this.collapsed())
            this.expand();
        else
            this.collapse();
        event.preventDefault();
    }
    onKeyDown(event) {
        if (event.code === 'Enter' || event.code === 'Space') {
            this.toggle(event);
            event.preventDefault();
        }
    }
    expand() {
        this.collapsed.set(false);
        this.updateTabIndex();
    }
    collapse() {
        this.collapsed.set(true);
        this.updateTabIndex();
    }
    getBlockableElement() {
        return this.el.nativeElement.children[0];
    }
    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');
                }
            });
        }
    }
    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: Fieldset, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Fieldset, isStandalone: true, selector: "p-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, providers: [FieldsetStyle, { provide: FIELDSET_INSTANCE, useExisting: Fieldset }, { provide: PARENT_INSTANCE, useExisting: Fieldset }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "toggleIconTemplate", first: true, predicate: ["toggleicon"], isSignal: true }, { propertyName: "expandIconTemplate", first: true, predicate: ["expandicon"], isSignal: true }, { propertyName: "collapseIconTemplate", first: true, predicate: ["collapseicon"], isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }], viewQueries: [{ propertyName: "contentWrapperViewChild", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        <fieldset [attr.id]="id" [style]="style()" [class]="cn(cx('root'), styleClass())" [pBind]="ptm('root')" [attr.data-p]="dataP()">
            <legend [class]="cx('legend')" [pBind]="ptm('legend')" [attr.data-p]="dataP()">
                @if (toggleable()) {
                    <button
                        [attr.id]="headerId"
                        tabindex="0"
                        role="button"
                        [attr.aria-controls]="contentId"
                        [attr.aria-expanded]="!collapsed()"
                        [attr.aria-label]="buttonAriaLabel()"
                        (click)="toggle($event)"
                        (keydown)="onKeyDown($event)"
                        [class]="cx('toggleButton')"
                        [pBind]="ptm('toggleButton')"
                    >
                        @if (toggleIconTemplate()) {
                            <span [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')">
                                <ng-container *ngTemplateOutlet="toggleIconTemplate(); context: toggleIconContext()"></ng-container>
                            </span>
                        } @else if (collapsed()) {
                            @if (!expandIconTemplate()) {
                                <svg data-p-icon="plus" [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')" />
                            } @else {
                                <span [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')">
                                    <ng-container *ngTemplateOutlet="expandIconTemplate()"></ng-container>
                                </span>
                            }
                        } @else {
                            @if (!collapseIconTemplate()) {
                                <svg data-p-icon="minus" [class]="cx('toggleIcon')" [attr.aria-hidden]="true" [pBind]="ptm('toggleIcon')" />
                            } @else {
                                <span [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')">
                                    <ng-container *ngTemplateOutlet="collapseIconTemplate()"></ng-container>
                                </span>
                            }
                        }
                        <ng-container *ngTemplateOutlet="legendContent"></ng-container>
                    </button>
                } @else {
                    <ng-container *ngTemplateOutlet="legendContent"></ng-container>
                }
                <ng-template #legendContent>
                    <span [class]="cx('legendLabel')" [pBind]="ptm('legendLabel')">{{ legend() }}</span>
                    <ng-content select="p-header"></ng-content>
                    <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
                </ng-template>
            </legend>
            <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)"
                (pMotionOnAfterLeave)="onToggleDone($event)"
            >
                <div [pBind]="ptm('contentWrapper')" [class]="cx('contentWrapper')">
                    <div [class]="cx('content')" [pBind]="ptm('content')" #contentWrapper>
                        <ng-content></ng-content>
                        <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
                    </div>
                </div>
            </div>
        </fieldset>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Minus, selector: "svg[data-p-icon=\"minus\"]" }, { kind: "component", type: Plus, selector: "svg[data-p-icon=\"plus\"]" }, { 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: Fieldset, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-fieldset',
                    standalone: true,
                    imports: [NgTemplateOutlet, Minus, Plus, SharedModule, BindModule, MotionModule],
                    template: `
        <fieldset [attr.id]="id" [style]="style()" [class]="cn(cx('root'), styleClass())" [pBind]="ptm('root')" [attr.data-p]="dataP()">
            <legend [class]="cx('legend')" [pBind]="ptm('legend')" [attr.data-p]="dataP()">
                @if (toggleable()) {
                    <button
                        [attr.id]="headerId"
                        tabindex="0"
                        role="button"
                        [attr.aria-controls]="contentId"
                        [attr.aria-expanded]="!collapsed()"
                        [attr.aria-label]="buttonAriaLabel()"
                        (click)="toggle($event)"
                        (keydown)="onKeyDown($event)"
                        [class]="cx('toggleButton')"
                        [pBind]="ptm('toggleButton')"
                    >
                        @if (toggleIconTemplate()) {
                            <span [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')">
                                <ng-container *ngTemplateOutlet="toggleIconTemplate(); context: toggleIconContext()"></ng-container>
                            </span>
                        } @else if (collapsed()) {
                            @if (!expandIconTemplate()) {
                                <svg data-p-icon="plus" [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')" />
                            } @else {
                                <span [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')">
                                    <ng-container *ngTemplateOutlet="expandIconTemplate()"></ng-container>
                                </span>
                            }
                        } @else {
                            @if (!collapseIconTemplate()) {
                                <svg data-p-icon="minus" [class]="cx('toggleIcon')" [attr.aria-hidden]="true" [pBind]="ptm('toggleIcon')" />
                            } @else {
                                <span [class]="cx('toggleIcon')" [pBind]="ptm('toggleIcon')">
                                    <ng-container *ngTemplateOutlet="collapseIconTemplate()"></ng-container>
                                </span>
                            }
                        }
                        <ng-container *ngTemplateOutlet="legendContent"></ng-container>
                    </button>
                } @else {
                    <ng-container *ngTemplateOutlet="legendContent"></ng-container>
                }
                <ng-template #legendContent>
                    <span [class]="cx('legendLabel')" [pBind]="ptm('legendLabel')">{{ legend() }}</span>
                    <ng-content select="p-header"></ng-content>
                    <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
                </ng-template>
            </legend>
            <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)"
                (pMotionOnAfterLeave)="onToggleDone($event)"
            >
                <div [pBind]="ptm('contentWrapper')" [class]="cx('contentWrapper')">
                    <div [class]="cx('content')" [pBind]="ptm('content')" #contentWrapper>
                        <ng-content></ng-content>
                        <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
                    </div>
                </div>
            </div>
        </fieldset>
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [FieldsetStyle, { provide: FIELDSET_INSTANCE, useExisting: Fieldset }, { provide: PARENT_INSTANCE, useExisting: Fieldset }],
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", 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"] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], toggleIconTemplate: [{ type: i0.ContentChild, args: ['toggleicon', { ...{ descendants: false }, isSignal: true }] }], expandIconTemplate: [{ type: i0.ContentChild, args: ['expandicon', { ...{ descendants: false }, isSignal: true }] }], collapseIconTemplate: [{ type: i0.ContentChild, args: ['collapseicon', { ...{ descendants: false }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], contentWrapperViewChild: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }] } });
class FieldsetModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: FieldsetModule, imports: [Fieldset, SharedModule, BindModule], exports: [Fieldset, SharedModule, BindModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetModule, imports: [Fieldset, SharedModule, BindModule, SharedModule, BindModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Fieldset, SharedModule, BindModule],
                    exports: [Fieldset, SharedModule, BindModule]
                }]
        }] });

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

export { Fieldset, FieldsetClasses, FieldsetModule, FieldsetStyle };
//# sourceMappingURL=primeng-fieldset.mjs.map