@covalent/core/fesm2022/covalent-core-message.mjs

import * as i0 from '@angular/core';
import { Directive, TemplateRef, Component, ViewChild, HostBinding, Input, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';

/**
 * const tdCollapseAnimation
 *
 * Parameter Options:
 * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
 * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
 * * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.
 * * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.
 *
 * Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.
 *
 * usage: [@tdCollapse]="{ value: true | false, params: { duration: 500 }}"
 */
const tdCollapseAnimation = trigger('tdCollapse', [
    state('1', style({
        height: '0',
        overflow: 'hidden',
    })),
    state('0', style({
        height: AUTO_STYLE,
        overflow: AUTO_STYLE,
    })),
    transition('0 => 1', [
        style({
            overflow: 'hidden',
            height: AUTO_STYLE,
        }),
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({
                height: '0',
                overflow: 'hidden',
            })),
        ]),
    ], { params: { duration: 150, delay: '0', ease: 'ease-in' } }),
    transition('1 => 0', [
        style({
            height: '0',
            overflow: 'hidden',
        }),
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({
                overflow: 'hidden',
                height: AUTO_STYLE,
            })),
        ]),
    ], { params: { duration: 150, delay: '0', ease: 'ease-out' } }),
]);

class TdMessageContainerDirective {
    viewContainer;
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdMessageContainerDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdMessageContainerDirective, selector: "[tdMessageContainer]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdMessageContainerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tdMessageContainer]',
                }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
class TdMessageComponent {
    _renderer;
    _changeDetectorRef;
    _elementRef;
    _color;
    _opened = true;
    _hidden = false;
    _animating = false;
    _initialized = false;
    _childElement;
    _template;
    /**
     * Binding host to tdCollapse animation
     */
    get collapsedAnimation() {
        return { value: !this._opened, duration: 100 };
    }
    /**
     * Binding host to display style when hidden
     */
    get hidden() {
        return this._hidden ? 'none' : '';
    }
    /**
     * label: string
     *
     * Sets the label of the message.
     */
    label;
    /**
     * sublabel?: string
     *
     * Sets the sublabel of the message.
     */
    sublabel;
    /**
     * icon?: string
     *
     * The icon to be displayed before the title.
     * Defaults to `info_outline` icon
     */
    icon = 'info_outline';
    /**
     * color?: primary | accent | warn
     *
     * Sets the color of the message.
     * Can also use any material color: purple | light-blue, etc.
     */
    set color(color) {
        this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
        this._renderer.removeClass(this._elementRef.nativeElement, 'bgc-' + this._color + '-100');
        this._renderer.removeClass(this._elementRef.nativeElement, 'tc-' + this._color + '-700');
        if (color === 'primary' || color === 'accent' || color === 'warn') {
            this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + color);
        }
        else {
            this._renderer.addClass(this._elementRef.nativeElement, 'bgc-' + color + '-100');
            this._renderer.addClass(this._elementRef.nativeElement, 'tc-' + color + '-700');
        }
        this._color = color;
        this._changeDetectorRef.markForCheck();
    }
    get color() {
        return this._color;
    }
    /**
     * opened?: boolean
     *
     * Shows or hiddes the message depending on its value.
     * Defaults to 'true'.
     */
    set opened(opened) {
        if (this._initialized) {
            if (opened) {
                this.open();
            }
            else {
                this.close();
            }
        }
        else {
            this._opened = opened;
        }
    }
    get opened() {
        return this._opened;
    }
    constructor(_renderer, _changeDetectorRef, _elementRef) {
        this._renderer = _renderer;
        this._changeDetectorRef = _changeDetectorRef;
        this._elementRef = _elementRef;
        this._renderer.addClass(this._elementRef.nativeElement, 'td-message');
    }
    /**
     * Detach element when close animation is finished to set animating state to false
     * hidden state to true and detach element from DOM
     */
    animationDoneListener() {
        if (!this._opened) {
            this._hidden = true;
            this._detach();
        }
        this._animating = false;
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Initializes the component and attaches the content.
     */
    ngAfterViewInit() {
        Promise.resolve(undefined).then(() => {
            if (this._opened) {
                this._attach();
            }
            this._initialized = true;
        });
    }
    /**
     * Renders the message on screen
     * Validates if there is an animation currently and if its already opened
     */
    open() {
        if (!this._opened && !this._animating) {
            this._opened = true;
            this._attach();
            this._startAnimationState();
        }
    }
    /**
     * Removes the message content from screen.
     * Validates if there is an animation currently and if its already closed
     */
    close() {
        if (this._opened && !this._animating) {
            this._opened = false;
            this._startAnimationState();
        }
    }
    /**
     * Toggles between open and close depending on state.
     */
    toggle() {
        if (this._opened) {
            this.close();
        }
        else {
            this.open();
        }
    }
    /**
     * Method to set the state before starting an animation
     */
    _startAnimationState() {
        this._animating = true;
        this._hidden = false;
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Method to attach template to DOM
     */
    _attach() {
        this._childElement?.viewContainer.createEmbeddedView(this._template);
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Method to detach template from DOM
     */
    _detach() {
        this._childElement?.viewContainer.clear();
        this._changeDetectorRef.markForCheck();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdMessageComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdMessageComponent, selector: "td-message", inputs: { label: "label", sublabel: "sublabel", icon: "icon", color: "color", opened: "opened" }, host: { listeners: { "@tdCollapse.done": "animationDoneListener()" }, properties: { "@tdCollapse": "this.collapsedAnimation", "style.display": "this.hidden" } }, viewQueries: [{ propertyName: "_childElement", first: true, predicate: TdMessageContainerDirective, descendants: true, static: true }, { propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div tdMessageContainer></div>\n<ng-template>\n  <div class=\"td-message-wrapper\">\n    <mat-icon class=\"td-message-icon\">{{ icon }}</mat-icon>\n    <div class=\"td-message-labels\">\n      <div *ngIf=\"label\" class=\"td-message-label\">{{ label }}</div>\n      <div *ngIf=\"sublabel\" class=\"td-message-sublabel\">{{ sublabel }}</div>\n    </div>\n    <ng-content select=\"[td-message-actions]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:block}:host .td-message-wrapper{padding:8px 16px;min-height:52px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-message-wrapper .td-message-labels{flex:1}.td-message-icon{margin-right:16px}::ng-deep [dir=rtl] .td-message-icon{margin-left:16px;margin-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TdMessageContainerDirective, selector: "[tdMessageContainer]" }], animations: [tdCollapseAnimation] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'td-message', animations: [tdCollapseAnimation], template: "<div tdMessageContainer></div>\n<ng-template>\n  <div class=\"td-message-wrapper\">\n    <mat-icon class=\"td-message-icon\">{{ icon }}</mat-icon>\n    <div class=\"td-message-labels\">\n      <div *ngIf=\"label\" class=\"td-message-label\">{{ label }}</div>\n      <div *ngIf=\"sublabel\" class=\"td-message-sublabel\">{{ sublabel }}</div>\n    </div>\n    <ng-content select=\"[td-message-actions]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:block}:host .td-message-wrapper{padding:8px 16px;min-height:52px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .td-message-wrapper .td-message-labels{flex:1}.td-message-icon{margin-right:16px}::ng-deep [dir=rtl] .td-message-icon{margin-left:16px;margin-right:0}\n"] }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _childElement: [{
                type: ViewChild,
                args: [TdMessageContainerDirective, { static: true }]
            }], _template: [{
                type: ViewChild,
                args: [TemplateRef]
            }], collapsedAnimation: [{
                type: HostBinding,
                args: ['@tdCollapse']
            }], hidden: [{
                type: HostBinding,
                args: ['style.display']
            }], label: [{
                type: Input
            }], sublabel: [{
                type: Input
            }], icon: [{
                type: Input
            }], color: [{
                type: Input
            }], opened: [{
                type: Input
            }], animationDoneListener: [{
                type: HostListener,
                args: ['@tdCollapse.done']
            }] } });

const TD_MESSAGE = [
    TdMessageComponent,
    TdMessageContainerDirective,
];
class CovalentMessageModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentMessageModule, declarations: [TdMessageComponent,
            TdMessageContainerDirective], imports: [CommonModule, MatIconModule], exports: [TdMessageComponent,
            TdMessageContainerDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentMessageModule, imports: [CommonModule, MatIconModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentMessageModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, MatIconModule],
                    declarations: [TD_MESSAGE],
                    exports: [TD_MESSAGE],
                }]
        }] });

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

export { CovalentMessageModule, TdMessageComponent, TdMessageContainerDirective };
//# sourceMappingURL=covalent-core-message.mjs.map