cronapp-framework-js 2.8.21 → 2.8.25

package/components/crn-three-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-three-container",
+    "text_pt_BR": "3 Colunas",
+    "text_en_US": "3 Columns",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-three-container.svg",
+    "description": "Três recipiente ao lado para inserir componentes",
+    "description_en_US": "Three container on the side for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-three-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-trhee-six-three-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-three-six-three-container",
+    "text_pt_BR": "3/6/3 Colunas",
+    "text_en_US": "3/6/3 Columns",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-three-six-three-container.svg",
+    "description": "Três recipiente ao lado para inserir componentes",
+    "description_en_US": "Three container on the side for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-three-six-three-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-two-container.components.json

@@ -0,0 +1,43 @@
+{
+    "name": "crn-two-container",
+    "text_pt_BR": "2 Colunas",
+    "text_en_US": "2 Columns",
+    "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-two-container.svg",
+    "description": "Dois recipiente ao lado para inserir componentes",
+    "description_en_US": "Two container on the side for inserting components",
+    "category": [
+        "LAYOUTS"
+    ],
+    "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/Component_Container/crn-two-container.template.html",
+    "wrapper": false,
+    "autoWrapper": true,
+    "properties": {
+        "class": {
+            "order": 9999
+        },
+        "ng-init": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-click": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-dblclick": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseenter": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mouseleave": {
+            "removable": true,
+            "type": "event"
+        },
+        "ng-mousemove": {
+            "removable": true,
+            "type": "event"
+        }
+    }
+}

package/components/crn-vertical-container.components.json

@@ -5,6 +5,10 @@
   "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-horizontal-container.svg",
   "description": "Dois recipiente empilhado para inserir componentes",
   "description_en_US": "Two stacked container for inserting components",
+  "category": [
+    "LAYOUTS"
+  ],
+  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/grid-vertical.template.html",
   "properties": {
     "class": {
       "order": 9999
@@ -37,12 +41,16 @@
       "type": "event"
     }
   },
-  "styles": [
-    {
-      "selector": "div#{id} div",
-      "text_pt_BR": "Geral",
-      "text_en_US": "General"
-    }
-  ],
-  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/grid-vertical.template.html"
-}
+  "forcedGroup": true,
+  "wrapper": false,
+  "autoWrapper": true,
+  "handleRules": {
+    "canIncrement": true,
+    "rules": [
+      {
+        "sourceHTML": "<div class=\"col-md-12\" data-container=\"true\" data-replace=\"true\">Content goes here</div> ",
+        "targetSelector": ":self"
+      }
+    ]
+  }
+}

package/components/templates/Component_Container/crn-eight-four-container.template.html

@@ -0,0 +1,4 @@
+<div class="eight-twelve-container">
+    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">2 Column</div>    
+</div>

package/components/templates/Component_Container/crn-four-eight-container.template.html

@@ -0,0 +1,4 @@
+<div class="four-twelve-container">
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" data-container="true" data-replace="true">2 Column</div>
+</div>

package/components/templates/Component_Container/crn-one-container.template.html

@@ -0,0 +1 @@
+<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-container="true" data-replace="true">1 Column</div>

package/components/templates/Component_Container/crn-three-container.template.html

@@ -0,0 +1,5 @@
+<div class="three-container">
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">2 Column</div>
+    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" data-container="true" data-replace="true">3 Column</div>
+</div>

package/components/templates/Component_Container/crn-three-six-three-container.template.html

@@ -0,0 +1,5 @@
+<div class="trhee-twelve-container">
+    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">2 Column</div>
+    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" data-container="true" data-replace="true">3 Column</div>
+</div>

package/components/templates/Component_Container/crn-two-container.template.html

@@ -0,0 +1,4 @@
+<div class="two-container">
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">1 Column</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">2 Column</div>
+</div>

package/components/templates/cron-autocomplete.designtime.html

@@ -1,6 +1,6 @@
-<div class="form-group">
-    <label>Label designtime</label>
+<div class="form-group" id="${COMPONENTID}">
+    <label for="cron-${COMPONENTID}">Label</label>
     <span class="k-widget k-autocomplete cronAutoComplete" style="width: 100%;">
-        <input class="cronAutoComplete k-input" placeholder="Selecione um Item" type="text">
+        <input class="cronAutoComplete k-input" type="text">
     </span>
 </div>

package/components/templates/grid-horizontal.template.html

@@ -1,2 +1,4 @@
-<div class="col-md-6" data-container="true" data-replace="true">Content goes here</div> 
-<div class="col-md-6" data-container="true" data-replace="true">Content goes here</div>
+<div class="layout-horizontal">
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">Content goes here</div>
+    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" data-container="true" data-replace="true">Content goes here</div>
+</div>

package/components/templates/grid-vertical.template.html

@@ -1,2 +1,4 @@
-<div class="col-md-12" data-container="true" data-replace="true">Content goes here</div> 
-<div class="col-md-12" data-container="true" data-replace="true">Content goes here</div>
+<div class="layout-vertical">
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-container="true" data-replace="true">Content goes here</div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-container="true" data-replace="true">Content goes here</div>
+</div>

package/components/templates/rating.template.html

@@ -1,9 +1,9 @@
 <div>
     <cronapp-rating ng-model="vars.evaluation${RANDOM}" icon-off="fa fa-star-o" xattr-default-value="">
-        <i style="font-size: 200%; color: #3A3A3A;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%; color: #3A3A3A;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%; color: #3A3A3A;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%; color: #3A3A3A;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
-        <i style="font-size: 200%; color: #3A3A3A;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
+        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
+        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
+        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
+        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
+        <i style="font-size: 200%;" icon-theme="color: #3A3A3A;"  icon-size="" class="component-holder fa fa-star"></i>
     </cronapp-rating>
-</div> 
+</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
+    }
+}