cronapp-framework-mobile-js 2.8.9

package/components/reports/BOOLEAN.parameter.html

@@ -0,0 +1,10 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" >
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <div for="_field_" class="checkbox checkbox-assertive">
+        <input aria-label="{{getDescription(report.parameters[$index])}}" type="checkbox" ng-model="report.parameters[$index].value" id="_field_" name="_field_">
+        <div class="track">
+            <div class="handle"></div>
+        </div>
+    </div>
+</label> 
+

package/components/reports/DATE.parameter.html

@@ -0,0 +1,4 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" >
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <input aria-label="{{getDescription(report.parameters[$index])}}" mask="" type="datetime" placeholder="{{getDescription(report.parameters[$index])}}" ng-model="report.parameters[$index].value" id="_field_" name="textinput-_field_"> 
+</label> 

package/components/reports/DOUBLE.parameter.html

@@ -0,0 +1,4 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" >
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <input aria-label="{{getDescription(report.parameters[$index])}}" mask="" type="number" placeholder="0,00" ng-model="report.parameters[$index].value" id="_field_" name="textinput-_field_"> 
+</label> 

package/components/reports/FLOAT.parameter.html

@@ -0,0 +1,4 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" >
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <input aria-label="{{getDescription(report.parameters[$index])}}" mask="" min="1" type="number" placeholder="0,00" ng-model="report.parameters[$index].value" id="_field_" name="textinput-_field_"> 
+</label> 

package/components/reports/INTEGER.parameter.html

@@ -0,0 +1,4 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" >
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <input aria-label="{{getDescription(report.parameters[$index])}}" mask="" type="integer" placeholder="0" ng-model="report.parameters[$index].value" id="_field_" name="textinput-_field_"> 
+</label> 

package/components/reports/LONG.parameter.html

@@ -0,0 +1,5 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" >
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <input aria-label="{{getDescription(report.parameters[$index])}}" mask="" type="integer" placeholder="0" ng-model="report.parameters[$index].value" id="_field_" name="textinput-_field_"> 
+</label> 
+       

package/components/reports/STRING.parameter.html

@@ -0,0 +1,5 @@
+<label for="_field_" class="item item-input item-stacked-label" data-component="crn-input-floating" ng-init="param=cloneElement(report.parameters[$index])" ng-show="isVisibleParam(param)" > 
+    <span>{{getDescription(report.parameters[$index])}}</span> 
+    <input aria-label="{{getDescription(report.parameters[$index])}}" type="text" placeholder="{{getDescription(report.parameters[$index])}}" ng-model="report.parameters[$index].value" id="_field_" name="textinput-_field_"> 
+</label> 
+       

package/components/reports/reports.parameters.html

@@ -0,0 +1,20 @@
+<ion-view role="region" cache-view="false" hide-back-button="true" class="pane">
+ <ion-header-bar align-title="center" class="bar bar-positive" data-component="crn-ion-header-bar" xattr-theme="bar-positive">
+    <div class="buttons"> <button ng-click="onCancel()" class="button button-left">{{ 'Cancel' | translate}}</button> 
+    </div> 
+    <h1 class="title">{{ 'ParamForReport' | translate }} {{report.name}}</h1>
+    <div class="buttons"> <button class="button button-right" ng-click="onPrint()" >{{ 'download' | translate}}</button> 
+    </div> 
+  </ion-header-bar>
+  <ion-content class="scroll-content has-header" data-component="crn-ion-content">
+    <div> 
+      <form> 
+        <div class="list" > 
+          <div ng-if="htmlParameters.length > 0" ng-repeat="item in htmlParameters"> 
+            <span compile ng-bind-html="item | trusted"></span> 
+          </div> 
+        </div> 
+      </form> 
+    </div> 
+  </ion-content> 
+</ion-view>

package/components/templates/advanced.list.designtime.html

@@ -0,0 +1,57 @@
+<div class="component-holder ng-scope" data-component="crn-ion-list" id="crn-ion-list-1003183">
+    <div class="item item-input-inset">
+        <div class="item-input-wrapper"><i class="icon ion-search placeholder-icon"></i>
+            <input aria-label="Pesquisar" type="text" placeholder="Pesquisar"
+                class="ng-pristine ng-untouched ng-valid ng-empty">
+        </div>
+        <button class="button-small cron-list-button-clean button button-inline button-positive component-holder">
+            <span cron-list-button-text="">Limpar Seleção</span>
+        </button>
+    </div>
+
+    <ion-list type="" can-swipe="listCanSwipe" class="disable-user-behavior">
+        <div class="list">
+            <ion-item
+                class="item item-complex item-right-editable item-icon-right item-thumbnail-left cron-list-selected">
+                <ul class="checkbox-group component-holder cron-list-multiselect-thumbnail selected-designtime-list">
+                    <label class="checkbox">
+                        <input type="checkbox" value="on" checked="checked">
+                    </label>
+                </ul>
+                <div class="item-content">
+                    <img alt="Thumbnail" src="node_modules/cronapp-framework-mobile-js/img/user.svg">
+                    <div class="text-left ">
+                        <h2 class="ng-binding">Advanced List Title</h2>
+                        <p class="dark ng-binding">Advanced List Subtitle</p>
+                        <p class="dark ng-binding">Advanced List Subtitle</p>
+                    </div>
+                    <i class="icon ion-alert icon-designtime-ion-list" xattr-theme="dark"></i>
+                </div>
+            </ion-item>
+
+            <ion-item class="item item-complex item-right-editable item-icon-right item-thumbnail-left">
+                <ul ng-if="options.allowMultiselect"
+                    class="checkbox-group component-holder cron-list-multiselect-thumbnail">
+                    <label class="checkbox">
+                        <input type="checkbox">
+                    </label>
+                </ul>
+                <div class="item-content">
+                    <img alt="Thumbnail" src="node_modules/cronapp-framework-mobile-js/img/user.svg">
+                    <div class="text-left ">
+                        <h2 class="ng-binding">admin@cronapp.io</h2>
+                        <p class="dark ng-binding">Administrator</p>
+                        <p class="dark ng-binding">admin</p>
+                    </div>
+                    <i ng-if="options.icon" class="icon ion-alert icon-designtime-ion-list" xattr-theme="dark"></i>
+                </div>
+                <div class="item-options invisible">
+                    <ion-option-button class="button-positive ion-edit button" ng-click="User.startEditing(rowData)"
+                        role="button" tabindex="0"><span class="ng-binding">Editar</span></ion-option-button>
+                    <ion-option-button class="button-assertive ion-trash-a button" ng-click="User.remove(rowData)"
+                        role="button" tabindex="0"><span class="ng-binding">Remover</span></ion-option-button>
+                </div>
+            </ion-item>
+        </div>
+    </ion-list>
+</div>

package/components/templates/advanced.list.template.html

@@ -0,0 +1 @@
+<cron-list options="" ng-model="vars.cronlist${RANDOM}" xattr-text-position="text-left"></cron-list>

package/components/templates/anchor.template.html

@@ -0,0 +1 @@
+<a href="" class="" style="display:block;" xattr-fullsize="display:block;" data-replace="true">Link</a>

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

@@ -0,0 +1,5 @@
+<div class="button-bar">  
+<button class="component-holder button button-dark button-block" data-component="crn-button" type="submit" ng-click="" xattr-size="" xattr-type="" xattr-theme="button-dark" xattr-fullsize="button-block" ><i class="icon ion-home icon-left"></i><span> Button</span></button>
+<button class="component-holder button button-dark button-block" data-component="crn-button" type="submit" ng-click="" xattr-size="" xattr-type="" xattr-theme="button-dark" xattr-fullsize="button-block" ><i class="icon ion-home icon-left"></i><span> Button</span></button>
+<button class="component-holder button button-dark button-block" data-component="crn-button" type="submit" ng-click="" xattr-size="" xattr-type="" xattr-theme="button-dark" xattr-fullsize="button-block" ><i class="icon ion-home icon-left"></i><span> Button</span></button>
+</div>   

package/components/templates/button-report.template.html

@@ -0,0 +1 @@
+<button type="button" class="button button-dark" ><i class="icon ion-printer"></i></button>

package/components/templates/button.template.html

@@ -0,0 +1,4 @@
+<button class="button button-block button-positive button-medium filled" type="submit" xattr-fullsize="button-block" xattr-theme="button-positive" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled">
+    <i class="ion ion-home light" xattr-icon-theme="light"></i> 
+    <span>Button</span>
+</button>

package/components/templates/card.template.html

@@ -0,0 +1,7 @@
+<div class="card">
+    <div class="item item-avatar item-text-wrap">
+        <img alt="Avatar" src="img/nophoto.png" class="component-holder left-block" style="" xattr-position="left-block" data-component="crn-image" id="crn-image-${RANDOM}">
+        <h2 data-component="crn-heading" class="component-holder" id="crn-heading-${RANDOM}">Card Title</h2>
+        <p xattr-position="text-left" class="text-left component-holder" data-component="crn-paragraph" id="crn-paragraph-${RANDOM}">This is a basic Card.</p>
+    </div>
+</div>

package/components/templates/chat.template.html

@@ -0,0 +1,39 @@
+<div id="starter" ng-init="" ng-destroy=""  class="homeView" cache-view="false" ng-controller="chatController">
+<link href="node_modules/cronapp-framework-mobile-js/dist/components/css/chatStyle.css" rel="stylesheet">
+  <ion-content overflow-scroll="false" has-bouncing="true" class="has-header has-footer" delegate-handle="userMessageScroll" on-scroll="checkScroll()"> 
+    <div ng-model="vars.chatMessages"  ng-repeat="message in vars.chatMessages" class="message-wrapper" ng-init="$last &amp;&amp; refreshScroll(user.id === message.userId)" data-component="crn-item-options"> 
+      <div ng-if="vars.user !== message.from"> 
+        <img alt="Avatar" class="profile-pic left" ng-src="img/nophoto.png" src="img/nophoto.png">
+        <div class="chat-bubble left"> 
+          <div class="message-detail"> 
+            <span class="bold">{{message.from}}</span>, 
+            <span am-time-ago="message.date"></span> 
+          </div> 
+          <img alt="Message Photo" ng-click="photoBrowser(message)" ng-if="message.photo" ng-src="{{message.photo}}" ng-success="refreshScroll(scrollDown)">
+          <div ng-if="!message.photo" class="message" ng-bind-html="message.text"> 
+          </div> 
+        </div> 
+      </div> 
+      <div ng-if="vars.user === message.from"> 
+        <img alt="Avatar" class="profile-pic right" ng-src="img/user.png" src="img/user.png">
+        <div class="chat-bubble right"> 
+          <div class="message-detail"> 
+            <span class="bold">{{message.from}}</span>, 
+            <span am-time-ago="message.date"></span> 
+          </div> 
+          <img alt="Message Photo" ng-click="photoBrowser(message)" ng-if="message.photo" ng-src="{{message.photo}}" ng-success="refreshScroll($last)">
+          <div ng-if="!message.photo" class="message" ng-bind-html="message.text " autolinker=""> 
+          </div> 
+        </div> 
+      </div> 
+      <div class="cf"></div> 
+    </div> 
+  </ion-content> 
+  <ion-footer-bar class="bar-stable item-input-inset message-footer" keyboard-attach=""> 
+    <div class="item-input-wrapper"> <textarea aria-label="Aria Label Text" ng-model="vars.message" value="" placeholder="..." ng-keydown="isEnter($event)" data-component="crn-textarea"></textarea> </div>
+    <div class="footer-btn-wrap"> 
+      <button class="button button-icon icon ion-android-send footer-btn" type="submit" ng-disabled="!vars.message || vars.message === ''" ng-click="" id="sendButton" data-component="crn-button"> </button> 
+      <a ng-click="refreshScroll(true, 50)" ng-show="!scrollDown" class="scrollDownBtn button button-icon icon ion-android-arrow-dropdown-circle"></a> 
+    </div> 
+  </ion-footer-bar> 
+</div>

package/components/templates/checkbox.template.html

@@ -0,0 +1,9 @@
+<ul class="checkbox-group">
+    <li class="item item-checkbox checkbox-stable" xattr-theme="checkbox-stable">
+        <div class="checkbox">
+            <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox${RANDOM}"
+                ng-initial-value="false">
+        </div>
+        <span>Item</span>
+    </li>
+</ul>

package/components/templates/combobox.designtime.html

@@ -0,0 +1,12 @@
+<div class="component-holder ng-scope" data-component="crn-select" id="">
+    <div class="item item-input item-select">
+        <label class="input-label" aria-label="Select Item" id="">Select Item</label>
+        <select aria-label="Aria Label Text" id="" class="ng-pristine ng-untouched ng-valid ng-empty"
+            aria-invalid="false">
+            <option value=""></option>
+            <option data-component="crn-item-select" class="active" value="1">Value 1</option>
+            <option data-component="crn-item-select" class="" value="2">Value 2</option>
+            <option data-component="crn-item-select" class="" value="3">Value 3</option>
+        </select>
+    </div>
+</div>

package/components/templates/combobox.template.html

@@ -0,0 +1,8 @@
+<div class="item item-input item-select">
+  <label class="input-label">Select Item</label>
+  <select aria-label="Aria Label Text" ng-model="vars.combobox${RANDOM}" id="select-${RANDOM}">
+    <option data-component="crn-item-select" class="active" value="1" ng-selected="true">Value 1</option>
+    <option data-component="crn-item-select" class="" value="2" ng-selected="">Value 2</option>
+    <option data-component="crn-item-select" class="" value="3" ng-selected="">Value 3</option>
+  </select>
+</div>

package/components/templates/complexsearch.template.html

@@ -0,0 +1,7 @@
+<div class="list">
+	<div data-component="crn-search" class="item item-input" id="search1${RANDOM}"> <i class="icon ion-search placeholder-icon"></i><input aria-label="Aria Label Text" type="text" placeholder="Placeholder text" ng-model="vars.search1${RANDOM}" mask="" cronapp-filter="" crn-datasource="" cronapp-filter-caseinsensitive="true" cronapp-filter-autopost="false" cronapp-filter-operator=">="></div>
+	<div data-component="crn-search" class="item item-input" id="search1${RANDOM}"> <i class="icon ion-search placeholder-icon"></i><input aria-label="Aria Label Text" type="text" placeholder="Placeholder text" ng-model="vars.search2${RANDOM}" mask="" cronapp-filter="" crn-datasource="" cronapp-filter-caseinsensitive="true" cronapp-filter-autopost="false" cronapp-filter-operator="<="></div>
+	<button class="button button-dark component-holder" data-component="crn-filter-button" type="submit" cronapp-filter=""
+					cronapp-filter-caseinsensitive="true" xattr-size="" xattr-fullsize="" xattr-theme="btn-default" crn-datasource=""
+					ng-click="" id="crn-button-${RANDOM}"><i class="ion ion-home"></i> <span>{{"template.crud.search" | translate}}</span></button>
+</div>

package/components/templates/crn-ion-segment-item.template.html

@@ -0,0 +1,6 @@
+<li role="presentation" class="active" data-component="crn-ion-segment-item">
+    <a data-target="#tab1" lass="" role="tab" data-toggle="tab" data-container="true">
+        <i class="ion ion-android-star"></i>
+        <span>New</span>
+    </a>
+</li>

package/components/templates/crn-ion-segment.template.html

@@ -0,0 +1,27 @@
+<div class="crn-ion-segment icon-theme-light-positive crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic" icon-theme-light="icon-theme-light-positive">
+  <ul class="nav nav-tabs font-size-200 tabs-template-full active- icon-orientation-left active--blue active- background-positive active-background-positive ion-segment-light" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" background-color="background-positive" background-color-active="active-background-positive" icon-theme="ion-segment-light" icon-orientation="icon-orientation-left">
+    <li role="presentation" class="active">
+      <a data-target="#tab1" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+        <i class="ion ion-android-star"></i>
+        <span>IOS</span>
+      </a>
+    </li>
+    <li role="presentation" class="">
+      <a data-target="#tab2" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+        <i class="ion ion-android-star"></i>
+        <span>Android</span>
+      </a>
+    </li>
+  </ul>
+
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="tab1">
+      <div data-container="true" data-replace="true">
+      </div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="tab2">
+      <div data-container="true" data-replace="true">
+      </div>
+    </div>
+  </div>
+</div>

package/components/templates/cron-crud.template.html

@@ -0,0 +1,7 @@
+<div class="component-holder ng-binding ng-scope ui-draggable ui-draggable-handle" data-component="crn-datasource" id="crn-datasource-${RANDOM}">
+    <datasource name="" entity="" keys="" rows-per-page="100" on-before-create="" on-after-create="" on-before-update="" on-after-update="" on-before-delete="" on-after-delete="" on-after-fill=""><i class="cpn cpn-datasource"></i></datasource>
+</div>
+
+<cron-list options="" ng-model="" xattr-text-position="text-left" data-component="crn-ion-list" class="component-holder" id="crn-ion-list-${RANDOM}"></cron-list>
+
+<div class="list" ng-disabled="!datasource.editing &amp;&amp; !datasource.inserting" data-container="true" data-replace="true">Arraste os campos do formulário aqui</div>

package/components/templates/cron-mobile-menu.designtime.html

@@ -0,0 +1,10 @@
+<ul class="nav navbar-nav" style="float:none">
+  <li ng-if="attrs.options.subMenuOptions" ng-repeat="menu in attrs.options.subMenuOptions" class="dropdown"> 
+    <a menu-close="" class="item {{menu.imagePosition != null ? 'item-icon-' + menu.imagePosition : ''}}" >
+      <i class="{{menu.iconClass != null ? menu.iconClass : ''}} {{menu.iconTheme != null ? menu.iconTheme : ''}}" style="font-size: 150%"></i> 
+      <div class="item-content {{menu.textPosition != null ? 'text-' + menu.textPosition : ''}}"> 
+        <h2 class="{{menu.contentTheme != null ? menu.contentTheme : ''}}">{{menu.name}}</h2> 
+      </div> 
+    </a> 
+  </li> 
+</ul>

package/components/templates/div.horizontal.template.html

@@ -0,0 +1,27 @@
+<div class="row"> 
+  <div class="col"> 
+    <div class="item">
+       .col 
+    </div> 
+  </div> 
+  <div class="col"> 
+    <div class="item">
+       .col 
+    </div> 
+  </div> 
+  <div class="col"> 
+    <div class="item">
+       .col 
+    </div> 
+  </div> 
+  <div class="col"> 
+    <div class="item">
+       .col 
+    </div> 
+  </div> 
+  <div class="col"> 
+    <div class="item">
+       .col 
+    </div> 
+  </div> 
+</div>

package/components/templates/div.vertical.template.html

@@ -0,0 +1,11 @@
+<div class="list" > 
+  <div class="item" >
+     .line 
+  </div> 
+  <div class="item" >
+     .line 
+  </div> 
+  <div class="item" >
+     .line 
+  </div> 
+</div>

package/components/templates/dynamic-combobox.template.html

@@ -0,0 +1,6 @@
+<div class="item item-input item-select">
+	<span class="input-label">Label</span> 
+	<select aria-label="Seleção Dinâmica" ng-model="vars.combobox${RANDOM}" crn-datasource="" id="dynamic-select-${RANDOM}" name="dynamic-select-${RANDOM}">
+	    <option value="">None</option> 
+	</select> 
+</div>

package/components/templates/dynamicfile.template.html

@@ -0,0 +1,8 @@
+<div class="item item-input item-stacked-label">
+  <label class="input-label">Label</label>
+  <div class="form-group">
+    <div dynamic-file="" alt="Dynamic file Aria Label Text"  ng-model="vars.input${RANDOM}" max-file-size="5MB" class="dynamic-image-container" ng-required="false">
+      {{"template.crud.clickToAddFile" | translate}}
+    </div>
+  </div>
+</div>

package/components/templates/dynamicimage.designtime.html

@@ -0,0 +1,11 @@
+<div dynamic-image="" alt="Dynamic Image Aria Label Text" ng-model="vars.input6723" max-file-size="5MB" target-width="640" target-height="480" class="dynamic-image-container ng-pristine ng-untouched ng-binding ng-empty ng-valid ng-valid-required" ng-required="false" allow-edit="false" aria-required="false" aria-invalid="false">
+    <div ngf-drop="" ngf-drag-over-class="dragover" class="dynamicImage">
+
+        <div class="btn action-button-border ng-binding" ng-if="!vars.input6723" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.setFile('vars.input6723', $file)" ngf-pattern="'image/*'" ngf-max-size="5MB"> Clique para adicionar uma imagem </div>
+
+        <div aria-label="Abrir a câmera" class="button button-positive buttomImage" ng-if="!vars.input6723" ng-click="cronapi.internal.startCamera('vars.input6723','60','false','640','480')" role="button" tabindex="0">
+            <span class="icon ion-ios-videocam"></span>
+        </div>
+    </div>
+</div>
+

package/components/templates/dynamicimage.template.html

@@ -0,0 +1,9 @@
+<div class="item item-input item-stacked-label general-dynamic-image" quality="60">
+  <label class="input-label">Label</label>
+  <div class="form-group">
+    <div dynamic-image="" alt="Dynamic Image Aria Label Text" ng-model="vars.input${RANDOM}" max-file-size="5MB"
+      target-width="640" target-height="480" class="dynamic-image-container" ng-required="false" allow-edit="false">
+      {{"template.crud.clickToAddImage" | translate}}
+    </div>
+  </div>
+</div>

package/components/templates/evaluation.designtime.html

@@ -0,0 +1,7 @@
+<div cronapp-stars="" class="cronapp-star component-holder ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse">
+    <i style="font-size: 200%;" class="component-holder ion ion-android-star-outline"></i>
+    <i style="font-size: 200%;" class="component-holder ion ion-android-star-outline"></i>
+    <i style="font-size: 200%;" class="component-holder ion ion-android-star-outline"></i>
+    <i style="font-size: 200%;" class="component-holder ion ion-android-star-outline"></i>
+    <i style="font-size: 200%;" class="component-holder ion ion-android-star-outline"></i>
+</div>

package/components/templates/evaluation.template.html

@@ -0,0 +1 @@
+<div cronapp-stars ng-model="vars.evaluation${RANDOM}"></div>

package/components/templates/filterbutton.template.html

@@ -0,0 +1,3 @@
+<button class="button button-dark" type="submit" ng-click="">
+	<i class="ion ion-home"></i> <span>Button </span>
+</button>

package/components/templates/floattextinput.designtime.html

@@ -0,0 +1,4 @@
+<label class="item item-input item-floating-label" data-component="crn-input-floating">
+    <span class="input-label has-input">Input Label</span>
+    <input type="text" aria-label="Aria Label Text" placeholder="Input Placeholder" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" >
+</label>

package/components/templates/floattextinput.template.html

@@ -0,0 +1,4 @@
+<label class="item item-input item-floating-label">
+    <span class="input-label">Input Label</span>
+    <input type="text" aria-label="Aria Label Text" placeholder="Input Placeholder" ng-model="vars.input${RANDOM}" mask="" keyboard="">
+</label>

package/components/templates/form.template.html

@@ -0,0 +1,5 @@
+<form crn-datasource="" data-component="crn-form">
+    <div class="list" ng-disabled="!datasource.editing &amp;&amp; !datasource.inserting" data-container="true" data-replace="true">
+        Arraste os campos do formulário aqui
+    </div>
+</form>

package/components/templates/header.template.html

@@ -0,0 +1,3 @@
+<div class="bar bar-header bar-dark">
+  <h1 class="title">Header</h1>
+</div>

package/components/templates/icontextinput.template.html

@@ -0,0 +1,4 @@
+<div class="item item-input">
+    <i class="icon ion-search placeholder-icon"></i>
+    <input aria-label="Search" type="text" placeholder="Search" ng-model="vars.input${RANDOM}" mask keyboard>
+</div>

package/components/templates/image.template.html

@@ -0,0 +1,18 @@
+<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"
+       alt="Image Upload"
+       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"
+       alt="Image Upload"
+       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>