cronapp-framework-js 2.9.0-SNAPSHOT.1 → 2.9.0-SNAPSHOT.2

package/components/css/option-color.css

@@ -0,0 +1,335 @@
+/* white */
+
+.option-white .k-radio-label:after, .option-white .k-radio-label:before, .option-white .k-radio:checked+.k-radio-label:after {
+    background-color: var(--white);
+    border-color: var(--white);
+}
+
+.option-white .k-radio:checked+.k-radio-label:before {
+    border-color: var(--white) !important;
+}
+
+.option-white .k-radio:focus+.k-radio-label::before, .option-white .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--white);
+    border-color: var(--white);
+}
+
+/* gray */
+
+.option-gray .k-radio-label:after, .option-gray .k-radio-label:before, .option-gray .k-radio:checked+.k-radio-label:after {
+    background-color: var(--gray);
+    border-color: var(--gray);
+}
+
+.option-gray .k-radio:checked+.k-radio-label:before {
+    border-color: var(--gray) !important;
+}
+
+.option-gray .k-radio:focus+.k-radio-label::before, .option-gray .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--gray);
+    border-color: var(--gray);
+}
+
+/* black */
+
+.option-black .k-radio-label:after, .option-black .k-radio-label:before, .option-black .k-radio:checked+.k-radio-label:after {
+    background-color: var(--black);
+    border-color: var(--black);
+}
+
+.option-black .k-radio:checked+.k-radio-label:before {
+    border-color: var(--black) !important;
+}
+
+.option-black .k-radio:focus+.k-radio-label::before, .option-black .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--black);
+    border-color: var(--black);
+}
+
+/* blue */
+
+.option-blue .k-radio-label:after, .option-blue .k-radio-label:before, .option-blue .k-radio:checked+.k-radio-label:after {
+    background-color: var(--blue);
+    border-color: var(--blue);
+}
+
+.option-blue .k-radio:checked+.k-radio-label:before {
+    border-color: var(--blue) !important;
+}
+
+.option-blue .k-radio:focus+.k-radio-label::before, .option-blue .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--blue);
+    border-color: var(--blue);
+}
+
+/* light-blue */
+
+.option-light-blue .k-radio-label:after, .option-light-blue .k-radio-label:before, .option-light-blue .k-radio:checked+.k-radio-label:after {
+    background-color: var(--light-blue);
+    border-color: var(--light-blue);
+}
+
+.option-light-blue .k-radio:checked+.k-radio-label:before {
+    border-color: var(--light-blue) !important;
+}
+
+.option-light-blue .k-radio:focus+.k-radio-label:before, .option-light-blue .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-blue);
+    border-color: var(--light-blue);
+}
+
+/* dark-blue */
+
+.option-dark-blue .k-radio-label:after, .option-dark-blue .k-radio-label:before, .option-dark-blue .k-radio:checked+.k-radio-label:after {
+    background-color: var(--dark-blue);
+    border-color: var(--dark-blue);
+}
+
+.option-dark-blue .k-radio:checked+.k-radio-label:before {
+    border-color: var(--dark-blue) !important;
+}
+
+.option-dark-blue .k-radio:focus+.k-radio-label:before, .option-dark-blue .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--dark-blue);
+    border-color: var(--dark-blue);
+}
+
+/* purple */
+
+.option-purple .k-radio-label:after, .option-purple .k-radio-label:before, .option-purple .k-radio:checked+.k-radio-label:after {
+    background-color: var(--purple);
+    border-color: var(--purple);
+}
+
+.option-purple .k-radio:checked+.k-radio-label:before {
+    border-color: var(--purple) !important;
+}
+
+.option-purple .k-radio:focus+.k-radio-label::before, .option-purple .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--purple);
+    border-color: var(--purple);
+}
+
+/* light-purple */
+
+.option-light-purple .k-radio-label:after, .option-light-purple .k-radio-label:before, .option-light-purple .k-radio:checked+.k-radio-label:after {
+    background-color: var(--light-purple);
+    border-color: var(--light-purple);
+}
+
+.option-light-purple .k-radio:checked+.k-radio-label:before {
+    border-color: var(--light-purple) !important;
+}
+
+.option-light-purple .k-radio:focus+.k-radio-label:before, .option-light-purple .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-purple);
+    border-color: var(--light-purple);
+}
+
+/* dark-purple */
+
+.option-dark-purple .k-radio-label:after, .option-dark-purple .k-radio-label:before, .option-dark-purple .k-radio:checked+.k-radio-label:after {
+    background-color: var(--dark-purple);
+    border-color: var(--dark-purple);
+}
+
+.option-dark-purple .k-radio:checked+.k-radio-label:before {
+    border-color: var(--dark-purple) !important;
+}
+
+.option-dark-purple .k-radio:focus+.k-radio-label:before, .option-dark-purple .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--dark-purple);
+    border-color: var(--dark-purple);
+}
+
+/* Red */
+
+.option-red .k-radio-label:after, .option-red .k-radio-label:before, .option-red .k-radio:checked+.k-radio-label:after {
+    background-color: var(--red);
+    border-color: var(--red);
+}
+
+.option-red .k-radio:checked+.k-radio-label:before {
+    border-color: var(--red) !important;
+}
+
+.option-red .k-radio:focus+.k-radio-label::before, .option-red .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--red);
+    border-color: var(--red);
+}
+
+/* light-red */
+
+.option-light-red .k-radio-label:after, .option-light-red .k-radio-label:before, .option-light-red .k-radio:checked+.k-radio-label:after {
+    background-color: var(--light-red);
+    border-color: var(--light-red);
+}
+
+.option-light-red .k-radio:checked+.k-radio-label:before {
+    border-color: var(--light-red) !important;
+}
+
+.option-light-red .k-radio:focus+.k-radio-label:before, .option-light-red .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-red);
+    border-color: var(--light-red);
+}
+
+/* dark-red */
+
+.option-dark-red .k-radio-label:after, .option-dark-red .k-radio-label:before, .option-dark-red .k-radio:checked+.k-radio-label:after {
+    background-color: var(--dark-red);
+    border-color: var(--dark-red);
+}
+
+.option-dark-red .k-radio:checked+.k-radio-label:before {
+    border-color: var(--dark-red) !important;
+}
+
+.option-dark-red .k-radio:focus+.k-radio-label:before, .option-dark-red .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--dark-red);
+    border-color: var(--dark-red);
+}
+
+/* orange */
+
+.option-orange .k-radio-label:after, .option-orange .k-radio-label:before, .option-orange .k-radio:checked+.k-radio-label:after {
+    background-color: var(--orange);
+    border-color: var(--orange);
+}
+
+.option-orange .k-radio:checked+.k-radio-label:before {
+    border-color: var(--orange) !important;
+}
+
+.option-orange .k-radio:focus+.k-radio-label::before, .option-orange .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--orange);
+    border-color: var(--orange);
+}
+
+/* light-orange */
+
+.option-light-orange .k-radio-label:after, .option-light-orange .k-radio-label:before, .option-light-orange .k-radio:checked+.k-radio-label:after {
+    background-color: var(--light-orange);
+    border-color: var(--light-orange);
+}
+
+.option-light-orange .k-radio:checked+.k-radio-label:before {
+    border-color: var(--light-orange) !important;
+}
+
+.option-light-orange .k-radio:focus+.k-radio-label:before, .option-light-orange .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-orange);
+    border-color: var(--light-orange);
+}
+
+/* dark-orange */
+
+.option-dark-orange .k-radio-label:after, .option-dark-orange .k-radio-label:before, .option-dark-orange .k-radio:checked+.k-radio-label:after {
+    background-color: var(--dark-orange);
+    border-color: var(--dark-orange);
+}
+
+.option-dark-orange .k-radio:checked+.k-radio-label:before {
+    border-color: var(--dark-orange) !important;
+}
+
+.option-dark-orange .k-radio:focus+.k-radio-label:before, .option-dark-orange .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--dark-orange);
+    border-color: var(--dark-orange);
+}
+
+/* yellow */
+
+.option-yellow .k-radio-label:after, .option-yellow .k-radio-label:before, .option-yellow .k-radio:checked+.k-radio-label:after {
+    background-color: var(--yellow);
+    border-color: var(--yellow);
+}
+
+.option-yellow .k-radio:checked+.k-radio-label:before {
+    border-color: var(--yellow) !important;
+}
+
+.option-yellow .k-radio:focus+.k-radio-label::before, .option-yellow .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--yellow);
+    border-color: var(--yellow);
+}
+
+/* light-yellow */
+
+.option-light-yellow .k-radio-label:after, .option-light-yellow .k-radio-label:before, .option-light-yellow .k-radio:checked+.k-radio-label:after {
+    background-color: var(--light-yellow);
+    border-color: var(--light-yellow);
+}
+
+.option-light-yellow .k-radio:checked+.k-radio-label:before {
+    border-color: var(--light-yellow) !important;
+}
+
+.option-light-yellow .k-radio:focus+.k-radio-label:before, .option-light-yellow .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-yellow);
+    border-color: var(--light-yellow);
+}
+
+/* dark-yellow */
+
+.option-dark-yellow .k-radio-label:after, .option-dark-yellow .k-radio-label:before, .option-dark-yellow .k-radio:checked+.k-radio-label:after {
+    background-color: var(--dark-yellow);
+    border-color: var(--dark-yellow);
+}
+
+.option-dark-yellow .k-radio:checked+.k-radio-label:before {
+    border-color: var(--dark-yellow) !important;
+}
+
+.option-dark-yellow .k-radio:focus+.k-radio-label:before, .option-dark-yellow .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--dark-yellow);
+    border-color: var(--dark-yellow);
+}
+
+/* green */
+
+.option-green .k-radio-label:after, .option-green .k-radio-label:before, .option-green .k-radio:checked+.k-radio-label:after {
+    background-color: var(--green);
+    border-color: var(--green);
+}
+
+.option-green .k-radio:checked+.k-radio-label:before {
+    border-color: var(--green) !important;
+}
+
+.option-green .k-radio:focus+.k-radio-label::before, .option-green .k-radio:hover+.k-radio-label::before {
+    box-shadow: 0 0 5px 0 var(--green);
+    border-color: var(--green);
+}
+
+/* light-green */
+
+.option-light-green .k-radio-label:after, .option-light-green .k-radio-label:before, .option-light-green .k-radio:checked+.k-radio-label:after {
+    background-color: var(--light-green);
+    border-color: var(--light-green);
+}
+
+.option-light-green .k-radio:checked+.k-radio-label:before {
+    border-color: var(--light-green) !important;
+}
+
+.option-light-green .k-radio:focus+.k-radio-label:before, .option-light-green .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--light-green);
+    border-color: var(--light-green);
+}
+
+/* dark-green */
+
+.option-dark-green .k-radio-label:after, .option-dark-green .k-radio-label:before, .option-dark-green .k-radio:checked+.k-radio-label:after {
+    background-color: var(--dark-green);
+    border-color: var(--dark-green);
+}
+
+.option-dark-green .k-radio:checked+.k-radio-label:before {
+    border-color: var(--dark-green) !important;
+}
+
+.option-dark-green .k-radio:focus+.k-radio-label:before, .option-dark-green .k-radio:hover+.k-radio-label:before {
+    box-shadow: 0 0 5px 0 var(--dark-green);
+    border-color: var(--dark-green);
+}

package/components/dashboard/dashboard.view.html

@@ -0,0 +1,14 @@
+<div class="modal fade" id="dashboardView" role="dialog">
+  <div class="modal-dialog modal-lg" style="height: 90% !important;">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title">{{reportTitle}}</h2>
+      </div>
+      <div class="modal-body">
+      </div>
+      <div class="modal-footer" style="padding: 5px">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'Close' | translate }}</button>
+      </div>
+    </div>
+  </div>
+</div>

package/components/templates/Component_Container/crn-eight-four-container.template.html

@@ -0,0 +1,4 @@
+<div class="eight-twelve-container">
+    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">2 Column</div>    
+</div>

package/components/templates/Component_Container/crn-four-eight-container.template.html

@@ -0,0 +1,4 @@
+<div class="four-twelve-container">
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" data-container="true" data-replace="true">2 Column</div>
+</div>

package/components/templates/Component_Container/crn-one-container.template.html

@@ -0,0 +1 @@
+<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-container="true" data-replace="true">1 Column</div>

package/components/templates/Component_Container/crn-three-container.template.html

@@ -0,0 +1,5 @@
+<div class="three-container">
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">2 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">3 Column</div>
+</div>

package/components/templates/Component_Container/crn-three-six-three-container.template.html

@@ -0,0 +1,5 @@
+<div class="trhee-twelve-container">
+    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">2 Column</div>
+    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-container="true" data-replace="true">3 Column</div>
+</div>

package/components/templates/Component_Container/crn-two-container.template.html

@@ -0,0 +1,4 @@
+<div class="two-container">
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">2 Column</div>
+</div>

package/components/templates/accordion.template.html

@@ -1,32 +1,44 @@
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-  <div class="panel panel-default">
-    <div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-     <h1 class="lead text-center" data-component="crn-title" xattr-position="text-center">Group Title 1</h1>
+    <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            <div class="lead text-center" data-component="crn-title" xattr-position="text-center">
+                <h1 class="text-center title component-holder h3" xattr-position="h1 text-center" xattr-type="h3" data-component="crn-text-component">Ungroup and change the component</h1>
+            </div>
+        </div>
+        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+            <div class="panel-body" data-container="true">
+                <div class="lead text-center" data-component="crn-subtitle" xattr-position="text-center">
+                    <h1 class="text-center title component-holder h3" xattr-position="h3 text-center" xattr-type="h3" data-component="crn-text-component">Ungroup and insert component</h1>
+                </div>
+            </div>
+        </div>
     </div>
-     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-      <div class="panel-body" data-container="true">
-        <h2 class="lead text-center" data-component="crn-subtitle" xattr-position="text-center">Group Description 1</h2>
-      </div>
-     </div>
-  </div>
-  <div class="panel panel-default">
-    <div class="panel-heading" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-        <h1 class="lead text-center" data-component="crn-title" xattr-position="text-center">Group Title 2</h1>
+    <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            <div class="lead text-center" data-component="crn-title" xattr-position="text-center">
+                <h1 class="text-center title component-holder h3" xattr-position="h1 text-center" xattr-type="h3" data-component="crn-text-component">Ungroup and change the component</h1>
+            </div>
+        </div>
+        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+            <div class="panel-body" data-container="true">
+                <div class="lead text-center" data-component="crn-subtitle" xattr-position="text-center">
+                    <h1 class="text-center title component-holder h3" xattr-position="h3 text-center" xattr-type="h3" data-component="crn-text-component">Ungroup and insert component</h1>
+                </div>
+            </div>
+        </div>
     </div>
-     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-      <div class="panel-body" data-container="true">
-         <h2 class="lead text-center" data-component="crn-subtitle" xattr-position="text-center">Group Description 2</h2>
-      </div>
-     </div>
-  </div>
-  <div class="panel panel-default">
-    <div class="panel-heading" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-        <h1 class="lead text-center" data-component="crn-title" xattr-position="text-center">Group Title 3</h1>
+    <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            <div class="lead text-center" data-component="crn-title" xattr-position="text-center">
+                <h1 class="text-center title component-holder h3" xattr-position="h1 text-center" xattr-type="h3" data-component="crn-text-component">Ungroup and change the component</h1>
+            </div>
+        </div>
+        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+            <div class="panel-body" data-container="true">
+                <div class="lead text-center" data-component="crn-subtitle" xattr-position="text-center">
+                    <h1 class="text-center title component-holder h3" xattr-position="h3 text-center" xattr-type="h3" data-component="crn-text-component">Ungroup and insert component</h1>
+                </div>
+            </div>
+        </div>
     </div>
-     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
-      <div class="panel-body" data-container="true">
-         <h2 class="lead text-center" data-component="crn-subtitle" xattr-position="text-center">Group Description 3</h2>
-      </div>
-     </div>
-  </div>
 </div>

package/components/templates/button.template.html

@@ -1,4 +1,4 @@
-<button class="btn k-button btn-block cbtn-default" ng-click="" xattr-fullsize="btn-block" xattr-theme="btn-default"
-    xattr-disabled=""><i class="glyphicon glyphicon-home"></i>
-    <span>Button</span>
+<button class="btn k-button btn-block btn-default" ng-click="" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+    <i class="glyphicon glyphicon-home color-white" icon-theme="color-white"></i>
+    <span class="color-white" text-theme="color-white">Button</span>
 </button>

package/components/templates/carousel.template.html

@@ -1,37 +1,47 @@
-<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
-  <ol class="carousel-indicators">
-    <li class="active"></li>
-    <li></li>
-    <li></li>
-  </ol>
+<div class="carousel slide" data-ride="carousel" id="carousel-${RANDOM}">
   <div class="carousel-inner" role="listbox">
-    <div class="item active">
-      <img alt="First Slide" style="margin: 0 auto;" src="http://placehold.it/900x500" data-component="crn-image" >
-      <div class = "carousel-caption">
-        <h1  data-component="crn-title">First Slide</h1>
-        <h2 data-component="crn-subtitle"> Subtitle </h2>
+    <div class="item active" data-component="crn-carousel-item" id="crn-carousel-item-1">
+      <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position=""
+        object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
+      <div class="carousel-caption">
+        <h1 data-component="crn-title" class="text-center" title-position="text-center">First Slide</h1>
+        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
       </div>
     </div>
-    <div class="item">
-      <img alt="Second Slide" style="margin: 0 auto;" src="http://placehold.it/900x500" data-component="crn-image" >
-      <div class = "carousel-caption">
-        <h1  data-component="crn-title">Second Slide</h1>
-        <h2 data-component="crn-subtitle"> Subtitle </h2>
+
+    <div class="item" data-component="crn-carousel-item" id="crn-carousel-item-2">
+      <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position=""
+        object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
+      <div class="carousel-caption">
+        <h1 data-component="crn-title" class="text-center" title-position="text-center">Second Slide</h1>
+        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
       </div>
     </div>
-    <div class="item">
-      <img alt="Third Slide" style="margin: 0 auto;" src="http://placehold.it/900x500" data-component="crn-image" >
-      <div class = "carousel-caption">
-        <h1  data-component="crn-title">Third Slide</h1>
-        <h2 data-component="crn-subtitle"> Subtitle </h2>
+
+    <div class="item" data-component="crn-carousel-item" id="crn-carousel-item-3">
+      <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position=""
+        object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
+      <div class="carousel-caption">
+        <h1 data-component="crn-title" class="text-center" title-position="text-center">Third Slide</h1>
+        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
       </div>
     </div>
   </div>
-  <a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
-                </span>
+  <ol class="carousel-indicators" id="carousel-indicators">
+    <li class="active"></li>
+    <li></li>
+    <li></li>
+  </ol>
+
+  
+  <a style="width: 100px;" href="#carousel-${RANDOM}" class="left carousel-control" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
-  </a><a href="#carousel-example-generic" class="right carousel-control" role="button" data-slide="next">
-  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-  <span class="sr-only">Next</span>
-</a>
+  </a>
+  
+  
+  <a href="#carousel-${RANDOM}" class="right carousel-control" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
 </div>

package/components/templates/checkbox.template.html

@@ -1,6 +1,6 @@
 <div class="form-group">
-    <label for="textinput-nome" class="" xattr-fullsize="display:block;">
-        <input type="checkbox" ng-model="vars.checkbox${RANDOM}" ng-true-value="true" ng-false-value="false">  
-        <span>Value</span>
-    </label>
+  <label for="textinput-nome" class="" xattr-fullsize="display:block;">
+    <input type="checkbox" ng-model="vars.checkbox${RANDOM}" crn-allow-null-values="true" ng-true-value="true" ng-false-value="false">
+    <span>Value</span>
+  </label>
 </div>

package/components/templates/crn-carousel-item.tempate.html

@@ -0,0 +1,7 @@
+<div class="item" id="${COMPONENTID}">
+    <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position="" object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
+    <div class="carousel-caption">
+        <h1 data-component="crn-title" class="text-center" title-position="text-center">New Slide</h1>
+        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
+    </div>
+</div>

package/components/templates/crn-input-password.designtime.html

@@ -0,0 +1,10 @@
+<div class="form-group crn-input-password-designtime">
+    <label for="input${RANDOM}">Label</label>
+    <div class="cardinput">
+        <input class="form-control k-textbox" id="input${RANDOM}" placeholder="Placeholder text">
+
+        <button class="btn-light">
+            <i class='fa fa-eye'></i>
+        </button>
+    </div>
+</div>

package/components/templates/crn-list-item.template.html

@@ -0,0 +1 @@
+<li data-component="crn-list-item" data-replace="true">Item</li>

package/components/templates/crn-ordered-list.template.html

@@ -0,0 +1,5 @@
+<ol class="list" type="1">
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+</ol>

package/components/templates/crn-ordered-sub-list.template.html

@@ -0,0 +1,5 @@
+<ol class="sub-list" type="1">
+    <li data-component="crn-list-item" data-replace="true">Item</li>
+    <li data-component="crn-list-item" data-replace="true">Item</li>
+    <li data-component="crn-list-item" data-replace="true">Item</li>
+  </ol>

package/components/templates/crn-signature-pad.designtime.html

@@ -0,0 +1,8 @@
+<div class="crn-signature-pad">
+  <div id="signaturepad" class="wrapper">
+    <canvas id="crn-signature-pad" class="signature-pad" width="100%" height="100px"></canvas>
+  </div>
+  <div>
+    <button id="clear">{{'clear'|translate}}</button>
+  </div>
+</div>

package/components/templates/crn-signature-pad.template.html

@@ -0,0 +1 @@
+<signature-pad dataurl="storedSignature" ng-model="vars.input${RANDOM}" ng-click=""  clear="clear" class="col-md-12" height="250px"></signature-pad>

package/components/templates/crn-unordered-list.template.html

@@ -0,0 +1,5 @@
+<ul class="list" list-type="list-style-type:disc;" style="list-style-type:disc;">
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+</ul>

package/components/templates/crn-unordered-sub-list.template.html

@@ -0,0 +1,6 @@
+<div>
+<ul class="sub-list" list-type="list-style-type:disc;" style="list-style-type:disc;">
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+  <li data-component="crn-list-item" data-replace="true">Item</li>
+</ul></div>