@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-message.mjs

@@ -0,0 +1,608 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, output, signal, contentChild, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i1 from '@gravionlabs/helix-core/bind';
+import { Bind } from '@gravionlabs/helix-core/bind';
+import { TimesIcon } from '@gravionlabs/helix-core/icons';
+import { MotionModule } from '@gravionlabs/helix-core/motion';
+import { Ripple } from '@gravionlabs/helix-core/ripple';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style = /*css*/ `
+    .h-message {
+        display: grid;
+        grid-template-rows: 1fr;
+        border-radius: dt('message.border.radius');
+        outline-width: dt('message.border.width');
+        outline-style: solid;
+    }
+
+    .h-message-content-wrapper {
+        min-height: 0;
+    }
+
+    .h-message-content {
+        display: flex;
+        align-items: center;
+        padding: dt('message.content.padding');
+        gap: dt('message.content.gap');
+    }
+
+    .h-message-icon {
+        flex-shrink: 0;
+    }
+
+    .h-message-close-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-inline-start: auto;
+        overflow: hidden;
+        position: relative;
+        width: dt('message.close.button.width');
+        height: dt('message.close.button.height');
+        border-radius: dt('message.close.button.border.radius');
+        background: transparent;
+        transition:
+            background dt('message.transition.duration'),
+            color dt('message.transition.duration'),
+            outline-color dt('message.transition.duration'),
+            box-shadow dt('message.transition.duration'),
+            opacity 0.3s;
+        outline-color: transparent;
+        color: inherit;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .h-message-close-icon {
+        font-size: dt('message.close.icon.size');
+        width: dt('message.close.icon.size');
+        height: dt('message.close.icon.size');
+    }
+
+    .h-message-close-button:focus-visible {
+        outline-width: dt('message.close.button.focus.ring.width');
+        outline-style: dt('message.close.button.focus.ring.style');
+        outline-offset: dt('message.close.button.focus.ring.offset');
+    }
+
+    .h-message-info {
+        background: dt('message.info.background');
+        outline-color: dt('message.info.border.color');
+        color: dt('message.info.color');
+        box-shadow: dt('message.info.shadow');
+    }
+
+    .h-message-info .h-message-close-button:focus-visible {
+        outline-color: dt('message.info.close.button.focus.ring.color');
+        box-shadow: dt('message.info.close.button.focus.ring.shadow');
+    }
+
+    .h-message-info .h-message-close-button:hover {
+        background: dt('message.info.close.button.hover.background');
+    }
+
+    .h-message-info.h-message-outlined {
+        color: dt('message.info.outlined.color');
+        outline-color: dt('message.info.outlined.border.color');
+    }
+
+    .h-message-info.h-message-simple {
+        color: dt('message.info.simple.color');
+    }
+
+    .h-message-success {
+        background: dt('message.success.background');
+        outline-color: dt('message.success.border.color');
+        color: dt('message.success.color');
+        box-shadow: dt('message.success.shadow');
+    }
+
+    .h-message-success .h-message-close-button:focus-visible {
+        outline-color: dt('message.success.close.button.focus.ring.color');
+        box-shadow: dt('message.success.close.button.focus.ring.shadow');
+    }
+
+    .h-message-success .h-message-close-button:hover {
+        background: dt('message.success.close.button.hover.background');
+    }
+
+    .h-message-success.h-message-outlined {
+        color: dt('message.success.outlined.color');
+        outline-color: dt('message.success.outlined.border.color');
+    }
+
+    .h-message-success.h-message-simple {
+        color: dt('message.success.simple.color');
+    }
+
+    .h-message-warn {
+        background: dt('message.warn.background');
+        outline-color: dt('message.warn.border.color');
+        color: dt('message.warn.color');
+        box-shadow: dt('message.warn.shadow');
+    }
+
+    .h-message-warn .h-message-close-button:focus-visible {
+        outline-color: dt('message.warn.close.button.focus.ring.color');
+        box-shadow: dt('message.warn.close.button.focus.ring.shadow');
+    }
+
+    .h-message-warn .h-message-close-button:hover {
+        background: dt('message.warn.close.button.hover.background');
+    }
+
+    .h-message-warn.h-message-outlined {
+        color: dt('message.warn.outlined.color');
+        outline-color: dt('message.warn.outlined.border.color');
+    }
+
+    .h-message-warn.h-message-simple {
+        color: dt('message.warn.simple.color');
+    }
+
+    .h-message-error {
+        background: dt('message.error.background');
+        outline-color: dt('message.error.border.color');
+        color: dt('message.error.color');
+        box-shadow: dt('message.error.shadow');
+    }
+
+    .h-message-error .h-message-close-button:focus-visible {
+        outline-color: dt('message.error.close.button.focus.ring.color');
+        box-shadow: dt('message.error.close.button.focus.ring.shadow');
+    }
+
+    .h-message-error .h-message-close-button:hover {
+        background: dt('message.error.close.button.hover.background');
+    }
+
+    .h-message-error.h-message-outlined {
+        color: dt('message.error.outlined.color');
+        outline-color: dt('message.error.outlined.border.color');
+    }
+
+    .h-message-error.h-message-simple {
+        color: dt('message.error.simple.color');
+    }
+
+    .h-message-secondary {
+        background: dt('message.secondary.background');
+        outline-color: dt('message.secondary.border.color');
+        color: dt('message.secondary.color');
+        box-shadow: dt('message.secondary.shadow');
+    }
+
+    .h-message-secondary .h-message-close-button:focus-visible {
+        outline-color: dt('message.secondary.close.button.focus.ring.color');
+        box-shadow: dt('message.secondary.close.button.focus.ring.shadow');
+    }
+
+    .h-message-secondary .h-message-close-button:hover {
+        background: dt('message.secondary.close.button.hover.background');
+    }
+
+    .h-message-secondary.h-message-outlined {
+        color: dt('message.secondary.outlined.color');
+        outline-color: dt('message.secondary.outlined.border.color');
+    }
+
+    .h-message-secondary.h-message-simple {
+        color: dt('message.secondary.simple.color');
+    }
+
+    .h-message-contrast {
+        background: dt('message.contrast.background');
+        outline-color: dt('message.contrast.border.color');
+        color: dt('message.contrast.color');
+        box-shadow: dt('message.contrast.shadow');
+    }
+
+    .h-message-contrast .h-message-close-button:focus-visible {
+        outline-color: dt('message.contrast.close.button.focus.ring.color');
+        box-shadow: dt('message.contrast.close.button.focus.ring.shadow');
+    }
+
+    .h-message-contrast .h-message-close-button:hover {
+        background: dt('message.contrast.close.button.hover.background');
+    }
+
+    .h-message-contrast.h-message-outlined {
+        color: dt('message.contrast.outlined.color');
+        outline-color: dt('message.contrast.outlined.border.color');
+    }
+
+    .h-message-contrast.h-message-simple {
+        color: dt('message.contrast.simple.color');
+    }
+
+    .h-message-text {
+        font-size: dt('message.text.font.size');
+        font-weight: dt('message.text.font.weight');
+    }
+
+    .h-message-icon {
+        font-size: dt('message.icon.size');
+        width: dt('message.icon.size');
+        height: dt('message.icon.size');
+    }
+
+    .h-message-sm .h-message-content {
+        padding: dt('message.content.sm.padding');
+    }
+
+    .h-message-sm .h-message-text {
+        font-size: dt('message.text.sm.font.size');
+    }
+
+    .h-message-sm .h-message-icon {
+        font-size: dt('message.icon.sm.size');
+        width: dt('message.icon.sm.size');
+        height: dt('message.icon.sm.size');
+    }
+
+    .h-message-sm .h-message-close-icon {
+        font-size: dt('message.close.icon.sm.size');
+        width: dt('message.close.icon.sm.size');
+        height: dt('message.close.icon.sm.size');
+    }
+
+    .h-message-lg .h-message-content {
+        padding: dt('message.content.lg.padding');
+    }
+
+    .h-message-lg .h-message-text {
+        font-size: dt('message.text.lg.font.size');
+    }
+
+    .h-message-lg .h-message-icon {
+        font-size: dt('message.icon.lg.size');
+        width: dt('message.icon.lg.size');
+        height: dt('message.icon.lg.size');
+    }
+
+    .h-message-lg .h-message-close-icon {
+        font-size: dt('message.close.icon.lg.size');
+        width: dt('message.close.icon.lg.size');
+        height: dt('message.close.icon.lg.size');
+    }
+
+    .h-message-outlined {
+        background: transparent;
+        outline-width: dt('message.outlined.border.width');
+    }
+
+    .h-message-simple {
+        background: transparent;
+        outline-color: transparent;
+        box-shadow: none;
+    }
+
+    .h-message-simple .h-message-content {
+        padding: dt('message.simple.content.padding');
+    }
+
+    .h-message-outlined .h-message-close-button:hover,
+    .h-message-simple .h-message-close-button:hover {
+        background: transparent;
+    }
+
+    .h-message-enter-active {
+        animation: h-animate-message-enter 0.3s ease-out forwards;
+        overflow: hidden;
+    }
+
+    .h-message-leave-active {
+        animation: h-animate-message-leave 0.15s ease-in forwards;
+        overflow: hidden;
+    }
+
+    @keyframes h-animate-message-enter {
+        from {
+            opacity: 0;
+            grid-template-rows: 0fr;
+        }
+        to {
+            opacity: 1;
+            grid-template-rows: 1fr;
+        }
+    }
+
+    @keyframes h-animate-message-leave {
+        from {
+            opacity: 1;
+            grid-template-rows: 1fr;
+        }
+        to {
+            opacity: 0;
+            margin: 0;
+            grid-template-rows: 0fr;
+        }
+    }
+`;
+
+const classes = {
+    root: ({ instance }) => ['h-message h-component h-message-' + instance.severity(), instance.variant() && 'h-message-' + instance.variant(), { 'h-message-sm': instance.size() === 'small', 'h-message-lg': instance.size() === 'large' }],
+    contentWrapper: 'h-message-content-wrapper',
+    content: 'h-message-content',
+    icon: 'h-message-icon',
+    text: 'h-message-text',
+    closeButton: 'h-message-close-button',
+    closeIcon: 'h-message-close-icon'
+};
+class MessageStyle extends BaseStyle {
+    name = 'message';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MessageStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MessageStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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"] = "h-message";
+    /**
+     * Class name of the content element
+     */
+    MessageClasses["content"] = "h-message-content";
+    /**
+     * Class name of the icon element
+     */
+    MessageClasses["icon"] = "h-message-icon";
+    /**
+     * Class name of the text element
+     */
+    MessageClasses["text"] = "h-message-text";
+    /**
+     * Class name of the close button element
+     */
+    MessageClasses["closeButton"] = "h-message-close-button";
+    /**
+     * Class name of the close icon element
+     */
+    MessageClasses["closeIcon"] = "h-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 */ []));
+    /**
+     * Text content.
+     * @deprecated since v20.0.0. Use content projection instead '<h-message>Content</h-message>'.
+     * @group Props
+     */
+    text = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether displaying messages would be escaped or not.
+     * @deprecated since v20.0.0. Use content projection instead '<h-message>Content</h-message>'.
+     * @group Props
+     */
+    escape = input(true, { ...(ngDevMode ? { debugName: "escape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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 */ []));
+    /**
+     * 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.
+     * @defaultValue undefined
+     */
+    life = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "life" }] : /* istanbul ignore next */ []));
+    /**
+     * Transition options of the show animation.
+     * @defaultValue '300ms ease-out'
+     * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
+     */
+    showTransitionOptions = input('300ms ease-out', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Transition options of the hide animation.
+     * @defaultValue '200ms cubic-bezier(0.86, 0, 0.07, 1)'
+     * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
+     */
+    hideTransitionOptions = input('200ms cubic-bezier(0.86, 0, 0.07, 1)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * 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(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ 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 {{ originalEvent: Event }} 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 });
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _containerTemplate;
+    _iconTemplate;
+    _closeIconTemplate;
+    closeCallback = (event) => {
+        this.close(event);
+    };
+    onInit() {
+        const life = this.life();
+        if (life) {
+            setTimeout(() => {
+                this.visible.set(false);
+            }, life);
+        }
+    }
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'container':
+                    this._containerTemplate = item.template;
+                    break;
+                case 'icon':
+                    this._iconTemplate = item.template;
+                    break;
+                case 'closeicon':
+                    this._closeIconTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    /**
+     * Closes the message.
+     * @param {Event} event - Browser event.
+     * @group Method
+     */
+    close(event) {
+        this.visible.set(false);
+        this.onClose.emit({ originalEvent: event });
+    }
+    get dataP() {
+        return this.cn({
+            outlined: this.variant() === 'outlined',
+            simple: this.variant() === 'simple',
+            [this.severity()]: this.severity(),
+            [this.size()]: this.size()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Message, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Message, isStandalone: true, selector: "h-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", 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 }, 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 }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", 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-h": "dataP", "class": "cn(cx(\"root\"), styleClass())", "animate.enter": "\"h-message-enter-active\"", "animate.leave": "\"h-message-leave-active\"", "class.h-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 }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<div [hBind]=\"ptm('contentWrapper')\" [class]=\"cx('contentWrapper')\" [attr.data-h]=\"dataP\">\n  <div [hBind]=\"ptm('content')\" [class]=\"cx('content')\" [attr.data-h]=\"dataP\">\n    @if (iconTemplate() || _iconTemplate) {\n      <ng-container *ngTemplateOutlet=\"iconTemplate() || _iconTemplate\"></ng-container>\n    }\n    @if (icon()) {\n      <i [hBind]=\"ptm('icon')\" [class]=\"cn(cx('icon'), icon())\" [attr.data-h]=\"dataP\"></i>\n    }\n\n    @if (containerTemplate() || _containerTemplate) {\n      <ng-container *ngTemplateOutlet=\"containerTemplate() || _containerTemplate; context: { closeCallback: closeCallback }\"></ng-container>\n    } @else {\n      @if (!escape()) {\n        <div>\n          @if (!escape()) {\n            <span [hBind]=\"ptm('text')\" [ngClass]=\"cx('text')\" [innerHTML]=\"text()\" [attr.data-h]=\"dataP\"></span>\n          }\n        </div>\n      } @else {\n        @if (escape() && text()) {\n          <span [hBind]=\"ptm('text')\" [ngClass]=\"cx('text')\" [attr.data-h]=\"dataP\">{{ text() }}</span>\n        }\n      }\n\n\n      <span [hBind]=\"ptm('text')\" [ngClass]=\"cx('text')\" [attr.data-h]=\"dataP\">\n        <ng-content></ng-content>\n      </span>\n    }\n    @if (closable()) {\n      <button [hBind]=\"ptm('closeButton')\" hRipple type=\"button\" [class]=\"cx('closeButton')\" (click)=\"close($event)\" [attr.aria-label]=\"closeAriaLabel\" [attr.data-h]=\"dataP\">\n        @if (closeIcon()) {\n          <i [hBind]=\"ptm('closeIcon')\" [class]=\"cn(cx('closeIcon'), closeIcon())\" [ngClass]=\"closeIcon()\" [attr.data-h]=\"dataP\"></i>\n        }\n        @if (closeIconTemplate() || _closeIconTemplate) {\n          <ng-container *ngTemplateOutlet=\"closeIconTemplate() || _closeIconTemplate\"></ng-container>\n        }\n        @if (!closeIconTemplate() && !_closeIconTemplate && !closeIcon()) {\n          <svg [hBind]=\"ptm('closeIcon')\" data-h-icon()=\"times\" [class]=\"cx('closeIcon')\" [attr.data-h]=\"dataP\" />\n        }\n      </button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Ripple, selector: "[hRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Message, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-message', standalone: true, imports: [CommonModule, TimesIcon, Ripple, SharedModule, Bind, MotionModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [MessageStyle, { provide: MESSAGE_INSTANCE, useExisting: Message }, { provide: PARENT_INSTANCE, useExisting: Message }], hostDirectives: [Bind], host: {
+                        '[attr.data-h]': 'dataP',
+                        role: 'alert',
+                        'aria-live': 'polite',
+                        '[class]': 'cn(cx("root"), styleClass())',
+                        '[animate.enter]': '"h-message-enter-active"',
+                        '[animate.leave]': '"h-message-leave-active"',
+                        '[class.h-message-leave-active]': '!visible()'
+                    }, template: "<div [hBind]=\"ptm('contentWrapper')\" [class]=\"cx('contentWrapper')\" [attr.data-h]=\"dataP\">\n  <div [hBind]=\"ptm('content')\" [class]=\"cx('content')\" [attr.data-h]=\"dataP\">\n    @if (iconTemplate() || _iconTemplate) {\n      <ng-container *ngTemplateOutlet=\"iconTemplate() || _iconTemplate\"></ng-container>\n    }\n    @if (icon()) {\n      <i [hBind]=\"ptm('icon')\" [class]=\"cn(cx('icon'), icon())\" [attr.data-h]=\"dataP\"></i>\n    }\n\n    @if (containerTemplate() || _containerTemplate) {\n      <ng-container *ngTemplateOutlet=\"containerTemplate() || _containerTemplate; context: { closeCallback: closeCallback }\"></ng-container>\n    } @else {\n      @if (!escape()) {\n        <div>\n          @if (!escape()) {\n            <span [hBind]=\"ptm('text')\" [ngClass]=\"cx('text')\" [innerHTML]=\"text()\" [attr.data-h]=\"dataP\"></span>\n          }\n        </div>\n      } @else {\n        @if (escape() && text()) {\n          <span [hBind]=\"ptm('text')\" [ngClass]=\"cx('text')\" [attr.data-h]=\"dataP\">{{ text() }}</span>\n        }\n      }\n\n\n      <span [hBind]=\"ptm('text')\" [ngClass]=\"cx('text')\" [attr.data-h]=\"dataP\">\n        <ng-content></ng-content>\n      </span>\n    }\n    @if (closable()) {\n      <button [hBind]=\"ptm('closeButton')\" hRipple type=\"button\" [class]=\"cx('closeButton')\" (click)=\"close($event)\" [attr.aria-label]=\"closeAriaLabel\" [attr.data-h]=\"dataP\">\n        @if (closeIcon()) {\n          <i [hBind]=\"ptm('closeIcon')\" [class]=\"cn(cx('closeIcon'), closeIcon())\" [ngClass]=\"closeIcon()\" [attr.data-h]=\"dataP\"></i>\n        }\n        @if (closeIconTemplate() || _closeIconTemplate) {\n          <ng-container *ngTemplateOutlet=\"closeIconTemplate() || _closeIconTemplate\"></ng-container>\n        }\n        @if (!closeIconTemplate() && !_closeIconTemplate && !closeIcon()) {\n          <svg [hBind]=\"ptm('closeIcon')\" data-h-icon()=\"times\" [class]=\"cx('closeIcon')\" [attr.data-h]=\"dataP\" />\n        }\n      </button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", 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 }] }], showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", 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 }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class MessageModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: MessageModule, imports: [Message, SharedModule], exports: [Message, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MessageModule, imports: [Message, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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=gravionlabs-helix-core-message.mjs.map