OPEN-O GUI Framework for container

sample code of OPEN-O GUI Framework for container.

Issue-Id : CLIENT-127

Change-Id: I0872b7aed78b79dc283bf390123ab1b1ec8805ee
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>

9 files changed, 509 insertions, 0 deletions

diff --git a/common/src/main/webapp/usage guide/browser/templateFunctional.html b/common/src/main/webapp/usage guide/browser/templateFunctional.html
new file mode 100644
index 00000000..8634dbc0
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templateFunctional.html
@@ -0,0 +1,53 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<script id="functionalDialog" type="text/html">

+    <div id="funModal" class="modal fade" role="dialog" ng-init="getDetail()">

+        <div class="modal-dialog modal-md">

+

+            <!-- Modal content-->

+            <div class="modal-content">

+                <div class="modal-header">

+                    <button type="button" class="close" data-dismiss="modal">&times;</button>

+                    <h4 class="modal-title titlestyle">{{title}}</h4>

+                </div>

+                <div class="modal-body">

+                    <div>

+                        <form class="form-horizontal" role="form">

+                            {{#labels}}

+                            <div class="form-group">

+                                <label class="control-label col-sm-3 labelstyle" for={{input_id}}>{{text}}</label>

+                                <div class="col-sm-7">

+                                    <input type={{type}} class="form-control" id={{input_id}}>

+                                </div>

+                            </div>

+                            {{/labels}}

+                        </form>

+                    </div>

+                </div>

+                <div class="modal-footer">

+                    <div>{{#buttons}} <button type="button" class="btn btn-primary outline" onclick={{action}}>{{text}}</button> {{/buttons}}

+                        {{#showClose}}<button type="button" class="btn btn-primary outline" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}

+                    </div>

+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->

+                </div>

+            </div>

+

+        </div>

+    </div>

+</script>
\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templateNotification.html b/common/src/main/webapp/usage guide/browser/templateNotification.html
new file mode 100644
index 00000000..2de04675
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templateNotification.html
@@ -0,0 +1,48 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<!--Dialog-->

+<script id="personDialog" type="text/html">

+    <div id="msgModal" class="modal fade" role="dialog">

+        <div class="modal-dialog modal-md">

+

+            <!-- Modal content-->

+            <div class="modal-content">

+                <div class="modal-header">

+                    <button type="button" class="close" data-dismiss="modal">&times;</button>

+                    <h4 class="modal-title titlestyle">{{title}}</h4>

+                </div>

+                <div class="modal-body">

+                    <div class="container center">

+                        <div class="row">

+                            <div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 icon {{icon}} {{iconColor}}"></div>

+                            <div class="msg col-xs-10 col-sm-10 col-md-11 col-lg-11" style="text-align:left;vertical-align: middle;">{{msg}}</div>

+                        </div>

+                    </div>

+                </div>

+                <div class="modal-footer">

+                    <div>{{#buttons}} <button type="button" class="btn btn-primary outline" onclick={{action}}>{{text}}</button> {{/buttons}}

+                        {{#showClose}}<button type="button" class="btn btn-primary outline" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}

+                    </div>

+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->

+                </div>

+            </div>

+

+        </div>

+    </div>

+</script>
\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templateWidget.html b/common/src/main/webapp/usage guide/browser/templateWidget.html
new file mode 100644
index 00000000..d585924d
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templateWidget.html
@@ -0,0 +1,213 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<!-- Default Buttons <button class="btnDefault" ng-click="{{clickAction}}">{{title}}</button>-->

+<script id="defaultButtons" type="text/html">

+    <input type="button" class="btnDefault btnmrg" ng-click="{{clickAction}}" value="{{title}}"/>

+</script>

+

+<script id="defaultIconButtons" type="text/html">

+    <button id="iconBtn" type="button" class="btnDefault {{type}}">{{title}}

+        <span class="glyphicon {{gType}} pull-{{iconPosition}}"></span>

+    </button>

+</script>

+

+<!-- Visual Buttons -->

+<script id="visualButtons" type="text/html">

+    <button type="button" class="btn btn-{{type}}">{{title}}</button>

+</script>

+

+<!-- Different sized Buttons -->

+<script id="sizeButtons" type="text/html">

+    <button type="button" class="btn btn-{{type}} {{size}}">{{title}}</button>

+</script>

+

+<!-- Icon Buttons -->

+<script id="iconButtons" type="text/html">

+    <button type="button" class="btn btn-{{type}}">{{title}}

+        <span class="glyphicon {{gType}}"></span>

+    </button>

+</script>

+

+<!--Dropdown template-->

+<script id="dropDown" type="text/html">

+    <div class="drop{{position}}">

+        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}

+            <span class="caret"></span>

+        </button>

+        <ul class="dropdown-menu">

+            {{#items}}<li><a href="#">{{itemLabel}}</a></li>{{/items}}

+        </ul>

+    </div>

+</script>

+

+<script id="dropDownHeader" type="text/html">

+    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}

+        <span class="caret"></span>

+    </button>

+    <ul class="dropdown-menu">

+        {{#items}}

+        {{#isheader}}<li class="divider"></li><li class="dropdown-header">{{itemLabel}}</li><li class="divider"></li>{{/isheader}}

+        {{^isheader}}<li><a href="#">{{itemLabel}}</a></li>{{/isheader}}

+        {{/items}}

+    </ul>

+</script>

+

+<script id="simpleDropdownTmpl" type="text/html">

+    <div class="dropdownplain">

+        <ul class="nav navbar-nav">

+            <li>

+                <a class="dropdown-toggle" data-toggle="dropdown">{{title}} <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

+                <ul class="dropdown-menu">

+                    {{#items}}<li><a target="_blank">{{itemLabel}}</a></li>{{/items}}

+                </ul>

+            </li>

+        </ul>

+    </div>

+</script>

+

+

+<!--Radio Buttons-->

+<script id="radioButtons" type="text/html">

+    <div>

+        <input class="magic-radio" type="radio" name="radio" id="radio{{id}}"/>

+        <label for="radio{{id}}">{{label}}</label></br>

+    </div>

+</script>

+

+<!--Check boxes template-->

+<script id="checkBoxes" type="text/html">

+    <div class="funkyradio-{{type}}">

+        <input type="checkbox" name="check" id="checkbox{{id}}" {{#checked}}checked{{/checked}} />

+        <label for="checkbox{{id}}">{{label}}</label>

+    </div>

+</script>

+

+<!--text-->

+<script id="textfield" type="text/html">

+    <div class="css-form">

+        <input id ="textbox" name="textbox" class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="text"  ng-blur="validatetextbox({{modalVar}})" required >

+        <span class="errMsg" ng-show="textboxErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--email-->

+<script id="email" type="text/html">

+    <div class="css-form">

+        <input class="form-control"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="email"  ng-blur="validateemail({{modalVar}})" required>

+        <span class="errMsg" ng-show="emailErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--url-->

+<script  id="url" type="text/html">

+    <div class="css-form">

+        <input class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="url"  ng-blur="validateurl({{modalVar}})" required>

+        <span class="errMsg" ng-show="urlErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--password-->

+<script  id="password" type="text/html">

+    <div class="css-form">

+

+

+        <input class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="password" pattern=".{3,}" maxlength="{{#maxLength}}{{maxLength}}{{/maxLength}}{{^maxLength}}9{{/maxLength}}" ng-blur="validatepassword({{modalVar}})" required>

+        <span class="errMsg" ng-show="passwordErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--numeric-->

+<script id="numeric" type="text/html">

+    <div class="css-form">

+        <input  class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="number"  ng-blur="validatenumeric({{modalVar}})" required/>

+        <span class="errMsg" ng-show="numericErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--dot-->

+<script  id="dot" type="text/html">

+    <div class="css-form">

+        <input class="form-control"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="datetime-local"  ng-blur="validatedot({{modalVar}})" required>

+        <span class="errMsg" ng-show="dotErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--date-->

+<script  id="dateinput" type="text/html">

+    <div class="css-form">

+        <input class="form-control"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="date" ng-blur="validatedateinput({{modalVar}})" required>

+        <span class="errMsg" ng-show="dateinputErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--Month-->

+<script  id="monthinput" type="text/html">

+    <div class="css-form">

+        <input class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="month"  ng-blur="validatemonthinput({{modalVar}})" required>

+        <span class="errMsg" ng-show="monthinputErr">{{errmsg}}</span>

+    </div>

+</script>

+

+

+<!--Week-->

+<script   id="weekinput" type="text/html">

+    <div class="css-form">

+        <input class="form-control"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="week"  ng-blur="validateweek({{modalVar}})" required>

+        <span class="errMsg" ng-show="weekinputErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--time-->

+<script   id="timeinput" type="text/html">

+    <div class="css-form">

+        <input class="form-control"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="time"  ng-blur="validatetime({{modalVar}})" required>

+        <span class="errMsg" ng-show="timeinputErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--ipv4-->

+<script   id="ipv4" type="text/html">

+    <div class="css-form">

+        <input class="form-control" type="ipv4" placeholder="{{placeholder}}" ng-model="{{modalVar}}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"  ng-blur="validateipv4({{modalVar}})" required>

+        <span class="errMsg" ng-show="ipv4Err">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--ipv6-->

+<script   id="ipv6" type="text/html">

+    <div class="css-form">

+        <input class="form-control"   placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="ipv6"  pattern="^([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])" ng-blur="validateipv6({{modalVar}})" required>

+        <span class="errMsg" ng-show="ipv6Err">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--textarea-->

+<script id="textarea" type="text/html">

+    <div class="css-form">

+        <textarea class="form-control"  rows="4" cols="50" placeholder="{{placeholder}}" ng-model="{{modalVar}}"  ng-blur="validatetextarea({{modalVar}})" required></textarea>

+        <span class="errMsg" ng-show="textareaErr">{{errmsg}}</span>

+    </div>

+</script>

+

+<!--note-->

+<script id="note" type="text/html">

+

+    <a  id="noteanchor" href="#/home/textarea" title="Note" data-toggle="popover" data-trigger="focus" data-placement="{{placement}}">

+        <span class="glyphicon glyphicon-info-sign "></span></a>

+</script>

diff --git a/common/src/main/webapp/usage guide/browser/templates/accordion.html b/common/src/main/webapp/usage guide/browser/templates/accordion.html
new file mode 100644
index 00000000..9c076e5c
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/accordion.html
@@ -0,0 +1,26 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<div id="accordionArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()"><!--ng-if="accordionLoaded()"-->

+    <h4>Accordion</h4>

+    <div class="panel-group" id="accordion"></div>

+    <div class="shortnote">

+        <div class="shortnoteHeader">Usage</div>

+        <div class="shortnoteText">{{accordionTipData}}</div>

+    </div>

+</div>

diff --git a/common/src/main/webapp/usage guide/browser/templates/buttons.html b/common/src/main/webapp/usage guide/browser/templates/buttons.html
new file mode 100644
index 00000000..90ba3953
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/buttons.html
@@ -0,0 +1,38 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<h4>Types of Buttons</h4>

+

+<div id="buttonArea" ng-init="init()">

+    <h3> Default Buttons</h3>

+    <div id="defaultButtonArea"></div>

+    <h3>Visual Buttons</h3>

+    <div id="visualButtonArea"></div>

+    <h3>Different Sized Buttons</h3>

+    <div id="sizeButtonArea"></div>

+    <h3>Icon Buttons</h3>

+    <div id="iconButtonArea"></div>

+

+</div>

+<div class="shortnote">

+    <div class="shortnoteHeader">Usage</div>

+    <div class="shortnoteText">{{buttonTipData}}</div>

+</div>

+

+

+

diff --git a/common/src/main/webapp/usage guide/browser/templates/checkBoxes.html b/common/src/main/webapp/usage guide/browser/templates/checkBoxes.html
new file mode 100644
index 00000000..0bc36264
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/checkBoxes.html
@@ -0,0 +1,25 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<h4>Checkboxes</h4>

+

+<div id="CheckBoxArea" class="funkyradio" ng-init="init()"></div>

+<div class="shortnote">

+    <div class="shortnoteHeader">Usage</div>

+    <div class="shortnoteText"> {{checkboxTipData}}</div>

+</div>

diff --git a/common/src/main/webapp/usage guide/browser/templates/courses.html b/common/src/main/webapp/usage guide/browser/templates/courses.html
new file mode 100644
index 00000000..34dde6c3
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/courses.html
@@ -0,0 +1,32 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+
+<h1>{{message}}</h1>
+<ul  ng-repeat="course in courses | orderBy : course : false">
+    <li>{{course}}</li>
+</ul>
+<button ng-click="showDialog()">Test</button>
+
+<!--<a ui-sref=".list">List</a>
+<a ui-sref=".details">Paragraph</a>
+
+<div ui-view></div>-->
+
+
+<div id="sampleArea" ng-if="subIsLoaded()"></div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/dropdown.html b/common/src/main/webapp/usage guide/browser/templates/dropdown.html
new file mode 100644
index 00000000..bcf405ed
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/dropdown.html
@@ -0,0 +1,42 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+

+<div class="container col-sm-12 col-md-12 col-lg-12">

+    <h4>Drop Down</h4>

+

+    <div id="dropdown" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">

+        <h3>Simple Dropdown</h3>

+        <div id="plainDropDown"></div>

+        <h3>Dropdown</h3>

+        <div id="dropArea" type="button"></div>

+        <h3>Dropup</h3>

+        <div id="dropAreaUP" type="button"></div>

+        <h3>Dropdown Header</h3>

+        <div id="dropAreaHeader" type="button"></div>

+

+    </div>

+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">

+        <div class="shortnoteHeader">Usage</div>

+        <div class="shortnoteText">{{dropdownTipData}}</div>

+    </div>

+</div>

+

+

+

+

diff --git a/common/src/main/webapp/usage guide/browser/templates/functional.html b/common/src/main/webapp/usage guide/browser/templates/functional.html
new file mode 100644
index 00000000..745b1f34
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/functional.html
@@ -0,0 +1,32 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>{{message}}</h4>
+
+<div id="functionalArea" ng-init="init()">
+    <button type="button" class="btn btn-default" ng-click="showCreate()">Create</button>
+    <button type="button" class="btn btn-default" ng-click="showModify()">Modify</button>
+    <button type="button" class="btn btn-default" ng-click="showDelete()">Delete</button>
+    <button type="button" class="btn btn-default" ng-click="showWorkflow()">Workflow</button>
+    <div class="shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">{{functionalTipData}}</div>
+    </div>
+</div>
+
+