primeng/fesm2022/primeng-message.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,

import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, computed, output, signal, contentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Times } from '@primeicons/angular/times';
import { MotionModule } from 'primeng/motion';
import { Ripple } from 'primeng/ripple';
import { style } from '@primeuix/styles/message';
import { BaseStyle } from 'primeng/base';

const classes = {
    root: ({ instance }) => {
        const severity = instance.severity();
        const variant = instance.variant();
        const size = instance.size();
        return ['p-message p-component p-message-' + severity, variant && 'p-message-' + variant, { 'p-message-sm': size === 'small', 'p-message-lg': size === 'large' }];
    },
    contentWrapper: 'p-message-content-wrapper',
    content: 'p-message-content',
    icon: 'p-message-icon',
    text: 'p-message-text',
    closeButton: 'p-message-close-button',
    closeIcon: 'p-message-close-icon'
};
class MessageStyle extends BaseStyle {
    name = 'message';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MessageStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MessageStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MessageStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Message groups a collection of contents in tabs.
 *
 * [Live Demo](https://www.primeng.org/message/)
 *
 * @module messagestyle
 *
 */
var MessageClasses;
(function (MessageClasses) {
    /**
     * Class name of the root element
     */
    MessageClasses["root"] = "p-message";
    /**
     * Class name of the content element
     */
    MessageClasses["content"] = "p-message-content";
    /**
     * Class name of the icon element
     */
    MessageClasses["icon"] = "p-message-icon";
    /**
     * Class name of the text element
     */
    MessageClasses["text"] = "p-message-text";
    /**
     * Class name of the close button element
     */
    MessageClasses["closeButton"] = "p-message-close-button";
    /**
     * Class name of the close icon element
     */
    MessageClasses["closeIcon"] = "p-message-close-icon";
})(MessageClasses || (MessageClasses = {}));

const MESSAGE_INSTANCE = new InjectionToken('MESSAGE_INSTANCE');
/**
 * Message groups a collection of contents in tabs.
 * @group Components
 */
class Message extends BaseComponent {
    componentName = 'Message';
    _componentStyle = inject(MessageStyle);
    bindDirectiveInstance = inject(Bind, { self: true });
    $pcMessage = inject(MESSAGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    /**
     * Severity level of the message.
     * @defaultValue 'info'
     * @group Props
     */
    severity = input('info', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
    /**
     * Whether the message can be closed manually using the close icon.
     * @group Props
     * @defaultValue false
     */
    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Icon to display in the message.
     * @group Props
     * @defaultValue undefined
     */
    icon = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
    /**
     * Icon to display in the message close button.
     * @group Props
     * @defaultValue undefined
     */
    closeIcon = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "closeIcon" }] : /* istanbul ignore next */ []));
    /**
     * Delay in milliseconds to close the message automatically.
     * @group Props
     * @defaultValue undefined
     */
    life = input(undefined, { ...(ngDevMode ? { debugName: "life" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * Defines the size of the component.
     * @group Props
     */
    size = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
    /**
     * Specifies the input variant of the component.
     * @group Props
     */
    variant = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
    /**
     * The motion options.
     * @group Props
     */
    motionOptions = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
    computedMotionOptions = computed(() => {
        return {
            ...this.ptm('motion'),
            ...this.motionOptions()
        };
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
    /**
     * Emits when the message is closed.
     * @param {MessageCloseEvent} event - The event object containing the original event.
     * @group Emits
     */
    onClose = output();
    get closeAriaLabel() {
        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
    }
    visible = signal(true, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
    /**
     * Custom template of the message container.
     * @param {MessageContainerTemplateContext} context - container context.
     * @see {@link MessageContainerTemplateContext}
     * @group Templates
     */
    containerTemplate = contentChild('container', { ...(ngDevMode ? { debugName: "containerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom template of the message icon.
     * @group Templates
     */
    iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom template of the close icon.
     * @group Templates
     */
    closeIconTemplate = contentChild('closeicon', { ...(ngDevMode ? { debugName: "closeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    closeCallback = (event) => {
        this.close(event);
    };
    containerContext = { closeCallback: this.closeCallback };
    onInit() {
        const lifeValue = this.life();
        if (lifeValue) {
            setTimeout(() => {
                this.close(new Event('close'));
            }, lifeValue);
        }
    }
    /**
     * Closes the message.
     * @param {Event} event - Browser event.
     * @group Method
     */
    close(event) {
        this.visible.set(false);
        this.onClose.emit({ originalEvent: event });
    }
    dataP = computed(() => {
        return this.cn({
            outlined: this.variant() === 'outlined',
            simple: this.variant() === 'simple',
            [this.severity()]: this.severity(),
            [this.size()]: this.size()
        });
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Message, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Message, isStandalone: true, selector: "p-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { attributes: { "role": "alert", "aria-live": "polite" }, properties: { "attr.data-p": "dataP()", "class": "cx('root')", "animate.enter": "\"p-message-enter-active\"", "animate.leave": "\"p-message-leave-active\"", "class.p-message-leave-active": "!visible()" } }, providers: [MessageStyle, { provide: MESSAGE_INSTANCE, useExisting: Message }, { provide: PARENT_INSTANCE, useExisting: Message }], queries: [{ propertyName: "containerTemplate", first: true, predicate: ["container"], isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        <div [pBind]="ptm('contentWrapper')" [class]="cx('contentWrapper')" [attr.data-p]="dataP()">
            <div [pBind]="ptm('content')" [class]="cx('content')" [attr.data-p]="dataP()">
                @if (iconTemplate()) {
                    <ng-container *ngTemplateOutlet="iconTemplate()"></ng-container>
                }
                @if (icon()) {
                    <i [pBind]="ptm('icon')" [class]="cn(cx('icon'), icon())" [attr.data-p]="dataP()"></i>
                }

                @if (containerTemplate()) {
                    <ng-container *ngTemplateOutlet="containerTemplate(); context: containerContext"></ng-container>
                } @else {
                    <span [pBind]="ptm('text')" [class]="cx('text')" [attr.data-p]="dataP()">
                        <ng-content />
                    </span>
                }
                @if (closable()) {
                    <button [pBind]="ptm('closeButton')" pRipple type="button" [class]="cx('closeButton')" (click)="close($event)" [attr.aria-label]="closeAriaLabel" [attr.data-p]="dataP()">
                        @if (closeIcon()) {
                            <i [pBind]="ptm('closeIcon')" [class]="cn(cx('closeIcon'), closeIcon())" [attr.data-p]="dataP()"></i>
                        } @else if (closeIconTemplate()) {
                            <ng-container *ngTemplateOutlet="closeIconTemplate()"></ng-container>
                        } @else {
                            <svg [pBind]="ptm('closeIcon')" data-p-icon="times" [class]="cx('closeIcon')" [attr.data-p]="dataP()" />
                        }
                    </button>
                }
            </div>
        </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Times, selector: "svg[data-p-icon=\"times\"]" }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Message, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-message',
                    standalone: true,
                    imports: [NgTemplateOutlet, Times, Ripple, SharedModule, Bind, MotionModule],
                    template: `
        <div [pBind]="ptm('contentWrapper')" [class]="cx('contentWrapper')" [attr.data-p]="dataP()">
            <div [pBind]="ptm('content')" [class]="cx('content')" [attr.data-p]="dataP()">
                @if (iconTemplate()) {
                    <ng-container *ngTemplateOutlet="iconTemplate()"></ng-container>
                }
                @if (icon()) {
                    <i [pBind]="ptm('icon')" [class]="cn(cx('icon'), icon())" [attr.data-p]="dataP()"></i>
                }

                @if (containerTemplate()) {
                    <ng-container *ngTemplateOutlet="containerTemplate(); context: containerContext"></ng-container>
                } @else {
                    <span [pBind]="ptm('text')" [class]="cx('text')" [attr.data-p]="dataP()">
                        <ng-content />
                    </span>
                }
                @if (closable()) {
                    <button [pBind]="ptm('closeButton')" pRipple type="button" [class]="cx('closeButton')" (click)="close($event)" [attr.aria-label]="closeAriaLabel" [attr.data-p]="dataP()">
                        @if (closeIcon()) {
                            <i [pBind]="ptm('closeIcon')" [class]="cn(cx('closeIcon'), closeIcon())" [attr.data-p]="dataP()"></i>
                        } @else if (closeIconTemplate()) {
                            <ng-container *ngTemplateOutlet="closeIconTemplate()"></ng-container>
                        } @else {
                            <svg [pBind]="ptm('closeIcon')" data-p-icon="times" [class]="cx('closeIcon')" [attr.data-p]="dataP()" />
                        }
                    </button>
                }
            </div>
        </div>
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [MessageStyle, { provide: MESSAGE_INSTANCE, useExisting: Message }, { provide: PARENT_INSTANCE, useExisting: Message }],
                    hostDirectives: [Bind],
                    host: {
                        '[attr.data-p]': 'dataP()',
                        role: 'alert',
                        'aria-live': 'polite',
                        '[class]': "cx('root')",
                        '[animate.enter]': '"p-message-enter-active"',
                        '[animate.leave]': '"p-message-leave-active"',
                        '[class.p-message-leave-active]': '!visible()'
                    }
                }]
        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], containerTemplate: [{ type: i0.ContentChild, args: ['container', { ...{ descendants: false }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }], closeIconTemplate: [{ type: i0.ContentChild, args: ['closeicon', { ...{ descendants: false }, isSignal: true }] }] } });
class MessageModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: MessageModule, imports: [Message, SharedModule], exports: [Message, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MessageModule, imports: [Message, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MessageModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Message, SharedModule],
                    exports: [Message, SharedModule]
                }]
        }] });

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

export { Message, MessageClasses, MessageModule, MessageStyle };
//# sourceMappingURL=primeng-message.mjs.map