cronapp-framework-mobile-js 1.0.4

package/components/templates/item.swipe.template.html

@@ -0,0 +1,14 @@
+<ion-list crn-datasource="" class="listCanSwipe" id="crn-list-swipe${RANDOM}" data-component="crn-item-swipe">
+  <ion-item class="item" id="crn-list-item-swipe${RANDOM}" data-component="crn-item-swipe">
+    <h2 class="titleItem">Item</h2>
+    <div id="crn-item-options${RANDOM}" class="component-holder" data-component="crn-item-options">
+      <div class="crn-item-options" data-item="true">
+        <ion-option-button id="crn-option-button${RANDOM}" data-component="crn-button" class="button-default button editButton">
+          <i class="ion ion-edit"></i><span>Action 1</span>
+        </ion-option-button>
+        <ion-option-button id="crn-option-button${RANDOM}-2" data-component="crn-button"
+          class="button-assertive button deleteButton"><i class="ion ion-trash-a"></i><span>Action 2</span></ion-option-button>
+      </div>
+    </div>
+  </ion-item>
+</ion-list>

package/components/templates/item.template.html

@@ -0,0 +1,5 @@
+<ion-item class="item dark text-left component-holder item-complex" xattr-theme="dark" xattr-text-position="text-left" data-replace="true" >
+    <div class="item-content">
+        <p>Item 1</p>
+    </div>
+</ion-item>

package/components/templates/item.thumbnail.template.html

@@ -0,0 +1,5 @@
+<a class="item item-thumbnail-left text-left" xattr-image-position="item-thumbnail-left" href="" xattr-text-position="text-left">
+    <img alt="Thumbnail" src="https://picsum.photos/id/875/100/100"  class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+    <h2 class="default" xattr-theme="default">Item Title</h2>
+    <h3 class="dark" xattr-theme="dark">Item Subtitle</h3>
+</a>

package/components/templates/kendo-chat.designtime.html

@@ -0,0 +1,20 @@
+<div id="chat" data-role="chat" class="k-widget k-chat">
+    <div class="k-message-list k-avatars" data-role="chat" aria-live="polite">
+        <div class="k-message-list-content">
+            <div me="" class="k-message-group k-alt k-no-avatar">
+                <div class="k-message k-only">
+                    <time class="k-message-time">22:01:47</time>
+                    <div class="k-bubble">Ola, seja bem vindo ao cronchat</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="k-message-box" data-role="chat"><label class="k-hidden"
+                                                       for="inputId_80fd3281-a8fe-4b57-bd57-23dd2ccbc752">Digite aqui sua mensagem</label><input type="text" class="k-input" id="inputId_80fd3281-a8fe-4b57-bd57-23dd2ccbc752"
+                                                                                                                                                 placeholder="Type here...">
+        <button class="k-button k-flat k-button-icon k-button-send" title="Send message" aria-label="Send message">
+            <svg version="1.1" ixmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"></path></svg>
+        </button>
+    </div>
+    <div class="k-toolbar-box" role="toolbar" style="display:none;"></div>
+</div>

package/components/templates/kendo-chat.template.html

@@ -0,0 +1,75 @@
+<kendo-chat
+  id="kendo-chat${RANDOM}"
+  chat-placeholder="Digite uma mensagem"
+  ng-on-post-message=""
+  ng-on-send-message=""
+  ng-on-typing-start=""
+  ng-on-typing-end=""
+>
+  <div data-role="chat" class="k-widget k-chat">
+    <div class="k-message-list k-avatars" data-role="chat" aria-live="polite">
+      <div class="k-message-list-content">
+        <div cronapp="" class="k-message-group">
+          <p class="k-author">Cronapp</p>
+          <img
+            src="https://ide.cronapp.io/resources/favicon/favicon.svg"
+            alt="Cronapp"
+            class="k-avatar"
+          />
+          <div class="k-message k-first">
+            <time class="k-message-time">14:25:32</time>
+            <div class="k-bubble">Olá Usuário, este é o Cron Chat</div>
+          </div>
+          <div class="k-message k-last">
+            <time class="k-message-time">14:25:32</time>
+            <div class="k-bubble">Seja bem vindo!</div>
+          </div>
+        </div>
+        <div me="" class="k-message-group k-alt">
+          <img
+            src="https://www.creph.com.br/assets/all/img/default.png"
+            alt="User"
+            class="k-avatar"
+          />
+          <div class="k-message k-first">
+            <time class="k-message-time">14:25:37</time>
+            <div class="k-bubble">Olá!</div>
+          </div>
+          <div class="k-message k-last">
+            <time class="k-message-time">14:25:46</time>
+            <div class="k-bubble">Muito legal! :)</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="k-message-box" data-role="chat">
+      <label class="k-hidden" for="inputId_56884ad4-d5ca-4bb0-bc84-d352644d6410"
+        >Digite a mensagem</label
+      ><input
+        type="text"
+        class="k-input"
+        id="inputId_56884ad4-d5ca-4bb0-bc84-d352644d6410"
+        placeholder="Digite a mensagem"
+      /><button
+        class="k-button k-flat k-button-icon k-button-send"
+        title="Send message"
+        aria-label="Send message"
+      >
+        <svg
+          version="1.1"
+          ixmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 16 16"
+          xml:space="preserve"
+        >
+          <path
+            d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+    <div class="k-toolbar-box" role="toolbar" style="display: none;"></div>
+  </div>
+</kendo-chat>

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

@@ -0,0 +1,7 @@
+<div class="" crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-avatar${RANDOM}">
+	<a class="item item-avatar-left text-left" xattr-position="item-avatar-left" xattr-text-position="text-left" data-component="crn-list-item-avatar" id="crn-list-item-avatar-${RANDOM}">
+    <img alt="Avatar" src="img/nophoto.png" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+    <h2 class="default" xattr-theme="default">List Title</h2>
+    <h3 class="dark" xattr-theme="dark">List Subtitle</h3>
+	</a>
+</div>

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

@@ -0,0 +1,6 @@
+<div crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-icon${RANDOM}"  xattr-text-position="text-left">
+  <a class="item item-icon-left" xattr-position="item-icon-left" data-component="crn-list-item-icon" id="crn-list-item-icon${RANDOM}" href="">
+    <i class="icon ion ion-home dark" xattr-theme="dark"></i>
+    <h2 class="dark" xattr-theme="dark">List Content</h2>
+  </a>
+</div>

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

@@ -0,0 +1,16 @@
+<ion-list crn-datasource="" class="listCanSwipe" id="crn-list-swipe${RANDOM}">
+  <div ng-repeat="rowData in datasource.data" class="to-repeat">
+    <ion-item class="item" id="crn-list-item-swipe${RANDOM}" data-component="crn-item-swipe">
+      <h2 style="display: inline;">Item</h2>
+      <div id="crn-item-options${RANDOM}" class="component-holder" data-component="crn-item-options">
+        <div class="crn-item-options" data-item="true">
+          <ion-option-button id="crn-option-button${RANDOM}" data-component="crn-button" class="button-default button editButton">
+            <i class="ion ion-edit"></i><span>Action 1</span>
+          </ion-option-button>
+          <ion-option-button id="crn-option-button${RANDOM}-2" data-component="crn-button"
+            class="button-assertive button deleteButton"><i class="ion ion-trash-a"></i><span>Action 2</span></ion-option-button>
+        </div>
+      </div>
+    </ion-item>
+  </div>
+</ion-list>

package/components/templates/list.template.html

@@ -0,0 +1,5 @@
+<div class="list">
+  <div crn-datasource=""  ng-repeat="rowData in datasource.data">
+    <ion-item data-component="crn-list-item" class="item dark text-left item-content" xattr-theme="dark" xattr-text-position="text-left">Content</ion-item>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+<div crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-avatar${RANDOM}">
+    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" xattr-text-position="text-left">
+        <img alt="Thumbnail" src="https://picsum.photos/id/875/100/100" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
+        <h2 class="default" xattr-theme="default">List Title</h2>
+        <h3 class="dark" xattr-theme="dark">List Subtitle</h3>
+    </a>
+</div>

package/components/templates/maps.designtime.html

@@ -0,0 +1 @@
+<iframe class="cronMap" src="" width="" height="" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

package/components/templates/maps.template.html

@@ -0,0 +1 @@
+<cron-map class="cronMap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3655.2165684653255!2d-46.71442368505524!3d-23.632413984647545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce51ad27188dbf%3A0x999630947e3dda9f!2sTechne!5e0!3m2!1spt-BR!2sbr!4v1627059464115!5m2!1spt-BR!2sbr" width="100%" height="400"></cron-map>

package/components/templates/menu.template.html

@@ -0,0 +1,21 @@
+<ion-side-menus ng-if="!isOldMenu">
+  <ion-side-menu-content drag-content="false">
+      <ion-nav-bar class="bar-stable" ng-show="isOldMenu">
+          <ion-nav-back-button></ion-nav-back-button>
+          <ion-nav-buttons side="left">
+              <button aria-labelledby="menu_template_left_navicon_sr" class="button button-clear" menu-toggle="left" data-component="crn-button" xattr-type="button-clear">
+                  <i class="icon ion-navicon"></i>
+                  <span id="menu_template_left_navicon_sr" class="sr-only">{{'Accessibility.Button.Aria.Label.NavIcon' | translate}}</span>
+              </button>
+          </ion-nav-buttons>
+      </ion-nav-bar>
+      <ion-nav-view name="menuContent"></ion-nav-view>
+  </ion-side-menu-content>
+  <ion-side-menu side="left">
+      <div ng-include src="'views/logged/menu.view.html'"></div>
+  </ion-side-menu>
+  <ion-side-menu side="right">
+      <div ng-include src="'views/logged/menu.view.html'"></div>
+  </ion-side-menu>
+</ion-side-menus>
+<div ng-include src="'views/logged/menu.view.html'" ng-if="isOldMenu"></div>

package/components/templates/multiselect.template.html

@@ -0,0 +1,5 @@
+<div class="item item-input item-select">
+	<span class="input-label">Label</span> 
+	<select aria-label="Seleção Múltipla" multiple ng-model="vars.multiselect${RANDOM}" crn-datasource="" class="form-control" id="multiselect-${RANDOM}" name="multiselect-${RANDOM}">
+	</select>
+</div>

package/components/templates/nav.bar.template.html

@@ -0,0 +1,5 @@
+<ion-nav-buttons side="right" class="crn-ion-nav-buttons">
+    <button class="button button-stable">
+        <i class="icon ion-plus-round"></i>
+        </button>
+</ion-nav-buttons>

package/components/templates/public.menu.template.html

@@ -0,0 +1,21 @@
+<ion-side-menus ng-if="!isOldMenu">
+  <ion-side-menu-content drag-content="false">
+      <ion-nav-bar class="bar-stable" ng-show="isOldMenu">
+          <ion-nav-back-button></ion-nav-back-button>
+          <ion-nav-buttons side="left">
+              <button aria-labelledby="menu_template_left_navicon_sr" class="button button-clear" menu-toggle="left" data-component="crn-button" xattr-type="button-clear">
+                  <i class="icon ion-navicon"></i>
+                  <span id="menu_template_left_navicon_sr" class="sr-only">{{'Accessibility.Button.Aria.Label.NavIcon' | translate}}</span>
+              </button>
+          </ion-nav-buttons>
+      </ion-nav-bar>
+      <ion-nav-view name="menuContent"></ion-nav-view>
+  </ion-side-menu-content>
+  <ion-side-menu side="left">
+      <div ng-include src="'views/public/menu.view.html'"></div>
+  </ion-side-menu>
+  <ion-side-menu side="right">
+      <div ng-include src="'views/public/menu.view.html'"></div>
+  </ion-side-menu>
+</ion-side-menus>
+<div ng-include src="'views/public/menu.view.html'" ng-if="isOldMenu"></div>

package/components/templates/publicMenu.template.html

@@ -0,0 +1,14 @@
+<ion-side-menus>
+  <div class="row" data-container="true">
+    <ion-side-menu-content drag-content="false">
+      <ion-nav-view name="menuContent">
+      </ion-nav-view>
+    </ion-side-menu-content>
+    <ion-side-menu side="left" >
+      <div ng-include src="'views/public/menu.view.html'"></div>
+    </ion-side-menu>
+    <ion-side-menu side="right" >
+      <div ng-include src="'views/public/menu.view.html'"></div>
+    </ion-side-menu>
+  </div>
+</ion-side-menus>

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

@@ -0,0 +1,15 @@
+<div class="component-holder ng-binding ng-scope" data-component="crn-radiogroup" id="crn-radiogroup-726495"> 
+  <div class="list radio-group" crn-datasource="[{'key': 1,'value':'Value 1' },{'key': 2,'value':'Value 2','checked' : false },{'key': 3,'value':'Value 3'}]"> 
+	<div class="item item-divider ng-binding">
+	   RadioGroup : {{datasource.active}}
+	</div> 
+	<label class="item item-radio ng-not-empty ng-valid" ng-repeat="rowData in datasource.data"> 
+	<input aria-label="Aria Label Text" type="radio" ng-model="datasource.active" ng-value="rowData.key" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" style="">
+	  <div class="radio-content">
+		<div class="item-content disable-pointer-events">
+		  <span class="ng-binding">{{rowData.value}}</span>
+		</div>
+		<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
+	  </div></label>
+  </div> 
+</div> 

package/components/templates/radiogroup.template.html

@@ -0,0 +1,21 @@
+<div class="component-holder list radio-group" ng-model="vars.radio${RANDOM}" data-component="crn-radio">
+  <div class="item item-divider ng-binding">
+    RadioGroup
+  </div>
+  <div data-component="crn-radioOption">
+    <label class="item item-radio" crn-value="" value="1"> <input aria-label="Aria Label Text" type="radio"
+        name="group">
+      <div class="radio-content">
+        <div class="item-content">Choose A</div><i class="radio-icon ion-checkmark"></i>
+      </div>
+    </label>
+  </div>
+  <div data-component="crn-radioOption">
+    <label class="item item-radio" crn-value="" value="2"> <input aria-label="Aria Label Text" type="radio"
+        name="group">
+      <div class="radio-content">
+        <div class="item-content">Choose B</div> <i class="radio-icon ion-checkmark"></i>
+      </div>
+    </label>
+  </div>
+</div>

package/components/templates/range.template.html

@@ -0,0 +1,5 @@
+<div class="item range range-default" id="crn-range${RANDOM}">
+    <i class="icon ion-ios-sunny-outline left-icon"></i>
+    <input class="ng-pristine ng-untouched ng-valid ng-empty" aria-label="Volume" type="range" name="volume" min="0" max="100" value="33" ng-model="vars.range${RANDOM}">
+    <i class="icon ion-ios-sunny right-icon"></i>
+</div>

package/components/templates/rating.template.html

@@ -0,0 +1,9 @@
+<div class="default" xattr-theme="default">
+  <cronapp-rating ng-model="vars.evaluation${RANDOM}" icon-off="ion ion-android-star-outline" xattr-default-value="">
+    <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star icon-font-size-default"></i>
+    <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star icon-font-size-default"></i>
+    <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star icon-font-size-default"></i>
+    <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star icon-font-size-default"></i>
+    <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star icon-font-size-default"></i>
+  </cronapp-rating>
+</div>

package/components/templates/search.template.html

@@ -0,0 +1,6 @@
+<div class="item item-input" id="cloud-search${RANDOM}">
+	<i class="icon ion-search placeholder-icon"></i> 
+	<input aria-label="Aria Label Text" type="text" placeholder="Placeholder text"
+		ng-model="vars.search${RANDOM}" mask="" cronapp-filter="" crn-datasource="" 
+		cronapp-filter-caseinsensitive="true" cronapp-filter-autopost="true" cronapp-filter-operator="=" keyboard>
+</div>

package/components/templates/slider.template.html

@@ -0,0 +1,20 @@
+<div class="crn-slider display-ion-slider" id="crn-slider-${COMPONENTID}">
+  <ion-slide-box class="" auto-play="false" slide-interval="2000" does-continue="false">
+
+    <ion-slide xattr-theme="positive-bg" id="crn-slider-item-${RANDOM}-1" data-component="crn-slider-item" class="positive-bg active crn-slider-item" data-container="true" data-replace="true">
+      <img alt="Placehold" src="node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png" class="component-holder" style="object-fit: cover;" xattr-position="" width="100%" height="100%" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-${RANDOM}">
+      <h2 class="text-center top-50" data-component="crn-label" data-container="true" data-replace="true" horizontal-text-position="text-center" vertical-text-position="top-50">SLIDE 1</h2>
+    </ion-slide>
+
+    <ion-slide xattr-theme="royal-bg" id="crn-slider-item-${RANDOM}-2" data-component="crn-slider-item" class="royal-bg crn-slider-item" data-container="true" data-replace="true">
+      <img alt="Placehold" src="node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png" class="component-holder" style="object-fit: cover;" xattr-position="" width="100%" height="100%" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-${RANDOM}">
+      <h2 class="text-center top-50" data-component="crn-label" data-container="true" data-replace="true" horizontal-text-position="text-center" vertical-text-position="top-50">SLIDE 2</h2>
+    </ion-slide>
+
+    <ion-slide xattr-theme="balanced-bg" id="crn-slider-item-${RANDOM}-3" data-component="crn-slider-item" class="balanced-bg crn-slider-item" data-container="true" data-replace="true">
+      <img alt="Placehold" src="node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png" class="component-holder" style="object-fit: cover;" xattr-position="" width="100%" height="100%" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-${RANDOM}">
+      <h2 class="text-center top-50" data-component="crn-label" data-container="true" data-replace="true" horizontal-text-position="text-center" vertical-text-position="top-50">SLIDE 3</h2>
+    </ion-slide>
+
+  </ion-slide-box>
+</div>

package/components/templates/tabs-icon-only.template.html

@@ -0,0 +1,16 @@
+<ion-tabs class="tabs-striped background-default tabs-icon-default icon-size-large component-holder" background-color="background-default" tabs-color="tabs-icon-default" tabs-size="icon-size-large" data-component="crn-tabs-icon-only" id="crn-tabs-icon-only-707450">
+    <div class="tabs">
+        <a class="tab-item active" title="Home" data-component="crn-tabs-icon-only-item" href="">
+            <i class="icon ion-home"></i>
+            <span>Home</span>
+        </a>
+        <a class="tab-item" title="User" data-component="crn-tabs-icon-only-item" href="">
+            <i class="icon fa fa-user"></i>
+            <span>User</span>
+        </a>
+        <a class="tab-item" title="Config" data-component="crn-tabs-icon-only-item" href="">
+            <i class="icon ion-gear-a"></i>
+            <span>Config</span>
+        </a>
+    </div>
+</ion-tabs>

package/components/templates/tabs.template.html

@@ -0,0 +1,5 @@
+<div class="tabs">
+    <a href="#" class="tab-item component-holder" target="_self" data-component="crn-anchor">Home</a> 
+    <a href="#" class="tab-item component-holder" target="_self" data-component="crn-anchor">Favorites</a> 
+    <a href="#" class="tab-item component-holder" target="_self" data-component="crn-anchor">Settings</a> 
+</div>

package/components/templates/textarea.template.html

@@ -0,0 +1 @@
+<textarea id="textArea-${RANDOM}" ng-model="vars.textarea${RANDOM}" maxlength="300" style="resize:none;" resize="none" class="col item item-input" rows="5" placeholder="Textarea component"></textarea>

package/components/templates/textinput.template.html

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

package/components/templates/textinputbutton.template.html

@@ -0,0 +1,12 @@
+<div data class="item item-input-inset">
+    <div class="item-input-wrapper">
+        <input type="text" placeholder="Placeholder Text" aria-label="Aria Label Text"
+            ng-model="vars.inputButton${RANDOM}" mask keyboard>
+    </div>
+    <button class="button component-holder button-small button-outline button-balanced" type="submit" ng-click=""
+        data-component="crn-button" id="crn-button${RANDOM}" xattr-type="button-outline" xattr-size="button-small"
+        xattr-theme="button-balanced">
+        <i class="ion ion-ios-search"></i>
+        <span>Search</span>
+    </button>
+</div>

package/components/templates/title.template.html

@@ -0,0 +1 @@
+<p class="card text-left">Title</p>

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

@@ -0,0 +1,11 @@
+<div crn-datasource="[{'key': 1,'value':'Value 1','checked' : true },{'key': 2,'value':'Value 2','checked' : false },{'key': 3,'value':'Value 3','checked' : true}]"> 
+<ul class="list toggle-group"> 
+  <li class="item item-toggle" ng-repeat="rowData in datasource.data"> 
+		{{rowData.value}} 
+		<div class="toggle toggle-balanced">
+		<input aria-label="Aria Label Text" type="checkbox" ng-checked="rowData.checked">
+	  <div class="track"> 
+		<div class="handle"></div> 
+	  </div> </div> </li>
+</ul> 
+</div> 

package/components/templates/toggle.template.html

@@ -0,0 +1,9 @@
+<label class="item item-toggle">
+    <span>Choose A</span>
+    <div class="toggle toggle-default" xattr-theme="toggle-default">
+        <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle${RANDOM}" ng-initial-value="false" crn-allow-null-values="true">
+        <div class="track">
+            <div class="handle"></div>
+        </div>
+    </div>
+</label>

package/components/templates/video.designtime.html

@@ -0,0 +1,2 @@
+<iframe src="" width="" height="" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+</iframe>

package/components/templates/video.template.html

@@ -0,0 +1 @@
+<cron-video class="cronVideo" src="https://www.youtube.com/embed/W1dxhujIlSY" width="100%" height="250" title="YouTube video player"></cron-video>

package/components/templates/views/public/home.view.html

@@ -0,0 +1,16 @@
+<ion-view class="pane">
+  <ion-header-bar align-title="center" class="bar bar-default" data-component="crn-ion-header-bar">
+    <div class="buttons buttons-left header-item">
+      <button class="button button-clear" menu-toggle="left" data-component="crn-button" xattr-type="button-clear"> <i class="icon ion-navicon"></i> </button>
+    </div>
+    <h1 class="title">{{'Home.view.Home' | translate }}</h1>
+    <div class="buttons buttons-right header-item">
+      <button class="button button-clear" menu-toggle="right" data-component="crn-button" xattr-type="button-clear"> <i class="icon ion-navicon"></i> </button>
+    </div>
+  </ion-header-bar>
+  <ion-content class="scroll-content has-header" data-component="crn-ion-content">
+    <div style="height: 60px;" data-component="crn-spacer" class="component-holder" id="crn-spacer-909305">
+      &nbsp;
+    </div>
+  </ion-content>
+</ion-view>

package/components/templates/views/public/menu.view.html

@@ -0,0 +1,20 @@
+<ion-view class="pane">
+    <ion-content data-container="true" data-component="crn-ion-content" class="scroll-content menu-view">
+        <ion-list class=" disable-user-behavior list">
+            <!-- Menu -->
+            <div class="component-holder" data-component="crn-navbar" id="menu-blue">
+                <div class="nav navbar-nav">
+                    <a menu-close="" class="item item-icon-left component-holder" xattr-position="item-icon-left" href="#/app/public/home" data-component="crn-list-item-icon" id="crn-list-item-icon29401"><i class="icon ion ion-home light" xattr-theme="light" style="font-size: 150%;" xattr-icon-size="font-size:150%;"></i>
+                        <div class="item-content text-left" xattr-text-position="text-left">
+                            <h2 class="light" xattr-theme="light">{{ "Home.view.Home" | translate }}</h2>
+                        </div> </a>
+                    <a menu-close="" class="item item-icon-left component-holder" xattr-position="item-icon-left" href="#/app/login" data-component="crn-list-item-icon" id="crn-list-item-icon87931"><i class="icon ion ion-arrow-right-c light" xattr-theme="light" style="font-size: 150%;" xattr-icon-size="font-size:150%;"></i>
+                        <div class="item-content text-left" xattr-text-position="text-left">
+                            <h2 class="light" xattr-theme="light">{{"Login.view.Login" | translate}}</h2>
+                        </div> </a>
+                </div>
+            </div>
+            <!-- Menu -->
+        </ion-list>
+    </ion-content>
+</ion-view>

package/components/upload/upload.html

@@ -0,0 +1,41 @@
+<ion-modal-view ng-controller="UploadController">
+    <ion-header-bar class="{{headerClass}}">
+        <h1 class="title">{{"Upload.title" | translate}}</h1>
+    </ion-header-bar>
+    <ion-content class="scroll-content">
+        <div style="padding: 15px">
+            <div class="form-group">
+                <div ng-show="uploading">
+                    <span>{{"Upload.sending" | translate}} ({{progress}}%)...</span>
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}"
+                             aria-valuemin="0" aria-valuemax="100" style="width:{{progress}}%">
+                        </div>
+                    </div>
+                </div>
+
+                <div ng-show="!uploading" class="drop-box  modal-upload" style="position: relative;">
+
+                    <input type="file" ng-model="myFiles"
+                           ngf-select="uploadFile($files)"
+                           ngf-max-size="{{data.maxSize}}"
+                           ngf-multiple="{{data.multiple}}"
+                           ngf-pattern="{{data.filter}}"
+                           accept="{{data.filter}}"
+                           style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0"
+                    />
+                    <span>{{message}}</span>
+
+                </div>
+
+            </div>
+            <div style="padding-top: 15px">
+                <button type="button" class="button button-block {{buttonClass}}" style="margin: 0px" data-toggle="tooltip" title="{{ 'Cancel' | translate }}"
+                        ng-click="close()"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span>{{ 'Cancel' | translate }}</span>
+                </button>
+            </div>
+        </div>
+
+    </ion-content>
+
+</ion-modal-view>