primeng/fesm2022/primeng-card.mjs

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

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, signal, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { equals } from '@primeuix/utils';
import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';

const theme = ({ dt }) => `
.p-card {
    background: ${dt('card.background')};
    color: ${dt('card.color')};
    box-shadow: ${dt('card.shadow')};
    border-radius: ${dt('card.border.radius')};
    display: flex;
    flex-direction: column;
}

.p-card-caption {
    display: flex;
    flex-direction: column;
    gap: ${dt('card.caption.gap')};
}

.p-card-body {
    padding: ${dt('card.body.padding')};
    display: flex;
    flex-direction: column;
    gap: ${dt('card.body.gap')};
}

.p-card-title {
    font-size: ${dt('card.title.font.size')};
    font-weight: ${dt('card.title.font.weight')};
}

.p-card-subtitle {
    color: ${dt('card.subtitle.color')};
}
`;
const classes = {
    root: 'p-card p-component',
    header: 'p-card-header',
    body: 'p-card-body',
    caption: 'p-card-caption',
    title: 'p-card-title',
    subtitle: 'p-card-subtitle',
    content: 'p-card-content',
    footer: 'p-card-footer'
};
class CardStyle extends BaseStyle {
    name = 'card';
    theme = theme;
    classes = classes;
    static ɵfac = /*@__PURE__*/ (() => { let ɵCardStyle_BaseFactory; return function CardStyle_Factory(__ngFactoryType__) { return (ɵCardStyle_BaseFactory || (ɵCardStyle_BaseFactory = i0.ɵɵgetInheritedFactory(CardStyle)))(__ngFactoryType__ || CardStyle); }; })();
    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CardStyle, factory: CardStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CardStyle, [{
        type: Injectable
    }], null, null); })();
/**
 *
 * Card is a flexible container component.
 *
 * [Live Demo](https://www.primeng.org/card/)
 *
 * @module cardstyle
 *
 */
var CardClasses;
(function (CardClasses) {
    /**
     * Class name of the root element
     */
    CardClasses["root"] = "p-card";
    /**
     * Class name of the header element
     */
    CardClasses["header"] = "p-card-header";
    /**
     * Class name of the body element
     */
    CardClasses["body"] = "p-card-body";
    /**
     * Class name of the caption element
     */
    CardClasses["caption"] = "p-card-caption";
    /**
     * Class name of the title element
     */
    CardClasses["title"] = "p-card-title";
    /**
     * Class name of the subtitle element
     */
    CardClasses["subtitle"] = "p-card-subtitle";
    /**
     * Class name of the content element
     */
    CardClasses["content"] = "p-card-content";
    /**
     * Class name of the footer element
     */
    CardClasses["footer"] = "p-card-footer";
})(CardClasses || (CardClasses = {}));

const _c0 = ["header"];
const _c1 = ["title"];
const _c2 = ["subtitle"];
const _c3 = ["content"];
const _c4 = ["footer"];
const _c5 = ["*", [["p-header"]], [["p-footer"]]];
const _c6 = ["*", "p-header", "p-footer"];
function Card_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Card_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 8);
    i0.ɵɵprojection(1, 1);
    i0.ɵɵtemplate(2, Card_div_1_ng_container_2_Template, 1, 0, "ng-container", 6);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.headerTemplate || ctx_r0._headerTemplate);
} }
function Card_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r0.header);
} }
function Card_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Card_div_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵtemplate(1, Card_div_3_ng_container_1_Template, 2, 1, "ng-container", 10)(2, Card_div_3_ng_container_2_Template, 1, 0, "ng-container", 6);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.header && !ctx_r0._titleTemplate && !ctx_r0.titleTemplate);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.titleTemplate || ctx_r0._titleTemplate);
} }
function Card_div_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtext(1);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r0.subheader);
} }
function Card_div_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Card_div_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵtemplate(1, Card_div_4_ng_container_1_Template, 2, 1, "ng-container", 10)(2, Card_div_4_ng_container_2_Template, 1, 0, "ng-container", 6);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.subheader && !ctx_r0._subtitleTemplate && !ctx_r0.subtitleTemplate);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.subtitleTemplate || ctx_r0._subtitleTemplate);
} }
function Card_ng_container_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Card_div_8_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Card_div_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 12);
    i0.ɵɵprojection(1, 2);
    i0.ɵɵtemplate(2, Card_div_8_ng_container_2_Template, 1, 0, "ng-container", 6);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.footerTemplate || ctx_r0._footerTemplate);
} }
/**
 * Card is a flexible container component.
 * @group Components
 */
class Card extends BaseComponent {
    /**
     * Header of the card.
     * @group Props
     */
    header;
    /**
     * Subheader of the card.
     * @group Props
     */
    subheader;
    /**
     * Inline style of the element.
     * @group Props
     */
    set style(value) {
        if (!equals(this._style(), value)) {
            this._style.set(value);
        }
    }
    /**
     * Class of the element.
     * @group Props
     */
    styleClass;
    headerFacet;
    footerFacet;
    headerTemplate;
    titleTemplate;
    subtitleTemplate;
    contentTemplate;
    footerTemplate;
    _headerTemplate;
    _titleTemplate;
    _subtitleTemplate;
    _contentTemplate;
    _footerTemplate;
    _style = signal(null);
    _componentStyle = inject(CardStyle);
    getBlockableElement() {
        return this.el.nativeElement.children[0];
    }
    templates;
    ngAfterContentInit() {
        this.templates.forEach((item) => {
            switch (item.getType()) {
                case 'header':
                    this._headerTemplate = item.template;
                    break;
                case 'title':
                    this._titleTemplate = item.template;
                    break;
                case 'subtitle':
                    this._subtitleTemplate = item.template;
                    break;
                case 'content':
                    this._contentTemplate = item.template;
                    break;
                case 'footer':
                    this._footerTemplate = item.template;
                    break;
                default:
                    this._contentTemplate = item.template;
                    break;
            }
        });
    }
    static ɵfac = /*@__PURE__*/ (() => { let ɵCard_BaseFactory; return function Card_Factory(__ngFactoryType__) { return (ɵCard_BaseFactory || (ɵCard_BaseFactory = i0.ɵɵgetInheritedFactory(Card)))(__ngFactoryType__ || Card); }; })();
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Card, selectors: [["p-card"]], contentQueries: function Card_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, Header, 5);
            i0.ɵɵcontentQuery(dirIndex, Footer, 5);
            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
            i0.ɵɵcontentQuery(dirIndex, _c4, 4);
            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerFacet = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerFacet = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.subtitleTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
        } }, inputs: { header: "header", subheader: "subheader", style: "style", styleClass: "styleClass" }, features: [i0.ɵɵProvidersFeature([CardStyle]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c6, decls: 9, vars: 10, consts: [[3, "ngClass", "ngStyle"], ["class", "p-card-header", 4, "ngIf"], [1, "p-card-body"], ["class", "p-card-title", 4, "ngIf"], ["class", "p-card-subtitle", 4, "ngIf"], [1, "p-card-content"], [4, "ngTemplateOutlet"], ["class", "p-card-footer", 4, "ngIf"], [1, "p-card-header"], [1, "p-card-title"], [4, "ngIf"], [1, "p-card-subtitle"], [1, "p-card-footer"]], template: function Card_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef(_c5);
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵtemplate(1, Card_div_1_Template, 3, 1, "div", 1);
            i0.ɵɵelementStart(2, "div", 2);
            i0.ɵɵtemplate(3, Card_div_3_Template, 3, 2, "div", 3)(4, Card_div_4_Template, 3, 2, "div", 4);
            i0.ɵɵelementStart(5, "div", 5);
            i0.ɵɵprojection(6);
            i0.ɵɵtemplate(7, Card_ng_container_7_Template, 1, 0, "ng-container", 6);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(8, Card_div_8_Template, 3, 1, "div", 7);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵclassMap(ctx.styleClass);
            i0.ɵɵproperty("ngClass", "p-card p-component")("ngStyle", ctx._style());
            i0.ɵɵattribute("data-pc-name", "card");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.headerFacet || ctx.headerTemplate || ctx._headerTemplate);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.header || ctx.titleTemplate || ctx._titleTemplate);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.subheader || ctx.subtitleTemplate || ctx._subtitleTemplate);
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngTemplateOutlet", ctx.contentTemplate || ctx._contentTemplate);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.footerFacet || ctx.footerTemplate || ctx._footerTemplate);
        } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Card, [{
        type: Component,
        args: [{
                selector: 'p-card',
                standalone: true,
                imports: [CommonModule, SharedModule],
                template: `
        <div [ngClass]="'p-card p-component'" [ngStyle]="_style()" [class]="styleClass" [attr.data-pc-name]="'card'">
            <div class="p-card-header" *ngIf="headerFacet || headerTemplate || _headerTemplate">
                <ng-content select="p-header"></ng-content>
                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
            </div>
            <div class="p-card-body">
                <div class="p-card-title" *ngIf="header || titleTemplate || _titleTemplate">
                    <ng-container *ngIf="header && !_titleTemplate && !titleTemplate">{{ header }}</ng-container>
                    <ng-container *ngTemplateOutlet="titleTemplate || _titleTemplate"></ng-container>
                </div>
                <div class="p-card-subtitle" *ngIf="subheader || subtitleTemplate || _subtitleTemplate">
                    <ng-container *ngIf="subheader && !_subtitleTemplate && !subtitleTemplate">{{ subheader }}</ng-container>
                    <ng-container *ngTemplateOutlet="subtitleTemplate || _subtitleTemplate"></ng-container>
                </div>
                <div class="p-card-content">
                    <ng-content></ng-content>
                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
                </div>
                <div class="p-card-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
                    <ng-content select="p-footer"></ng-content>
                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
                </div>
            </div>
        </div>
    `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [CardStyle]
            }]
    }], null, { header: [{
            type: Input
        }], subheader: [{
            type: Input
        }], style: [{
            type: Input
        }], styleClass: [{
            type: Input
        }], headerFacet: [{
            type: ContentChild,
            args: [Header]
        }], footerFacet: [{
            type: ContentChild,
            args: [Footer]
        }], headerTemplate: [{
            type: ContentChild,
            args: ['header', { descendants: false }]
        }], titleTemplate: [{
            type: ContentChild,
            args: ['title', { descendants: false }]
        }], subtitleTemplate: [{
            type: ContentChild,
            args: ['subtitle', { descendants: false }]
        }], contentTemplate: [{
            type: ContentChild,
            args: ['content', { descendants: false }]
        }], footerTemplate: [{
            type: ContentChild,
            args: ['footer', { descendants: false }]
        }], templates: [{
            type: ContentChildren,
            args: [PrimeTemplate]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Card, { className: "Card", filePath: "card.ts", lineNumber: 46 }); })();
class CardModule {
    static ɵfac = function CardModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CardModule)(); };
    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CardModule });
    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Card, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CardModule, [{
        type: NgModule,
        args: [{
                imports: [Card, SharedModule],
                exports: [Card, SharedModule]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CardModule, { imports: [Card, SharedModule], exports: [Card, SharedModule] }); })();

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

export { Card, CardClasses, CardModule, CardStyle };
//# sourceMappingURL=primeng-card.mjs.map