<!--
    ioBroker.vis vis-materialdesign Widget-Set
    
    Copyright 2019 Scrounger scrounger@gmx.net
-->

<!-- Vuetify API container init -->
<v-app id="materialdesign-vuetify-container" data-app="true" />

<!-- CSS: API libs -->
<link rel="stylesheet" href="widgets/materialdesign/lib/fonts/material-icons/material-icons.css" />
<link rel="stylesheet" href="widgets/materialdesign/lib/fonts/material-design-icons/materialdesignicons.min.css" />
<link rel="stylesheet" href="widgets/materialdesign/lib.min.css" />


<!-- CSS: Material Design -->
<link rel="stylesheet" href="widgets/materialdesign/css/widgets.min.css" />

<!-- JS: API libs -->
<script type="text/javascript" src="widgets/materialdesign/lib/raw/moment-with-locales.min.js"></script>
<script type="text/javascript" src="widgets/materialdesign/lib/raw/round-slider.js"></script>
<script type="text/javascript" src="widgets/materialdesign/lib.min.js"></script>

<!-- Sentry integration -->
<script src="widgets/materialdesign/lib/raw/sentry/bundle.min.js" integrity="sha384-SEu4bJkpht31dkOz4nRcKDxnisSU+Jc8WRSOnBSZJ2yVMlbk4sAKQSrBw6qBVzKR" crossorigin="anonymous"></script>
<script src="widgets/materialdesign/lib/raw/sentry/captureconsole.min.js" integrity="sha384-89dz/GJSE9/L79qAtPaRQRjnwsc1X2XTmYK4Ju8MoXVwvcLsF4Yntc4i5y2GZ572" crossorigin="anonymous"></script>
<script src="widgets/materialdesign/lib/raw/sentry/dedupe.min.js" integrity="sha384-991Pgp/m4NC5gP7q/xzXphPFKPZI3iGG04gFtnoHlyH13gSiR/cQJVh+/5vjnULG" crossorigin="anonymous"></script>


<!-- JS: Material Design -->
<script type="text/javascript" src="widgets/materialdesign/js/materialdesign.js"></script>
<script type="text/javascript" src="widgets/materialdesign/js/widgets.min.js"></script>

<!-- the full description of format in data-vis-attrs can be found here:
    https://github.com/ioBroker/ioBroker.vis/blob/master/www/js/visEditInspect.js#L39

    ----------------------------------------------------------
    Mandatory XML attributes:
        id="tplVis-materialdesignWIDGETNAME"
        type="text/ejs"
        class="vis-tpl"

        "type" and "class" are always the same. "id" is unique and must start with "tplSETNAME" and ends with widget name. Use camel-case for it.

    ----------------------------------------------------------
    data-vis-attrs - divided with semicolon the list of attributes, like attr1/id;attr2/color
        Full format of one attribute is: attr_name(start-end)[default_value]/type,idFilter/onChangeFunc
            attr_name - the name of the attribute, e.g. "myID"
            start-end - creates automatically attributes from attr_namestart to attr_nameend, like "myID(1-3)" creates myID1, myID2, myID3
            default_value - by creation of widget this attribute will be filled with this value, e.g. "myID[#001122]/color"
            type - some predefined types have edit helpers, else it will be shown as text field

                Type format:
                      id - Object ID Dialog
                      checkbox
                      image - image
                      number,min,max,step - non-float number. min,max,step are optional
                      color - color picker
                      views - Name of the view
                      effect - jquery UI show/hide effects
                      eff_opt - additional option to effect slide (up, down, left, right)
                      fontName - Font name
                      slider,min,max,step - Default step is ((max - min) / 100)
                      select,value1,value2,... - dropdown select
                      nselect,value1,value2,... - same as select, but without translation of items
                      style,fileFilter,nameFilter,attrFilter
                      custom,functionName,options,... - custom editor - functionName is starting from vis.binds.[widgetset.funct]. E.g. custom/timeAndWeather.editWeather,short
                      group.name - define new or old group. All following attributes belongs to new group till new group.xyz
                      group.name/byindex - like group, but all following attributes will be grouped by ID. Like group.windows/byindex;slide(1-4)/id;slide_type(1-4)/select,open,closed  Following groups will be created Windows1(slide1,slide_type1), Windows2(slide2,slide_type2), Windows3(slide3,slide_type3), Windows4(slide4,slide_type4)
                      text - dialog box with html editor
                      html - dialog box with html editor

                If type is "id", you can define filer for "Select ID Dialog", like "myID/id,level.temperature".
                Additionally you can define callback(onChangeFunc), which will be called if this attribute was changed by user for different purposes: validate entry, fill other attributes, ...

        You can define additional data-vis-attrs line: data-vis-attrs0, data-vis-attrs1. Anyway data-vis-attrs must be there. You may not skip numbers.
        E.g. in "data-vis-attrs="A;" data-vis-attrs1="B" attribute B will be not parsed.

    --------------------------------------------------------
    data-vis-type
        Help information for user. Used for search.
        You can define more than one type divided by comma.
        There are following common types, but you can use your own specific types:
            ctrl   - widget that can write some Object IDs
            val    - widget that shows some information from Object IDs
            static - widget do not read information from Object IDs or URL
            button - button widget
            dimmer - dimmer widget
            weather - weather widget
            ...

    --------------------------------------------------------
    data-vis-set
        Name of the widget set. Must be equal to the name of this HTML file

    --------------------------------------------------------
    data-vis-prev
        Html code used as preview of this widget. If widget is complex you can just use image as preview:
        data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_tplVis-materialdesignShowInstance.png"></img>'
        Of course the image must exist.

    --------------------------------------------------------
    data-vis-name
        Readable name of widget shown in vis editor.

    --------------------------------------------------------
    data-vis-beta="true"
        Shows "BETA" symbol in vis editor by preview

    --------------------------------------------------------
    data-vis-update-style="true"
        Call redraw of widget if some of the CSS styles in editor for this widget was changed

    You can read about Magic tags here: http://canjs.com/guides/EJS.html
    Following magic tags are exist:
        <% %> - execute javascript
        <%= %> - place escaped result to HTML document
        <%== %> - place unescaped result to HTML document

    You can do "if" conditions and "for" cycles.

-->

<script id="tplVis-materialdesign-value"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-value" style="position: relative; text-align: initial; padding: 4px "><div class="vis-widget_prev materialdesign-widget materialdesign-value vis-tpl-materialdesign-Value " style="width: 100px; height: 24px; padding: 0px; display: flex; align-items: center; left: 220px; top: 323px; position: absolute; --value-color-text:#44739e; --value-font-text:RobotoCondensed-Regular; --value-font-size-text:14px; --value-color-prepand:#44739e; --value-font-prepand:RobotoCondensed-Regular; --value-font-size-prepand:14px; --value-color-append:#44739e; --value-font-append:RobotoCondensed-Regular; --value-font-size-append:14px; z-index: 4;" data-tmodified="true" data-zmodified="true"> <span class="mdi mdi-information materialdesign-icon-image " style="width: auto; height: auto; font-size: 24px; color: #44739e; ;"></span> <div class="materialdesign-value prepand-text" style="margin: 0 2px 0 2px;"></div> <div class="materialdesign-value value-text" style="margin: 0 2px 0 2px; flex: 1;text-align: center">1,23 kWh</div> <div class="materialdesign-value append-text" style="margin: 0 2px 0 2px;"></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="val,state,string,number,bool"
        data-vis-name="Value"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,value;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,value;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;targetType[auto]/select,auto,number,string,boolean;overrideText/html;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,value;debug/checkbox;"
        data-vis-attrs0="group.layout;textAlign[start]/select,start,center,end;valueLabelWidth[4]/number;valuesFontColor[#mdwTheme:vis-materialdesign.0.colors.value.text]/color;valuesFontFamily[#mdwTheme:vis-materialdesign.0.fonts.value.text]/fontname;valuesFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.value.text]/number;prepandText/html;prepandTextColor[#mdwTheme:vis-materialdesign.0.colors.value.prepand]/color;prepandTextFontFamily[#mdwTheme:vis-materialdesign.0.fonts.value.prepand]/fontname;prepandTextFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand]/number;appendText/html;appendTextColor[#mdwTheme:vis-materialdesign.0.colors.value.append]/color;appendTextFontFamily[#mdwTheme:vis-materialdesign.0.fonts.value.append]/fontname;appendTextFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.value.append]/number;"
        data-vis-attrs1="group.formatNumber;valueLabelUnit/html;minDecimals/number;maxDecimals/number;calculate/html;convertToDuration/text;convertToTimestamp/text;"
        data-vis-attrs2="group.formatBoolean;textOnTrue/html;textOnFalse/html;condition/html;"
        data-vis-attrs3="group.icon;image[information]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.value.icon]/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;"
        data-vis-attrs4="group.changeEffect;changeEffectEnabled/checkbox;effectFontColor[#mdwTheme:vis-materialdesign.0.colors.value.effect]/color;effectFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.value.effect]/number;effectDuration[750]/number;">

        <div class="vis-widget materialdesign-widget materialdesign-value <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px; display: flex; align-items: center;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.value.initialize(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-Navigation-vertical"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Navigation-vertical" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Navigation vertical mdc-ripple-upgraded" style="width: 100px; height: 60px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:16px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 532px; top: 89px; position: absolute; z-index: 4;" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; "><span class="mdi mdi-navigation materialdesign-icon-image " style="width: 26px; height: 26px; font-size: 26px; color: ; ;"></span><span class="materialdesign-button__label" style="text-align: center;"> Navigation </span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="navigation"
        data-vis-name="Button Navigation vertical"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,navigation_vertical;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;buttonStyle[raised]/select,text,raised,unelevated,outlined;nav_view;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,navigation_vertical;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[Navigation]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text]/number;alignment[center]/select,flex-start,center,flex-end;distanceBetweenTextAndImage/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs2="group.icon;image[navigation]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[top]/select,top,bottom;iconHeight[26]/slider,0,200,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 60px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'navigation_vertical'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-Link-vertical"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Link-vertical" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Link vertical mdc-ripple-upgraded" style="width: 100px; height: 60px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:16px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 529px; top: 228px; position: absolute; z-index: 4; --mdc-ripple-fg-size:60px; --mdc-ripple-fg-scale:2.1103172982817666; --mdc-ripple-fg-translate-start:32px, -13.600006103515625px; --mdc-ripple-fg-translate-end:20px, 0px;" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; "><span class="mdi mdi-link materialdesign-icon-image " style="width: 26px; height: 26px; font-size: 26px; color: ; ;"></span><span class="materialdesign-button__label" style="text-align: center;"> Link </span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="static"
        data-vis-name="Button Link vertical"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,link_vertical;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;buttonStyle[raised]/select,text,raised,unelevated,outlined;href/url;openNewWindow/checkbox;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,link_vertical;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[Link]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text]/number;alignment[center]/select,flex-start,center,flex-end;distanceBetweenTextAndImage/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs2="group.icon;image[link]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[top]/select,top,bottom;iconHeight[26]/slider,0,200,1;">

        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 60px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-vis-link="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'link_vertical'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-State-vertical"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-State-vertical" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button State vertical mdc-ripple-upgraded" style="width: 100px; height: 60px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:16px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 447px; top: 343px; position: absolute; z-index: 4;" islocked="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; "><span class="mdi mdi-pencil materialdesign-icon-image " style="width: 26px; height: 26px; font-size: 26px; color: ; ;"></span><span class="materialdesign-button__label" style="text-align: center;"> State </span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Button State vertical"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,state_vertical;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;buttonStyle[raised]/select,text,raised,unelevated,outlined;value;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,state_vertical;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[State]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text]/number;alignment[center]/select,flex-start,center,flex-end;distanceBetweenTextAndImage/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary]/color;mdwButtonColorPress/color;colorBgTrue/color;"
        data-vis-attrs2="group.icon;image[pencil]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[top]/select,top,bottom;iconHeight[26]/slider,0,200,1;"
        data-vis-attrs3="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[5]/slider,0,100,1;lockIconLeft[5]/slider,0,100,1;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">

        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 60px; padding: 0px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'state_vertical'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-State-Multi-vertical"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-State-Multi-vertical" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button State Multi vertical mdc-ripple-upgraded" style="width: 100px; height: 60px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:16px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 657px; top: 380px; position: absolute; z-index: 4;" islocked="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; "><span class="mdi mdi-pencil-box-multiple materialdesign-icon-image " style="width: 26px; height: 26px; font-size: 26px; color: ; ;"></span><span class="materialdesign-button__label" style="text-align: center;"> Multi State </span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Button State Multi vertical"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,multiState_vertical;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;countOids[1]/number;buttonStyle[raised]/select,text,raised,unelevated,outlined;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,multiState_vertical;debug/checkbox;"
        data-vis-attrs0="group.buttonOids/byindex;oid(0-countOids);value(0-countOids);delayInMs(0-countOids)[0]/number;"
        data-vis-attrs1="group.label;buttontext[Multi State]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text]/number;alignment[center]/select,flex-start,center,flex-end;distanceBetweenTextAndImage/slider,0,100,1;"
        data-vis-attrs2="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs3="group.icon;image[pencil-box-multiple]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[top]/select,top,bottom;iconHeight[26]/slider,0,200,1;"
        data-vis-attrs4="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[5]/slider,0,100,1;lockIconLeft[5]/slider,0,100,1;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 60px; padding: 0px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'multiState_vertical'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-Adition-vertical"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Adition-vertical" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Addition vertical mdc-ripple-upgraded" style="width: 100px; height: 60px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:16px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 240px; top: 379px; position: absolute; z-index: 4;" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; "><span class="mdi mdi-plus materialdesign-icon-image " style="width: 26px; height: 26px; font-size: 26px; color: ; ;"></span><span class="materialdesign-button__label" style="text-align: center;"> Addition </span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Button Addition vertical"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,addition_vertical;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;buttonStyle[raised]/select,text,raised,unelevated,outlined;value;minmax;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,addition_vertical;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[Addition]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text]/number;alignment[center]/select,flex-start,center,flex-end;distanceBetweenTextAndImage/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs2="group.icon;image[plus]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[top]/select,top,bottom;iconHeight[26]/slider,0,200,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 60px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'addition_vertical'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-Toggle-vertical"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Toggle-vertical" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Toggle vertical mdc-ripple-upgraded" style="width: 100px; height: 60px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:16px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 253px; top: 196px; position: absolute; z-index: 4;" islocked="false" toggled="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; "><span class="mdi mdi-checkbox-marked materialdesign-icon-image" style="width: 26px; height: 26px; font-size: 26px; color: ; ;"></span><span class="materialdesign-button__label" style="text-align: center;">Toggle</span></div>  <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,state,val,bool"
        data-vis-name="Button Toggle vertical"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,toggle_vertical;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;buttonStyle[raised]/select,text,raised,unelevated,outlined;readOnly/checkbox;toggleType[boolean]/select,boolean,value;pushButton/checkbox;valueOff;valueOn;stateIfNotTrueValue[on]/select,on,off;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,toggle_vertical;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[Toggle]/html;labelTrue/html;labelColorFalse/color;labelColorTrue/color;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text]/number;alignment[center]/select,flex-start,center,flex-end;distanceBetweenTextAndImage/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary]/color;colorBgFalse/color;colorBgTrue/color;"
        data-vis-attrs2="group.icon;image[checkbox-marked]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;imageTrue/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageTrueColor/color;iconPosition[top]/select,top,bottom;iconHeight[26]/slider,0,200,1;"
        data-vis-attrs3="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[5]/slider,0,100,1;lockIconLeft[5]/slider,0,100,1;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 60px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'toggle_vertical'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>


<script id="tplVis-materialdesign-Button-Navigation"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Navigation" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Navigation mdc-ripple-upgraded" style="width: 100px; height: 30px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:14px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 52px; top: 38px; position: absolute; z-index: 4;" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"><span class="mdi mdi-navigation materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: ; ;"></span> <span class="materialdesign-button__label">&nbsp;Navigation </span> </div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="navigation"
        data-vis-name="Button Navigation"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,navigation_default;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;buttonStyle[raised]/select,text,raised,unelevated,outlined;nav_view;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,navigation_default;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[&nbsp;Navigation]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs2="group.icon;image[navigation]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'navigation_default'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>


<script id="tplVis-materialdesign-Button-Link"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Link" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Link mdc-ripple-upgraded" style="width: 100px; height: 30px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:14px; --materialdesign-font-button-vertical-text-distance-image:2px; inset: 92.9167px auto auto 51.9167px; position: absolute; z-index: 4; --mdc-ripple-fg-size:60px; --mdc-ripple-fg-scale:1.9067177514850917; --mdc-ripple-fg-translate-start:26.166671752929688px, -14.350006103515625px; --mdc-ripple-fg-translate-end:20px, -15px;" data-vis-link="" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"><span class="mdi mdi-link materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: ; ;"></span> <span class="materialdesign-button__label">&nbsp;Link</span> </div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="static"
        data-vis-name="Button Link"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,link_default;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;buttonStyle[raised]/select,text,raised,unelevated,outlined;href/url;openNewWindow/checkbox;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,link_default;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[&nbsp;Link]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs2="group.icon;image[link]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;">

        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-vis-link="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'link_default'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-State"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-State" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button State mdc-ripple-upgraded" style="width: 100px; height: 30px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:14px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 44px; top: 181px; position: absolute; z-index: 4;" islocked="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"><span class="mdi mdi-pencil materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: ; ;"></span> <span class="materialdesign-button__label">&nbsp;State</span> </div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Button State"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,state_default;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;buttonStyle[raised]/select,text,raised,unelevated,outlined;value;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,state_default;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[&nbsp;State]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;colorBgTrue/color;"
        data-vis-attrs2="group.icon;image[pencil]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;"
        data-vis-attrs3="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'state_default'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-State-Multi"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-State-Multi" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button State Multi mdc-ripple-upgraded" style="width: 100px; height: 30px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:14px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 46px; top: 261px; position: absolute; z-index: 4;" islocked="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"><span class="mdi mdi-pencil-box-multiple materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: ; ;"></span> <span class="materialdesign-button__label">&nbsp;Multi State</span> </div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Button State Multi"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,multiState_default;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;countOids[1]/number;buttonStyle[raised]/select,text,raised,unelevated,outlined;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,multiState_default;debug/checkbox;"
        data-vis-attrs0="group.buttonOids/byindex;oid(0-countOids);value(0-countOids);delayInMs(0-countOids)[0]/number;"
        data-vis-attrs1="group.label;buttontext[&nbsp;Multi State]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;"
        data-vis-attrs2="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs3="group.icon;image[pencil-box-multiple]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;"
        data-vis-attrs4="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
        
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'multiState_default'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-Adition"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Adition" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Addition mdc-ripple-upgraded " style="width: 100px; height: 30px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:14px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 70px; top: 344px; position: absolute; --mdc-ripple-fg-size:60px; --mdc-ripple-fg-scale:1.9067177514850917; --mdc-ripple-fg-translate-start:12.16668701171875px, -7.350006103515625px; --mdc-ripple-fg-translate-end:20px, -15px; z-index: 4;" data-tmodified="true" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"><span class="mdi mdi-plus materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: ; ;"></span> <span class="materialdesign-button__label">&nbsp;Addition</span> </div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Button Addition"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,addition_default;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;buttonStyle[raised]/select,text,raised,unelevated,outlined;value;minmax;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,addition_default;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[&nbsp;Addition]/html;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;"
        data-vis-attrs2="group.icon;image[plus]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;">

        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'addition_default'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Button-Toggle"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Button-Toggle" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-button materialdesign-button--raised vis-tpl-materialdesign-Button Toggle mdc-ripple-upgraded" style="width: 100px; height: 30px; padding: 0px; --materialdesign-color-primary:#44739e; --materialdesign-color-secondary:#FFFFFF; --materialdesign-font-button:RobotoCondensed-Regular; --materialdesign-font-size-button:14px; --materialdesign-font-button-vertical-text-distance-image:2px; left: 78px; top: 435px; position: absolute; z-index: 4;" islocked="false" toggled="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"><span class="mdi mdi-checkbox-marked materialdesign-icon-image" style="width: auto; height: auto; font-size: auto; color: ; ;"></span> <span class="materialdesign-button__label">&nbsp;Toggle</span> </div>  <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,state,val,bool"
        data-vis-name="Button Toggle"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,toggle_default;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;buttonStyle[raised]/select,text,raised,unelevated,outlined;readOnly/checkbox;toggleType[boolean]/select,boolean,value;pushButton/checkbox;valueOff;valueOn;stateIfNotTrueValue[on]/select,on,off;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,toggle_default;debug/checkbox;"
        data-vis-attrs0="group.label;buttontext[&nbsp;Toggle]/html;labelTrue/html;labelColorFalse/color;labelColorTrue/color;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;"
        data-vis-attrs1="group.color;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;colorBgFalse/color;colorBgTrue/color;"
        data-vis-attrs2="group.icon;image[checkbox-marked]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor/color;imageTrue/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageTrueColor/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;"        
        data-vis-attrs3="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
       
        <div class="vis-widget materialdesign-widget materialdesign-button <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'toggle_default'); vis.binds.materialdesign.addRippleEffect(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Icon-Button-Navigation"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Icon-Button-Navigation" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-icon-button mdc-ripple-upgraded--unbounded vis-tpl-materialdesign-Icon Button Navigation mdc-ripple-upgraded " style="width: 48px; height: 48px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --materialdesign-font-size-button: inherit; --materialdesign-font-button-vertical-text-distance-image:2px; --materialdesign-color-icon-button-hover:#44739e; inset: 362px auto auto 144px; position: absolute; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px; z-index: 4;" aria-pressed="false" data-tmodified="true" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"> <span class="mdi mdi-navigation materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: #44739e; ;"></span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="navigation"
        data-vis-name="Icon Button Navigation"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,navigation_icon;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;nav_view;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,navigation_icon;debug/checkbox;"
        data-vis-attrs0="group.icon;image[navigation]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off]/color;iconHeight/slider,0,200,1;"
        data-vis-attrs1="group.color;colorBgFalse[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_off]/color;colorPress[#mdwTheme:vis-materialdesign.0.colors.button.icon.pressed]/color">

        <div class="vis-widget materialdesign-widget materialdesign-icon-button <%== this.data.attr('class') %>" style="width: 48px; height: 48px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'navigation_icon'); vis.binds.materialdesign.addRippleEffect(el, data, true) %>>

        </div>
</script>


<script id="tplVis-materialdesign-Icon-Button-Link"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Icon-Button-Link" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-icon-button mdc-ripple-upgraded--unbounded vis-tpl-materialdesign-Icon Button Link mdc-ripple-upgraded mdc-icon-button--on " style="width: 48px; height: 48px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --materialdesign-font-size-button: inherit; --materialdesign-font-button-vertical-text-distance-image:2px; --materialdesign-color-icon-button-hover:#44739e; left: 207px; top: 468px; position: absolute; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px; z-index: 4;" aria-pressed="true" data-tmodified="true" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"> <span class="mdi mdi-link materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: #44739e; ;"></span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="static"
        data-vis-name="Icon Button Link"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,link_icon;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;href/url;openNewWindow/checkbox;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,link_icon;debug/checkbox;"
        data-vis-attrs0="group.icon;image[link]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off]/color;iconHeight/slider,0,200,1;"
        data-vis-attrs1="group.color;colorBgFalse[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_off]/color;colorPress[#mdwTheme:vis-materialdesign.0.colors.button.icon.pressed]/color">

        <div class="vis-widget materialdesign-widget materialdesign-icon-button <%== this.data.attr('class') %>" style="width: 48px; height: 48px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'link_icon'); vis.binds.materialdesign.addRippleEffect(el, data, true) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Icon-Button-State"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Icon-Button-State" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-icon-button mdc-ripple-upgraded--unbounded vis-tpl-materialdesign-Icon Button State mdc-ripple-upgraded " style="width: 48px; height: 48px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --materialdesign-font-size-button: inherit; --materialdesign-font-button-vertical-text-distance-image:2px; --materialdesign-color-icon-button-hover:#44739e; inset: 468px auto auto 326px; position: absolute; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px; z-index: 4;" islocked="false" aria-pressed="false" data-tmodified="true" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"> <span class="mdi mdi-pencil materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: #44739e; ;"></span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Icon Button State"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,state_icon;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;value;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,state_icon;debug/checkbox;"
        data-vis-attrs0="group.icon;image[pencil]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off]/color;iconHeight/slider,0,200,1;"
        data-vis-attrs1="group.color;colorBgFalse[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_off]/color;colorPress[#mdwTheme:vis-materialdesign.0.colors.button.icon.pressed]/color;colorBgTrue/color;"
        data-vis-attrs2="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[45]/slider,0,100,1;lockIconLeft[55]/slider,0,100,1;lockIconSize[20]/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.lock_icon]/color;lockIconBackground[#mdwTheme:vis-materialdesign.0.colors.button.icon.lock_icon_background]/color;lockBackgroundSizeFactor[1]/number,1,10,0.1;lockFilterGrayscale[30]/slider,0,100,1;">

        <div class="vis-widget materialdesign-widget materialdesign-icon-button <%== this.data.attr('class') %>" style="width: 48px; height: 48px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'state_icon'); vis.binds.materialdesign.addRippleEffect(el, data, true) %>>

        </div>        
</script>

<script id="tplVis-materialdesign-Icon-Button-State-Multi"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Icon-Button-State-Multi" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-icon-button mdc-ripple-upgraded--unbounded vis-tpl-materialdesign-Icon Button State Multi mdc-ripple-upgraded" style="width: 48px; height: 48px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --materialdesign-font-size-button: inherit; --materialdesign-font-button-vertical-text-distance-image:2px; --materialdesign-color-icon-button-hover:#44739e; left: 457px; top: 429px; position: absolute; z-index: 4; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px;" islocked="false" aria-pressed="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"> <span class="mdi mdi-pencil-box-multiple materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: #44739e; ;"></span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Icon Button State Multi"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,multiState_icon;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;countOids[1]/number;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,multiState_icon;debug/checkbox;"
        data-vis-attrs0="group.buttonOids/byindex;oid(0-countOids);value(0-countOids);delayInMs(0-countOids)[0]/number;"
        data-vis-attrs1="group.icon;image[pencil-box-multiple]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off]/color;iconHeight/slider,0,200,1;"
        data-vis-attrs2="group.color;colorBgFalse[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_off]/color;colorPress[#mdwTheme:vis-materialdesign.0.colors.button.icon.pressed]/color;"
        data-vis-attrs3="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[45]/slider,0,100,1;lockIconLeft[55]/slider,0,100,1;lockIconSize[20]/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.lock_icon]/color;lockIconBackground[#mdwTheme:vis-materialdesign.0.colors.button.icon.lock_icon_background]/color;lockBackgroundSizeFactor[1]/number,1,10,0.1;lockFilterGrayscale[30]/slider,0,100,1;">

        <div class="vis-widget materialdesign-widget materialdesign-icon-button <%== this.data.attr('class') %>" style="width: 48px; height: 48px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'multiState_icon'); vis.binds.materialdesign.addRippleEffect(el, data, true) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Icon-Button-Adition"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Icon-Button-Adition" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-icon-button mdc-ripple-upgraded--unbounded vis-tpl-materialdesign-Icon Button Addition mdc-ripple-upgraded" style="width: 48px; height: 48px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --materialdesign-font-size-button: inherit; --materialdesign-font-button-vertical-text-distance-image:2px; --materialdesign-color-icon-button-hover:#44739e; left: 705px; top: 467px; position: absolute; z-index: 4; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px;"  aria-pressed="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"> <span class="mdi mdi-plus materialdesign-icon-image " style="width: auto; height: auto; font-size: auto; color: #44739e; ;"></span></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Icon Button Addition"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,addition_icon;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;value;minmax;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,addition_icon;debug/checkbox;"
        data-vis-attrs0="group.icon;image[plus]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off]/color;iconHeight/slider,0,200,1;"
        data-vis-attrs1="group.color;colorBgFalse[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_off]/color;colorPress[#mdwTheme:vis-materialdesign.0.colors.button.icon.pressed]/color">

        <div class="vis-widget materialdesign-widget materialdesign-icon-button <%== this.data.attr('class') %>" style="width: 48px; height: 48px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'addition_icon'); vis.binds.materialdesign.addRippleEffect(el, data, true) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Icon-Button-Toggle"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Icon-Button-Toggle" style="position: relative; text-align: initial; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-icon-button mdc-ripple-upgraded--unbounded vis-tpl-materialdesign-Icon Button Toggle mdc-ripple-upgraded" style="width: 48px; height: 48px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --materialdesign-font-size-button: inherit; --materialdesign-font-button-vertical-text-distance-image:2px; --materialdesign-color-icon-button-hover:#44739e; left: 493px; top: 598px; position: absolute; z-index: 4; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px;" islocked="false" aria-pressed="false" toggled="false" data-zmodified="true"> <div class="materialdesign-button-body" style="display:flex; justify-content: center; align-items: center; width: 100%; height: 100%;"> <span class="mdi mdi-checkbox-marked materialdesign-icon-image" style="width: auto; height: auto; font-size: auto; color: #44739e; ;"></span></div>  <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,state,val,bool"
        data-vis-name="Icon Button Toggle"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,toggle_icon;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,buttons;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;readOnly/checkbox;toggleType[boolean]/select,boolean,value;pushButton/checkbox;valueOff;valueOn;stateIfNotTrueValue[on]/select,on,off;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,button,toggle_icon;debug/checkbox;"
        data-vis-attrs0="group.icon;image[checkbox-marked]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off]/color;imageTrue/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageTrueColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_on]/color;iconHeight/slider,0,200,1;"
        data-vis-attrs1="group.color;colorBgFalse[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_off]/color;colorBgTrue[#mdwTheme:vis-materialdesign.0.colors.button.icon.background_on]/color;colorPress[#mdwTheme:vis-materialdesign.0.colors.button.icon.pressed]/color;"
        data-vis-attrs2="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[45]/slider,0,100,1;lockIconLeft[55]/slider,0,100,1;lockIconSize[20]/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.button.icon.lock_icon]/color;lockIconBackground[#mdwTheme:vis-materialdesign.0.colors.button.icon.lock_icon_background]/color;lockBackgroundSizeFactor[1]/number,1,10,0.1;lockFilterGrayscale[30]/slider,0,100,1;">

        <div class="vis-widget materialdesign-widget materialdesign-icon-button <%== this.data.attr('class') %>" style="width: 48px; height: 48px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.materialdesign.button.initialize(el, data, 'toggle_icon'); vis.binds.materialdesign.addRippleEffect(el, data, true) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Input"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_input.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Input"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,input;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,input;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;inputType[text]/select,text,number,date,time,mask;inputMask;inputMaxLength/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,textfield;debug/checkbox;"
        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputAlignment[left]/select,left,center,right;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor[#mdwTheme:vis-materialdesign.0.colors.input.border]/color;inputLayoutBorderColorHover[#mdwTheme:vis-materialdesign.0.colors.input.border_hover]/color;inputLayoutBorderColorSelected[#mdwTheme:vis-materialdesign.0.colors.input.border_selected]/color;inputTextFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.text]/fontname;inputTextFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.text]/number;inputTextColor[#mdwTheme:vis-materialdesign.0.colors.input.text]/color;autoFocus/checkbox;"
        data-vis-attrs1="group.inputLabel;inputLabelText;inputLabelColor[#mdwTheme:vis-materialdesign.0.colors.input.label]/color;inputLabelColorSelected[#mdwTheme:vis-materialdesign.0.colors.input.label_selected]/color;inputLabelFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.label]/fontname;inputLabelFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.label]/number,0,24,1;inputTranslateX/number;inputTranslateY/number;"
        data-vis-attrs2="group.inputAppendix;inputPrefix;inputSuffix;inputAppendixColor[#mdwTheme:vis-materialdesign.0.colors.input.appendix]/color;inputAppendixFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.appendix]/number;inputAppendixFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.appendix]/fontname;"
        data-vis-attrs3="group.inputSubText;showInputMessageAlways[true]/checkbox;inputMessage;inputMessageFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.message]/fontname;inputMessageFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.message]/number;inputMessageColor[#mdwTheme:vis-materialdesign.0.colors.input.message]/color;"
        data-vis-attrs4="group.counter;showInputCounter[true]/checkbox;inputCounterColor[#mdwTheme:vis-materialdesign.0.colors.input.counter]/color;inputCounterFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.counter]/number;inputCounterFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.counter]/fontname;"
        data-vis-attrs5="group.icons;clearIconShow[true]/checkbox;clearIcon/custom,materialdesign.viseditor.materialDesignIcons;clearIconSize/number;clearIconColor[#mdwTheme:vis-materialdesign.0.colors.input.icon_clear]/color;prepandIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;prepandIconSize/number;prepandIconColor/color;prepandInnerIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;prepandInnerIconSize/number;prepandInnerIconColor/color;appendIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;appendIconSize/number;appendIconColor/color;appendOuterIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;appendOuterIconSize/number;appendOuterIconColor/color;">
        
        <div class="vis-widget materialdesign-widget materialdesign-input <%== this.data.attr('class') %>" style="width: 150px; height: 38px; overflow: visible;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.textfield.initialize(el, data) %>> 
        
        </div>
</script>

<script id="tplVis-materialdesign-Autocomplete"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_autocomplete.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Autocomplete"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,autocomplete;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,input;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;inputMode[write]/select,write,select;inputType[text]/select,text,date,time;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,autocomplete;debug/checkbox;"
        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputAlignment[left]/select,left,center,right;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor[#mdwTheme:vis-materialdesign.0.colors.input.border]/color;inputLayoutBorderColorHover[#mdwTheme:vis-materialdesign.0.colors.input.border_hover]/color;inputLayoutBorderColorSelected[#mdwTheme:vis-materialdesign.0.colors.input.border_selected]/color;inputTextFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.text]/fontname;inputTextFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.text]/number;inputTextColor[#mdwTheme:vis-materialdesign.0.colors.input.text]/color;autoFocus/checkbox;"
        data-vis-attrs1="group.inputLabel;inputLabelText;inputLabelColor[#mdwTheme:vis-materialdesign.0.colors.input.label]/color;inputLabelColorSelected[#mdwTheme:vis-materialdesign.0.colors.input.label_selected]/color;inputLabelFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.label]/fontname;inputLabelFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.label]/number,0,24,1;inputTranslateX/number;inputTranslateY/number;"
        data-vis-attrs2="group.inputAppendix;inputPrefix;inputSuffix;inputAppendixColor[#mdwTheme:vis-materialdesign.0.colors.input.appendix]/color;inputAppendixFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.appendix]/number;inputAppendixFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.appendix]/fontname;"
        data-vis-attrs3="group.inputSubText;showInputMessageAlways[true]/checkbox;inputMessage;inputMessageFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.message]/fontname;inputMessageFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.message]/number;inputMessageColor[#mdwTheme:vis-materialdesign.0.colors.input.message]/color;"
        data-vis-attrs4="group.counter;showInputCounter[true]/checkbox;inputCounterColor[#mdwTheme:vis-materialdesign.0.colors.input.counter]/color;inputCounterFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.counter]/number;inputCounterFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.counter]/fontname;"
        data-vis-attrs5="group.icons;clearIconShow[true]/checkbox;clearIcon/custom,materialdesign.viseditor.materialDesignIcons;clearIconSize/number;clearIconColor[#mdwTheme:vis-materialdesign.0.colors.input.icon_clear]/color;collapseIcon/custom,materialdesign.viseditor.materialDesignIcons;collapseIconSize/number;collapseIconColor[#mdwTheme:vis-materialdesign.0.colors.input.icon_collapse]/color;prepandIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;prepandIconSize/number;prepandIconColor/color;prepandInnerIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;prepandInnerIconSize/number;prepandInnerIconColor/color;appendOuterIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;appendOuterIconSize/number;appendOuterIconColor/color;"
        data-vis-attrs6="group.listData;listDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject,multistatesObject,valueList;countSelectItems[1]/number;jsonStringObject/html;valueList/html;valueListLabels/html;valueListIcons/html;"
        data-vis-attrs7="group.autoCompleteListLayout;listPosition[auto]/select,auto,top,bottom;listPositionOffset[true]/checkbox;openOnClear/checkbox;listItemHeight/number;listItemBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.background]/color;listItemBackgroundHoverColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.hover]/color;listItemBackgroundSelectedColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.selected]/color;listItemRippleEffectColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.effect]/color;showSelectedIcon[prepend-inner]/select,no,prepend,prepend-inner,append-outer;listIconSize/number;listIconColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.icon]/color;listIconHoverColor/color;listIconSelectedColor/color;listItemFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.text]/number;listItemFont[#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.text]/fontname;listItemFontColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.text]/color;listItemFontHoverColor/color;listItemFontSelectedColor/color;listItemSubFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.subText]/number;listItemSubFont[#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.subText]/fontname;listItemSubFontColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.subText]/color;listItemSubFontHoverColor/color;listItemSubFontSelectedColor/color;showValue[true]/checkbox;listItemValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.value]/number;listItemValueFont[#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.value]/fontname;listItemValueFontColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.value]/color;listItemValueFontHoverColor/color;listItemValueFontSelectedColor/color;"
        data-vis-attrs8="group.menuItems/byindex;value(0-countSelectItems);label(0-countSelectItems);subLabel(0-countSelectItems);listIcon(0-countSelectItems)/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;listIconColor(0-countSelectItems)/color;imageColorSelectedTextField(0-countSelectItems)/color;">
        
        <div class="vis-widget materialdesign-widget materialdesign-autocomplete <%== this.data.attr('class') %>" style="width: 150px; height: 38px; overflow: visible;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.autocomplete.initialize(el, data) %>> 
        
        </div>
</script>

<script id="tplVis-materialdesign-Select"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_autocomplete.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl"
        data-vis-name="Select"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,select;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,input;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;inputType[text]/select,text,date,time;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,select;debug/checkbox;"
        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputAlignment[left]/select,left,center,right;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor[#mdwTheme:vis-materialdesign.0.colors.input.border]/color;inputLayoutBorderColorHover[#mdwTheme:vis-materialdesign.0.colors.input.border_hover]/color;inputLayoutBorderColorSelected[#mdwTheme:vis-materialdesign.0.colors.input.border_selected]/color;inputTextFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.text]/fontname;inputTextFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.text]/number;inputTextColor[#mdwTheme:vis-materialdesign.0.colors.input.text]/color;autoFocus/checkbox;"
        data-vis-attrs1="group.inputLabel;inputLabelText;inputLabelColor[#mdwTheme:vis-materialdesign.0.colors.input.label]/color;inputLabelColorSelected[#mdwTheme:vis-materialdesign.0.colors.input.label_selected]/color;inputLabelFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.label]/fontname;inputLabelFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.label]/number,0,24,1;inputTranslateX/number;inputTranslateY/number;"
        data-vis-attrs2="group.inputAppendix;inputPrefix;inputSuffix;inputAppendixColor[#mdwTheme:vis-materialdesign.0.colors.input.appendix]/color;inputAppendixFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.appendix]/number;inputAppendixFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.appendix]/fontname;"
        data-vis-attrs3="group.inputSubText;showInputMessageAlways[true]/checkbox;inputMessage;inputMessageFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.message]/fontname;inputMessageFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.message]/number;inputMessageColor[#mdwTheme:vis-materialdesign.0.colors.input.message]/color;"
        data-vis-attrs4="group.counter;showInputCounter[true]/checkbox;inputCounterColor[#mdwTheme:vis-materialdesign.0.colors.input.counter]/color;inputCounterFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.counter]/number;inputCounterFontFamily[#mdwTheme:vis-materialdesign.0.fonts.input.counter]/fontname;"
        data-vis-attrs5="group.icons;clearIconShow[true]/checkbox;clearIcon/custom,materialdesign.viseditor.materialDesignIcons;clearIconSize/number;clearIconColor[#mdwTheme:vis-materialdesign.0.colors.input.icon_clear]/color;collapseIcon/custom,materialdesign.viseditor.materialDesignIcons;collapseIconSize/number;collapseIconColor[#mdwTheme:vis-materialdesign.0.colors.input.icon_collapse]/color;prepandIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;prepandIconSize/number;prepandIconColor/color;prepandInnerIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;prepandInnerIconSize/number;prepandInnerIconColor/color;appendOuterIcon/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;appendOuterIconSize/number;appendOuterIconColor/color;"
        data-vis-attrs6="group.listData;listDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject,multistatesObject,valueList;countSelectItems[1]/number;jsonStringObject/html;valueList/html;valueListLabels/html;valueListIcons/html;"
        data-vis-attrs7="group.selectListLayout;listPosition[auto]/select,auto,top,bottom;listPositionOffset/checkbox;openOnClear/checkbox;listItemHeight/number;listItemBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.background]/color;listItemBackgroundHoverColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.hover]/color;listItemBackgroundSelectedColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.selected]/color;listItemRippleEffectColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.effect]/color;showSelectedIcon[prepend-inner]/select,no,prepend,prepend-inner,append-outer;listIconSize/number;listIconColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.icon]/color;listIconHoverColor/color;listIconSelectedColor/color;listItemFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.text]/number;listItemFont[#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.text]/fontname;listItemFontColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.text]/color;listItemFontHoverColor/color;listItemFontSelectedColor/color;listItemSubFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.subText]/number;listItemSubFont[#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.subText]/fontname;listItemSubFontColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.subText]/color;listItemSubFontHoverColor/color;listItemSubFontSelectedColor/color;showValue[true]/checkbox;listItemValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.value]/number;listItemValueFont[#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.value]/fontname;listItemValueFontColor[#mdwTheme:vis-materialdesign.0.colors.input.menu.value]/color;listItemValueFontHoverColor/color;listItemValueFontSelectedColor/color;"
        data-vis-attrs8="group.menuItems/byindex;value(0-countSelectItems);label(0-countSelectItems);subLabel(0-countSelectItems);listIcon(0-countSelectItems)/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;listIconColor(0-countSelectItems)/color;imageColorSelectedTextField(0-countSelectItems)/color;">
        
        <div class="vis-widget materialdesign-widget materialdesign-select <%== this.data.attr('class') %>" style="width: 150px; height: 38px; overflow: visible;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.select.initialize(el, data) %>> 
        
        </div>
</script>

<script id="tplVis-materialdesign-Switch"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Switch" style="position: relative; text-align: initial; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget mdc-form-field materialdesign-switch vis-tpl-materialdesign-Switch " style="width: 80px; height: 50px; overflow: visible !important; left: 165px; top: 158px; position: absolute;" islocked="false"> <div class="mdc-switch mdc-switch--checked" style="margin-left: 10px; margin-right: 10px; --materialdesign-color-switch-on:#44739e; --materialdesign-color-switch-on-hover:#44739e; --materialdesign-color-switch-off:#FFFFFF; --materialdesign-color-switch-track:#000000; --materialdesign-color-switch-off-hover:#44739e;"> <div class="mdc-switch__track"></div> <div class="mdc-switch__thumb-underlay mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.7142857142857142; --mdc-ripple-left:10px; --mdc-ripple-top:10px;"> <div class="mdc-switch__thumb"> <input class="mdc-switch__native-control" id="materialdesign-checkbox-switch-1es7mmcle" type="checkbox" role="switch"> </div> </div> </div> <label id="label" for="materialdesign-checkbox-switch-1es7mmcle" style="width: 100%; cursor: pointer; font-family: RobotoCondensed-Regular; font-size: 16px; color: rgb(68, 115, 158);">on</label> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,bool,val"
        data-vis-name="Switch"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,switch;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,checkboxSwitch;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;readOnly/checkbox;toggleType[boolean]/select,boolean,value;valueOff;valueOn;stateIfNotTrueValue[on]/select,on,off;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,switch;debug/checkbox;"
        data-vis-attrs0="group.label;labelFalse/html;labelTrue/html;labelPosition[right]/select,left,right,off;labelClickActive[true]/checkbox;valueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.switch.value]/fontname;valueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.switch.value]/number;"
        data-vis-attrs1="group.color;colorSwitchThumb[#mdwTheme:vis-materialdesign.0.colors.switch.off]/color;colorSwitchTrack[#mdwTheme:vis-materialdesign.0.colors.switch.track]/color;colorSwitchTrue[#mdwTheme:vis-materialdesign.0.colors.switch.on]/color;colorSwitchHover[#mdwTheme:vis-materialdesign.0.colors.switch.off_hover]/color;colorSwitchHoverTrue[#mdwTheme:vis-materialdesign.0.colors.switch.on_hover]/color;labelColorFalse[#mdwTheme:vis-materialdesign.0.colors.switch.text_off]/color;labelColorTrue[#mdwTheme:vis-materialdesign.0.colors.switch.text_on]/color;"
        data-vis-attrs2="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[5]/slider,0,100,1;lockIconLeft[5]/slider,0,100,1;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.switch.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
        <%
            let init = vis.binds.materialdesign.switch.initialize(data);
        %>

        <div class="vis-widget materialdesign-widget <%== init.labelPosition %> materialdesign-switch <%== this.data.attr('class') %>" style="width:80px; height:50px; overflow: visible !important;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" isLocked="<%== myMdwHelper.getBooleanFromData(this.data.attr('lockEnabled'), false) %>" <%= (el) -> vis.binds.materialdesign.switch.handle(el, data) %>>
            <%== init.myswitch %>
        </div>
</script>

<script id="tplVis-materialdesign-CheckBox"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-CheckBox" style="position: relative; text-align: initial; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget mdc-form-field materialdesign-checkbox vis-tpl-materialdesign-Checkbox " style="width: 76px; height: 50px; overflow: visible !important; left: 49px; top: 27px; position: absolute; z-index: 4; pointer-events: none;" islocked="false" data-tmodified="true" data-zmodified="true"> <div class="mdc-checkbox mdc-checkbox--upgraded mdc-checkbox--selected mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--materialdesign-color-checkbox:#44739e; --materialdesign-color-checkbox-border:rgba(0, 0, 0, 0.54); --materialdesign-color-checkbox-hover:#44739e; --mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.6666666666666667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;"> <input type="checkbox" class="mdc-checkbox__native-control" id="materialdesign-checkbox-1es7mspuu"> <div class="mdc-checkbox__background"> <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24"> <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> <div class="mdc-checkbox__mixedmark"></div> </div> <div class="mdc-checkbox__ripple"></div> </div> <label id="label" for="materialdesign-checkbox-1es7mspuu" style="width: 100%; cursor: pointer; font-family: RobotoCondensed-Regular; font-size: 16px; color: rgb(68, 115, 158);">on</label> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,bool,val"
        data-vis-name="Checkbox"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,checkbox;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,checkboxSwitch;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;readOnly/checkbox;toggleType[boolean]/select,boolean,value;valueOff;valueOn;stateIfNotTrueValue[on]/select,on,off;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,checkbox;debug/checkbox;"
        data-vis-attrs0="group.label;labelFalse/html;labelTrue/html;labelPosition[right]/select,left,right,off;labelClickActive[true]/checkbox;valueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.checkbox.value]/fontname;valueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.checkbox.value]/number;"
        data-vis-attrs1="group.color;colorCheckBox[#mdwTheme:vis-materialdesign.0.colors.checkbox.on]/color;colorCheckBoxBorder[#mdwTheme:vis-materialdesign.0.colors.checkbox.border]/color;colorCheckBoxHover[#mdwTheme:vis-materialdesign.0.colors.checkbox.hover]/color;labelColorFalse[#mdwTheme:vis-materialdesign.0.colors.checkbox.text_off]/color;labelColorTrue[#mdwTheme:vis-materialdesign.0.colors.checkbox.text_on]/color;"
        data-vis-attrs2="group.lock;lockEnabled/checkbox;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[5]/slider,0,100,1;lockIconLeft[5]/slider,0,100,1;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.checkbox.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;">
        <%
            let init = vis.binds.materialdesign.checkbox.initialize(data);
        %>

        <div class="vis-widget materialdesign-widget <%== init.labelPosition %> materialdesign-checkbox <%== this.data.attr('class') %>" style="width:76px; height:50px; overflow: visible !important;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" isLocked="<%== myMdwHelper.getBooleanFromData(this.data.attr('lockEnabled'), false) %>" <%= (el) -> vis.binds.materialdesign.checkbox.handle(el, data) %>>
            <%== init.checkbox %>
        </div>
</script>

<script id="tplVis-materialdesign-Vuetify-Slider"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Vuetify-Slider" style="position: relative; text-align: initial; margin-bottom: -40px; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-slider-vertical vis-tpl-materialdesign-Slider " style="width: 135px; height: 110px; overflow: visible !important; display: flex; align-items: center; left: 92px; top: 66px; position: absolute; --vue-slider-thumb-label-font-color:#FFFFFF; --vue-slider-thumb-label-font-size:12px; --vue-slider-tick-before-color:#44739e; --vue-slider-tick-after-color:#44739e; --vue-slider-tick-color:#808080; --vue-slider-tick-font-family:RobotoCondensed-LightItalic; --vue-slider-tick-font-size:14px; --vue-text-field-label-before-color:#44739e; --vue-text-field-label-font-family:RobotoCondensed-Regular; --vue-text-field-label-font-size:16px; --vue-text-field-label-width: inherit;" data-oid-working=""> <div class="materialdesign-vuetifySlider" style="width: 100%; height: 100%;"><div class="v-row" style="align-items: center;"><div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider"><div class="v-input__control"><div class="v-input__slot"><div class="v-slider v-slider--horizontal theme--light"><input value="54" id="input-28" readonly="readonly" tabindex="-1" always-dirty=""><div class="v-slider__track-container"><div class="v-slider__track-background" style="right: 0px; width: calc(46%); background-color: rgba(161, 161, 161, 0.26); border-color: rgba(161, 161, 161, 0.26);"></div><div class="v-slider__track-fill" style="left: 0px; right: auto; width: 54%; background-color: rgb(68, 115, 158); border-color: rgb(68, 115, 158);"></div></div><div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-readonly="false" aria-orientation="horizontal" always-dirty="" class="v-slider__thumb-container v-slider__thumb-container--show-label" style="left: 54%; color: rgb(68, 115, 158); caret-color: rgb(68, 115, 158); height: 0px;"><div class="v-slider__thumb" style="background-color: rgb(68, 115, 158); border-color: rgb(68, 115, 158);"></div><div class="v-slider__thumb-label-container"><div class="v-slider__thumb-label" style="height: 32px; width: 32px; transform: translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg); background-color: rgb(68, 115, 158); border-color: rgb(68, 115, 158);"><div><span>54</span></div></div></div></div></div></div></div></div></div></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,slider,dimmer"
        data-vis-name="Slider"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,slider;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,slider;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;oid-working;orientation[horizontal]/select,horizontal,vertical;reverseSlider/checkbox;knobSize[knobSmall]/select,knobSmall,knobMedium,knobBig;readOnly/checkbox;min;max;step[1];vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,slider;debug/checkbox;"
        data-vis-attrs0="group.tickLayout;showTicks[no]/select,no,yes,always;tickSize/number;tickLabels;tickTextColor[#mdwTheme:vis-materialdesign.0.colors.slider.tick]/color;tickFontFamily[#mdwTheme:vis-materialdesign.0.fonts.slider.ticks]/fontname;tickFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.slider.ticks]/number;tickColorBefore[#mdwTheme:vis-materialdesign.0.colors.slider.tick_before]/color;tickColorAfter[#mdwTheme:vis-materialdesign.0.colors.slider.tick_after]/color;"
        data-vis-attrs1="group.color;colorBeforeThumb[#mdwTheme:vis-materialdesign.0.colors.slider.control_before]/color;colorThumb[#mdwTheme:vis-materialdesign.0.colors.slider.control]/color;colorAfterThumb[#mdwTheme:vis-materialdesign.0.colors.slider.control_behind]/color;"
        data-vis-attrs2="group.label;prepandText;prepandTextWidth/number;prepandTextColor[#mdwTheme:vis-materialdesign.0.colors.slider.text_prepand]/color;prepandTextFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.slider.prepand]/number;prepandTextFontFamily[#mdwTheme:vis-materialdesign.0.fonts.slider.prepand]/fontname;showValueLabel[true]/checkbox;valueLabelStyle[sliderValue]/select,sliderPercent,sliderValue;valueLabelUnit;valueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.slider.value]/fontname;valueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.slider.value]/number;valueLabelColor[#mdwTheme:vis-materialdesign.0.colors.slider.text]/color;valueLabelMin/html;valueLabelMax/html;valueLessThan/number;textForValueLessThan/html;valueGreaterThan/number;textForValueGreaterThan/html;valueLabelWidth[50]/slider,0,200,1;"
        data-vis-attrs3="group.thumbLabelLayout;showThumbLabel[no]/select,no,yes,always;thumbSize/number;thumbBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.slider.control_background]/color;thumbFontColor[#mdwTheme:vis-materialdesign.0.colors.slider.control_text]/color;thumbFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.slider.control]/number;thumbFontFamily[#mdwTheme:vis-materialdesign.0.fonts.slider.control]/fontname;useLabelRules/checkbox;">

        <div class="vis-widget materialdesign-widget materialdesign-slider-vertical <%== this.data.attr('class') %>" style="width: 200px; height: 100px; overflow:visible !important; display: flex; align-items: center;" id="<%= this.data.attr('wid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.materialdesign.slider.vuetifySlider(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Slider-Round"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Slider-Round" style="position: relative; text-align: initial; margin-bottom: -10px; padding: 0px !important; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-slider-round vis-tpl-materialdesign-Slider Round " style="width: 100px; height: 100px; left: 213px; top: 121px; position: absolute; z-index: 4;" data-oid-working="" data-tmodified="true" data-zmodified="true"> <round-slider class="materialdesign-round-slider-element" value="54" max="100" min="0" step="1" startangle="135" arclength="270" handlesize="6" handlezoom="1.5" style="--round-slider-path-width:3; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; --round-slider-path-color:rgba(161, 161, 161, 0.26); --round-slider-bar-color:#44739e; --round-slider-handle-color:#44739e;"> </round-slider> <label class="labelValue" style="position: absolute; width: 100%; text-align: center; display: flex; justify-content: center; pointer-events: none; top: 40%; color: #44739e; font-family: RobotoCondensed-Light; font-size: 16px;">54 %</label> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="ctrl,slider,dimmer"
        data-vis-name="Slider Round"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,sliderRound;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,slider;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;oid-working;min;max;step[1];readOnly/checkbox;startAngle[135]/slider,0,360,1;arcLength[270]/slider,0,360,1;sliderWidth/number;handleSize/number;handleZoom[1.5]/slider,0,10,0.1;rtl/checkbox;vibrateOnMobilDevices[50]/number;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,roundslider;debug/checkbox;"
        data-vis-attrs0="group.color;colorSliderBg[#mdwTheme:vis-materialdesign.0.colors.slider.background]/color;colorBeforeThumb[#mdwTheme:vis-materialdesign.0.colors.slider.control_before]/color;colorThumb[#mdwTheme:vis-materialdesign.0.colors.slider.control]/color;colorAfterThumb[#mdwTheme:vis-materialdesign.0.colors.slider.control_behind]/color;valueLabelColor[#mdwTheme:vis-materialdesign.0.colors.slider.text]/color;"
        data-vis-attrs1="group.label;showValueLabel[true]/checkbox;valueLabelVerticalPosition/slider,0,100,1;valueLabelStyle[sliderValue]/select,sliderPercent,sliderValue;valueLabelUnit;valueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.slider.value]/fontname;valueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.slider.value]/number;valueLabelMin/html;valueLabelMax/html;valueLessThan/number;textForValueLessThan/html;valueGreaterThan/number;textForValueGreaterThan/html;">
        
        <div class="vis-widget materialdesign-widget materialdesign-slider-round <%== this.data.attr('class') %>" style="width: 100px; height: 100px;" id="<%= this.data.attr('wid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.materialdesign.roundslider.initialize(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Progress"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Progress" style="position: relative; text-align: initial; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-progress vis-tpl-materialdesign-Progress " style="width: 100px; height: 30px; left: 105px; top: 68px; position: absolute; --vue-progress-progress-color:#44739e; --vue-progress-progress-color-background:rgba(161, 161, 161, 0.26); --vue-progress-progress-color-text:#44739e; --vue-progress-progress-color-text-size:12px; --vue-progress-progress-color-text-font-family:RobotoCondensed-Light; --vue-progress-progress-color-text-align:end; z-index: 4;" data-tmodified="true" data-zmodified="true"> <div class="materialdesign-vuetify-progress" style="width: 100%; height: 100%; display: flex; justify-content: center;"><div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="41" class="v-progress-linear v-progress-linear--rounded theme--light" style="height: 30px;"><div class="v-progress-linear__background primary" style="opacity: 0.3; left: 41%; width: 59%;"></div><div class="v-progress-linear__buffer"></div><div class="v-progress-linear__determinate primary" style="width: 41%;"></div><div class="v-progress-linear__content"><div class="materialdesign-vuetify-progress-value-label" style="width: 100%; margin-left: 10px; margin-right: 10px;">41 %</div></div></div></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="val,progress"
        data-vis-name="Progress"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,progress;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,progress;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;min;max;reverse/checkbox;invertValue/checkbox;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,progress,linear;debug/checkbox;"
        data-vis-attrs0="group.layout;progressRounded[true]/checkbox;progressIndeterminate/checkbox;progressRotate[noRotate]/select,noRotate,yesRotate;"
        data-vis-attrs1="group.layoutStriped;progressStriped/checkbox;progressStripedColor/color;stripAngle[135]/slider,0,360,1;stipWidth1[25]/number,0,100,1;stipWidth2[50]/number,0,100,1;stipWidth3[75]/number,0,100,1;"
        data-vis-attrs2="group.color;colorProgressBackground[#mdwTheme:vis-materialdesign.0.colors.progress.track_background]/color;colorProgress[#mdwTheme:vis-materialdesign.0.colors.progress.track]/color;colorOneCondition/number;colorOne[#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1]/color;colorTwoCondition/number;colorTwo[#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2]/color;"
        data-vis-attrs3="group.label;showValueLabel[true]/checkbox;valueLabelStyle[progressPercent]/select,progressPercent,progressValue,progressCustom;valueLabelUnit;valueMaxDecimals/number;valueLabelCustom/html;textColor[#mdwTheme:vis-materialdesign.0.colors.progress.text]/color;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.progress.text]/number;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.progress.text]/fontname;textAlign[end]/select,start,center,end;">

        <div class="vis-widget materialdesign-widget materialdesign-progress <%== this.data.attr('class') %>" style="width: 100px; height: 30px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.progress.linear(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Progress-Circular"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Progress-Circular" style="position: relative; text-align: initial; display: flex; justify-content:center;"><div class="vis-widget_prev materialdesign-widget materialdesign-progress vis-tpl-materialdesign-Progress Circular " style="width: 110px; height: 63px; left: 500px; top: 110px; text-align: center; font-size: 14px; font-weight: bold; position: absolute;" > <div class="materialdesign-vuetify-progress-circular" style="width: 100%; height: 100%; display: flex; justify-content: center;"><div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="74" class="v-progress-circular" style="height: 60px; width: 60px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="21.428571428571427 21.428571428571427 42.857142857142854 42.857142857142854" style="transform: rotate(90deg);"><circle fill="transparent" cx="42.857142857142854" cy="42.857142857142854" r="20" stroke-width="2.8571428571428568" stroke-dasharray="125.664" stroke-dashoffset="0" class="v-progress-circular__underlay"></circle><circle fill="transparent" cx="42.857142857142854" cy="42.857142857142854" r="20" stroke-width="2.8571428571428568" stroke-dasharray="125.664" stroke-dashoffset="32.67256359733385px" class="v-progress-circular__overlay"></circle></svg><div class="v-progress-circular__info"><div class="materialdesign-vuetify-progress-circular-value-label">74 %</div></div></div></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'data-vis-prev='<div id="prev_tplVis-materialdesign-Progress-Circular" style="position: relative; text-align: initial; padding: 4px "><div class="vis-widget_prev materialdesign-widget materialdesign-progress vis-tpl-materialdesign-Progress Circular " style="width: 70px; height: 70px; left: 308px; top: 321px; position: absolute;" > <div class="materialdesign-vuetify-progress-circular" style="width: 100%; height: 100%; display: flex; justify-content: center;"> <v-progress-circular :value="value" size="70" width="4" rotate="90"> <div class="materialdesign-vuetify-progress-circular-value-label"></div> </v-progress-circular> </div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="val,progress"
        data-vis-name="Progress Circular"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,progressCircular;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,progress;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;min;max;progressIndeterminate/checkbox;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,progress,circular;debug/checkbox;"
        data-vis-attrs0="group.layout;progressCircularSize/number;progressCircularWidth/number;progressCircularRotate/number;"
        data-vis-attrs1="group.color;colorProgressBackground[#mdwTheme:vis-materialdesign.0.colors.progress.track_background]/color;colorProgress[#mdwTheme:vis-materialdesign.0.colors.progress.track]/color;innerColor[#mdwTheme:vis-materialdesign.0.colors.progress.circular_background]/color;colorOneCondition/number;colorOne[#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1]/color;colorTwoCondition/number;colorTwo[#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2]/color;"
        data-vis-attrs2="group.label;showValueLabel[true]/checkbox;valueLabelStyle[progressPercent]/select,progressPercent,progressValue,progressCustom;valueLabelUnit;valueMaxDecimals/number;valueLabelCustom/html;textColor[#mdwTheme:vis-materialdesign.0.colors.progress.text]/color;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.progress.text]/number;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.progress.text]/fontname;">

        <div class="vis-widget materialdesign-widget materialdesign-progress <%== this.data.attr('class') %>" style="width: 70px; height: 70px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.progress.circular(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Card"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Card" style="position: relative; text-align: initial; padding: 4px "><div class="vis-widget_prev materialdesign-html-card mdc-card vis-tpl-materialdesign-HTML Card " style="width: 100px; height: 131px; left: 562px; top: 439px; font-size: xx-large; position: absolute; z-index: 4;" data-tmodified="true" data-zmodified="true"> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(/vis/widgets/materialdesign/img/preview.jpg);"></div><div class="materialdesign-html-card card-title-section" style=""><div class="materialdesign-html-card card-title mdc-typography mdc-typography--headline6" style="">Title</div><div class="materialdesign-html-card card-subtitle mdc-typography mdc-typography--subtitle2" style="">Subtitle</div></div><div class="materialdesign-html-card card-text-section"><div class=".materialdesign-html-card mdc-typography mdc-typography--body2"></div></div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="static"
        data-vis-name="HTML Card"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,card;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,card;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;listItemDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject;json_string_oid/id;cardLayout[Basic]/select,Basic,BasicHeader,BasicHeaderOverlay,Horizontal;cardStyle[default]/select,default,outlined;showScrollbar[true]/checkbox;showTitle[true]/checkbox;title/html;titleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.title]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;titleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.title]/fontname;showSubTitle[true]/checkbox;subtitle/html;labelSubTextHeight/number;subtitleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.subTitle]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;subTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.subTitle]/fontname;showText[true]/checkbox;html/text;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.card.text]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.text]/fontname;labelTextHeight/number;debug/checkbox;"
        data-vis-attrs0="group.image;image/image;refreshOnWakeUp/checkbox;refreshOnViewChange/checkbox;refresh_oid/id;refresh_oid_delay[100]/slider,0,180000,100;refresh_animation_duration[150]/slider,0,180000,100;"
        data-vis-attrs1="group.color;colorBackground[#mdwTheme:vis-materialdesign.0.colors.card.background]/color;colorTitleSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_title]/color;colorTextSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_body]/color;colorTitle[#mdwTheme:vis-materialdesign.0.colors.card.title]/color;colorSubtitle[#mdwTheme:vis-materialdesign.0.colors.card.subTitle]/color;colorBody[#mdwTheme:vis-materialdesign.0.colors.card.text]/color;"
        data-vis-attrs2="group.controlCard;clickType[none]/select,none,card,image,text;controlType[link]/select,link,state;href/url;state_oid/id;state_value;">
        
        <%
            let initCard = vis.binds.materialdesign.card.initialize(data);
        %>

        <div class="vis-widget materialdesign-widget materialdesign-html-card <%== this.data.attr('class') %>" style="width: 200px; height: 130px;" id="<%= this.data.attr('wid') %>">
            <div class="materialdesign-html-card-container mdc-card <%= initCard.style %>" style="margin: 3px; width: calc(100% - 6px); height: calc(100% - 6px);" <%= (el) -> vis.binds.materialdesign.card.handler(el, data) %>>          
                <%== initCard.card %>
            </div>
        </div>
</script>

<script id="tplVis-materialdesign-TopAppBar-Navigation"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_top_app_bar_nav_drawer.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="stateful,container,view"
        data-vis-name="Top App Bar"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,topAppBar;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,topAppBar;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;showIndexNum/checkbox;navItemCount[1]/number;navDefaultValue[0]/number,0;navDisableDefaultValue/checkbox;selectedItemName_oid/id;debug/checkbox;"
        data-vis-attrs0="group.topAppBarLayout;topAppBarLayout[standard]/select,standard,dense,short;titleTopAppBar[Material Design Widgets]/html;colorTopAppBarTitle[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.title]/color;colorTopAppBarBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.background]/color;titleFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.title]/fontname;titleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.title]/number;topAppBarIconColor/color;showSelectedItemAsTitle[true]/checkbox;showSelectedItemIconInTitle[true]/checkbox;iconTitleHeight/dimension;topAppBarZ_index[998]/number;vibrateTopAppBarOnMobilDevices[50]/number;"
        data-vis-attrs1="group.drawerLayout;drawerLayout[modal]/select,modal,permanent,auto;permanentIfResolutionHigherThan[800]/number;drawerItemLayout[standard]/select,standard,backdrop;listItemDividerStyle[standard]/select,standard,padded,inset;drawerWidth/number;z_index[1000]/number;showHeader[true]/checkbox;headerLabel[<h4 class='mdc-drawer__title'>Material Design Widgets</h4><h6 class='mdc-drawer__subtitle'>by Scrounger</h6>]/html;showLabels[true]/checkbox;drawerIconHeight/number;listItemAlignment[left]/select,left,center,right;listItemTextFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.item]/fontname;listItemTextFontDisabled[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.item_disabled]/fontname;listItemTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.item]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemHeaderFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.header]/fontname;listItemHeaderTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.header]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;backdropLabelBackgroundHeight[30]/slider,0,100,1;vibrateDrawerOnMobilDevices[0]/number;"
        data-vis-attrs2="group.drawerColors;colorDrawerBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.menu_background]/color;colorDrawerItemBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_background]/color;colorDrawerHeaderBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.header_background]/color;colorListItemHover[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_hover]/color;colorListItemSelected[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_selected]/color;colorListItemText[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text]/color;colorListItemTextSelected[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text_selected]/color;colorListItemTextDisabled[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text_disabled]/color;colorListItemIconDisabled[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon_disabled]/color;colorListItemHeaders[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.header_text]/color;colorListItemDivider[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_divider]/color;colorSubItemToggleIcon[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon_toggle]/color;colorDrawerbackdropLabelBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_backdrop_background_text_off]/color;colorDrawerbackdropLabelBackgroundActive[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_backdrop_background_text_on]/color;"
        data-vis-attrs3="group.drawerSubItemsLayout;drawerSubItemLayout[standard]/select,standard,backdrop;listSubItemDividerStyle[standard]/select,standard,padded,inset;colorListSubItemDivider[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_divider]/color;drawerSubItemIconHeight/number;listSubItemAlignment[left]/select,left,center,right;listItemSubTextFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.subItem]/fontname;listSubItemTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.subItem]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemSubTextFontDisabled[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.subItem_disabled]/fontname;showSubItemsLabels[true]/checkbox;backdropSubLabelBackgroundHeight/slider,0,100,1;"
        data-vis-attrs4="group.drawerSubItemsColors;colorDrawerSubBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_background_all]/color;colorDrawerSubItemBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_background]/color;colorListSubItemHover[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_hover]/color;colorListSubItemSelected[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_selected]/color;colorListSubItemText[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_text]/color;colorListSubItemTextSelected[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_text_selected]/color;colorDrawerbackdropSubLabelBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_backdrop_background_text_off]/color;colorDrawerbackdropSubLabelBackgroundActive[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_backdrop_background_text_on]/color;"
        data-vis-attrs5="group.drawerItemsData;drawerItemsDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject;drawerItemsJsonString/html;"
        data-vis-attrs6="group.drawerItems/byindex;menuId(0-navItemCount);labels(0-navItemCount)/html;headers(0-navItemCount)/html;dividers(0-navItemCount)/checkbox;iconDrawer(0-navItemCount)[/vis/widgets/materialdesign/img/IoBroker_Logo.png]/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;iconDrawerColor(0-navItemCount)[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon]/color;subIconDrawerColor(0-navItemCount)[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_icon]/color;setValueOnMenuToggleClick(0-navItemCount)/checkbox;submenus(0-navItemCount)/html;permissionGroupSelector(0-navItemCount)/custom,materialdesign.viseditor.permissionGroupSelector;permissionVisibility(0-navItemCount)[hide]/select,hide,disabled;">
        
        <div class="vis-widget materialdesign-widget materialdesign-topAppBar-with-Drawer" style="width:400px; height: 270px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.topappbarnav(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-List"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_list.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="val,ctrl,state,navigation,static,bool"
        data-vis-name="List"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,list;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,list;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;vibrateOnMobilDevices[50]/number;debug/checkbox;"
        data-vis-attrs0="group.listLayout;listType[text]/select,text,buttonState,buttonToggle,buttonToggle_readonly,buttonNav,buttonLink,switch,switch_readonly,checkbox,checkbox_readonly;listItemDividerStyle[standard]/select,standard,padded,inset;listLayout[standard]/select,standard,card,cardOutlined;showScrollbar[true]/checkbox;vibrateOnMobilDevices[50]/number;"
        data-vis-attrs1="group.listItemData;listItemDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject;countListItems[1]/number;json_string_oid/id;"
        data-vis-attrs2="group.listItemLayout;listItemHeight/number;listImageHeight/number;listItemAlignment[left]/select,left,center,right;distanceBetweenTextAndImage/number;rightTextWidth/number;"        
        data-vis-attrs3="group.color;listBackground[#mdwTheme:vis-materialdesign.0.colors.list.background]/color;listItemBackground[#mdwTheme:vis-materialdesign.0.colors.list.background_off]/color;listItemBackgroundActive[#mdwTheme:vis-materialdesign.0.colors.list.background_on]/color;colorSwitchThumb[#mdwTheme:vis-materialdesign.0.colors.switch.off]/color;colorSwitchTrack[#mdwTheme:vis-materialdesign.0.colors.switch.track]/color;colorSwitchTrue[#mdwTheme:vis-materialdesign.0.colors.switch.on]/color;colorSwitchHover[#mdwTheme:vis-materialdesign.0.colors.switch.off_hover]/color;colorCheckBox[#mdwTheme:vis-materialdesign.0.colors.checkbox.on]/color;colorListItemHover[#mdwTheme:vis-materialdesign.0.colors.list.hover]/color;colorListItemSelected[#mdwTheme:vis-materialdesign.0.colors.list.selected]/color;colorListItemText[#mdwTheme:vis-materialdesign.0.colors.list.text]/color;colorListItemTextSecondary[#mdwTheme:vis-materialdesign.0.colors.list.subText]/color;colorListItemTextRight[#mdwTheme:vis-materialdesign.0.colors.list.text_right]/color;colorListItemTextSecondaryRight[{mode:vis-materialdesign.0.colors.darkTheme§light:vis-materialdesign.0.colors.light.list.subText_right§dark:vis-materialdesign.0.colors.dark.list.subText_right§ mode === ^true^ ? dark : light}]/color;colorListItemHeaders[#mdwTheme:vis-materialdesign.0.colors.list.header]/color;colorListItemDivider[#mdwTheme:vis-materialdesign.0.colors.list.divider]/color;"
        data-vis-attrs4="group.font;headerFontFamily[#mdwTheme:vis-materialdesign.0.fonts.list.header]/fontname;listItemFont[#mdwTheme:vis-materialdesign.0.fonts.list.text]/fontname;listItemSubFont[#mdwTheme:vis-materialdesign.0.fonts.list.subText]/fontname;listItemRightFont[#mdwTheme:vis-materialdesign.0.fonts.list.text_right]/fontname;listItemSubRightFont[#mdwTheme:vis-materialdesign.0.fonts.list.subText_right]/fontname;"
        data-vis-attrs5="group.fontSize;listItemTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.list.text]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemSubTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.list.subText]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemTextRightSize[#mdwTheme:vis-materialdesign.0.fontSizes.list.text_right]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemSubTextRightSize[#mdwTheme:vis-materialdesign.0.fontSizes.list.subText_right]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemHeaderTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.list.header]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;"
        data-vis-attrs6="group.rows/byindex;oid(0-countListItems);groupHeader(0-countListItems)/html;listImage(0-countListItems)/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;listImageColor(0-countListItems)[#mdwTheme:vis-materialdesign.0.colors.list.icon_off]/color;listImageActive(0-countListItems)/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;listImageActiveColor(0-countListItems)[#mdwTheme:vis-materialdesign.0.colors.list.icon_on]/color;label(0-countListItems)/html;subLabel(0-countListItems)/html;rightLabel(0-countListItems)/html;rightSubLabel(0-countListItems)/html;dividers(0-countListItems)/checkbox;listTypeButtonStateValue(0-countListItems);listTypeButtonNav(0-countListItems)/views;listTypeButtonLink(0-countListItems)/url;listOverflow(0-countListItems)/checkbox;">
       
        <div class="vis-widget materialdesign-widget materialdesign-list" style="width:400px; height: 270px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.list(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Icon-List"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_iconlist.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="val,ctrl,state,navigation,static,bool"
        data-vis-name="Icon List"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,iconList;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,iconList;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;wrapItems[true]/checkbox;maxItemsperRow/number;itemGaps/number;vibrateOnMobilDevices[50]/number;debug/checkbox;"
        data-vis-attrs0="group.listItemLayout;listLayout[standard]/select,standard,card,cardOutlined;containerBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.icon_list.background]/color;itemBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.icon_list.background_items]/color;itemLayout[vertical]/select,vertical,horizontal;iconItemMinWidth/number;iconItemMinHeight/number;iconHeight/number;horizontalIconContainerWidth/number;verticalIconContainerHeight/number;buttonLayout[round]/select,round,square,full;buttonHeight/number;buttonColorPress[#mdwTheme:vis-materialdesign.0.colors.icon_list.button_hover]/color;labelFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.icon_list.text]/number;labelFontFamily[#mdwTheme:vis-materialdesign.0.fonts.icon_list.text]/fontname;labelFontColor[#mdwTheme:vis-materialdesign.0.colors.icon_list.text]/color;subLabelFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.icon_list.subText]/number;subLabelFontFamily[#mdwTheme:vis-materialdesign.0.fonts.icon_list.subText]/fontname;subLabelFontColor[#mdwTheme:vis-materialdesign.0.colors.icon_list.subText]/color;valueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.icon_list.value]/number;valueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.icon_list.value]/fontname;valueFontColor[#mdwTheme:vis-materialdesign.0.colors.icon_list.value_text]/color;"
        data-vis-attrs1="group.listItemCardBackground;cardUse/checkbox;title/html;titleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.title]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;showScrollbar[true]/checkbox;borderDistance/number;titleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.title]/fontname;colorBackground[#mdwTheme:vis-materialdesign.0.colors.card.background]/color;colorTitleSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_title]/color;colorTextSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_body]/color;colorTitle[#mdwTheme:vis-materialdesign.0.colors.card.title]/color;"
        data-vis-attrs2="group.lock;autoLockAfter[10]/number;lockIcon/custom,materialdesign.viseditor.materialDesignIcons;lockIconTop[5]/slider,0,100,1;lockIconLeft[5]/slider,0,100,1;lockIconSize/number;lockIconColor[#mdwTheme:vis-materialdesign.0.colors.icon_list.lock_icon]/color;lockFilterGrayscale[30]/slider,0,100,1;lockApplyOnlyOnImage[true]/checkbox;"
        data-vis-attrs3="group.listItemData;listItemDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject;countListItems[1]/number;json_string_oid/id;"
        data-vis-attrs4="group.rows/byindex;listType(0-countListItems)[text]/select,text,buttonState,buttonToggle,buttonToggleValueTrue,buttonToggleValueFalse,buttonNav,buttonLink;oid(0-countListItems);usePercentOfRow(0-countListItems)/number,0,100,1;listTypeButtonStateValue(0-countListItems);typeButtonToggleValueTrue(0-countListItems);typeButtonToggleValueFalse(0-countListItems);listTypeButtonNav(0-countListItems)/views;listTypeButtonLink(0-countListItems)/url;lockEnabled(0-countListItems)/checkbox;readOnly(0-countListItems)/checkbox,itemBackgroundColor(0-countListItems)/color;label(0-countListItems)/html;subLabel(0-countListItems)/html;showValueLabel(0-countListItems)[true]/checkbox;valueAppendix(0-countListItems)/html;buttonBgColor(0-countListItems)[#mdwTheme:vis-materialdesign.0.colors.icon_list.button]/color;buttonBgColorActive(0-countListItems)/color;listImage(0-countListItems)/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;listImageColor(0-countListItems)[#mdwTheme:vis-materialdesign.0.colors.icon_list.icon]/color;listImageActive(0-countListItems)/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;listImageActiveColor(0-countListItems)/color;statusBarColor(0-countListItems)/color;statusBarText(0-countListItems)/html;visibilityOid(0-countListItems)/id;visibilityCondition(0-countListItems)[==]/custom,materialdesign.viseditor.visibilityCondition;visibilityConditionValue(0-countListItems);">

        <div class="vis-widget materialdesign-widget materialdesign-icon-list <%== this.data.attr('class') %>" style="width:400px; height: 270px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.iconlist(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Chart-Bar"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/bar_chart.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="state,chart"
        data-vis-name="Bar Chart"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,barChart;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,barChart;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;chartDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject;dataCount[1]/number;oid;chartType[vertical]/select,vertical,horizontal;chartPaddingTop/number;chartPaddingLeft/number;chartPaddingRight/number;chartPaddingBottom/number;debug/checkbox;"
        data-vis-attrs0="group.chartLayout;backgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background]/color;chartAreaBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background_chart]/color;disableHoverEffects/checkbox;axisValueMin/number;axisValueMax/number;axisValueStepSize/number;axisValueMinDigits/number;axisValueMaxDigits/number;axisValueAppendText;axisLabelAutoSkip/checkbox;axisMaxLabel/number;animationDuration/number;"
        data-vis-attrs1="group.listItemCardBackground;cardUse/checkbox;title/html;titleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.title]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;borderDistance/number;titleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.title]/fontname;colorBackground[#mdwTheme:vis-materialdesign.0.colors.card.background]/color;colorTitleSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_title]/color;colorTextSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_body]/color;colorTitle[#mdwTheme:vis-materialdesign.0.colors.card.title]/color;"
        data-vis-attrs2="group.oids;oid(0-dataCount);"
        data-vis-attrs3="group.barLayout;barLabelText;colorScheme/custom,materialdesign.colorScheme.editorSelector;globalColor[#mdwTheme:vis-materialdesign.0.colors.charts.global]/color;hoverColor[#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover]/color;hoverBorderColor[#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover_border]/color;hoverBorderWidth;barWidth/slider,0,100,1;"
        data-vis-attrs4="group.layoutForData/byindex;dataColor(0-dataCount)/color;label(0-dataCount);valueText(0-dataCount);valueTextColor(0-dataCount)/color;labelValueAppend(0-dataCount);tooltipTitle(0-dataCount);tooltipText(0-dataCount);"
        data-vis-attrs5="group.barValuesLayout;showValues[showValuesOn]/select,showValuesOn,showValuesOff,showValuesAuto;valuesSteps/number;valuesMinDecimals/number0,100,1;valuesMaxDecimals/number,0,100,1;valuesAppendText;valuesFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.value]/color;valuesFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.value]/fontname;valuesFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.value]/number;valuesPositionAnchor[end]/select,center,start,end;valuesPositionAlign[top]/select,center,start,end,right,bottom,left,top;valuesPositionOffset/number;valuesTextAlign[center]/select,start,center,end,left,right;valuesRotation/slider,0,360,1;"
        data-vis-attrs6="group.yAxisLayout;yAxisPosition[left]/select,left,right;yAxisTitle;yAxisTitleColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_title]/color;yAxisTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title]/fontname;yAxisTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title]/number;yAxisValueLabelColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values]/color;yAxisValueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values]/fontname;yAxisValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values]/number;yAxisValueDistanceToAxis[10]/slider,0,100,1;yAxisShowAxis[true]/checkbox;yAxisShowAxisLabels[true]/checkbox;yAxisShowGridLines[true]/checkbox;yAxisGridLinesColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines]/color;yAxisGridLinesWitdh;yAxisShowTicks[true]/checkbox;yAxisTickLength/slider,0,100,1;yAxisZeroLineWidth/number,0,100,0.1;yAxisZeroLineColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline]/color;"
        data-vis-attrs7="group.xAxisLayout;xAxisPosition[bottom]/select,top,bottom;xAxisTicksSource[auto]/select,auto,data,labels;xAxisOffset/checkbox;xAxisTitle;xAxisTitleColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title]/color;xAxisTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title]/fontname;xAxisTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title]/number;xAxisValueLabelColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_values]/color;xAxisValueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values]/fontname;xAxisValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values]/number;xAxisValueDistanceToAxis[0]/slider,0,100,1;xAxisShowAxis[true]/checkbox;xAxisShowAxisLabels[true]/checkbox;xAxisShowGridLines[true]/checkbox;xAxisGridLinesColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines]/color;xAxisGridLinesWitdh;xAxisOffsetGridLines/checkbox;xAxisShowTicks[true]/checkbox;xAxisTickLength/slider,0,100,1;xAxisZeroLineWidth/number,0,100,0.1;xAxisZeroLineColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline]/color;xAxisMinRotation[0]/slider,0,360,1;xAxisMaxRotation[0]/slider,0,360,1;"
        data-vis-attrs8="group.legendLayout;showLegend/checkbox;legendPosition[right]/select,top,left,bottom,right;legendFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.legend]/color;legendFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.legend]/fontname;legendFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend]/number;legendBoxWidth/slider,0,100,1;legendPointStyle[true]/checkbox;legendDistanceToChart/number;legendPadding/number;"
        data-vis-attrs9="group.tooltipLayout;showTooltip[true]/checkbox;tooltipBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background]/color;tooltipArrowSize/number;tooltipDistanceToBar/number;tooltipBoxRadius/number;tooltipShowColorBox[true]/checkbox;tooltipXpadding/number;tooltipYpadding/number;tooltipTitleFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title]/color;tooltipTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title]/fontname;tooltipTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title]/number;tooltipTitleMarginBottom/number;tooltipBodyFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text]/color;tooltipBodyFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text]/fontname;tooltipBodyFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text]/number;tooltipBodyAppend;tooltipValueMinDecimals/number;tooltipValueMaxDecimals/number;">        

        <div class="vis-widget materialdesign-widget materialdesign-chart <%== this.data.attr('class') %>" style="width:400px; height: 270px; background-color: <%= this.data.attr('backgroundColor')%>" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.chart.bar(el, data) %>>
            
        </div>
</script>

<script id="tplVis-materialdesign-Chart-Line-History"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_line_history_chart.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="state,chart,history"
        data-vis-name="Line History Chart"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,lineHistoryChart;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,lineHistoryChart;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;historyAdapterInstance/history;dataCount[1]/number;timeIntervalToShow[10 minutes]/select,30 seconds,1 minute,2 minutes,5 minutes,10 minutes,30 minutes,1 hour,2 hours,4 hours,8 hours,12 hours,1 day,2 days,3 days,7 days,14 days,1 month,2 months,3 months,6 months,1 year,2 years;time_interval_oid/id;refreshMethod[timeInterval]/select,realtime,timeInterval,byObject;refreshTimeInterval[1 minute]/select,30 seconds,1 minute,2 minutes,5 minutes,10 minutes,30 minutes,1 hour,2 hours,4 hours,8 hours,12 hours,1 day;manualRefreshTrigger/id;chartTimeout[2]/number,0,60,1;debug/checkbox;"
        data-vis-attrs0="group.chartLayout;backgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background]/color;chartAreaBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background_chart]/color;disableHoverEffects/checkbox;animationDuration/number;chartPaddingTop/number;chartPaddingLeft/number;chartPaddingRight/number;chartPaddingBottom/number;"
        data-vis-attrs1="group.listItemCardBackground;cardUse/checkbox;title/html;titleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.title]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;borderDistance/number;titleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.title]/fontname;colorBackground[#mdwTheme:vis-materialdesign.0.colors.card.background]/color;colorTitleSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_title]/color;colorTextSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_body]/color;colorTitle[#mdwTheme:vis-materialdesign.0.colors.card.title]/color;"
        data-vis-attrs2="group.oids/byindex;oid(0-dataCount)/hid/onHidChanged;aggregate(0-dataCount)[minmax]/select,minmax,min,max,average,total;maxDataPoints(0-dataCount)/number;minTimeInterval(0-dataCount)/number;multiply(0-dataCount);"
        data-vis-attrs3="group.commonYAxis;commonYAxis(0-dataCount)/number;"
        data-vis-attrs4="group.lineLayout;colorScheme/custom,materialdesign.colorScheme.editorSelector;globalColor[#mdwTheme:vis-materialdesign.0.colors.charts.global]/color;pointStyle[circle]/select,circle,cross,crossRot,dash,line,rect,rectRounded,rectRot,star,triangle;pointSize/number;pointSizeHover/number;"
        data-vis-attrs5="group.legendLayout;showLegend[true]/checkbox;legendPosition[right]/select,top,left,bottom,right;legendFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.legend]/color;legendFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.legend]/fontname;legendFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend]/number;legendBoxWidth/slider,0,100,1;legendPointStyle[true]/checkbox;legendDistanceToChart/number;legendPadding/number;"
        data-vis-attrs6="group.tooltipLayout;showTooltip[true]/checkbox;tooltipMode[nearest]/select,nearest,point,index,dataset,x,y;tooltipPosition[nearest]/select,average,nearest;tooltipTimeFormats[{&quot;millisecond&quot;:&quot;lll:ss&quot;,&quot;second&quot;:&quot;lll:ss&quot;,&quot;minute&quot;:&quot;lll&quot;,&quot;hour&quot;:&quot;lll&quot;,&quot;day&quot;:&quot;lll&quot;,&quot;week&quot;:&quot;lll&quot;,&quot;month&quot;:&quot;lll&quot;,&quot;quarter&quot;:&quot;lll&quot;,&quot;year&quot;:&quot;lll&quot;}]/html;tooltipLabelUseTodayYesterday/checkbox;tooltipBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background]/color;tooltipArrowSize/number;tooltipDistanceToBar/number;tooltipBoxRadius/number;tooltipShowColorBox[true]/checkbox;tooltipXpadding/number;tooltipYpadding/number;tooltipTitleFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title]/color;tooltipTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title]/fontname;tooltipTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title]/number;tooltipTitleMarginBottom/number;tooltipBodyFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text]/color;tooltipBodyFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text]/fontname;tooltipBodyFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text]/number;tooltipBodyAppend;tooltipValueMinDecimals/number;tooltipValueMaxDecimals/number;"
        data-vis-attrs7="group.layoutForData/byindex;lineSpanGaps(0-dataCount)[true]/checkbox;steppedLine(0-dataCount)/checkbox;lineTension(0-dataCount)/slider,0,1,0.1;lineThikness(0-dataCount)/number;dataColor(0-dataCount)/color;useFillColor(0-dataCount)/checkbox;fillColor(0-dataCount)/color;pointColor(0-dataCount)/color;pointHoverColor(0-dataCount)/color;legendText(0-dataCount);"
        data-vis-attrs8="group.xAxisLayout;xAxisPosition[bottom]/select,top,bottom;xAxisTicksSource[auto]/select,auto,data,labels;xAxisMaxLabel/number;xAxisLabelUseTodayYesterday/checkbox;xAxisBounds[dataSet]/select,dataSet,axisTicks;xAxisTimeFormats[{&quot;millisecond&quot;:&quot;H:mm:ss.SSS&quot;,&quot;second&quot;:&quot;H:mm:ss&quot;,&quot;minute&quot;:&quot;H:mm&quot;,&quot;hour&quot;:&quot;H&quot;,&quot;day&quot;:&quot;ddd DD.&quot;,&quot;week&quot;:&quot;ll&quot;,&quot;month&quot;:&quot;MMM YYYY&quot;,&quot;quarter&quot;:&quot;[Q]Q - YYYY&quot;,&quot;year&quot;:&quot;YYYY&quot;}]/html;xAxisTitle;xAxisTitleColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title]/color;xAxisTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title]/fontname;xAxisTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title]/number;xAxisValueLabelColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_values]/color;xAxisValueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values]/fontname;xAxisValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values]/number;xAxisDistanceBetweenTicks[10]/slider,0,1000,1;xAxisValueDistanceToAxis[0]/slider,0,100,1;xAxisShowAxis[true]/checkbox;xAxisShowAxisLabels[true]/checkbox;xAxisShowGridLines[true]/checkbox;xAxisGridLinesColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines]/color;xAxisGridLinesWitdh;xAxisOffsetGridLines/checkbox;xAxisShowTicks[true]/checkbox;xAxisTickLength/slider,0,100,1;axisValueAppendText;xAxisZeroLineWidth/number,0,100,0.1;xAxisZeroLineColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline]/color;xAxisMinRotation[0]/slider,0,360,1;xAxisMaxRotation[0]/slider,0,360,1;"
        data-vis-attrs9="group.yAxisLayout;yAxisTitleColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_title]/color;yAxisTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title]/fontname;yAxisTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title]/number;yAxisValueLabelColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values]/color;yAxisValueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values]/fontname;yAxisValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values]/number;yAxisValueDistanceToAxis[10]/slider,0,100,1;"
        data-vis-attrs10="group.yAxisLayoutForData/byindex;showYAxis(0-dataCount)[true]/checkbox;yAxisPosition(0-dataCount)[left]/select,left,right;yAxisTitle(0-dataCount);yAxisValueColor(0-dataCount)/color;yAxisMinValue(0-dataCount)/number;yAxisMaxValue(0-dataCount)/number;yAxisStep(0-dataCount)/number;yAxisValueMinDigits(0-dataCount)/number,0,100,1;yAxisValueMaxDigits(0-dataCount)/number,0,100,1;yAxisMaxLabel(0-dataCount)/number;yAxisTitle(0-dataCount);yAxisValueAppendText(0-dataCount);yAxisShowGridLines(0-dataCount)[true]/checkbox;yAxisShowTicks(0-dataCount)[true]/checkbox;yAxisShowAxisBorder(0-dataCount)[true]/checkbox;yAxisGridLinesColor(0-dataCount)[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines]/color;yAxisGridLinesWitdh(0-dataCount);yAxisTickLength(0-dataCount)/slider,0,100,1;yAxisZeroLineWidth(0-dataCount)/number,0,100,0.1;yAxisZeroLineColor(0-dataCount)[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline]/color;"
        data-vis-attrs11="group.lineValuesLayout/byindex;showValues(0-dataCount)[showValuesOn]/select,showValuesOn,showValuesOff,showValuesAuto;valuesSteps(0-dataCount)/number;valuesMinDecimals(0-dataCount)/number;valuesMaxDecimals(0-dataCount)/number;valuesAppendText(0-dataCount);valuesFontColor(0-dataCount)[#mdwTheme:vis-materialdesign.0.colors.charts.value]/color;valuesFontFamily(0-dataCount)[#mdwTheme:vis-materialdesign.0.fonts.charts.value]/fontname;valuesFontSize(0-dataCount)[#mdwTheme:vis-materialdesign.0.fontSizes.charts.value]/number;valuesPositionAnchor(0-dataCount)[end]/select,center,start,end;valuesPositionAlign(0-dataCount)[top]/select,center,start,end,right,bottom,left,top;valuesPositionOffset(0-dataCount)/number;valuesTextAlign(0-dataCount)[center]/select,start,center,end,left,right;valuesRotation(0-dataCount)/slider,0,360,1;">
         <!-- TODO: data-vis-attrs11="group.valueTextColors;valueTextColor(0-dataCount)/color;group.labelValuesAppend;labelValueAppend(0-dataCount);"> -->

        <div class="vis-widget materialdesign-widget materialdesign-chart <%== this.data.attr('class') %>" style="width:400px; height: 270px; background-color: <%= this.data.attr('backgroundColor')%>" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.chart.lineHistory(el, data) %>>

        </div>
</script>


<script id="tplVis-materialdesign-Chart-JSON"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_json_chart.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="state,chart"
        data-vis-name="JSON Chart"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,jsonChart;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,jsonChart;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;chartType[bar]/select,bar,line;debug/checkbox;"
        data-vis-attrs0="group.chartLayout;backgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background]/color;chartAreaBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background_chart]/color;colorScheme/custom,materialdesign.colorScheme.editorSelector;globalColor[#mdwTheme:vis-materialdesign.0.colors.charts.global]/color;disableHoverEffects/checkbox;chartPaddingTop/number;chartPaddingLeft/number;chartPaddingRight/number;chartPaddingBottom/number;animationDuration/number;"
        data-vis-attrs1="group.listItemCardBackground;cardUse/checkbox;title/html;titleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.title]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;borderDistance/number;titleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.title]/fontname;colorBackground[#mdwTheme:vis-materialdesign.0.colors.card.background]/color;colorTitleSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_title]/color;colorTextSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_body]/color;colorTitle[#mdwTheme:vis-materialdesign.0.colors.card.title]/color;"
        data-vis-attrs2="group.barLayout;barWidth/slider,0,100,1;"
        data-vis-attrs3="group.legendLayout;showLegend[true]/checkbox;legendPosition[right]/select,top,left,bottom,right;legendFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.legend]/color;legendFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.legend]/fontname;legendFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend]/number;legendBoxWidth/slider,0,100,1;legendPointStyle[true]/checkbox;legendDistanceToChart/number;legendPadding/number;"
        data-vis-attrs4="group.tooltipLayout;showTooltip[true]/checkbox;tooltipMode[nearest]/select,nearest,point,index,dataset,x,y;tooltipPosition[nearest]/select,average,nearest;tooltipTimeFormats[{&quot;millisecond&quot;:&quot;lll:ss&quot;,&quot;second&quot;:&quot;lll:ss&quot;,&quot;minute&quot;:&quot;lll&quot;,&quot;hour&quot;:&quot;lll&quot;,&quot;day&quot;:&quot;lll&quot;,&quot;week&quot;:&quot;lll&quot;,&quot;month&quot;:&quot;lll&quot;,&quot;quarter&quot;:&quot;lll&quot;,&quot;year&quot;:&quot;lll&quot;}]/html;tooltipLabelUseTodayYesterday/checkbox;tooltipBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background]/color;tooltipArrowSize/number;tooltipDistanceToBar/number;tooltipBoxRadius/number;tooltipShowColorBox[true]/checkbox;tooltipXpadding/number;tooltipYpadding/number;tooltipTitleFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title]/color;tooltipTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title]/fontname;tooltipTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title]/number;tooltipTitleMarginBottom/number;tooltipBodyFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text]/color;tooltipBodyFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text]/fontname;tooltipBodyFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text]/number;tooltipBodyAlignment[left]/select,left,center,right;"
        data-vis-attrs5="group.xAxisLayout;xAxisPosition[bottom]/select,top,bottom;xAxisTicksSource[auto]/select,auto,data,labels;xAxisOffset/checkbox;xAxisMaxLabel/number;xAxisLabelUseTodayYesterday/checkbox;xAxisTitle;xAxisTitleColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title]/color;xAxisTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title]/fontname;xAxisTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title]/number;xAxisValueLabelColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_values]/color;xAxisValueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values]/fontname;xAxisValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values]/number;axisLabelAutoSkip/checkbox;xAxisDistanceBetweenTicks[10]/slider,0,1000,1;xAxisValueDistanceToAxis[0]/slider,0,100,1;xAxisShowAxis[true]/checkbox;xAxisShowAxisLabels[true]/checkbox;xAxisShowGridLines[true]/checkbox;xAxisGridLinesColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines]/color;xAxisGridLinesWitdh;xAxisOffsetGridLines/checkbox;xAxisShowTicks[true]/checkbox;xAxisTickLength/slider,0,100,1;xAxisZeroLineWidth/number,0,100,0.1;xAxisZeroLineColor[#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline]/color;xAxisMinRotation[0]/slider,0,360,1;xAxisMaxRotation[0]/slider,0,360,1;"
        data-vis-attrs6="group.yAxisLayout;yAxisTitleColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values]/color;yAxisTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title]/fontname;yAxisTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title]/number;yAxisValueLabelColor[#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values]/color;yAxisValueFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values]/fontname;yAxisValueFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values]/number;yAxisValueDistanceToAxis[10]/slider,0,100,1;">

        <div class="vis-widget materialdesign-widget materialdesign-chart <%== this.data.attr('class') %>" style="width:400px; height: 270px; background-color: <%= this.data.attr('backgroundColor')%>" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.chart.json(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Chart-Pie"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/pie_chart.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="state,chart"
        data-vis-name="Pie Chart"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,pieChart;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,pieChart;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;chartDataMethod[inputPerEditor]/select,inputPerEditor,jsonStringObject;dataCount[1]/number;oid;chartType[pie]/select,pie,doughnut;doughnutCutOut/number,0,100,1;chartPaddingTop/number;chartPaddingLeft/number;chartPaddingRight/number;chartPaddingBottom/number;debug/checkbox;"
        data-vis-attrs0="group.chartLayout;backgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background]/color;chartAreaBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.background_chart]/color;disableHoverEffects/checkbox;animationDuration/number;"
        data-vis-attrs1="group.listItemCardBackground;cardUse/checkbox;title/html;titleLayout[#mdwTheme:vis-materialdesign.0.fontSizes.card.title]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;borderDistance/number;titleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.card.title]/fontname;colorBackground[#mdwTheme:vis-materialdesign.0.colors.card.background]/color;colorTitleSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_title]/color;colorTextSectionBackground[#mdwTheme:vis-materialdesign.0.colors.card.background_body]/color;colorTitle[#mdwTheme:vis-materialdesign.0.colors.card.title]/color;"
        data-vis-attrs2="group.oids;oid(0-dataCount);"
        data-vis-attrs3="group.pieLayout;colorScheme/custom,materialdesign.colorScheme.editorSelector;globalColor[#mdwTheme:vis-materialdesign.0.colors.charts.global]/color;hoverColor[#mdwTheme:vis-materialdesign.0.colors.charts.pie.hover]/color;borderColor[#mdwTheme:vis-materialdesign.0.colors.charts.pie.border]/color;hoverBorderColor[#mdwTheme:vis-materialdesign.0.colors.charts.pie.border_hover]/color;borderWidth;hoverBorderWidth;"
        data-vis-attrs4="group.layoutForData/byindex;dataColor(0-dataCount)/color;label(0-dataCount);valueTextColor(0-dataCount)/color;labelValueAppend(0-dataCount);tooltipTitle(0-dataCount);tooltipText(0-dataCount);"
        data-vis-attrs5="group.pieValuesLayout;showValues[showValuesOn]/select,showValuesOn,showValuesOff,showValuesAuto;valuesSteps/number;valuesMinDecimals/number;valuesMaxDecimals/number;valuesAppendText;valuesFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.pie.value]/color;valuesFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.value]/fontname;valuesFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.value]/number;valuesPositionAnchor[center]/select,center,start,end;valuesPositionAlign[end]/select,center,start,end,right,bottom,left,top;valuesPositionOffset/number;valuesTextAlign[center]/select,start,center,end,left,right;valuesRotation/slider,0,360,1;"
        data-vis-attrs6="group.legendLayout;showLegend/checkbox;legendPosition[right]/select,top,left,bottom,right;legendFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.legend]/color;legendFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.legend]/fontname;legendFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend]/number;legendBoxWidth/slider,0,100,1;legendPointStyle[true]/checkbox;legendDistanceToChart/number;legendPadding/number;"
        data-vis-attrs7="group.tooltipLayout;showTooltip[true]/checkbox;tooltipBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background]/color;tooltipArrowSize/number;tooltipDistanceToBar/number;tooltipBoxRadius/number;tooltipShowColorBox[true]/checkbox;tooltipXpadding/number;tooltipYpadding/number;tooltipTitleFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title]/color;tooltipTitleFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title]/fontname;tooltipTitleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title]/number;tooltipTitleMarginBottom/number;tooltipBodyFontColor[#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text]/color;tooltipBodyFontFamily[#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text]/fontname;tooltipBodyFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text]/number;tooltipBodyAppend;tooltipValueMinDecimals/number;tooltipValueMaxDecimals/number;">

        <div class="vis-widget materialdesign-widget materialdesign-chart <%== this.data.attr('class') %>" style="width:400px; height: 270px; background-color: <%= this.data.attr('backgroundColor')%>" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.chart.pie(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-ColorScheme-Preview"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_color_schemes.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="static"
        data-vis-name="Preview Color Schemes"
        data-vis-update-style="true">

        <%
            let preview = vis.binds.materialdesign.colorScheme.preview(data);
        %>

        <div class="vis-widget materialdesign-widget materialdesign-colorscheme mdc-card <%== this.data.attr('class') %>" style="width: 620px; height: 300px; left: 333px; top: 497px; padding: 16px; overflow-y: auto; background: white" id="<%= this.data.attr('wid') %>">
            <span class="mdc-typography--headline6" style="color: #44739e; margin-bottom: 16px;">Material Design Widgets Color Schemes Preview</span>
            <div>   
                <%== preview %>
            </div>
        </div>
</script> 

<script id="tplVis-materialdesign-Vuetify-Dialog-View"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_dialog_view.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="dialog,stateful,container,view"
        data-vis-name="Dialog"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,dialogView;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,dialogView;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;showDialogMethod[button]/select,button,datapoint;showDialogOid/id;contains_view/views;fullscreenResolutionLower[360]/number;vibrateOnMobilDevices[50]/number;debug/checkbox;"
        data-vis-attrs0="group.buttonLayout;buttonStyle[raised]/select,text,raised,unelevated,outlined,icon;buttontext/html;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;image/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.dialog.button_icon]/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;"
        data-vis-attrs1="group.layoutDialog;dialogMaxWidth/dimension;viewHeight/dimension;z_index/number;closingClickOutside[true]/checkbox;viewDistanceToBorder/number;backgroundColor[#mdwTheme:vis-materialdesign.0.colors.dialog.background]/color;headerHeight/number;headerBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.dialog.header_background]/color;footerHeight/number;footerBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.dialog.footer_background]/color;showDivider/checkbox;dividerColor[#mdwTheme:vis-materialdesign.0.colors.dialog.divider]/color;overlayColor[#mdwTheme:vis-materialdesign.0.colors.dialog.overlay]/color;overlayOpacity/slider,0,1,0.1;"
        data-vis-attrs2="group.layoutTitle;showTitle[true]/checkbox;title/html;titleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.dialog.title]/number;titleFont[#mdwTheme:vis-materialdesign.0.fonts.dialog.title]/fontname;titleColor[#mdwTheme:vis-materialdesign.0.colors.dialog.header_text]/color;"
        data-vis-attrs3="group.layoutdialogCloseButton;buttonPosition[flex-end]/select,flex-start,center,flex-end;buttonSize[medium]/select,small,medium,large;buttonFullWidth/checkbox;buttonText;buttonFontSize/number;buttonFont[#mdwTheme:vis-materialdesign.0.fonts.dialog.button]/fontname;buttonFontColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_text]/color;pressColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_press]/color;fullscreenCloseIcon/custom,materialdesign.viseditor.materialDesignIcons;fullscreenCloseIconColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_icon]/color;fullscreenCloseIconPressColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_fullscreen_press]/color;">
        
        <div class="vis-widget materialdesign-widget materialdesign-vuetify-dialog <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.dialog.vue(el, data) %>>
            <div class="vis-widget materialdesign-widget materialdesign-button" style="width: 100%; height: 100%;"></div>
        </div>
</script>

<script id="tplVis-materialdesign-Vuetify-Dialog-iFrame"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_dialog_view.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="dialog,stateful,container,view"
        data-vis-name="Dialog iFrame"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,dialogView;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,dialogView;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;showDialogMethod[button]/select,button,datapoint;showDialogOid/id;fullscreenResolutionLower[360]/number;vibrateOnMobilDevices[50]/number;debug/checkbox;"
        data-vis-attrs0="group.iFrame;src;refreshInterval[0]/slider,0,180000,100;noSandbox/checkbox;refreshOnWakeUp/checkbox;refreshOnViewChange/checkbox;refreshWithNoQuery/checkbox;scrollX/checkbox;scrollY/checkbox;seamless[true]/checkbox;"
        data-vis-attrs1="group.buttonLayout;buttonStyle[raised]/select,text,raised,unelevated,outlined,icon;buttontext/html;mdwButtonPrimaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.primary]/color;mdwButtonSecondaryColor[#mdwTheme:vis-materialdesign.0.colors.button.default.secondary]/color;mdwButtonColorPress/color;textFontFamily[#mdwTheme:vis-materialdesign.0.fonts.button.default.text]/fontname;textFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text]/number;labelWidth/slider,0,100,1;image/custom,materialdesign.viseditor.imagesAndMaterialDesignIcons;imageColor[#mdwTheme:vis-materialdesign.0.colors.dialog.button_icon]/color;iconPosition[left]/select,left,right;iconHeight/slider,0,200,1;"
        data-vis-attrs2="group.layoutDialog;dialogMaxWidth/dimension;viewHeight/dimension;z_index/number;closingClickOutside[true]/checkbox;viewDistanceToBorder/number;backgroundColor[#mdwTheme:vis-materialdesign.0.colors.dialog.background]/color;headerHeight/number;headerBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.dialog.header_background]/color;footerHeight/number;footerBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.dialog.footer_background]/color;showDivider/checkbox;dividerColor[#mdwTheme:vis-materialdesign.0.colors.dialog.divider]/color;overlayColor[#mdwTheme:vis-materialdesign.0.colors.dialog.overlay]/color;overlayOpacity/slider,0,1,0.1;"
        data-vis-attrs3="group.layoutTitle;showTitle[true]/checkbox;title/html;titleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.dialog.title]/number;titleFont[#mdwTheme:vis-materialdesign.0.fonts.dialog.title]/fontname;titleColor[#mdwTheme:vis-materialdesign.0.colors.dialog.header_text]/color;"
        data-vis-attrs4="group.layoutdialogCloseButton;buttonPosition[flex-end]/select,flex-start,center,flex-end;buttonSize[medium]/select,small,medium,large;buttonFullWidth/checkbox;buttonText;buttonFontSize/number;buttonFont[#mdwTheme:vis-materialdesign.0.fonts.dialog.button]/fontname;buttonFontColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_text]/color;pressColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_press]/color;fullscreenCloseIcon/custom,materialdesign.viseditor.materialDesignIcons;fullscreenCloseIconColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_icon]/color;fullscreenCloseIconPressColor[#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_fullscreen_press]/color;">

        <div class="vis-widget materialdesign-widget materialdesign-vuetify-dialog <%== this.data.attr('class') %>" style="width: 100px; height: 30px; padding: 0px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.dialog.vue(el, data, true) %>>
            <div class="vis-widget materialdesign-widget materialdesign-button" style="width: 100%; height: 100%;"></div>
        </div>
</script>

<script id="tplVis-materialdesign-Table"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_table.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="table"
        data-vis-name="Table"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,table;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,table;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;dataJson/html;countCols[1]/number;debug/checkbox;"
        data-vis-attrs0="group.tableLayout;tableLayout[standard]/select,standard,card,cardOutlined;showHeader[true]/checkbox;fixedHeader/checkbox;roundBorder[true]/checkbox;headerRowHeight/number;headerTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.table.header]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;headerFontFamily[#mdwTheme:vis-materialdesign.0.fonts.table.header]/fontname;rowHeight/number;"
        data-vis-attrs1="group.color;colorBackground[#mdwTheme:vis-materialdesign.0.colors.table.background]/color;colorHeaderRowBackground[#mdwTheme:vis-materialdesign.0.colors.table.row_header_background]/color;colorHeaderRowText[#mdwTheme:vis-materialdesign.0.colors.table.row_header_text]/color;colorRowBackground[#mdwTheme:vis-materialdesign.0.colors.table.row_background]/color;colorRowBackgroundHover[#mdwTheme:vis-materialdesign.0.colors.table.row_hover]/color;colorRowText[#mdwTheme:vis-materialdesign.0.colors.table.row_text]/color;borderColor[#mdwTheme:vis-materialdesign.0.colors.table.border]/color;dividers[#mdwTheme:vis-materialdesign.0.colors.table.dividers]/color;"
        data-vis-attrs2="group.columnLayout/byindex;showColumn(0-countCols)[true]/checkbox;colType(0-countCols)[text]/select,text,image;columnWidth(0-countCols)/number;colNoWrap(0-countCols)/checkbox;label(0-countCols)/html;textAlign(0-countCols)[center]/select,left,right,center;colTextSize(0-countCols)[#mdwTheme:vis-materialdesign.0.fontSizes.table.row]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;padding_left(0-countCols)/number;padding_right(0-countCols)/number;fontFamily(0-countCols)[#mdwTheme:vis-materialdesign.0.fonts.table.row]/fontname;colTextColor(0-countCols)/color;prefix(0-countCols)/html;suffix(0-countCols)/html;imageSize(0-countCols)/number;sortKey(0-countCols);">

        <div class="vis-widget materialdesign-widget materialdesign-table <%== this.data.attr('class') %>" style="width: 400px; height: 250px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.table.handle(el, data) %>>

        </div>
</script>

<script id="tplVis-materialdesign-Masonry-Views"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_masonry_views.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="container,view"
        data-vis-name="Masonry Views"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,masonry;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,masonry;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;countCols/number;desktopGaps/number;countViews[3]/number;viewAlignment[center]/select,left,center,right,justify;showResolutionAssistant[true]/checkbox;debug/checkbox;"
        data-vis-attrs0="group.handySettings;handyPortraitWidth/number;handyPortraitCols/number;handyPortraitGaps/number;handyLandscapeWidth/number;handyLandscapeCols/number;handyLandscapeGaps/number;"
        data-vis-attrs1="group.tabletSettings;tabletPortraitWidth/number;tabletPortraitCols/number;tabletPortraitGaps/number;tabletLandscapeWidth/number;tabletLandscapeCols/number;tabletLandscapeGaps/number;"
        data-vis-attrs2="group.View/byindex;View(0-countViews)/views;viewsHeight(0-countViews)/number;viewsWidth(0-countViews);viewSortOrder(0-countViews)/number;visibleResolutionGreaterThan(0-countViews)/number;visibleResolutionLessThan(0-countViews)/number;visibilityOid(0-countViews)/id;visibilityCondition(0-countViews)[==]/custom,materialdesign.viseditor.visibilityCondition;visibilityConditionValue(0-countViews);">

        <div class="vis-widget materialdesign-widget materialdesign-masonry-views <%== this.data.attr('class') %>" style="width: 100%; height: 100%;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.views.masonry(el, data) %>> 

        </div>
</script>

<script id="tplVis-materialdesign-Grid-Views"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_grid_views.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="container,view"
        data-vis-name="Grid Views"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,grid;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,grid;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;countViews[3]/number;desktopGaps/number;viewVertAlignment[center]/select,center,flex-start,flex-end;viewHorAlignment[center]/select,center,flex-start,flex-end,space-around,space-between;viewColSpan/number,1,12,1;showResolutionAssistant[true]/checkbox;debug/checkbox;"
        data-vis-attrs0="group.handySettings;handyGridPortraitColSpan/number,1,12,1;handyPortraitWidth/number;handyPortraitGaps/number;handyGridLandscapeColSpan/number,1,12,1;handyLandscapeWidth/number;handyLandscapeGaps/number;"
        data-vis-attrs1="group.tabletSettings;tabletGridPortraitColSpan/number,1,12,1;tabletPortraitWidth/number;tabletPortraitGaps/number;tabletGridLandscapeColSpan/number,1,12,1;tabletLandscapeWidth/number;tabletLandscapeGaps/number;"
        data-vis-attrs2="group.View/byindex;View(0-countViews)/views;viewsHeight(0-countViews)/number;viewSortOrder(0-countViews)/number;viewColSpan(0-countViews)/number,1,12,1;handyGridPortraitColSpan(0-countViews)/number,1,12,1;handyGridLandscapeColSpan(0-countViews)/number,1,12,1;tabletGridPortraitColSpan(0-countViews)/number,1,12,1;tabletGridLandscapeColSpan(0-countViews)/number,1,12,1;visibleResolutionGreaterThan(0-countViews)/number;visibleResolutionLessThan(0-countViews)/number;visibilityOid(0-countViews)/id;visibilityCondition(0-countViews)[==]/custom,materialdesign.viseditor.visibilityCondition;visibilityConditionValue(0-countViews);">

        <div class="vis-widget materialdesign-widget materialdesign-grid-views <%== this.data.attr('class') %>" style="width: 100%; height: 100%;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.views.grid(el, data) %>> 

        </div>
</script>

<script id="tplVis-materialdesign-Alerts"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_alerts.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="messages"
        data-vis-name="Alerts"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,alerts;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,alerts;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;showMaxAlerts[3]/number;minScreenResolution/number;debug/checkbox;"
        data-vis-attrs0="group.alertLayout;alertLayouts[normal]/select,normal,outlined,tile;alertDense[true]/checkbox;alertElevation[1]/slider,0,24,1;alertMarginBottom[16]/number;alertBorderLayout[none]/select,none,top,right,left,bottom;alertFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.alerts.text]/number;alertFontFamily[#mdwTheme:vis-materialdesign.0.fonts.alerts.text]/fontname;alertIconSize/number;closeIcon[close-circle-outline]/custom,materialdesign.viseditor.materialDesignIcons;closeIconColor[#mdwTheme:vis-materialdesign.0.colors.alerts.close_icon]/color;closeIconPressColor[#mdwTheme:vis-materialdesign.0.colors.alerts.close_icon_hover]/color;">

        <div class="vis-widget materialdesign-widget materialdesign-alerts <%== this.data.attr('class') %>" style="width: 150px; height: 38px; overflow: visible; pointer-events:none;" id="<%= this.data.attr('wid') %>"> 
            <div class="materialdesign-vuetify-alerts" style="width: 100%; pointer-events: auto;" <%= (el) -> vis.binds.materialdesign.alerts(el, data) %>>
            
            </div>
        </div>
</script>

<script id="tplVis-materialdesign-Calendar"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<img src="widgets/materialdesign/img/calendar.png"></img>'
        data-vis-set="materialdesign"
        data-vis-type="messages"
        data-vis-name="Calendar"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,calendar;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,calendar;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;calendarView[month]/select,month,week,day;vibrateOnMobilDevices[50]/number;debug/checkbox;"
        data-vis-attrs0="group.calendarLayout;calendarWeekdays[1,2,3,4,5,6,0];calendarShortWeekdays/checkbox;calendarBorderColor[#mdwTheme:vis-materialdesign.0.colors.calendar.border]/color;calendarDayBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.calendar.background_day]/color;calendarDayBackgroundOutsideColor[#mdwTheme:vis-materialdesign.0.colors.calendar.background_other_month]/color;"
        data-vis-attrs1="group.calendarHeaderLayout;calendarHeaderBackground[#mdwTheme:vis-materialdesign.0.colors.calendar.header_background]/color;calendarDayLabelFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.header]/number;calendarDayLabelFontFamily[#mdwTheme:vis-materialdesign.0.fonts.calendar.header]/fontname;calendarDayLabelFontColor[#mdwTheme:vis-materialdesign.0.colors.calendar.header_text]/color;calendarDayLabelPreviousFontColor[#mdwTheme:vis-materialdesign.0.colors.calendar.header_text_past]/color;calendarDayLabelTodayFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.today]/number;calendarDayLabelTodayFontFamily[#mdwTheme:vis-materialdesign.0.fonts.calendar.today]/fontname;calendarDayLabelTodayFontColor[{mode:vis-materialdesign.0.colors.darkTheme§light:vis-materialdesign.0.colors.light.calendar.header_text_today§dark:vis-materialdesign.0.colors.dark.calendar.header_text_today§ mode === ^true^ ? dark : light}]/color;"
        data-vis-attrs2="group.calendarWeekNumbersLayout;calendarWeeksNumbersShow[true]/checkbox;calendarWeeksNumbersBackground[#mdwTheme:vis-materialdesign.0.colors.calendar.weeks_background]/color;calendarWeeksNumbersFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.weeks]/number;calendarWeeksNumbersFont[#mdwTheme:vis-materialdesign.0.fonts.calendar.weeks]/fontname;calendarWeeksNumbersFontColor[#mdwTheme:vis-materialdesign.0.colors.calendar.weeks_text]/color;"
        data-vis-attrs3="group.calendarButtonsLayout;calendarDayButtonMonthViewGoTo[week]/select,week,day;calendarDayButtonWeekViewGoTo[day]/select,month,day;calendarDayButtonDayViewGoTo[week]/select,month,week;calendarDayButtonRippleEffectColor[#mdwTheme:vis-materialdesign.0.colors.calendar.button_hover]/color;calendarDayButtonColor[#mdwTheme:vis-materialdesign.0.colors.calendar.button_background]/color;calendarDayButtonFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.button]/number;calendarDayButtonFontFamily[#mdwTheme:vis-materialdesign.0.fonts.calendar.button]/fontname;calendarDayButtonFontColor[#mdwTheme:vis-materialdesign.0.colors.calendar.button_text]/color;calendarDayButtonTodayColor[#mdwTheme:vis-materialdesign.0.colors.calendar.button_background_today]/color;calendarDayButtonTodayFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.button_today]/number;calendarDayButtonTodayFontFamily[#mdwTheme:vis-materialdesign.0.fonts.calendar.button_today]/fontname;calendarDayButtonTodayFontColor[#mdwTheme:vis-materialdesign.0.colors.calendar.button_text_today]/color;"
        data-vis-attrs4="group.controlLayout;controlShow[true]/checkbox;controlButtonLayout[text]/select,text,raised,unelevated,outlined;controlPosition[stretch]/select,stretch,left,right,center;controlMinWidth/number;controlShowLabel[true]/checkbox;controlButtonColor[#mdwTheme:vis-materialdesign.0.colors.calendar.control_panel_background]/color;controlButtonRippelEffectColor[#mdwTheme:vis-materialdesign.0.colors.calendar.control_panel_hover]/color;controlIconSize/number;controlIconColor[#mdwTheme:vis-materialdesign.0.colors.calendar.control_panel_icon]/color;controlTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.control]/number;controlTextFont[#mdwTheme:vis-materialdesign.0.fonts.calendar.control]/fontname;controlTextColor[#mdwTheme:vis-materialdesign.0.colors.calendar.control_panel_text]/color;"
        data-vis-attrs5="group.calendarTimeAxisLayout;calendarTimeAxisStartTime/number,0,24,1;calendarTimeAxisEndTime/number,1,24,1;calendarTimeAxisIntervalMinutes/number;calendarTimeAxisBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.calendar.time_axis_background]/color;calendarTimeAxisWidth/number;calendarTimeAxisHeight/number;calendarTimeAxisShortIntervals[true]/checkbox;calendarTimeAxisHeaderBackgroundColor[#mdwTheme:vis-materialdesign.0.colors.calendar.time_axis_background_header]/color;calendarTimeAxisFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.time_axis]/number;calendarTimeAxisFont[#mdwTheme:vis-materialdesign.0.fonts.calendar.time_axis]/fontname;calendarTimeAxisFontColor[#mdwTheme:vis-materialdesign.0.colors.calendar.time_axis_text]/color;"
        data-vis-attrs6="group.calendarEventLayout;calendarEventOverlapMode[column]/select,column,stack;calendarEventHeight/number;calendarEventFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.calendar.event]/number;calendarEventFont[#mdwTheme:vis-materialdesign.0.fonts.calendar.event]/fontname;"
        data-vis-attrs7="group.calendarCustomFormats;calendarMonthViewHeaderFormat;calendarMonthViewDayFormat;calendarWeekViewHeaderFormat;calendarWeekViewDayFormat;calendarDayViewHeaderFormat;calendarDayViewDayFormat;">
        
        <div class="vis-widget materialdesign-widget materialdesign-calendar <%== this.data.attr('class') %>" style="width: 500px; height: 300px; overflow: visible;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.calendar(el, data) %> > 
            
        </div>
</script>

<script id="tplVis-materialdesign-Icon"
        type="text/ejs"
        class="vis-tpl"
        data-vis-set="materialdesign"
        data-vis-type="static"
        data-vis-prev='<img src="widgets/materialdesign/img/prev_icon.png"></img>'
        data-vis-name="Material Design Icon"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,materialdesignicon;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;mdwIcon/custom,materialdesign.viseditor.materialDesignIcons;mdwIconSize/number;mdwIconColor[#mdwTheme:vis-materialdesign.0.colors.material_design_icon.color]/color;generateHtmlControl/custom,materialdesign.viseditor.generateHtmlControl,materialdesignicons;debug/checkbox;">

        <div class="vis-widget materialdesign-widget materialdesign-icon <%== this.data.attr('class') %>" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.materialdesignicons.initialize(el, data) %> > 
            
        </div>
</script>


<script id="tplVis-materialdesign-Installed-Version"
        type="text/ejs"
        class="vis-tpl"
        data-vis-prev='<div id="prev_tplVis-materialdesign-Installed-Version" style="position: relative; text-align: initial; padding: 4px "><div class="vis-widget_prev materialdesign-installed-version vis-tpl-materialdesign-Installed Version " style="width: 120px; height: 22px; text-align: center; left: calc(50% - 170px); top: calc(50% + 55px); font-family: Tahoma, Geneva, sans-serif; position: absolute; z-index: 4;" data-tmodified="true" data-zmodified="true"> <div class="materialdesign-version-container"> <div class="materialdesign-version-content" style="background: #5a5a5a; border-radius: 4px 0 0 4px;">installed</div> <div id="versionNumber" class="materialdesign-version-content" style="background: #45b31b; border-radius: 0 4px 4px 0;">x.x.x</div> </div> <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div></div></div>'
        data-vis-set="materialdesign"
        data-vis-type="tools"        
        data-vis-name="Installed Version"
        data-vis-update-style="true"
        data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,columnViews;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;debug/checkbox;">    

        <div class="vis-widget materialdesign-widget materialdesign-installed-version <%== this.data.attr('class') %>" style="width: 120px; height: 20px; text-align: center;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.materialdesign.helper.installedVersion(el, data) %>> 
            <div class="materialdesign-version-container">
                <div class="materialdesign-version-content" style="background: #5a5a5a; border-radius: 4px 0 0 4px;">installed</div>
                <div id="versionNumber" class="materialdesign-version-content" style="background: #45b31b; border-radius: 0 4px 4px 0;">0.2.39</div>  
            </div>
        </div>
</script>