@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
355 lines (349 loc) • 14.6 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, Directive, Renderer2, ChangeDetectorRef, ElementRef, TemplateRef, Component, HostListener, Input, HostBinding, ViewChild, NgModule } from '@angular/core';
import { trigger, state, transition, style, AUTO_STYLE, group, query, animate, animateChild } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
/**
* 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' } }),
]);
const _c0 = [[["", "td-message-actions", ""]]];
const _c1 = ["[td-message-actions]"];
function TdMessageComponent_ng_template_1_div_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 6);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.label);
} }
function TdMessageComponent_ng_template_1_div_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 7);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.sublabel);
} }
function TdMessageComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 1)(1, "mat-icon", 2);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "div", 3);
i0.ɵɵtemplate(4, TdMessageComponent_ng_template_1_div_4_Template, 2, 1, "div", 4)(5, TdMessageComponent_ng_template_1_div_5_Template, 2, 1, "div", 5);
i0.ɵɵelementEnd();
i0.ɵɵprojection(6);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx_r0.icon);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r0.label);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r0.sublabel);
} }
class TdMessageContainerDirective {
viewContainer = inject(ViewContainerRef);
static ɵfac = function TdMessageContainerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdMessageContainerDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdMessageContainerDirective, selectors: [["", "tdMessageContainer", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdMessageContainerDirective, [{
type: Directive,
args: [{
selector: '[tdMessageContainer]',
}]
}], null, null); })();
class TdMessageComponent {
_renderer = inject(Renderer2);
_changeDetectorRef = inject(ChangeDetectorRef);
_elementRef = inject(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() {
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 = function TdMessageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdMessageComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdMessageComponent, selectors: [["td-message"]], viewQuery: function TdMessageComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(TdMessageContainerDirective, 7);
i0.ɵɵviewQuery(TemplateRef, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._childElement = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._template = _t.first);
} }, hostVars: 3, hostBindings: function TdMessageComponent_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵsyntheticHostListener("@tdCollapse.done", function TdMessageComponent_animation_tdCollapse_done_HostBindingHandler() { return ctx.animationDoneListener(); });
} if (rf & 2) {
i0.ɵɵsyntheticHostProperty("@tdCollapse", ctx.collapsedAnimation);
i0.ɵɵstyleProp("display", ctx.hidden);
} }, inputs: { label: "label", sublabel: "sublabel", icon: "icon", color: "color", opened: "opened" }, ngContentSelectors: _c1, decls: 2, vars: 0, consts: [["tdMessageContainer", ""], [1, "td-message-wrapper"], [1, "td-message-icon"], [1, "td-message-labels"], ["class", "td-message-label", 4, "ngIf"], ["class", "td-message-sublabel", 4, "ngIf"], [1, "td-message-label"], [1, "td-message-sublabel"]], template: function TdMessageComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0);
i0.ɵɵelement(0, "div", 0);
i0.ɵɵtemplate(1, TdMessageComponent_ng_template_1_Template, 7, 3, "ng-template");
} }, dependencies: [CommonModule, i1.NgIf, MatIconModule, i2.MatIcon, TdMessageContainerDirective], styles: ["[_nghost-%COMP%]{display:block}[_nghost-%COMP%] .td-message-wrapper[_ngcontent-%COMP%]{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}[_nghost-%COMP%] .td-message-wrapper[_ngcontent-%COMP%] .td-message-labels[_ngcontent-%COMP%]{flex:1}.td-message-icon[_ngcontent-%COMP%]{margin-right:16px} [dir=rtl] .td-message-icon{margin-left:16px;margin-right:0}"], data: { animation: [tdCollapseAnimation] } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdMessageComponent, [{
type: Component,
args: [{ selector: 'td-message', animations: [tdCollapseAnimation], imports: [CommonModule, MatIconModule, TdMessageContainerDirective], 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"] }]
}], () => [], { _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']
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdMessageComponent, { className: "TdMessageComponent", filePath: "message.component.ts", lineNumber: 35 }); })();
const TD_MESSAGE = [
TdMessageComponent,
TdMessageContainerDirective,
];
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentMessageModule {
static ɵfac = function CovalentMessageModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentMessageModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentMessageModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TdMessageComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentMessageModule, [{
type: NgModule,
args: [{
imports: [TD_MESSAGE],
exports: [TD_MESSAGE],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentMessageModule, { imports: [TdMessageComponent,
TdMessageContainerDirective], exports: [TdMessageComponent,
TdMessageContainerDirective] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { CovalentMessageModule, TdMessageComponent, TdMessageContainerDirective };
//# sourceMappingURL=covalent-core-message.mjs.map