import { Component , Prop , Element } from '@stencil/core' ; import theme from '../util/theme' ; import { setTheme , getTheme } from '../util/mwc-util' ; @ Component ( { tag : 'mwc-theme' , shadow : false } ) export class MWCTheme { @ Element ( ) themeEl : HTMLElement ; @ Prop ( ) theme : object = { } ; @ Prop ( ) fonts : Array < string > = [ ] ; @ Prop ( ) icons : Array < string > = [ ] ; fontsAndIcons : Array < string > = [ 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' , 'https://fonts.googleapis.com/icon?family=Material+Icons' ] ; constructor ( ) { setTheme ( theme ) ; } setLinkNode ( fontUrl ) { var linkNode = document . createElement ( 'link' ) ; linkNode . type = "text/css" ; linkNode . rel = "stylesheet" ; linkNode . href = fontUrl ; document . head . appendChild ( linkNode ) ; } componentWillLoad ( ) { const urls = [ ... this . fonts , ... this . fontsAndIcons , ... this . icons ] ; urls . forEach ( ( font ) => { this . setLinkNode ( font ) ; } ) ; } render ( ) { return ( < slot />); } }