cronapp-framework-js 2.9.0-SNAPSHOT.1 → 2.9.0-SNAPSHOT.2

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

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

package/components/templates/tabs.template.html

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

package/components/templates/textinputbutton.template.html

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

package/components/templates/textinputicon.template.html

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

package/components/templates/time.template.html

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

package/components/templates/timeline.designtime.html

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

package/components/templates/timeline.template.html

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

package/css/animate.css

@@ -0,0 +1,433 @@
+.cronapp-icon {
+    position: relative;
+    box-sizing: content-box;
+    justify-content: center;
+    width: 5em;
+    height: 5em;
+    margin: 1.25em auto 1.875em;
+    border: .25em solid transparent;
+    border-radius: 50%;
+    border-color: #000;
+    font-family: inherit;
+    line-height: 5em;
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* Error */
+.cronapp-icon.cronapp-error {
+    border-color: #f27474;
+    color: #f27474;
+}
+
+.cronapp-icon.cronapp-error .cronapp-x-mark {
+    position: relative;
+    flex-grow: 1;
+}
+
+.cronapp-icon.cronapp-error [class^=cronapp-x-mark-line] {
+    display: block;
+    position: absolute;
+    top: 2.3125em;
+    width: 2.9375em;
+    height: .3125em;
+    border-radius: .125em;
+    background-color: #f27474;
+}
+
+.cronapp-icon.cronapp-error [class^=cronapp-x-mark-line][class$=left] {
+    left: 1.0625em;
+    transform: rotate(45deg);
+}
+
+.cronapp-icon.cronapp-error [class^=cronapp-x-mark-line][class$=right] {
+    right: 1em;
+    transform: rotate(-45deg);
+}
+
+.cronapp-icon.cronapp-error {
+    -webkit-animation: cronapp-animate-error-icon .5s;
+    animation: cronapp-animate-error-icon .5s;
+}
+
+.cronapp-icon.cronapp-error .cronapp-x-mark {
+    -webkit-animation: cronapp-animate-error-x-mark .5s;
+    animation: cronapp-animate-error-x-mark .5s;
+}
+
+/* Success */
+.cronapp-icon.cronapp-success {
+    border-color: #a5dc86;
+    color: #a5dc86;
+}
+
+.cronapp-icon.cronapp-success [class^=cronapp-success-circular-line] {
+    position: absolute;
+    width: 3.75em;
+    height: 7.5em;
+    transform: rotate(45deg);
+    border-radius: 50%;
+}
+
+.cronapp-icon.cronapp-success [class^=cronapp-success-circular-line][class$=left] {
+    top: -.4375em;
+    left: -2.0635em;
+    transform: rotate(-45deg);
+    transform-origin: 3.75em 3.75em;
+    border-radius: 7.5em 0 0 7.5em;
+}
+
+.cronapp-icon.cronapp-success [class^=cronapp-success-circular-line][class$=right] {
+    top: -.6875em;
+    left: 1.875em;
+    transform: rotate(-45deg);
+    transform-origin: 0 3.75em;
+    border-radius: 0 7.5em 7.5em 0;
+}
+
+.cronapp-icon.cronapp-success .cronapp-success-ring {
+    position: absolute;
+    z-index: 2;
+    top: -.25em;
+    left: -.25em;
+    box-sizing: content-box;
+    width: 100%;
+    height: 100%;
+    border: .25em solid rgba(165, 220, 134, .3);
+    border-radius: 50%;
+}
+
+.cronapp-icon.cronapp-success .cronapp-success-fix {
+    position: absolute;
+    z-index: 1;
+    top: .5em;
+    left: 1.625em;
+    width: .4375em;
+    height: 5.625em;
+    transform: rotate(-45deg);
+}
+
+.cronapp-icon.cronapp-success [class^=cronapp-success-line] {
+    display: block;
+    position: absolute;
+    z-index: 2;
+    height: .3125em;
+    border-radius: .125em;
+    background-color: #a5dc86;
+}
+
+.cronapp-icon.cronapp-success [class^=cronapp-success-line][class$=tip] {
+    top: 2.875em;
+    left: .8125em;
+    width: 1.5625em;
+    transform: rotate(45deg);
+}
+
+.cronapp-icon.cronapp-success [class^=cronapp-success-line][class$=long] {
+    top: 2.375em;
+    right: .5em;
+    width: 2.9375em;
+    transform: rotate(-45deg);
+}
+
+.cronapp-icon.cronapp-success .cronapp-success-line-tip {
+    -webkit-animation: cronapp-animate-success-line-tip .75s;
+    animation: cronapp-animate-success-line-tip .75s;
+}
+
+.cronapp-icon.cronapp-success .cronapp-success-line-long {
+    -webkit-animation: cronapp-animate-success-line-long .75s;
+    animation: cronapp-animate-success-line-long .75s;
+}
+
+.cronapp-icon.cronapp-success .cronapp-success-circular-line-right {
+    -webkit-animation: cronapp-rotate-success-circular-line 4.25s ease-in;
+    animation: cronapp-rotate-success-circular-line 4.25s ease-in;
+}
+
+/* Warning */
+.cronapp-icon.cronapp-warning {
+    border-color: #ffed6b;
+    color: #ffc038;
+}
+
+/* Info */
+.cronapp-icon.cronapp-info {
+    border-color: #9de0f6;
+    color: #3fc3ee;
+}
+
+.cronapp-icon .cronapp-icon-content {
+    display: flex;
+    align-items: center;
+    font-size: 3.75em;
+    justify-content: center;
+
+    -webkit-animation: cronapp-hide .75s;
+    animation: cronapp-hide .75s
+}
+
+
+/* animação para abrir o modal */
+
+@-webkit-keyframes cronapp-show {
+    0% {
+        transform: scale(.7)
+    }
+    45% {
+        transform: scale(1.05)
+    }
+    80% {
+        transform: scale(.95)
+    }
+    100% {
+        transform: scale(1)
+    }
+}
+
+@keyframes cronapp-show {
+    0% {
+        transform: scale(.7)
+    }
+    45% {
+        transform: scale(1.05)
+    }
+    80% {
+        transform: scale(.95)
+    }
+    100% {
+        transform: scale(1)
+    }
+}
+
+
+/* animação para fechar o modal */
+
+@-webkit-keyframes cronapp-hide {
+    0% {
+        transform: scale(1);
+        opacity: 1
+    }
+    100% {
+        transform: scale(.5);
+        opacity: 0
+    }
+}
+
+@keyframes cronapp-hide {
+    0% {
+        transform: scale(1);
+        opacity: 1
+    }
+    100% {
+        transform: scale(.5);
+        opacity: 0
+    }
+}
+
+
+/* Success */
+
+@-webkit-keyframes cronapp-animate-success-line-tip {
+    0% {
+        top: 1.1875em;
+        left: .0625em;
+        width: 0
+    }
+    54% {
+        top: 1.0625em;
+        left: .125em;
+        width: 0
+    }
+    70% {
+        top: 2.1875em;
+        left: -.375em;
+        width: 3.125em
+    }
+    84% {
+        top: 3em;
+        left: 1.3125em;
+        width: 1.0625em
+    }
+    100% {
+        top: 2.8125em;
+        left: .8125em;
+        width: 1.5625em
+    }
+}
+
+@keyframes cronapp-animate-success-line-tip {
+    0% {
+        top: 1.1875em;
+        left: .0625em;
+        width: 0
+    }
+    54% {
+        top: 1.0625em;
+        left: .125em;
+        width: 0
+    }
+    70% {
+        top: 2.1875em;
+        left: -.375em;
+        width: 3.125em
+    }
+    84% {
+        top: 3em;
+        left: 1.3125em;
+        width: 1.0625em
+    }
+    100% {
+        top: 2.8125em;
+        left: .8125em;
+        width: 1.5625em
+    }
+}
+
+@-webkit-keyframes cronapp-animate-success-line-long {
+    0% {
+        top: 3.375em;
+        right: 2.875em;
+        width: 0
+    }
+    65% {
+        top: 3.375em;
+        right: 2.875em;
+        width: 0
+    }
+    84% {
+        top: 2.1875em;
+        right: 0;
+        width: 3.4375em
+    }
+    100% {
+        top: 2.375em;
+        right: .5em;
+        width: 2.9375em
+    }
+}
+
+@keyframes cronapp-animate-success-line-long {
+    0% {
+        top: 3.375em;
+        right: 2.875em;
+        width: 0
+    }
+    65% {
+        top: 3.375em;
+        right: 2.875em;
+        width: 0
+    }
+    84% {
+        top: 2.1875em;
+        right: 0;
+        width: 3.4375em
+    }
+    100% {
+        top: 2.375em;
+        right: .5em;
+        width: 2.9375em
+    }
+}
+
+@-webkit-keyframes cronapp-rotate-success-circular-line {
+    0% {
+        transform: rotate(-45deg)
+    }
+    5% {
+        transform: rotate(-45deg)
+    }
+    12% {
+        transform: rotate(-405deg)
+    }
+    100% {
+        transform: rotate(-405deg)
+    }
+}
+
+@keyframes cronapp-rotate-success-circular-line {
+    0% {
+        transform: rotate(-45deg)
+    }
+    5% {
+        transform: rotate(-45deg)
+    }
+    12% {
+        transform: rotate(-405deg)
+    }
+    100% {
+        transform: rotate(-405deg)
+    }
+}
+
+
+/* Error */
+
+@-webkit-keyframes cronapp-animate-error-x-mark {
+    0% {
+        margin-top: 1.625em;
+        transform: scale(.4);
+        opacity: 0
+    }
+    50% {
+        margin-top: 1.625em;
+        transform: scale(.4);
+        opacity: 0
+    }
+    80% {
+        margin-top: -.375em;
+        transform: scale(1.15)
+    }
+    100% {
+        margin-top: 0;
+        transform: scale(1);
+        opacity: 1
+    }
+}
+
+@keyframes cronapp-animate-error-x-mark {
+    0% {
+        margin-top: 1.625em;
+        transform: scale(.4);
+        opacity: 0
+    }
+    50% {
+        margin-top: 1.625em;
+        transform: scale(.4);
+        opacity: 0
+    }
+    80% {
+        margin-top: -.375em;
+        transform: scale(1.15)
+    }
+    100% {
+        margin-top: 0;
+        transform: scale(1);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes cronapp-animate-error-icon {
+    0% {
+        transform: rotateX(100deg);
+        opacity: 0
+    }
+    100% {
+        transform: rotateX(0);
+        opacity: 1
+    }
+}
+
+@keyframes cronapp-animate-error-icon {
+    0% {
+        transform: rotateX(100deg);
+        opacity: 0
+    }
+    100% {
+        transform: rotateX(0);
+        opacity: 1
+    }
+}