import { Component , Prop , Element } from '@stencil/core' ; import { MDCSelect } from '@material/select' ; @ Component ( { tag : 'mwc-select' , styleUrl : 'mwc-select.scss' , shadow : false } ) export class MWCSelect { @ Element ( ) selectEl : HTMLElement ; @ Prop ( ) borderlist : boolean = true ; @ Prop ( ) checked : boolean = false ; @ Prop ( ) dense : boolean = false ; @ Prop ( ) ripple : boolean = true ; @ Prop ( ) radiocolor : string ; @ Prop ( ) name : string ; mdcSelectComponent : any ; mdcSelect : any ; elStyleNode : any ; componentWillLoad ( ) { if ( this . radiocolor ) { } } componentDidLoad ( ) { this . mdcSelectComponent = MDCSelect . attachTo ( this . mdcSelect ) ; if ( this . ripple ) { } } componentDidUnload ( ) { this . mdcSelectComponent . destroy ( ) ; if ( this . ripple ) { } } getListClassName ( ) { let className = 'mdc-list' ; if ( this . borderlist ) { className = ` ${ className } webmd-bordered-list` ; } if ( this . dense ) { className = ` ${ className } mdc-list--dense` ; } return className ; } getStyleNode ( ) { var styleNode = document . createElement ( 'style' ) ; styleNode . type = "text/css" ; var styleText = document . createTextNode ( `.mdc-radio::before, .mdc-radio::after{
                    background-color: ${ this . radiocolor }20 !important;
                }` ) ; styleNode . appendChild ( styleText ) ; this . elStyleNode = styleNode ; } onFocus ( ) { if ( this . radiocolor ) { this . getStyleNode ( ) ; } } onBlur ( ) { if ( this . radiocolor ) { { } } } render ( ) { return ( < div class = "mdc-select" role = "listbox" ref = { ( mdcSelect ) => { this . mdcSelect = mdcSelect ; } } > < div class = "mdc-select__surface mdc-ripple-upgraded" tabindex = "0" > < div class = "mdc-seect__label" > Pick a Food Group < /div> < div class = "mdc-select__selected-text" > < /div> < div class = "mdc-select__bottom-line" > < /div> < /div> < div class = "mdc-simple-menu mdc-select__menu" > < ul class = "mdc-list mdc-simple-menu__items" > < slot /> { } < /ul> < /div> < /div>); } }