cronapp-framework-js 1.0.4

package/components/templates/foot-row.template.html

@@ -0,0 +1,14 @@
+<tr class="table-content" data-container="true" data-component="crn-foot-row"> 
+  <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </td> 
+  <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </td> 
+  <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </td> 
+</tr>

package/components/templates/form.template.html

@@ -0,0 +1,48 @@
+<section class="form">
+  <form crn-datasource="" data-component="crn-form">
+    <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
+      <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startInserting">
+        <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startInserting()" aria-label="{{'StartInserting' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+          <i class="glyphicon glyphicon-plus" icon-theme=""></i>
+        </button>
+      </div>
+      <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startEditing">
+        <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startEditing()" aria-label="{{'startEditing' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+          <i class="glyphicon glyphicon-pencil" icon-theme=""></i>
+        </button>
+      </div>
+      <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-previous">
+        <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.previous()" ng-disabled="!datasource.hasPrevious()" aria-label="{{'Before' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+          <i class="glyphicon glyphicon-chevron-left" icon-theme=""></i>
+        </button>
+      </div>
+      <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-next">
+        <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.next()" ng-disabled="!datasource.hasNext()" aria-label="{{'Next' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+          <i class="glyphicon glyphicon-chevron-right" icon-theme=""></i>
+        </button>
+      </div>
+      <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-remove">
+        <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.remove()" aria-label="{{'Remove' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
+          <i class="glyphicon glyphicon-remove" icon-theme=""></i>
+        </button>
+      </div>
+    </div>
+    <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
+      <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_post_${RANDOM}">
+        <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.post()" aria-label="{{'SaveChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+          <i class="glyphicon glyphicon-ok" icon-theme=""></i>
+        </button>
+      </div>
+      <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_cancel_${RANDOM}">
+        <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.cancel()" aria-label="{{'CancelChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
+          <i class="glyphicon  glyphicon-ban-circle" icon-theme=""></i>
+        </button>
+      </div>
+    </div>
+    <br>
+    <div class="component-holder ng-scope crn-fieldset" data-component="crn-horizontal-container" id="crn-horizontal-container-${RANDOM}" ng-disabled="!datasource.editing &amp;&amp; !datasource.inserting">
+      <div class="col-md-12" style="padding-left: 0; padding-right: 0;" data-container="true" data-replace="true">
+        Arraste os campos do formulário aqui</div>
+    </div>
+  </form>
+</section>

package/components/templates/grid-horizontal.template.html

@@ -0,0 +1,4 @@
+<div class="layout-horizontal">
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">Content goes here</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">Content goes here</div>
+</div>

package/components/templates/grid-vertical.template.html

@@ -0,0 +1,4 @@
+<div class="layout-vertical">
+    <div data-container="true" data-replace="true">Content 1</div>
+    <div data-container="true" data-replace="true">Content 2</div>
+</div>

package/components/templates/grid.template.html

@@ -0,0 +1,36 @@
+<div crn-datasource="" class="k-grid k-widget k-display-block k-grid-content">
+  <table class="">
+    <thead>
+      <tr class="table-header k-grid-header">
+        <th class="k-header" data-container="true" rowspan="" colspan="" data-component="crn-head-cell">
+          <div data-container="true" data-replace="true">Column Header 1</div>
+        </th>
+        <th class="k-header" data-container="true" rowspan="" colspan="" data-component="crn-head-cell">
+          <div data-container="true" data-replace="true">Column Header 2</div>
+        </th>
+        <th class="k-header" data-container="true" rowspan="" colspan="" data-component="crn-head-cell">
+          <div data-container="true" data-replace="true">Column Header 3</div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="table-content" data-container="true" ng-repeat="rowData in datasource.data">
+        <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan="">
+          <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+            Content goes here
+          </div>
+        </td>
+        <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan="">
+          <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+            Content goes here
+          </div>
+        </td>
+        <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan="">
+          <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+            Content goes here
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/components/templates/head-cell.template.html

@@ -0,0 +1,5 @@
+<th class="" data-container="true" rowspan="" colspan="" data-component="crn-head-cell"> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here
+    </div> 
+</th> 

package/components/templates/head-row.template.html

@@ -0,0 +1,14 @@
+<tr class="table-content" data-container="true" data-component="crn-head-row"> 
+  <th class="" data-container="true" data-component="crn-head-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </th> 
+  <th class="" data-container="true" data-component="crn-head-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </th> 
+  <th class="" data-container="true" data-component="crn-head-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </th> 
+</tr>

package/components/templates/head.template.html

@@ -0,0 +1,16 @@
+<thead class="">
+    <tr class="k-grid-header" data-container="true"> 
+        <th class="" data-container="true" data-component="crn-head-cell" rowspan="" colspan=""> 
+            <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+                Content goes here 
+            </div> </th> 
+        <th class="" data-container="true" data-component="crn-head-cell" rowspan="" colspan=""> 
+            <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+                Content goes here 
+            </div> </th> 
+        <th class="" data-container="true" data-component="crn-head-cell" rowspan="" colspan=""> 
+            <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+                Content goes here 
+            </div> </th> 
+    </tr>
+</thead>

package/components/templates/header.template.html

@@ -0,0 +1,10 @@
+<div class="">
+    <h1 class="text-left title component-holder col-lg-8 col-sm-8 col-xs-8 h3 col-md-10" xattr-position="h1 text-left" xattr-type="h3" data-component="crn-text-component" id="crn-text-component-${RANDOM}">Title</h1>
+    <div class="component-holder ng-scope col-lg-4 col-sm-4 col-xs-4 col-md-2" data-component="crn-button" id="crn-button-${RANDOM}">
+        <button class="btn k-button btn-light btn-block" ng-click="" xattr-fullsize="btn-block" xattr-theme="btn-light"
+            xattr-disabled="">
+            <i class="glyphicon glyphicon-log-in"></i>
+            <span>Button</span>
+        </button>
+    </div>
+</div>

package/components/templates/icon.template.html

@@ -0,0 +1 @@
+<i class="fa fa-star font-size-default color-default" icon-size="font-size-default" icon-theme="color-default"></i>

package/components/templates/image-menu.template.html

@@ -0,0 +1 @@
+<img class="user-avatar" alt="Icon user" src="{{session.user.picture || 'node_modules/cronapp-framework-js/dist/img/img-user.svg'}}" data-component="crn-image-menu" id="crn-image-menu-${RANDOM}">

package/components/templates/image.default.template.html

@@ -0,0 +1,2 @@
+<img alt="image" src="node_modules/cronapp-framework-js/img/placehold-100x100.png" class="crn-image"
+    style="object-fit: contain;"  object-fit="object-fit: contain;" xattr-position="" width="100px" height="100px" />

package/components/templates/image.template.html

@@ -0,0 +1,16 @@
+<div class="form-group upload-image-component"  ngf-drop ngf-change="datasource.setImage($file, datasource.active.image)" ngf-pattern="'image/*'">
+  <label>Image Upload</label>
+  <img style="max-height: 128px; max-width: 128px;"
+       ng-if="datasource.active.image"
+       data-ng-src="{{'data:image/png;base64,' + datasource.active.image}}"
+       ngf-change="datasource.setImage($file, datasource.active, 'image')"
+       accept="image/*">
+  <img data-ng-src="{{datasource.noImageUpload}}"
+       style="max-height: 128px; max-width: 128px;"
+       ng-if="!datasource.active.image"
+       ngf-select class="btn btn-default btn-block"
+       ngf-change="datasource.setImage($file, datasource.active, 'image')" accept="image/*">
+  <div class="remove btn btn-default btn-xs btn-danger" ng-if="datasource.active.image" ng-click="datasource.active.image=null">
+    <span class="glyphicon glyphicon-remove"></span>
+  </div>
+</div>

package/components/templates/list.template.html

@@ -0,0 +1,4 @@
+<div crn-datasource="" data-component="crn-list" class="component-holder" id="" ng-repeat="rowData in datasource.data" ng-model="">
+  <h1 class="text-center component-holder" xattr-position="h1 text-center" xattr-type="h1" id="crn-text-component-${RANDOM}">Title</h1>
+  <h3 class="text-center component-holder h3" xattr-position="h3 text-center" xattr-type="h3" id="crn-subtitle-component-${RANDOM}">Subtitle</h3>
+</div>

package/components/templates/multiselect.template.html

@@ -0,0 +1,13 @@
+<div class="form-group"> 
+  <label for="">Label</label> 
+  <ui-select multiple crn-datasource="" ng-model="" theme="bootstrap" ng-disabled="disabled" class="crn-select"> 
+    <ui-select-match placeholder="Select person..." class="">
+       {{$item}} 
+    </ui-select-match> 
+    <ui-select-choices repeat="rowData as rowData in datasource.data | filter : $select.search" class=""> 
+      <div class="" data-container="true">
+         {{rowData}} 
+      </div> 
+    </ui-select-choices> 
+  </ui-select> 
+</div>

package/components/templates/navbar.template.html

@@ -0,0 +1,16 @@
+<nav class="navbar navbar-default ng-scope" data-container="true">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
+      <a class="component-holder ng-binding ng-scope navbar-brand" data-component="crn-image" href="#/home"><img alt="cronapp-logo" src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png" id="crn-navbar-logo" data-component="crn-image"></a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse float-left-desktop">
+      <ul class="nav navbar-nav" style="float:none">
+        <li>
+          <cron-dynamic-menu options="{&quot;subMenuOptions&quot;:[{&quot;id&quot;:&quot;qxfhylqx9sh1&quot;,&quot;name&quot;:&quot;Menu 1&quot;,&quot;title&quot;:&quot;Menu 1&quot;,&quot;level&quot;:1,&quot;textPosition&quot;:&quot;left&quot;,&quot;imagePosition&quot;:&quot;left&quot;,&quot;contentTheme&quot;:&quot;light&quot;,&quot;iconTheme&quot;:&quot;light&quot;,&quot;menuItems&quot;:[{&quot;id&quot;:&quot;qe1juldmy0kk&quot;,&quot;name&quot;:&quot;Menu A&quot;,&quot;title&quot;:&quot;Menu A&quot;,&quot;level&quot;:2,&quot;textPosition&quot;:&quot;left&quot;,&quot;imagePosition&quot;:&quot;left&quot;,&quot;contentTheme&quot;:&quot;light&quot;,&quot;iconTheme&quot;:&quot;light&quot;,&quot;menuItems&quot;:[]}]},{&quot;id&quot;:&quot;1jenqtqrij8mb&quot;,&quot;name&quot;:&quot;Menu 2&quot;,&quot;title&quot;:&quot;Menu 2&quot;,&quot;level&quot;:1,&quot;textPosition&quot;:&quot;left&quot;,&quot;imagePosition&quot;:&quot;left&quot;,&quot;contentTheme&quot;:&quot;light&quot;,&quot;iconTheme&quot;:&quot;light&quot;,&quot;menuItems&quot;:[{&quot;id&quot;:&quot;urgv85ip8603&quot;,&quot;name&quot;:&quot;Menu B&quot;,&quot;title&quot;:&quot;Menu B&quot;,&quot;level&quot;:2,&quot;textPosition&quot;:&quot;left&quot;,&quot;imagePosition&quot;:&quot;left&quot;,&quot;contentTheme&quot;:&quot;light&quot;,&quot;iconTheme&quot;:&quot;light&quot;,&quot;menuItems&quot;:[]}]},{&quot;id&quot;:&quot;1iycojueghnj8&quot;,&quot;name&quot;:&quot;aa&quot;,&quot;title&quot;:&quot;aa&quot;,&quot;level&quot;:1,&quot;textPosition&quot;:&quot;left&quot;,&quot;imagePosition&quot;:&quot;left&quot;,&quot;contentTheme&quot;:&quot;light&quot;,&quot;iconTheme&quot;:&quot;light&quot;,&quot;menuItems&quot;:[]}]}" data-component="crn-dynamic-menu"  class="col-md-12">
+            Dynamic Menu
+          </cron-dynamic-menu> </li>
+      </ul>
+    </div>
+  </div>
+</nav>

package/components/templates/panel.template.html

@@ -0,0 +1,14 @@
+<div class="panel panel-default" xattr-theme="panel-default" data-container="true" id="">
+  <div class="panel-heading" data-container="true" id="panel-heading-${RANDOM}">
+    <div class="panel-title">
+      <div class="lead text-center component-holder" data-component="crn-title" xattr-position="text-center">Header
+      </div>
+    </div>
+  </div>
+  <div class="panel-body" data-container="true" id="panel-body-${RANDOM}">
+    <div class="lead text-center component-holder" data-component="crn-title" xattr-position="text-center">Content</div>
+  </div>
+  <div class="panel-footer" data-container="true" id="panel-footer-${RANDOM}">
+    <div class="text-center component-holder" data-component="crn-title" xattr-position="text-center">Footer</div>
+  </div>
+</div>

package/components/templates/qrcode.template.html

@@ -0,0 +1,4 @@
+<div qr="true" ng-model="vars.QR${RANDOM}">
+    <div>
+    </div> 
+</div>

package/components/templates/radiogroup.template.html

@@ -0,0 +1,10 @@
+<div class="component-holder crn-radiogroup option-default" ng-model="vars.radio${RANDOM}" option-theme="option-default">
+    <div class = "k-content" data-component="crn-radioOption">
+        <input class = "k-radio" type="radio" crn-value=""  value="1" name="optionsRadios" id="optionsRadios1${COMPONENTID}" ng-checked="">
+        <label class="k-radio-label" for="optionsRadios1${COMPONENTID}">Option One</label>
+    </div>
+    <div class = "k-content" data-component="crn-radioOption">
+        <input class = "k-radio" type="radio" crn-value="" value="2" name="optionsRadios" id="optionsRadios2${COMPONENTID}" ng-checked="">
+        <label class="k-radio-label" for="optionsRadios2${COMPONENTID}">Option Two</label>
+    </div>
+</div>

package/components/templates/rating.template.html

@@ -0,0 +1,7 @@
+<cronapp-rating ng-model="vars.evaluation${RANDOM}" icon-off="fa fa-star-o" xattr-default-value="">
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+</cronapp-rating>

package/components/templates/row.template.html

@@ -0,0 +1,14 @@
+<tr class="table-content" data-container="true" data-component="crn-row"> 
+  <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </td> 
+  <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </td> 
+  <td class="" data-container="true" data-component="crn-cell" rowspan="" colspan=""> 
+    <div class="" data-component="crn-horizontal-container" data-container="true" data-replace="true">
+        Content goes here 
+    </div> </td> 
+</tr>

package/components/templates/sidebar.template.html

@@ -0,0 +1,23 @@
+<div class="nav-side-menu navbar-default" > 
+  <div class="brand"> 
+    <div class="avatar hidden-xs hidden-sm"> 
+      <img alt="" ng-src="{{vm.userpictureurl || 'img/nophoto.png'}}" class=""> 
+    </div> 
+    <div class="info"> 
+      <div class="name navbar-brand">
+         {{session.name}} 
+      </div> 
+    </div> 
+  </div> 
+  <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content1"></i> 
+  <div class="menu-list"> 
+    <ul id="menu-content1" class="menu-content collapse out navbar-nav"> 
+      <li data-toggle="collapse" data-target="#menu-sub-1" class="collapsed component-holder" data-component="crn-sidebar-item"> 
+        <a href="#/home" class=""><i class="fa fa-lg fa-home"></i> <span class="">Home</span></a> 
+      </li> 
+      <li data-toggle="collapse" data-component="crn-sidebar-item" data-target="#menu-sub-2787" class="collapsed component-holder selected-holder" ng-click="logout()">
+        <a href="javascript:void(0);" class=""><i class="fa fa-lg fa-sign-out"></i> <span class="">Logout</span></a> 
+      </li> 
+    </ul> 
+  </div> 
+</div>

package/components/templates/social-button-bar.template.html

@@ -0,0 +1,54 @@
+<div class="component-holder ng-binding ng-scope col-xs-12 col-md-12" data-component="crn-social-login" id="crn-social-login${RANDOM}">
+  <ul class="list-inline center-block text-center">
+    <li data-container="true">
+      <div action="/oauth2/authorization/facebook" method="GET" id="facebookContainer">
+        <input type="hidden" name="scope" value="email,public_profile">
+        <a title="Facebook" role="button" onclick="cronapi.internal.loginSocial('facebookContainer');">
+          <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
+            <i class="fa fa-2x fa-facebook font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
+          </div>
+        </a>
+      </div>
+    </li>
+    <li data-container="true">
+      <div action="/oauth2/authorization/github" method="GET" id="githubContainer">
+        <input type="hidden" name="scope" value="email,public_profile">
+        <a title="GitHub" role="button" onclick="cronapi.internal.loginSocial('githubContainer')">
+          <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
+            <i class="fa fa-2x fa-github-alt font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
+          </div>
+        </a>
+      </div>
+    </li>
+    <li data-container="true">
+      <div action="/oauth2/authorization/linkedin" method="GET" id="linkedinContainer">
+        <input type="hidden" name="scope" value="r_emailaddress">
+        <a title="LinkedIn" role="button" onclick="cronapi.internal.loginSocial('linkedinContainer')">
+          <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
+            <i class="fa fa-2x fa-linkedin-square font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
+          </div>
+        </a>
+      </div>
+    </li>
+    <li data-container="true">
+      <div action="/oauth2/authorization/google" method="GET" id="googleContainer">
+        <input type="hidden" name="scope" value="email">
+        <a title="Google" role="button" onclick="cronapi.internal.loginSocial('googleContainer')">
+          <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
+            <i class="fa fa-2x fa-google font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
+          </div>
+        </a>
+      </div>
+    </li>
+    <li data-container="true">
+      <div action="/oauth2/authorization/cronapp" method="GET" id="cronappContainer">
+        <input type="hidden" name="scope" value="email">
+        <a title="CronApp" role="button" onclick="cronapi.internal.loginSocial('cronappContainer')">
+          <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
+            <i class="fa fa-2x fa-cloud font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
+          </div>
+        </a>
+      </div>
+    </li>
+  </ul>
+</div>

package/components/templates/sub-form.template.html

@@ -0,0 +1,48 @@
+<section class="form">
+    <div crn-datasource="" data-component="crn-sub-form">
+        <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
+            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startInserting">
+                <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startInserting()" aria-label="{{'StartInserting' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+                    <i class="glyphicon glyphicon-plus" icon-theme=""></i>
+                </button>
+            </div>
+            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startEditing">
+                <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startEditing()" aria-label="{{'startEditing' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+                    <i class="glyphicon glyphicon-pencil" icon-theme=""></i>
+                </button>
+            </div>
+            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-previous">
+                <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.previous()" ng-disabled="!datasource.hasPrevious()" aria-label="{{'Before' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+                    <i class="glyphicon glyphicon-chevron-left" icon-theme=""></i>
+                </button>
+            </div>
+            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-next">
+                <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.next()" ng-disabled="!datasource.hasNext()" aria-label="{{'Next' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+                    <i class="glyphicon glyphicon-chevron-right" icon-theme=""></i>
+                </button>
+            </div>
+            <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-remove">
+                <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.remove()" aria-label="{{'Remove' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
+                    <i class="glyphicon glyphicon-remove" icon-theme=""></i>
+                </button>
+            </div>
+        </div>
+        <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
+            <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_post_${RANDOM}">
+                <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.post()" aria-label="{{'SaveChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
+                    <i class="glyphicon glyphicon-ok" icon-theme=""></i>
+                </button>
+            </div>
+            <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_cancel_${RANDOM}">
+                <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.cancel()" aria-label="{{'CancelChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
+                    <i class="glyphicon  glyphicon-ban-circle" icon-theme=""></i>
+                </button>
+            </div>
+        </div>
+        <br>
+        <div class="component-holder ng-scope crn-fieldset" data-component="crn-horizontal-container" id="crn-horizontal-container-${RANDOM}" ng-disabled="!datasource.editing &amp;&amp; !datasource.inserting">
+            <div class="col-md-12" style="padding-left: 0; padding-right: 0;" data-container="true" data-replace="true">
+                Arraste os campos do formulário aqui</div>
+        </div>
+    </div>
+</section>

package/components/templates/subtitle.template.html

@@ -0,0 +1 @@
+<h2 class="text-center" xattr-position="text-center">Subtitle</h2>

package/components/templates/table.template.html

@@ -0,0 +1,33 @@
+<form class="navbar-form navbar-left" role="search">
+  <div class="form-group">
+    <button type="button" class="btn btn-primary" ng-hide="inserting || readonly" ng-click="startInserting()">Novo</button>
+    <input type="text" class="form-control" placeholder="Buscar" ng-model="searchText">
+  </div>
+</form>
+<table class="table table-hover table-striped table-bordered">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th ng-repeat="headerName in headers">{{headerName}}</th>
+          <th ng-hide="readonly">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-show="inserting">
+          <td>#</th>
+          <td ng-repeat = "fieldName in fields"><input type="text" ng-model="transitient[fieldName]"/></td>
+          <td class=".col-md-1"><button type="button" ng-click="doInsert()" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i></button></td>
+        </tr>
+        <tr ng-repeat="rowData in data[dataset].data | filter: searchText" 
+            ng-click="selectRow(rowData[data[dataset].key])"
+            ng-dblclick="doEdit(rowData[data[dataset].key])" 
+            ng-class="isActive(rowData[data[dataset].key]) ? 'success' : ''">
+          <td>{{$index}}</th>
+          <td ng-repeat = "fieldName in fields">{{ fieldName.indexOf('.') == -1 ? rowData[fieldName] : rowData[ fieldName.split('.')[0] ][ fieldName.split('.')[1]] }}</td>
+          <td class=".col-md-1" ng-hide="readonly">
+            <button type="button" ng-click="doDelete(rowData[data[dataset].key])" class="btn btn-default"><i class="glyphicon glyphicon-trash"></i></button>
+            <button type="button" ng-click="doEdit(rowData[data[dataset].key], $index)" class="btn btn-default"><i class="glyphicon glyphicon-pencil"></i></button>
+          </td>
+        </tr>
+      </tbody>
+</table>

package/components/templates/tabs.template.html

@@ -0,0 +1,16 @@
+<div class="ctn-tab">
+  <ul class="nav nav-tabs" role="tablist">
+    <li role="presentation" class="active"><a data-target="#tab1-${RANDOM}" role="tab" data-toggle="tab"
+        data-container="true">First Tab</a></li>
+    <li role="presentation"><a data-target="#tab2-${RANDOM}" role="tab" data-toggle="tab" data-container="true">Second Tab</a>
+    </li>
+  </ul>
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="tab1-${RANDOM}">
+      <div data-container="true" data-replace="true"></div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="tab2-${RANDOM}">
+      <div data-container="true" data-replace="true"></div>
+    </div>
+  </div>
+</div>

package/components/templates/textarea.template.html

@@ -0,0 +1,4 @@
+<div class="form-group">
+    <label for="textArea${RANDOM}">Label:</label>
+    <textarea id="textArea${RANDOM}" ng-model="vars.textarea${RANDOM}" maxlength="300" style="resize:none;" resize="resize:none;"class="form-control k-textbox" rows="5"></textarea>  
+</div>

package/components/templates/textinput.template.html

@@ -0,0 +1,4 @@
+<div class="form-group">
+	<label for="input${RANDOM}">Label</label>
+	<input type="text" mask="" mask-placeholder="" ng-required="false" ng-model="vars.input${RANDOM}" class="form-control k-textbox" id="input${RANDOM}" placeholder="Placeholder text">
+</div>

package/components/templates/textinputbutton.template.html

@@ -0,0 +1,14 @@
+<div class="crn-textinputbutton">
+    <div class="component-holder ng-scope" data-component="crn-textinput" id="crn-textinput-${RANDOM}">
+        <div class="form-group">
+            <label for="input${RANDOM}">Label</label>
+            <input type="text" mask="" mask-placeholder="" ng-required="false" ng-model="vars.input${RANDOM}" class="form-control k-textbox" id="input${RANDOM}" placeholder="Placeholder text">
+        </div>
+    </div>
+    <div class="component-holder ng-scope crn-textinputbutton-button" data-component="crn-button" id="crn-button-${RANDOM}">
+        <button class="btn k-button btn-default" ng-click="" xattr-fullsize="" xattr-theme="btn-default" xattr-disabled="">
+            <i class="glyphicon glyphicon-search" icon-theme=""></i>
+            <span></span>
+        </button>
+    </div>
+</div>

package/components/templates/textinputicon.template.html

@@ -0,0 +1,10 @@
+<div>
+    <label class="form-group" for="inputButton-${RANDOM}">Label</label>
+    <div class="input-group">
+        <span class="k-button">
+            <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
+        </span>
+        <input id="inputButton-${RANDOM}" type="text" mask="" mask-placeholder="" ng-required="false" class="k-textbox"
+            ng-model="vars.input${RANDOM}" placeholder="Placeholder text">
+    </div>
+</div>

package/components/templates/time.template.html

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <label for="input${RANDOM}">Label</label>
+  <input type="time" mask="" mask-placeholder="" ng-required="false" ng-model="vars.time${RANDOM}" class="form-control k-textbox" id="input${RANDOM}" placeholder="--:--">
+</div>

package/components/templates/timeline.designtime.html

@@ -0,0 +1,65 @@
+<ul class="timeline timeline-designtime">
+    <timeline-event side="" class="ng-scope">
+        <li class="timeline-event">
+            <timeline-badge class="info bounce-in">
+                <div class="timeline-badge">
+                    <i class="glyphicon glyphicon-check"></i>
+                </div>
+            </timeline-badge>
+            <timeline-panel class="info bounce-in">
+                <div class="timeline-panel">
+                    <timeline-heading class="ng-scope">
+                        <div class="timeline-heading">
+                            <h4 class="ng-binding ng-scope">Evento 1...</h4>
+                            <p ng-if="event.when" class="ng-scope">
+                                <small class="text-muted ng-binding"><i class="glyphicon glyphicon-time"></i>11h atrás via Twitter</small>
+                            </p>
+                        </div>
+                    </timeline-heading>
+                </div>
+            </timeline-panel>
+        </li>
+    </timeline-event>
+    <timeline-event side="" class="ng-scope">
+        <li class="timeline-event timeline-inverted">
+            <timeline-badge class="warning bounce-in">
+                <div class="timeline-badge">
+                    <i class="glyphicon glyphicon-calendar"></i>
+                </div>
+            </timeline-badge>
+            <timeline-panel class="info bounce-in">
+                <div class="timeline-panel">
+                    <timeline-heading class="ng-scope">
+                        <div class="timeline-heading">
+                            <h4 class="ng-binding ng-scope">Evento 2...</h4>
+                            <p ng-if="event.when" class="ng-scope">
+                                <small class="text-muted ng-binding"><i class="glyphicon glyphicon-time"></i>13h atrás via Instagram</small>
+                            </p>
+                        </div>
+                    </timeline-heading>
+                </div>
+            </timeline-panel>
+        </li>
+    </timeline-event>
+    <timeline-event side="" class="ng-scope">
+        <li class="timeline-event">
+            <timeline-badge class="info bounce-in">
+                <div class="timeline-badge">
+                    <i class="glyphicon glyphicon-check"></i>
+                </div>
+            </timeline-badge>
+            <timeline-panel class="info bounce-in">
+                <div class="timeline-panel">
+                    <timeline-heading class="ng-scope">
+                        <div class="timeline-heading">
+                            <h4 class="ng-binding ng-scope">Evento 3...</h4>
+                            <p ng-if="event.when" class="ng-scope">
+                                <small class="text-muted ng-binding"><i class="glyphicon glyphicon-time"></i>16h atrás via Instagram</small>
+                            </p>
+                        </div>
+                    </timeline-heading>
+                </div>
+            </timeline-panel>
+        </li>
+    </timeline-event>
+</ul>

package/components/templates/timeline.template.html

@@ -0,0 +1,3 @@
+<div class="component-holder ng-scope crn-timeline-container" data-component="crn-timeline"> 
+    <cron-timeline options="" ng-model="vars.crontimeline${RANDOM}" xattr-text-position="text-left"></cron-timeline >
+</div>