| {"version":3,"sources":["../../../../src/platform/core/message/message.component.ts","../../../../src/platform/core/message/message.module.ts"],"names":["viewContainer","this","Directive","args","selector","ViewContainerRef","TdMessageComponent","_renderer","_changeDetectorRef","_elementRef","_opened","_hidden","_animating","_initialized","icon","addClass","nativeElement","Object","defineProperty","prototype","value","duration","undefined","_color","color","removeClass","markForCheck","opened","open","close","animationDoneListener","_detach","ngAfterViewInit","_this","Promise","resolve","then","_attach","_startAnimationState","toggle","_childElement","createEmbeddedView","_template","clear","Component","template","animations","tdCollapseAnimation","Renderer2","ChangeDetectorRef","ElementRef","ViewChild","TdMessageContainerDirective","static","TemplateRef","HostBinding","Input","HostListener","TD_MESSAGE","NgModule","imports","CommonModule","MatIconModule","declarations","exports"],"mappings":"8mBAqBE,SAAmBA,GAAAC,KAAAD,cAAAA,uBAJpBE,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,oEAXVC,EAAAA,qCAqHA,SAAAC,EACUC,EACAC,EACAC,GAFAR,KAAAM,UAAAA,EACAN,KAAAO,mBAAAA,EACAP,KAAAQ,YAAAA,EA/FFR,KAAAS,SAAmB,EACnBT,KAAAU,SAAmB,EACnBV,KAAAW,YAAsB,EACtBX,KAAAY,cAAwB,EAyCvBZ,KAAAa,KAAe,eAqDtBb,KAAKM,UAAUQ,SAASd,KAAKQ,YAAYO,cAAe,qBAtF1DC,OAAAC,eACIZ,EAAAa,UAAA,qBAAkB,KADtB,WAEE,MAAO,CAAEC,OAAQnB,KAAKS,QAASW,SAAU,sCAM3CJ,OAAAC,eACIZ,EAAAa,UAAA,SAAM,KADV,WAEE,OAAOlB,KAAKU,QAAU,YAASW,mCA+BjCL,OAAAC,eACIZ,EAAAa,UAAA,QAAK,KAaT,WACE,OAAOlB,KAAKsB,YAfd,SACUC,GACRvB,KAAKM,UAAUkB,YAAYxB,KAAKQ,YAAYO,cAAe,OAASf,KAAKsB,QACzEtB,KAAKM,UAAUkB,YAAYxB,KAAKQ,YAAYO,cAAe,OAASf,KAAKsB,OAAS,QAClFtB,KAAKM,UAAUkB,YAAYxB,KAAKQ,YAAYO,cAAe,MAAQf,KAAKsB,OAAS,QACnE,YAAVC,GAAiC,WAAVA,GAAgC,SAAVA,EAC/CvB,KAAKM,UAAUQ,SAASd,KAAKQ,YAAYO,cAAe,OAASQ,IAEjEvB,KAAKM,UAAUQ,SAASd,KAAKQ,YAAYO,cAAe,OAASQ,EAAQ,QACzEvB,KAAKM,UAAUQ,SAASd,KAAKQ,YAAYO,cAAe,MAAQQ,EAAQ,SAE1EvB,KAAKsB,OAASC,EACdvB,KAAKO,mBAAmBkB,gDAY1BT,OAAAC,eACIZ,EAAAa,UAAA,SAAM,KAWV,WACE,OAAOlB,KAAKS,aAbd,SACWiB,GACL1B,KAAKY,aACHc,EACF1B,KAAK2B,OAEL3B,KAAK4B,QAGP5B,KAAKS,QAAUiB,mCAoBnBrB,EAAAa,UAAAW,sBAAA,WACO7B,KAAKS,UACRT,KAAKU,SAAU,EACfV,KAAK8B,WAEP9B,KAAKW,YAAa,EAClBX,KAAKO,mBAAmBkB,gBAM1BpB,EAAAa,UAAAa,gBAAA,WAAA,IAAAC,EAAAhC,KACEiC,QAAQC,aAAQb,GAAWc,MAAI,WACzBH,EAAKvB,SACPuB,EAAKI,UAEPJ,EAAKpB,cAAe,MAQxBP,EAAAa,UAAAS,KAAA,WACO3B,KAAKS,SAAYT,KAAKW,aACzBX,KAAKS,SAAU,EACfT,KAAKoC,UACLpC,KAAKqC,yBAQThC,EAAAa,UAAAU,MAAA,WACM5B,KAAKS,UAAYT,KAAKW,aACxBX,KAAKS,SAAU,EACfT,KAAKqC,yBAOThC,EAAAa,UAAAoB,OAAA,WACMtC,KAAKS,QACPT,KAAK4B,QAEL5B,KAAK2B,QAODtB,EAAAa,UAAAmB,qBAAA,WACNrC,KAAKW,YAAa,EAClBX,KAAKU,SAAU,EACfV,KAAKO,mBAAmBkB,gBAMlBpB,EAAAa,UAAAkB,QAAA,WACNpC,KAAKuC,cAAcxC,cAAcyC,mBAAmBxC,KAAKyC,WACzDzC,KAAKO,mBAAmBkB,gBAMlBpB,EAAAa,UAAAY,QAAA,WACN9B,KAAKuC,cAAcxC,cAAc2C,QACjC1C,KAAKO,mBAAmBkB,yCA9L3BkB,EAAAA,UAASzC,KAAA,CAAC,CACTC,SAAU,aACVyC,SAAA,8aAEAC,WAAY,CAACC,EAAAA,2jBAxBbC,EAAAA,iBAQAC,EAAAA,yBAPAC,EAAAA,qDAgCCC,EAAAA,UAAShD,KAAA,CAACiD,EAA6B,CAAEC,QAAQ,uBACjDF,EAAAA,UAAShD,KAAA,CAACmD,EAAAA,yCAKVC,EAAAA,YAAWpD,KAAA,CAAC,+BAQZoD,EAAAA,YAAWpD,KAAA,CAAC,gCAUZqD,EAAAA,wBAOAA,EAAAA,oBAQAA,EAAAA,qBAQAA,EAAAA,MAAKrD,KAAA,CAAC,yBAwBNqD,EAAAA,MAAKrD,KAAA,CAAC,yCA4BNsD,EAAAA,aAAYtD,KAAA,CAAC,2BChIVuD,EAA0B,CAACpD,EAAoB8C,KAOrD,iCALCO,EAAAA,SAAQxD,KAAA,CAAC,CACRyD,QAAS,CAACC,EAAAA,aAAcC,EAAAA,eACxBC,aAAc,CAACL,GACfM,QAAS,CAACN","sourcesContent":["import {\n Component,\n Directive,\n Input,\n Renderer2,\n ElementRef,\n AfterViewInit,\n ViewContainerRef,\n TemplateRef,\n ViewChild,\n HostBinding,\n HostListener,\n ChangeDetectorRef,\n} from '@angular/core';\n\nimport { tdCollapseAnimation } from '@covalent/core/common';\n\n@Directive({\n selector: '[tdMessageContainer]',\n})\nexport class TdMessageContainerDirective {\n constructor(public viewContainer: ViewContainerRef) {}\n}\n\n@Component({\n selector: 'td-message',\n templateUrl: './message.component.html',\n styleUrls: ['./message.component.scss'],\n animations: [tdCollapseAnimation],\n})\nexport class TdMessageComponent implements AfterViewInit {\n private _color: string;\n private _opened: boolean = true;\n private _hidden: boolean = false;\n private _animating: boolean = false;\n private _initialized: boolean = false;\n\n @ViewChild(TdMessageContainerDirective, { static: true }) _childElement: TdMessageContainerDirective;\n @ViewChild(TemplateRef) _template: TemplateRef<any>;\n\n /**\n * Binding host to tdCollapse animation\n */\n @HostBinding('@tdCollapse')\n get collapsedAnimation(): any {\n return { value: !this._opened, duration: 100 };\n }\n\n /**\n * Binding host to display style when hidden\n */\n @HostBinding('style.display')\n get hidden(): string {\n return this._hidden ? 'none' : undefined;\n }\n\n /**\n * label: string\n *\n * Sets the label of the message.\n */\n @Input() label: string;\n\n /**\n * sublabel?: string\n *\n * Sets the sublabel of the message.\n */\n @Input() sublabel: string;\n\n /**\n * icon?: string\n *\n * The icon to be displayed before the title.\n * Defaults to `info_outline` icon\n */\n @Input() icon: string = 'info_outline';\n\n /**\n * color?: primary | accent | warn\n *\n * Sets the color of the message.\n * Can also use any material color: purple | light-blue, etc.\n */\n @Input('color')\n set color(color: string) {\n this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);\n this._renderer.removeClass(this._elementRef.nativeElement, 'bgc-' + this._color + '-100');\n this._renderer.removeClass(this._elementRef.nativeElement, 'tc-' + this._color + '-700');\n if (color === 'primary' || color === 'accent' || color === 'warn') {\n this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + color);\n } else {\n this._renderer.addClass(this._elementRef.nativeElement, 'bgc-' + color + '-100');\n this._renderer.addClass(this._elementRef.nativeElement, 'tc-' + color + '-700');\n }\n this._color = color;\n this._changeDetectorRef.markForCheck();\n }\n get color(): string {\n return this._color;\n }\n\n /**\n * opened?: boolean\n *\n * Shows or hiddes the message depending on its value.\n * Defaults to 'true'.\n */\n @Input('opened')\n set opened(opened: boolean) {\n if (this._initialized) {\n if (opened) {\n this.open();\n } else {\n this.close();\n }\n } else {\n this._opened = opened;\n }\n }\n get opened(): boolean {\n return this._opened;\n }\n\n constructor(\n private _renderer: Renderer2,\n private _changeDetectorRef: ChangeDetectorRef,\n private _elementRef: ElementRef,\n ) {\n this._renderer.addClass(this._elementRef.nativeElement, 'td-message');\n }\n\n /**\n * Detach element when close animation is finished to set animating state to false\n * hidden state to true and detach element from DOM\n */\n @HostListener('@tdCollapse.done')\n animationDoneListener(): void {\n if (!this._opened) {\n this._hidden = true;\n this._detach();\n }\n this._animating = false;\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Initializes the component and attaches the content.\n */\n ngAfterViewInit(): void {\n Promise.resolve(undefined).then(() => {\n if (this._opened) {\n this._attach();\n }\n this._initialized = true;\n });\n }\n\n /**\n * Renders the message on screen\n * Validates if there is an animation currently and if its already opened\n */\n open(): void {\n if (!this._opened && !this._animating) {\n this._opened = true;\n this._attach();\n this._startAnimationState();\n }\n }\n\n /**\n * Removes the message content from screen.\n * Validates if there is an animation currently and if its already closed\n */\n close(): void {\n if (this._opened && !this._animating) {\n this._opened = false;\n this._startAnimationState();\n }\n }\n\n /**\n * Toggles between open and close depending on state.\n */\n toggle(): void {\n if (this._opened) {\n this.close();\n } else {\n this.open();\n }\n }\n\n /**\n * Method to set the state before starting an animation\n */\n private _startAnimationState(): void {\n this._animating = true;\n this._hidden = false;\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Method to attach template to DOM\n */\n private _attach(): void {\n this._childElement.viewContainer.createEmbeddedView(this._template);\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Method to detach template from DOM\n */\n private _detach(): void {\n this._childElement.viewContainer.clear();\n this._changeDetectorRef.markForCheck();\n }\n}\n","import { Type } from '@angular/core';\nimport { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { TdMessageComponent, TdMessageContainerDirective } from './message.component';\n\nconst TD_MESSAGE: Type<any>[] = [TdMessageComponent, TdMessageContainerDirective];\n\n@NgModule({\n imports: [CommonModule, MatIconModule],\n declarations: [TD_MESSAGE],\n exports: [TD_MESSAGE],\n})\nexport class CovalentMessageModule {}\n"]} |