cronapp-framework-js 3.2.1 → 4.0.1

package/components/crn-anchor.components.json

@@ -90,6 +90,11 @@
       "removable": true,
       "type": "event"
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 5
+    },
     "id": {
       "order": 4
     },

package/components/crn-button.components.json

@@ -37,6 +37,11 @@
             "displayName_en_US": "Disabled",
             "displayName_pt_BR": "Desabilitado"
         },
+        "crn-tooltip": {
+          "displayName_pt_BR": "Tooltip",
+          "displayName_en_US": "Tooltip",
+          "order": 6
+        },
         "class": {
             "order": 9999
         },

package/components/crn-datepicker.components.json

@@ -13,6 +13,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-datetimepicker.components.json

@@ -19,6 +19,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-enterprise-autocomplete.components.json

@@ -18,6 +18,11 @@
         "class": {
             "order": 9999
         },
+        "crn-tooltip": {
+          "displayName_pt_BR": "Tooltip",
+          "displayName_en_US": "Tooltip",
+          "order": 2
+        },
         "id": {
             "order": 1
         }

package/components/crn-enterprise-checkbox.components.json

@@ -14,6 +14,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     },

package/components/crn-enterprise-combobox-multiple.components.json

@@ -21,6 +21,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     },

package/components/crn-enterprise-dynamic-autocomplete.components.json

@@ -18,6 +18,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-enterprise-dynamic-combobox.components.json

@@ -20,6 +20,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-icon.components.json

@@ -38,6 +38,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 3
+    },
     "id": {
       "order": 2
     }

package/components/crn-image.components.json

@@ -116,6 +116,11 @@
     "alt":{
       "order": 6
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 8
+    },
     "id": {
       "order": 7
     }

package/components/crn-input-password.components.json

@@ -17,6 +17,11 @@
         "class": {
             "order": 9999
         },
+        "crn-tooltip": {
+          "displayName_pt_BR": "Tooltip",
+          "displayName_en_US": "Tooltip",
+          "order": 2
+        },
         "id": {
             "order": 1
         }

package/components/crn-rating.components.json

@@ -15,6 +15,11 @@
     "id": {
       "order": 1
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "class": {
       "order": 9999
     },

package/components/crn-simple-text.components.json

@@ -15,6 +15,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     },

package/components/crn-slider.components.json

@@ -18,6 +18,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-text-component.components.json

@@ -28,6 +28,11 @@
       "displayName_en_US": "Lettering size",
       "order": 3
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 5
+    },
     "class": {
       "order": 9999
     },

package/components/crn-textarea.components.json

@@ -13,6 +13,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-textinput.components.json

@@ -14,6 +14,11 @@
     "class": {
       "order": 9999
     },
+    "crn-tooltip": {
+      "displayName_pt_BR": "Tooltip",
+      "displayName_en_US": "Tooltip",
+      "order": 2
+    },
     "id": {
       "order": 1
     }

package/components/crn-wizard.components.json

@@ -0,0 +1,134 @@
+{
+  "name": "crn-wizard",
+  "text_pt_BR": "Wizard Multi-steps",
+  "text_en_US": "Wizard Multi-steps",
+  "image": "/node_modules/cronapp-framework-js/img/cron-icon/crn-wizard.svg",
+  "description": "Navegação em steps usando Cronapp Kendo UI Wizard",
+  "description_en_US": "Multi-step navigation using Kendo UI Wizard",
+  "category": ["LAYOUTS"],
+  "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/wizard.template.html",
+  "properties": {
+    "class": { "order": 9999 },
+    "id": { "order": 1 },
+    "xattr-theme": {
+      "displayName_pt_BR": "Cor do botão",
+      "displayName_en_US": "Button color",
+      "type": "options",
+      "order": 4,
+      "default": "btn-default",
+      "values": [
+        {
+          "key": "btn-default",
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Default theme",
+          "color": "--btnDefault",
+          "borderColor": "--borderBtnDefault"
+        },
+        {
+          "key": "btn-primary",
+          "value_pt_BR": "Primário",
+          "value_en_US": "Primary",
+          "color": "--btnPrimary",
+          "borderColor": "--borderBtnPrimary"
+        },
+        {
+          "key": "btn-success",
+          "value_pt_BR": "Sucesso",
+          "value_en_US": "Success",
+          "color": "--btnSuccess",
+          "borderColor": "--borderBtnSuccess"
+        },
+        {
+          "key": "btn-danger",
+          "value_pt_BR": "Perigo",
+          "value_en_US": "Danger",
+          "color": "--btnDanger",
+          "borderColor": "--borderBtnDanger"
+        }
+      ]
+    }
+  },
+  "attributesForPreview": [
+    {
+      "name": "xattr-theme",
+      "type": "options",
+      "target": "class",
+      "values": [
+        {
+          "key": "btn-default",
+          "value_pt_BR": "Padrão do tema",
+          "value_en_US": "Default theme",
+          "color": "--btnDefault",
+          "borderColor": "--borderBtnDefault"
+        },
+        {
+          "key": "btn-primary",
+          "value_pt_BR": "Primário",
+          "value_en_US": "Primary",
+          "color": "--btnPrimary",
+          "borderColor": "--borderBtnPrimary"
+        },
+        {
+          "key": "btn-success",
+          "value_pt_BR": "Sucesso",
+          "value_en_US": "Success",
+          "color": "--btnSuccess",
+          "borderColor": "--borderBtnSuccess"
+        },
+        {
+          "key": "btn-danger",
+          "value_pt_BR": "Perigo",
+          "value_en_US": "Danger",
+          "color": "--btnDanger",
+          "borderColor": "--borderBtnDanger"
+        }
+      ]
+    }
+  ],
+  "styles": [
+    {
+      "selector": "div#{id} .nav-tabs",
+      "text_pt_BR": "Fundo do wizard",
+      "text_en_US": "Wizard background"
+    },
+    {
+      "selector": "div#{id} .nav-tabs li.active a",
+      "text_pt_BR": "Wizard Ativo",
+      "text_en_US": "Active Wizard"
+    },
+    {
+      "selector": "div#{id} .nav-tabs li a",
+      "text_pt_BR": "Wizard Padrão",
+      "text_en_US": "Default Wizard"
+    }
+  ],
+  "childrenProperties": [
+    {
+      "name": "xattr-theme",
+      "type": "options",
+      "selector": "button",
+      "displayName_pt_BR": "Tema do botão",
+      "displayName_en_US": "Button theme",
+      "order": 1
+    }
+  ],
+  "handleRules": {
+    "canOrder": true,
+    "canActivate": true,
+    "canIncrement": true,
+    "rules": [
+      {
+        "activeSelector": "ul.nav-wizard li.active",
+        "activeClass": "active",
+        "sourceHTML": "<li role=\"presentation\"><a data-target=\"#step${RANDOM}\" role=\"tab\" data-toggle=\"tab\" data-container=\"true\"><div class='step-circle'><span class='step-number'>Step</span></div><div class='step-title'>Novo Step</div></a></li>",
+        "targetSelector": "ul.nav-wizard"
+      },
+      {
+        "activeSelector": "div.tab-content .tab-pane.active",
+        "activeClass": "active",
+        "sourceHTML": "<div role=\"tabpanel\" class=\"tab-pane\" id=\"step${RANDOM}\"><div class=\"\" data-container=\"true\"></div></div>",
+        "targetSelector": "div.tab-content"
+      }
+    ]
+  }
+}

package/components/templates/anchor.template.html

@@ -1 +1 @@
-<a href="" class="cron-link color-default text-left col-md-12 col-lg-12 col-sm-12 col-xs-12" target="_self" data-replace="true" link-theme="color-default">Link</a>
+<a href="" class="cron-link color-default text-left col-lg-2 col-md-1 col-sm-12 col-xs-12" target="_self" data-replace="true" link-theme="color-default">Link</a>

package/components/templates/social-button-bar.template.html

@@ -1,7 +1,7 @@
 <div class="component-holder ng-binding ng-scope col-xs-12 col-md-12" data-component="crn-social-login" id="crn-social-login${RANDOM}">
   <ul class="list-inline center-block text-center">
     <li data-container="true">
-      <div action="/signin/facebook" method="POST" id="facebookContainer">
+      <div action="/oauth2/authorization/facebook" method="GET" id="facebookContainer">
         <input type="hidden" name="scope" value="email,public_profile">
         <a title="Facebook" role="button" onclick="cronapi.internal.loginSocial('facebookContainer');">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
@@ -11,7 +11,7 @@
       </div>
     </li>
     <li data-container="true">
-      <div action="/signin/github" method="POST" id="githubContainer">
+      <div action="/oauth2/authorization/github" method="GET" id="githubContainer">
         <input type="hidden" name="scope" value="email,public_profile">
         <a title="GitHub" role="button" onclick="cronapi.internal.loginSocial('githubContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
@@ -21,7 +21,7 @@
       </div>
     </li>
     <li data-container="true">
-      <div action="/signin/linkedin" method="POST" id="linkedinContainer">
+      <div action="/oauth2/authorization/linkedin" method="GET" id="linkedinContainer">
         <input type="hidden" name="scope" value="r_emailaddress">
         <a title="LinkedIn" role="button" onclick="cronapi.internal.loginSocial('linkedinContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
@@ -31,7 +31,7 @@
       </div>
     </li>
     <li data-container="true">
-      <div action="/signin/google" method="POST" id="googleContainer">
+      <div action="/oauth2/authorization/google" method="GET" id="googleContainer">
         <input type="hidden" name="scope" value="email">
         <a title="Google" role="button" onclick="cronapi.internal.loginSocial('googleContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
@@ -41,7 +41,7 @@
       </div>
     </li>
     <li data-container="true">
-      <div action="/signin/cronapp" method="POST" id="cronappContainer">
+      <div action="/oauth2/authorization/cronapp" method="GET" id="cronappContainer">
         <input type="hidden" name="scope" value="email">
         <a title="CronApp" role="button" onclick="cronapi.internal.loginSocial('cronappContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
@@ -51,4 +51,4 @@
       </div>
     </li>
   </ul>
-</div>
+</div>

package/components/templates/wizard.template.html

@@ -0,0 +1,65 @@
+<div class="ctn-wizard" crn-wizard>
+  <ul class="nav-wizard" role="tablist" id="wizard-tablist">
+    <li role="presentation" class="active">
+      <a data-target="#step1" role="tab" data-toggle="tab" data-container="true">
+        <div class="step-circle">
+          <span class="step-number">1</span>
+        </div>
+        <div class="step-title">Step 1</div>
+      </a>
+    </li>
+    <li role="presentation">
+      <a data-target="#step2" role="tab" data-toggle="tab" data-container="true">
+        <div class="step-circle">
+          <span class="step-number">2</span>
+        </div>
+        <div class="step-title">Step 2</div>
+      </a>
+    </li>
+    <li role="presentation">
+      <a data-target="#step3" role="tab" data-toggle="tab" data-container="true">
+        <div class="step-circle">
+          <span class="step-number">3</span>
+        </div>
+        <div class="step-title">Step 3</div>
+      </a>
+    </li>
+  </ul>
+  <div class="tab-content" id="wizard-tabcontent">
+    <div role="tabpanel" class="tab-pane active" id="step1">
+      <div data-container="true" data-replace="true"></div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="step2">
+      <div data-container="true" data-replace="true"></div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="step3">
+      <div data-container="true" data-replace="true"></div>
+    </div>
+  </div>
+  <div class="wizard-buttons">
+    <div class="step-counter"><span id="current-step">1</span> de <span id="total-steps">{{ totalSteps }}</span></div>
+    <div class="ctrl-button">
+      <button
+        class="btn k-button btn-block btn-default"
+        ng-click=""
+        xattr-fullsize="btn-block"
+        xattr-theme="btn-default"
+        xattr-disabled=""
+        id="prev-step"
+        ng-click="scope.goToStep(currentStep - 1)"
+        ng-disabled="currentStep === 1 || requiredInvalid"
+        ng-class="{'btn-primary': theme === 'primary', 'btn-default': theme === 'default'}"
+      >
+        <span>Voltar</span>
+      </button>
+
+      <button class="k-button" id="next-step" ng-click="scope.goToStep(currentStep + 1)" ng-disabled="nextButtonDisabled" ng-class="{'btn-primary': theme === 'primary', 'btn-default': theme === 'default'}">
+        <span>Avançar</span>
+      </button>
+
+      <button class="btn k-button" id="finish-wizard" ng-click="scope.finishWizard()" ng-disabled="requiredInvalid" ng-class="{'btn-primary': theme === 'primary', 'btn-default': theme === 'default'}">
+        <span>Concluir</span>
+      </button>
+    </div>
+  </div>
+</div>

package/css/themes/custom/cerulean/custom-cerulean.css

@@ -967,4 +967,33 @@ td.k-state-focused.k-state-selected {
 
 .k-window-titlebar {
     background: transparent;
-}
+}
+
+/*wizard*/
+.ctn-wizard .nav-wizard > li.active .step-title,
+.ctn-wizard .nav-wizard > li.completed .step-title {
+    font-weight: bold;
+    color: var(--colorPrimary40, #5665be);
+}
+
+.ctn-wizard .nav-wizard > li.active .step-circle,
+.ctn-wizard .nav-wizard > li.completed .step-circle {
+    background-color: var(--colorPrimary40, #5665be);
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.ctn-wizard .step-circle {
+    width: 40px;
+    height: 40px;
+    background-color: var(--textColorPrimary40, #ffffff);
+    color: var(--colorPrimary40, #5665be);
+    border-radius: 50%;
+    border: 2px solid var(--colorPrimary40, #5665be);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 5px auto;
+    position: relative;
+    z-index: 1;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}

package/css/themes/custom/cosmo/custom-cosmo.css

@@ -1161,4 +1161,46 @@ td.k-state-focused.k-state-selected {
 
 .cardinput {
     padding: 0;
-}
+}
+
+/*wizard*/
+.ctn-wizard .nav-wizard > li.active .step-circle,
+.ctn-wizard .nav-wizard > li.completed .step-circle {
+    background-color: var(--colorPrimary40, #2780e3);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.ctn-wizard .step-circle {
+    width: 40px;
+    height: 40px;
+    background-color: var(--textColorDefault40, #ffffff);
+    color: var(--colorPrimary40, #2780e3);
+    border-radius: 50%;
+    border: 2px solid var(--colorPrimary40, #2780e3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 5px auto;
+    position: relative;
+    z-index: 1;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.ctn-wizard .nav-wizard > li.active .step-circle::after {
+    content: '';
+    position: absolute;
+    top: -7px;
+    left: -7px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 2px solid var(--colorPrimary40, #2780e3);
+    z-index: -1;
+    transition: border-color 0.3s ease;
+}
+
+.ctn-wizard .nav-wizard > li.active .step-title,
+.ctn-wizard .nav-wizard > li.completed .step-title {
+    font-weight: bold;
+    color: var(--colorPrimary40, #2780e3);
+}

package/css/themes/custom/cyborg/custom-cyborg.css

@@ -1501,4 +1501,46 @@ td.k-state-focused.k-state-selected {
 
 .k-scheduler .k-scheduler-toolbar ul .k-nav-current.k-state-hover a {
     background: transparent;
-}
+}
+
+/*wizard*/
+.ctn-wizard .nav-wizard>li.active .step-circle::after {
+    content: '';
+    position: absolute;
+    top: -7px;
+    left: -7px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 2px solid var(--colorDefault40, #424242);
+    z-index: -1;
+    transition: border-color 0.3s ease;
+}
+
+.ctn-wizard .nav-wizard>li.active .step-circle, 
+.ctn-wizard .nav-wizard>li.completed .step-circle {
+    background-color: var(--colorDefault40, #424242);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.ctn-wizard .step-circle {
+    width: 40px;
+    height: 40px;
+    background-color: var(--textColorDefault40, #ffffff);
+    color: var(--colorDefault40, #424242);
+    border-radius: 50%;
+    border: 2px solid var(--colorDefault40, #424242);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 5px auto;
+    position: relative;
+    z-index: 1;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.ctn-wizard .nav-wizard>li.active .step-title, 
+.ctn-wizard .nav-wizard>li.completed .step-title {
+    font-weight: bold;
+    color: var(--colorDefault40, #424242);
+}

package/css/themes/custom/darkly/custom-darkly.css

@@ -1224,4 +1224,46 @@ td.k-state-focused.k-state-selected,
 
 .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
     border-top-color: var(--colorNeutral00, #ffffff)
-}
+}
+
+/*wizard*/
+.ctn-wizard .nav-wizard>li.active .step-circle::after {
+    content: '';
+    position: absolute;
+    top: -7px;
+    left: -7px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 2px solid var(--colorSuccess40, #00bc8c);
+    z-index: -1;
+    transition: border-color 0.3s ease;
+}
+
+.ctn-wizard .nav-wizard>li.active .step-circle, 
+.ctn-wizard .nav-wizard>li.completed .step-circle {
+    background-color: var(--colorSuccess40, #00bc8c);
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.ctn-wizard .step-circle {
+    width: 40px;
+    height: 40px;
+    background-color: var(--textColorSuccess40, #ffffff);
+    color: var(--colorSuccess40, #00bc8c);
+    border-radius: 50%;
+    border: 2px solid var(--colorSuccess40, #00bc8c);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 5px auto;
+    position: relative;
+    z-index: 1;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.ctn-wizard .nav-wizard>li.active .step-title, 
+.ctn-wizard .nav-wizard>li.completed .step-title {
+    font-weight: bold;
+    color: var(--colorSuccess40, #00bc8c);
+}