cronapp-framework-mobile-js/css/themes/theme.editor.view.html

Javascript library for CronApp's projects

<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" xat