@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.
302 lines (296 loc) • 13.2 kB
JavaScript
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