import { Component , Prop , Element } from '@stencil/core' ; @ Component ( { tag : 'mwc-container' , shadow : false } ) export class MWCContainer { @ Element ( ) containerEl : HTMLDivElement ; @ Prop ( ) backgroundcolor : string = "" ; @ Prop ( ) height : string ; @ Prop ( ) width : string ; @ Prop ( ) flexdirection : string = "row" ; @ Prop ( ) flexwrap : string = "nowrap" ; @ Prop ( ) justifycontent : string = "flex-start" ; @ Prop ( ) alignitems : string = "flex-start" ; @ Prop ( ) aligncontent : string = "flex-start" ; componentWillLoad ( ) { let containerStyle = `display : flex;` ; if ( this . height ) { containerStyle = `${ containerStyle } height:${ this . height };` ; } if ( this . width ) { containerStyle = `${ containerStyle } width:${ this . width };` ; } if ( this . flexdirection ) { containerStyle = `${ containerStyle } flex-direction:${ this . flexdirection };` ; } if ( this . flexwrap ) { containerStyle = `${ containerStyle } flex-wrap:${ this . flexwrap };` ; } if ( this . justifycontent ) { containerStyle = `${ containerStyle } justify-content:${ this . justifycontent };` ; } if ( this . alignitems ) { containerStyle = `${ containerStyle } align-items:${ this . alignitems };` ; } if ( this . aligncontent ) { containerStyle = `${ containerStyle } align-content:${ this . aligncontent };` ; } if ( this . backgroundcolor ) { containerStyle = `${ containerStyle } background-color:${ this . backgroundcolor };` ; } this . containerEl . setAttribute ( 'style' , containerStyle ) ; } render ( ) { return ( < slot />); } }