<!DOCTYPE html>
<html>

<head>
    <title>Button Test Page 1.0.0</title>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      /*   class App {
            static start() {
                var b = Button.getInstance().init();
                b.defaultView.append();
                b.name = "programatic Button";
                b.itemView.append();
                b.name = "really cool";
            }
            static init() {
                console.log("start loading App components...");
                return "start loading App components...";
            }
        } */
    </script>
    <script src="/EAMD.ucp/Components/tla/EAM/layer1/Thinglish/Once/1.0.0/src/js/Once.class.js" type="text/javascript"></script>
    <link href="/EAMD.ucp/Components/com/twitter/Bootstrap/Button/1.0.0/Button.component.xml" rel="ucpComponent" type="text/html">
    <link href="/EAMD.ucp/Components/com/ceruleanCircle/EAM/5_ux/WODA/WhatPanel/DefaultItem/1.0.0/DefaultItem.component.xml" rel="ucpComponent" type="text/html">

</head>

<body>
    <div data-is="x-button" cssclasses="btn-default" text="Default Button" clickmethodname="submitClicked">
    </div>

    <div data-is="x-button" cssclasses="btn-link btn-lg disabled" text="Link Button (Disabled)">
    </div>

    <div data-is="x-button" data-properties='{"cssclasses":"btn-primary btn-sm","text":"Primary Button (small)","clickmethodname":"resetClicked" }'>
    </div>



   <x-button data-properties='{"cssclasses":"btn-success","text":"Success Button" }'></x-button>
    <br/> @todo If the buttons occur on a new line, we need to fix the div replacement in the regular expression to not consider '--' as a div (comments cause this problem)

    <br/> @todo the click event if fired for the button which is disabled, it should not be triggered.

    <br/>
    <br/>Scenarios to check:-

    <br/>
    <br/>1. When button is created programatically, the css is not being set
    <br/>2. When button text is changed programtically the css should NOT reset

    <br/>
    <br/>To programattically test the button, in the consolde type the following:

    <br/>
    <br/>b = UcpComponentSupport.getAllUcpViews()[0]

    <br/>
    <br/>b.ucpComponent.setButtonText("Hello World")
    <-- should change the text to Hello World <br/>
    <br/>b.ucpComponent.setButtonType("btn-success")
    <-- should change the button style to green color button <br/>
    <br/>b.ucpComponent.setButtonText("Hello Lucy !")
    <--button text should be 'Hello Lucy !' and should also maintain the green color </body>
        <!-- To prograymattically set the button type, in the consolde type the following:

    b = UcpComponentSupport.getAllUcpViews()[0]

    b.ucpComponent.setButtonText("Hello World")
    
  below to call the action method of the button
    b.documentElement.onclick = UcpComponentSupport.getUcpView4Element(this).ucpComponent.action 
-->

</html>