cronapp-framework-mobile-js 1.0.4

package/css/themes/theme.editor.view.html

@@ -0,0 +1,890 @@
+<ion-side-menus ng-if="!isOldMenu" class="view">
+    <ion-side-menu-content drag-content="false" class="menu-content pane">
+        <ion-nav-view name="menuContent" class="view-container disable-user-behavior" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">
+            <ion-view class="pane" role="region" state="app.home" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
+
+                <ion-header-bar role="heading" class="crn-ion-header-bar bar bar-default bar-header" xattr-theme="bar-default" data-component="crn-ion-header-bar" id="crn-ion-header-bar-home-logged">
+                    <div class="buttons buttons-left header-item" data-component="crn-header-button" id="crn-header-button-1">
+                        <button aria-labelledby="left_navicon_sr" class="button button-clear component-holder" menu-toggle="left"> <i class="icon ion-navicon"></i> <span id="left_navicon_sr" class="sr-only ng-binding"></span> </button>
+                    </div>
+                    <h1 class="title" align-title="text-align: center;" style="text-align: center; left: 56px; right: 56px;">Home</h1>
+                    <div aria-labelledby="right_navicon_sr" class="buttons buttons-right header-item" data-component="crn-header-button" id="crn-header-button-2">
+                        <button class="button button-clear component-holder" menu-toggle="right"> <i class="icon ion-navicon"></i> <span id="right_navicon_sr" class="sr-only ng-binding"></span> </button>
+                    </div>
+                </ion-header-bar>
+
+                <ion-content class="scroll-content scrollable-preview has-footer has-footer-tabs ionic-scroll  has-header" data-component="crn-ion-content">
+                    <div class="scroll" style="overflow: scroll; overflow-x: inherit; height: 100%;">
+
+                        <h1 class="text-center h1 " xattr-position="text-center" xattr-type="h1" data-component="crn-heading" id="crn-heading-97321">Title</h1>
+                        <h2 class="text-center " xattr-position="text-center" subtitle-size="font-size: 22px;" style="font-size: 22px;" data-component="crn-label" id="crn-label-798665">Some label text</h2>
+                        <p xattr-position="text-center" style="font-size: var(--textNormalSize, 14px);" class="text-center " xattr-type="font-size: var(--textNormalSize, 14px);" data-component="crn-paragraph" id="crn-paragraph-401977">Some friendly Paragraph</p>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-541752">Button</h1>
+                        <button class="button button-default button-medium filled button-block " type="submit" xattr-fullsize="button-block" xattr-theme="button-default" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-567347"> <i class="ion ion-home default" xattr-icon-theme="default"></i> <span>Default theme</span> </button>
+                        <button class="button button-block button-medium filled button-positive " type="submit" xattr-fullsize="button-block" xattr-theme="button-positive" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-93071"> <i class="ion ion-home" xattr-icon-theme=""></i> <span>Secondary</span></button>
+                        <button class="button button-block button-medium filled button-balanced " type="submit" xattr-fullsize="button-block" xattr-theme="button-balanced" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-59831"> <i class="ion ion-home default" xattr-icon-theme=""></i> <span>Success</span> </button>
+                        <button class="button button-block button-medium filled button-calm " type="submit" xattr-fullsize="button-block" xattr-theme="button-calm" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-17101"> <i class="ion ion-home" xattr-icon-theme=""></i> <span>Info</span></button>
+                        <button class="button button-block button-medium filled button-energized " type="submit" xattr-fullsize="button-block" xattr-theme="button-energized" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-23471"> <i class="ion ion-home default" xattr-icon-theme="default"></i> <span>Warning</span> </button>
+                        <button class="button button-block button-medium filled button-assertive " type="submit" xattr-fullsize="button-block" xattr-theme="button-assertive" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-86041"> <i class="ion ion-home default" xattr-icon-theme="default"></i> <span>Danger</span> </button>
+                        <button class="button button-block button-medium filled button-light " type="submit" xattr-fullsize="button-block" xattr-theme="button-light" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-81451"> <i class="ion ion-home" xattr-icon-theme=""></i> <span>Light</span></button>
+                        <button class="button button-block button-medium filled button-stable " type="submit" xattr-fullsize="button-block" xattr-theme="button-stable" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-1031"> <i class="ion ion-home" xattr-icon-theme=""></i> <span>Stable</span></button>
+                        <button class="button button-block button-medium filled button-royal " type="submit" xattr-fullsize="button-block" xattr-theme="button-royal" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-88811"> <i class="ion ion-home" xattr-icon-theme=""></i> <span>Royal</span></button>
+                        <button class="button button-block button-medium filled button-dark " type="submit" xattr-fullsize="button-block" xattr-theme="button-dark" ng-click="" data-component="crn-button" xattr-size="button-medium" xattr-type="filled" id="crn-button-67391"> <i class="ion ion-home" xattr-icon-theme=""></i> <span>Dark</span></button>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-352091">Evaluation</h1>
+                        <div class="default" xattr-theme="default" data-component="crn-rating" id="crn-rating-default">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="positive" xattr-theme="positive" data-component="crn-rating" id="crn-rating-positive">
+                            <cronapp-rating ng-model="vars.evaluation753719618611137131" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="balanced" xattr-theme="balanced" data-component="crn-rating" id="crn-rating-success">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="calm" xattr-theme="calm" data-component="crn-rating" id="crn-rating-info">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="energized" xattr-theme="energized" data-component="crn-rating" id="crn-rating-warning">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="assertive" xattr-theme="assertive" data-component="crn-rating" id="crn-rating-danger">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="light" xattr-theme="light" data-component="crn-rating" id="crn-rating-light">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="stable" xattr-theme="stable" data-component="crn-rating" id="crn-rating-stable">
+                            <cronapp-rating ng-model="vars.evaluation7537196186111" 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-android-star-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="royal" xattr-theme="royal" data-component="crn-rating" id="crn-rating-royal">
+                            <cronapp-rating ng-model="vars.evaluation75371961861113713197071" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+                        <div class="dark" xattr-theme="dark" data-component="crn-rating" id="crn-rating-dark">
+                            <cronapp-rating ng-model="vars.evaluation753719618611132791" 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-outline icon-font-size-default"></i>
+                                <i icon-size="icon-font-size-default" class="component-holder ion ion-android-star-outline icon-font-size-default"></i>
+                            </cronapp-rating>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-221735">Link</h1>
+                        <a href="" class="" style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-default">Link - Default theme</a>
+                        <a href="" class="color-positive " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-secundary" text-theme="color-positive">Link - Secundary</a>
+                        <a href="" class="color-balanced " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-success" text-theme="color-balanced">Link - Success</a>
+                        <a href="" class="color-calm " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-info" text-theme="color-calm">Link - Info</a>
+                        <a href="" class="color-energized " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-warning" text-theme="color-energized">Link - Warning</a>
+                        <a href="" class="color-assertive " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-danger" text-theme="color-assertive">Link - Danger</a>
+                        <a href="" class="color-light " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-light" text-theme="color-light">Link - Light</a>
+                        <a href="" class="color-stable " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-51921" text-theme="color-stable">Link - Stable</a>
+                        <a href="" class="color-royal " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-royal" text-theme="color-royal">Link - Royal</a>
+                        <a href="" class="color-dark " style="display:block" xattr-fullsize="display:block;" data-replace="true" data-component="crn-anchor" id="crn-anchor-dark" text-theme="color-dark">Link - Dark</a>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-766248">Checkbox</h1>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-128388">
+                            <li class="item item-checkbox checkbox-default" xattr-theme="checkbox-default">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox6194" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Default theme</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-80431">
+                            <li class="item item-checkbox checkbox-positive" xattr-theme="checkbox-positive">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox619460501101199931714713864171601" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Secundary</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-71221">
+                            <li class="item item-checkbox checkbox-balanced" xattr-theme="checkbox-balanced">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox6194605011011" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Success</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-21071">
+                            <li class="item item-checkbox checkbox-calm" xattr-theme="checkbox-calm">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox6194605011011999317147138641" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Info</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-69121">
+                            <li class="item item-checkbox checkbox-energized" xattr-theme="checkbox-energized">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox61946050110119993171471" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Warning</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-21171">
+                            <li class="item item-checkbox checkbox-assertive" xattr-theme="checkbox-assertive">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox619460501101199931" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Danger</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-96641">
+                            <li class="item item-checkbox checkbox-light" xattr-theme="checkbox-light">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox61946050110119993171471386419181" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Light</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-32151">
+                            <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.checkbox619460501" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Stable</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-46391">
+                            <li class="item item-checkbox checkbox-royal" xattr-theme="checkbox-royal">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox61946050110119993171471386411411" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Royal</span>
+                            </li>
+                        </ul>
+                        <ul class="checkbox-group " data-component="crn-checkbox" id="crn-checkbox-50881">
+                            <li class="item item-checkbox checkbox-dark" xattr-theme="checkbox-dark">
+                                <div class="checkbox">
+                                    <input aria-label="Aria Label Text" type="checkbox" ng-model="vars.checkbox6194605011011999317147138641141163281" checked="" crn-allow-null-values="true" ng-false-value="'false'" ng-true-value="'true'" class="ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" aria-invalid="false" ng-initial-value="true">
+                                </div> <span>Dark</span>
+                            </li>
+                        </ul>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-4561">Toggle</h1>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-default"><span>Default theme</span>
+                            <div class="toggle toggle-default" xattr-theme="toggle-default">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle1868" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-secundary"><span>Secundary</span>
+                            <div class="toggle toggle-positive" xattr-theme="toggle-positive">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle944070241" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-success"><span>Success</span>
+                            <div class="toggle toggle-balanced" xattr-theme="toggle-balanced">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle4874" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-info"><span>Info</span>
+                            <div class="toggle toggle-calm" xattr-theme="toggle-calm">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle944032891" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-warning"><span>Warning</span>
+                            <div class="toggle toggle-energized" xattr-theme="toggle-energized">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle9440" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-danger"><span>Danger</span>
+                            <div class="toggle toggle-assertive" xattr-theme="toggle-assertive">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle6836" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-light"><span>Light</span>
+                            <div class="toggle toggle-light" xattr-theme="toggle-light">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle944031201" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-stable"><span>Stable</span>
+                            <div class="toggle toggle-stable" xattr-theme="toggle-stable">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle94407991" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-royal"><span>Royal</span>
+                            <div class="toggle toggle-royal" xattr-theme="toggle-royal">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle4578" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+                        <label class="item item-toggle " data-component="crn-toggle" id="crn-toggle-dark"><span>Dark</span>
+                            <div class="toggle toggle-dark" xattr-theme="toggle-dark">
+                                <input type="checkbox" aria-label="Aria Label Text" ng-model="vars.toggle4979" checked="" crn-allow-null-values="true" class="ng-pristine ng-untouched ng-valid ng-not-empty" aria-invalid="false" ng-initial-value="true">
+                                <div class="track">
+                                    <div class="handle"></div>
+                                </div>
+                            </div>
+                        </label>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-12151">Card</h1>
+                        <div class="card " data-component="crn-card" id="crn-card-383537">
+                            <div class="item item-avatar item-text-wrap">
+                                <img alt="Avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAWlBMVEUxad5znu9ahueUtv9CdeeMrvecw/85cd5rlu97pvely/8xbd57nvdjju+cvv9KfeeMsv+lx/9Ccedrmu9aiu+Uuv9KeeeMsvelw/9Ccd6Epvc5bd57ovdzmu+UYrMFAAABMklEQVQ4jaWSjW6DMAyEAa2kDWqiU0WoZ3j/15ztQDET6yYt/Emc82Hf0Tz790fzi/5s/kOws1mffyYAeNMD+s/r9fZE/wMhzoEDMc/xvAcsTLIK8YK9L0cYWdUiNcN41gPupgetueOkhyiaqKQXxZMeEIQQ9BNyjy+zHCGrRobIe5euhyXoEFlLWrwG9T7oVpuT+t0r78MkNlEOFCZs+48EpC7I6sZ9yO//A9J0SfHw6kDQLKNch7h3HzC2bSdruU0RjrBtb4tlpVMyPRJ2Qp0grFGVWiSZ+x5wYdqkUKyKZzgCPkzPdpBFSgznA4b60gi55sHVjjoF2DLMKtopX+GE3hHKGlOmbQ3JpYk6oamKkUBKSNVq80kKDL82aSBO3geue1WrJUqA84HLyqcXZ6iEL8OWQiTjzqb4AAAAAElFTkSuQmCC" class="component-holder left-block" xattr-position="left-block" data-component="crn-image" id="crn-image-1204">
+                                <h2 data-component="crn-heading" class="component-holder" id="crn-heading-1204">Card Title</h2>
+                                <p xattr-position="text-left" class="text-left component-holder" data-component="crn-paragraph" id="crn-paragraph-1204">This is a basic Card.</p>
+                            </div>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-62641">Avatar Item</h1>
+                        <a class="item item-avatar-left text-left " xattr-image-position="item-avatar-left" xattr-text-position="text-left" data-component="crn-list-item-avatar" id="crn-list-item-avatar-406010"> <img alt="Avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAWlBMVEUxad5znu9ahueUtv9CdeeMrvecw/85cd5rlu97pvely/8xbd57nvdjju+cvv9KfeeMsv+lx/9Ccedrmu9aiu+Uuv9KeeeMsvelw/9Ccd6Epvc5bd57ovdzmu+UYrMFAAABMklEQVQ4jaWSjW6DMAyEAa2kDWqiU0WoZ3j/15ztQDET6yYt/Emc82Hf0Tz790fzi/5s/kOws1mffyYAeNMD+s/r9fZE/wMhzoEDMc/xvAcsTLIK8YK9L0cYWdUiNcN41gPupgetueOkhyiaqKQXxZMeEIQQ9BNyjy+zHCGrRobIe5euhyXoEFlLWrwG9T7oVpuT+t0r78MkNlEOFCZs+48EpC7I6sZ9yO//A9J0SfHw6kDQLKNch7h3HzC2bSdruU0RjrBtb4tlpVMyPRJ2Qp0grFGVWiSZ+x5wYdqkUKyKZzgCPkzPdpBFSgznA4b60gi55sHVjjoF2DLMKtopX+GE3hHKGlOmbQ3JpYk6oamKkUBKSNVq80kKDL82aSBO3geue1WrJUqA84HLyqcXZ6iEL8OWQiTjzqb4AAAAAElFTkSuQmCC" class="component-holder" data-component="crn-image" id="crn-image-3197">
+                            <h2 class="dark" xattr-theme="dark">Item Title</h2>
+                            <h3 class="dark" xattr-theme="dark">Item Subtitle</h3>
+                        </a>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-12151">Icon Item</h1><a class="item item-icon-left " xattr-icon-position="item-icon-left" xattr-text-position="text-left" data-component="crn-list-item-icon" id="crn-list-item-icon-538592"><i class="icon ion ion-home dark" xattr-theme="dark" xattr-icon-size="font-size:200%;" style="font-size:200%"></i>
+                            <h2 class="dark" xattr-theme="dark">Item Content</h2>
+                        </a>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-12151">Thumbnail Item</h1><a class="item item-thumbnail-left text-left " xattr-image-position="item-thumbnail-left" href="" xattr-text-position="text-left" data-component="crn-list-item-thumbnail" id="crn-list-item-thumbnail-771526"><img alt="Thumbnail" src="https://picsum.photos/id/875/100/100" class="component-holder" data-component="crn-image" id="crn-image-9124">
+                            <h2 class="dark" xattr-theme="dark">Item Title</h2>
+                            <h3 class="dark" xattr-theme="dark">Item Subtitle</h3>
+                        </a>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-12151">Swipe item</h1>
+                        <div class="component-holder ng-scope " data-component="crn-item-swipe" id="crn-item-swipe-160960">
+                            <ion-list crn-datasource="" class="listCanSwipe" id="crn-list-swipe425" data-component="crn-item-swipe">                              
+                                <ion-item class="item item-complex item-right-editable" id="crn-list-item-swipe425" data-component="crn-item-swipe">
+                                    <div class="item-content" style="width: 47%;">
+                                        <h2 class="titleItem">Item</h2>                                       
+                                    </div>
+                                    <div class="item-options">
+                                        <ion-option-button id="crn-option-button425" data-component="crn-button" class="button-positive button editButton button"><i class="ion ion-edit"></i><span>Edit</span></ion-option-button>
+                                        <ion-option-button id="crn-option-button425-2" data-component="crn-button" class="button-assertive button deleteButton button"><i class="ion ion-trash-a"></i><span>Delete</span></ion-option-button>
+                                    </div>
+                                </ion-item>
+                            </ion-list>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-12151">Simple List</h1>
+                        <div class="list " data-component="crn-list" id="crn-list-561799">
+                            <div>
+                                <ion-item data-component="crn-list-item" class="item dark text-left item-content item-complex" xattr-theme="dark" xattr-text-position="text-left">
+                                    <div class="item-content ng-binding">Content 1</div>
+                                </ion-item>
+                            </div>
+                            <div>
+                                <ion-item data-component="crn-list-item" class="item dark text-left item-content item-complex" xattr-theme="dark" xattr-text-position="text-left">
+                                    <div class="item-content ng-binding">Content 2</div>
+                                </ion-item>
+                            </div>
+                            <div>
+                                <ion-item data-component="crn-list-item" class="item dark text-left item-content item-complex" xattr-theme="dark" xattr-text-position="text-left">
+                                    <div class="item-content ng-binding">Content 3</div>
+                                </ion-item>
+                            </div>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-39907">Radio Group</h1>
+                        <div class="component-holder list radio-group " ng-model="vars.radio1985" data-component="crn-radio" id="crn-radio-393472">
+                            <div class="item item-divider ng-binding">
+                                Options
+                            </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" checked> <input aria-label="Aria Label Text" type="radio" name="group" checked>
+                                    <div class="radio-content">
+                                        <div class="item-content">
+                                            Choose B
+                                        </div>
+                                        <i class="radio-icon ion-checkmark"></i>
+                                    </div>
+                                </label>
+                            </div>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-827545">Icon</h1>
+                        <i class="ion ion-android-star color-default icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-default" data-component="crn-icon" id="crn-icon-default"></i>
+                        <i class="ion ion-android-star color-positive icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-positive" data-component="crn-icon" id="crn-icon-secundary"></i>
+                        <i class="ion ion-android-star color-balanced icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-balanced" data-component="crn-icon" id="crn-icon-success"></i>
+                        <i class="ion ion-android-star color-energized icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-energized" data-component="crn-icon" id="crn-icon-warning"></i>
+                        <i class="ion ion-android-star color-calm icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-calm" data-component="crn-icon" id="crn-icon-info"></i>
+                        <i class="ion ion-android-star color-assertive icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-assertive" data-component="crn-icon" id="crn-icon-danger"></i>
+                        <i class="ion ion-android-star color-light icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-light" data-component="crn-icon" id="crn-icon-light"></i>
+                        <i class="ion ion-android-star color-stable icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-stable" data-component="crn-icon" id="crn-icon-stable"></i>
+                        <i class="ion ion-android-star color-royal icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-royal" data-component="crn-icon" id="crn-icon-royal"></i>
+                        <i class="ion ion-android-star color-dark icon-font-size-default " icon-size="icon-font-size-default" icon-theme="color-dark" data-component="crn-icon" id="crn-icon-dark"></i>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-949248">Input</h1>
+                        <div class="item item-input " data-component="crn-input" id="crn-input-463045">
+                            <input aria-label="Aria Label Text" id="crn-input6968" type="text" placeholder="Placeholder text" ng-model="vars.input6968" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275455">Input with Button</h1>
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-default">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Default theme" aria-label="Aria Label Text" ng-model="vars.inputButton2557" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-default" type="submit" ng-click="" data-component="crn-button" id="crn-button2557" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-default"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-secundary">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Secundary" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-positive" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-positive"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-success">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Success" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-balanced" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-balanced"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-info">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Info" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-calm" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-calm"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-warning">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Warning" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-energized" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-energized"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-danger">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Danger" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-assertive" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-assertive"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-light">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Light" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-light" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-light"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-stable">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Stable" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-stable" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-stable"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-royal">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Royal" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-royal" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-royal"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <div data="" class="item item-input-inset " data-component="crn-input-button" id="crn-input-button-dark">
+                            <div class="item-input-wrapper">
+                                <input type="text" placeholder="Dark" aria-label="Aria Label Text" ng-model="vars.inputButton255720921" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                            </div>
+                            <button class="button component-holder button-small button-outline button-dark" type="submit" ng-click="" data-component="crn-button" id="crn-button-50001" xattr-type="button-outline" xattr-size="button-small" xattr-theme="button-dark"> <i class="ion ion-ios-search"></i> <span>Search</span></button>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275455">Input with Icon</h1>
+                        <div class="item item-input " data-component="crn-input-icon" id="crn-input-icon-863593">
+                            <i class="icon ion-search placeholder-icon"></i>
+                            <input aria-label="Search" type="text" placeholder="Search" ng-model="vars.input9444" mask="" keyboard="" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" aria-invalid="false">
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275450">Password Input</h1>
+                        <div class="item item-input " data-component="crn-input" id="crn-input-831542">
+                            <input aria-label="Aria Label Text" id="crn-input3178" type="password" placeholder="*******" ng-model="vars.input3178" mask="" keyboard="password" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" aria-invalid="false">
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275450">Datetime</h1>
+                        <div class="item item-input " data-component="crn-input" id="crn-input-86851">
+                            <input aria-label="Aria Label Text" id="crn-input317831771" type="datetime-local" value="2022-05-06T14:23" placeholder="4/18/2022 9:59 AM" ng-model="vars.input317840821" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275451">Date</h1>
+                        <div class="item item-input " data-component="crn-input" id="crn-input-19691">
+                            <input type="date" aria-label="Aria Label Text" id="crn-input31783177197671" value="2022-05-28" placeholder="4/18/2022" ng-model="vars.input31784082148651" mask="" keyboard="" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275451">Float Input</h1>
+                        <div class="component-holder ng-scope " data-component="crn-input-floating" id="crn-input-floating-372099">
+                            <label class="item item-input item-floating-label">
+                                <span class="input-label has-input" aria-label="Input Label" id="_label-0">Input Label</span>
+                                <input type="text" aria-label="Aria Label Text" placeholder="Input Placeholder" mask="" keyboard="" value="Content here" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" aria-invalid="false" style="">
+                            </label>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275452">Combobox</h1>
+                        <div class="component-holder ng-scope " data-component="crn-select" id="crn-select-834633">
+                            <div class="item item-input item-select">
+                                <label class="input-label" aria-label="Select Item" id="_label-0">Select Item</label>
+                                <select aria-label="Aria Label Text" ng-model="vars.combobox3771" id="select-3771" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                                    <option value="? undefined:undefined ?"></option>
+                                    <option data-component="crn-item-select" class="active" value="1" ng-selected="true" selected>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>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275453">Dynamic Combobox</h1>
+                        <div class="item item-input item-select " data-component="crn-dynamic-select" id="crn-dynamic-select-439426">
+                            <span class="input-label" aria-label="Label" id="_label-1">Label</span>
+                            <select aria-label="Seleção Dinâmica" ng-model="vars.combobox9296" crn-datasource="" id="dynamic-select-9296" name="dynamic-select-9296" class="ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
+                                <option value="">None</option>
+                            </select>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275454">Multiselect</h1>
+                        <div class="item item-input item-select " data-component="crn-multiselect" id="crn-multiselect-106056">
+                            <span class="input-label" aria-label="Label" id="_label-2">Label</span>
+                            <select style="width: 80%;" aria-label="Seleção Múltipla" multiple ng-model="vars.multiselect3744" crn-datasource="" class="form-control ng-pristine ng-untouched ng-valid ng-empty" id="multiselect-3744" name="multiselect-3744" aria-invalid="false">
+                                <option value="volvo">Volvo</option>
+                                <option value="saab">Saab</option>
+                                <option value="opel">Opel</option>
+                                <option value="audi">Audi</option>
+                            </select>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275455">Textarea</h1>
+                        <textarea id="crn-textarea-663552" ng-model="vars.textarea1208" maxlength="300" style="resize:none" resize="none" class="col item item-input ng-pristine ng-untouched ng-valid ng-empty ng-valid-maxlength " rows="5" placeholder="Textarea component" data-component="crn-textarea" aria-invalid="false"></textarea>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275456">Dynamic File Upload</h1>
+                        <div class="item item-input item-stacked-label " data-component="crn-dynamic-file" id="crn-dynamic-file-589238">
+                            <label class="input-label" aria-label="File" id="_label-3">File</label>
+                            <div class="form-group">
+                                <div dynamic-file="" alt="Dynamic file Aria Label Text" ng-model="vars.input6772" max-file-size="5MB" class="dynamic-image-container ng-pristine ng-untouched ng-empty ng-valid ng-valid-required" ng-required="false" aria-required="false" aria-invalid="false">
+                                    <div ng-show="!vars.input6772" ngf-drop="" ngf-drag-over-class="dragover" aria-hidden="false" class="">
+                                        <div class="btn action-button-border" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.uploadFile('vars.input6772', $file, 'uploadprogress35', undefined)" ngf-max-size="5MB">
+                                            Click or drag and drop a file
+                                        </div>
+                                        <div class="progress" data-type="bootstrapProgress" id="uploadprogress35" style="display:none">
+                                            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%">
+                                                <span class="sr-only"></span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div ng-show="vars.input6772" class="upload-image-component-attribute ng-hide" aria-hidden="true">
+                                        <div>
+                                            <div ng-bind-html="cronapi.internal.generatePreviewDescriptionByte(vars.input6772, undefined)" class="ng-binding"></div>
+                                            <div aria-label="Download" class="button button-positive" ng-click="cronapi.internal.downloadFileEntityMobile(vars,'input6772', undefined, undefined)" role="button" tabindex="0">Baixar</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275455">Dynamic Image</h1>
+                        <div class="item item-input item-stacked-label general-dynamic-image " quality="60" data-component="crn-dynamic-image" id="crn-dynamic-image-850029">
+                            <label class="input-label" aria-label="Label" id="_label-4">Label</label>
+                            <div class="form-group">
+                                <div dynamic-image="" alt="Dynamic Image Aria Label Text" ng-model="vars.input4530" 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.input4530" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.setFile('vars.input4530', $file)" ngf-pattern="'image/*'" ngf-max-size="5MB">
+                                            Click or drag and drop an image
+                                        </div>
+                                        <div aria-label="Abrir a câmera" class="button button-default buttomImage" ng-if="!vars.input4530" ng-click="cronapi.internal.startCamera('vars.input4530','60','false','640','480')" role="button" tabindex="0"> <span class="icon ion-ios-videocam"></span> </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275455">Range</h1>
+                        <div class="item range range-default " id="crn-range-428049" data-component="crn-range">
+                            <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.range720" aria-invalid="false" aria-valuemin="0" aria-valuemax="100">
+                            <i class="icon ion-ios-sunny right-icon"></i>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-8275455">Carousel</h1>
+                        <div class="component-holder ng-scope " data-component="crn-slider" id="crn-slider-978109" style="height: 200px">
+                            <div class="crn-slider display-ion-slider" id="crn-slider-crn-slider-978109">
+                                <div class="slider" auto-play="false" slide-interval="2000" does-continue="false" style="visibility: visible;">
+                                    <div class="slider-slides" ng-transclude="" style="width: 1125px;">
+                                        <ion-slide xattr-theme="positive-bg" id="crn-slider-item-4781-1" data-component="crn-slider-item" class="positive-bg crn-slider-item slider-slide" data-container="true" data-replace="true" data-index="0" style="width: 291px; left: 0px; transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
+                                            <img alt="Placehold" src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIBAMAAACg8cFmAAAAG1BMVEXMzMyWlpacnJyqqqrFxcWxsbGjo6O3t7e+vr6He3KoAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAD0UlEQVR4nO2az2/aShDHx78wRy9pIEe7pX05Ql4r9bhu8noGVEXvaJroJUeTSjmTVqr6Z3dmfwAtrpQn2aSqvh+JXewZeb7szs4ukokAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODP5VNxpbnrnw3XcvmluG1wSj8OPuxYvXN3REqpEfcrpY4lPl/O9r2WSg3WW6tz7pC5uloqTbEaThUHLtWVOmnQ/upM5Rurd+6QYkx9NaFooOOiIpqO6d1wz6k8Yv2jjdU7d0dffvW8opKDPjzjcaj5lv7Za56zluHG6pw7JFXcPGS0yojCY3tZ7CXXciY/YGN1zh2SyIw95DStzHhEcinfRUbOliPjVdSSUNpbnXPXSCQZjwFFx1aluctTtbRTZfKbZTmrc+6YfzhllrWJ1BttZZUDHjE7n9/ITKK3OuduKRTPVLGWaaJQikOZmfuJmoU7sXnWvNU5d4uSUmQjaRvYLbJivBpt3bhAeKtz7loWp44JonQgigIna3W0U5wiVZG3OuduZdFXjtg0Wj21LeXxklfeQUeL11vWlFuc5EcblxXvBIfNLVOxG1YiJ9cmtRKznR9uJSb/kpkXKUWpq1ur3GvZhJ4ONbfe6pw7xOwhPC+8LUoJSLZVXgqXP+Ok9ou3OucOidzm07QnTk+KZzvi6ZB7oiyoqTtBnLgzwtqYYjVZuZxfVe6OtTrnDonVNQ9C3XTe6indc1VgWttbBztv0XRwVQyo6XTKp4e+ssGLV/8x+oCn0/dc5MfUdJaXxFpaicqgD3iWp8vipeau/9H+mfnq//mY1VeaMhB7Wd7qnQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPB/CNznN+NJZanB619YfpKV8VWglKIBUZiRfXv8vLiRlzSvKciJihZlZfHfj5dl2uGa7p2s+KX+ws3FQge3lC7blEXv6OwFhTrlL8nzCQWLTLro+VxkLV5Qr2bLjqxRRTdOVjSzTTIJ7qm3aldWcv1+FtUlfaLLizcUXJvu8kJ+fMCmfk5vdmVlp/3cyQq1beI8CNef20xEnsRQx3l/sqjf0pjHJdCmG1MpsthEN/yxb/BaWfe92skKfJMFaXXTpixOeTMI+WmVS2iJIl3mcyujz5G8gb0drfCO9keL/spbHS15rgxJdVvR2CqRbme0wgX9ICs5pv3covmsZVmSW7So72Z0r88ltnTb3KJ09KMsc2HanZVI7RY5eTyvRHrQpaa0OJWHS7ddiZTmDbLsRJ8rX7dalvUIevVh4z2Su6cW0Ehw+tQKAAB/DN8B6Jikju6t6uAAAAAASUVORK5CYII=" class="component-holder" style="object-fit: cover" xattr-position="" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-4781" width="100%" height="100%">
+                                            <h2 class="text-center top-13" 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>                                       
+                                    </div>
+                                    <div class="slider-pager">
+                                        <!-- ngRepeat: slide in numSlides() track by $index --><span class="slider-pager-page active" ng-repeat="slide in numSlides() track by $index" ng-class="{active: $index == currentSlide}" ng-click="pagerClick($index)" role="button" tabindex="0"><i class="icon ion-record"></i></span><!-- end ngRepeat: slide in numSlides() track by $index --><span class="slider-pager-page" ng-repeat="slide in numSlides() track by $index" ng-class="{active: $index == currentSlide}" ng-click="pagerClick($index)" role="button" tabindex="0"><i class="icon ion-record"></i></span><!-- end ngRepeat: slide in numSlides() track by $index --><span class="slider-pager-page" ng-repeat="slide in numSlides() track by $index" ng-class="{active: $index == currentSlide}" ng-click="pagerClick($index)" role="button" tabindex="0"><i class="icon ion-record"></i></span><!-- end ngRepeat: slide in numSlides() track by $index -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h1 class="h1 text-left " xattr-position="text-left" xattr-type="h1" data-component="crn-heading" id="crn-heading-tabs">Tabs</h1>
+                        <div class="component-holder ng-scope " data-component="crn-ion-segment" id="crn-ion-segment-default">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left icon-theme-light-default bg-default ion-segment-default active-background-default" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-default" background-color="bg-default" background-color-active="active-background-default" icon-theme="ion-segment-default" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-5014" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Default theme</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-5014" 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-5014">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-5014">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-secondary">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-positive ion-segment-positive bg-positive icon-theme-light-positive" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-positive" background-color="bg-positive" background-color-active="active-background-positive" icon-theme="ion-segment-positive" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Secondary</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-success">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-balanced ion-segment-balanced bg-balanced icon-theme-light-balanced" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-balanced" background-color="bg-balanced" background-color-active="active-background-balanced" icon-theme="ion-segment-balanced" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Success</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-info">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-calm ion-segment-calm bg-calm icon-theme-light-calm" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-calm" background-color="bg-calm" background-color-active="active-background-calm" icon-theme="ion-segment-calm" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Info</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-warning">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-energized ion-segment-energized bg-energized icon-theme-light-energized" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-energized" background-color="bg-energized" background-color-active="active-background-energized" icon-theme="ion-segment-energized" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Warning</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-danger">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-assertive ion-segment-assertive bg-assertive icon-theme-light-assertive" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-assertive" background-color="bg-assertive" background-color-active="active-background-assertive" icon-theme="ion-segment-assertive" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Danger</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-light">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-light ion-segment-light bg-light icon-theme-light-light" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-light" background-color="bg-light" background-color-active="active-background-light" icon-theme="ion-segment-light" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Light</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-stable">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-stable ion-segment-stable bg-stable icon-theme-light-stable" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-stable" background-color="bg-stable" background-color-active="active-background-stable" icon-theme="ion-segment-stable" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Stable</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-royal">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-royal ion-segment-royal bg-royal icon-theme-light-royal" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-royal" background-color="bg-royal" background-color-active="active-background-royal" icon-theme="ion-segment-royal" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Royal</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="component-holder ng-scope" data-component="crn-ion-segment" id="crn-ion-segment-dark">
+                            <div class="crn-ion-segment crn-ion-segment-classic" theme-ion-segment="crn-ion-segment-classic">
+                                <ul class="nav nav-tabs font-size-200 tabs-template-full icon-orientation-left active-background-dark ion-segment-dark bg-dark icon-theme-light-dark" role="tablist" icon-size="font-size-200" tabs-template="tabs-template-full" icon-theme-light="icon-theme-light-dark" background-color="bg-dark" background-color-active="active-background-dark" icon-theme="ion-segment-dark" icon-orientation="icon-orientation-left">
+                                    <li role="presentation" class="active">
+                                        <a data-target="#tab1-97" data-component="crn-ion-segment-item" role="tab" data-toggle="tab" data-container="true">
+                                            <i class="ion ion-android-star"></i>
+                                            <span>Dark</span>
+                                        </a>
+                                    </li>
+                                    <li role="presentation" class="">
+                                        <a data-target="#tab2-97" 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-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                    <div role="tabpanel" class="tab-pane" id="tab2-97">
+                                        <div data-container="true" data-replace="true">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ion-content>
+
+                <ion-tabs class="tabs-striped background-default tabs-icon-default icon-size-large component-holder tabs-bottom tabs-standard" 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-614465">
+                    <div class="tab-nav tabs">
+                        <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>
+                    </div>
+                </ion-tabs>
+            </ion-view>
+        </ion-nav-view>
+    </ion-side-menu-content>
+</ion-side-menus>