cronapp-framework-js 3.0.0 → 3.1.0-SP.2

package/components/crn-dynamic-file.components.json

@@ -6,8 +6,9 @@
   "description": "Estrutura para armazenar arquivos na fonte de dados",
   "description_en_US": "Structure for storing file in data source",
   "category": [
-      "INPUTS", "FORMS"
+    "INPUTS", "FORMS"
   ],
+  "autoWrapper": false,
   "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/dynamicfile.template.html",
   "styles": [
     {
@@ -38,6 +39,36 @@
     },
     "id": {
       "order": 3
+    },
+    "onclick": {
+      "type": "event"
+    },
+    "target": {
+      "removable": false,
+      "type": "list",
+      "options": [
+        {
+          "key": "_blank",
+          "value": "Nova janela"
+        },
+        {
+          "key": "_self",
+          "value": "Mesma janela"
+        },
+        {
+          "key": "_parent",
+          "value": "Janela pai"
+        },
+        {
+          "key": "_top",
+          "value": "Top"
+        }
+      ]
+    },
+    "href": {
+      "removable": false,
+      "type": "projectResource",
+      "resourceType": "text/html"
     }
   },
   "childrenProperties": [
@@ -69,38 +100,38 @@
       "type": "list",
       "selector": "div[accept-file]",
       "options": [
-            {
-              "value": "All",
-              "value_pt_BR": "Todos",
-              "key": "'*.*'"
-            },
-            {
-              "value": "Audio",
-              "value_pt_BR": "Áudio",
-              "key": "'audio/*'"
-            },
-            {
-              "value": "Image",
-              "value_pt_BR": "Imagem",
-              "key": "'image/*'"
-            },
-            {
-              "value": "Video",
-              "value_pt_BR": "Vídeo",
-              "key": "'video/*'"
-            },
-            {
-              "value": "PDF",
-              "key": "'.pdf'"
-            },
-            {
-              "value": "Word (doc/docx)",
-              "key": "'.doc,.docx'"
-            },
-            {
-              "value": "Excel (xls/xlsx)",
-              "key": "'.xls,.xlsx'"
-            }
+        {
+          "value": "All",
+          "value_pt_BR": "Todos",
+          "key": "'*.*'"
+        },
+        {
+          "value": "Audio",
+          "value_pt_BR": "Áudio",
+          "key": "'audio/*'"
+        },
+        {
+          "value": "Image",
+          "value_pt_BR": "Imagem",
+          "key": "'image/*'"
+        },
+        {
+          "value": "Video",
+          "value_pt_BR": "Vídeo",
+          "key": "'video/*'"
+        },
+        {
+          "value": "PDF",
+          "key": "'.pdf'"
+        },
+        {
+          "value": "Word (doc/docx)",
+          "key": "'.doc,.docx'"
+        },
+        {
+          "value": "Excel (xls/xlsx)",
+          "key": "'.xls,.xlsx'"
+        }
       ]
     },
     {
@@ -154,4 +185,4 @@
       "type": "event"
     }
   ]
-}
+}

package/components/crn-dynamic-menu.components.json

@@ -31,27 +31,6 @@
     "options": {
       "displayName_pt_BR": "Configuração",
       "displayName_en_US": "Configuration"
-    },
-    "multilevel-action": {
-      "removable": false,
-      "selector": "cron-dynamic-menu",
-      "displayName_pt_BR": "Ação do multinível",
-      "displayName_en_US": "Multilevel action",
-      "childrenProperty": true,
-      "type": "list",
-      "options": [
-        {
-          "key": "hover",
-          "value_pt_BR": "Ao passar o mouse",
-          "value_en_US": "Hover"
-        },
-        {
-          "key": "click",
-          "value_pt_BR": "Clique",
-          "value_en_US": "Click"
-        }
-      ],
-      "order": 2
     }
   },
   "styles": [

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

@@ -324,6 +324,12 @@
       "type": "logic",
       "displayName_pt_BR": "Ocultar Item Selecionado",
       "displayName_en_US": "Hide Selected Item"
+    },
+    {
+      "name": "id",
+      "selector": "cron-multi-select",
+      "type": "text",
+      "onSave": "javascript:(value)=> {this.currentObject.parent().find('label').attr('for', arguments[0]); return arguments[0];}"
     }
   ],
   "styles": [

package/components/crn-navbar.components.json

@@ -17,7 +17,7 @@
     "xattr-class": {
       "order": 998,
       "fixed": true,
-      "onSave": "javascript:function(){ let parent=this.currentObject.parent(),menuVertical=parent.find(\"#main-nav-bar\"),uiView=parent.find(\"[ui-view]\");arguments[0].indexOf(\"horizontal\")>-1?(uiView.removeClass(\"main-view-vertical\").removeClass(\"main-view-retratil\").addClass(\"main-view-horizontal\"),menuVertical.removeClass(\"crn-navigator-retratil\").removeClass(\"collapsible-menu-hide\"),parent.find(\".main-title\").removeClass(\"hide\"),parent.find(\"#checkCollapsibleMenu\").remove(),parent.find(\".labelCollapsibleMenu\").remove()):arguments[0].indexOf(\"retratil\")>-1?(uiView.removeClass(\"main-view-horizontal\").removeClass(\"main-view-vertical\").addClass(\"main-view-vertical\").addClass(\"main-view-retratil\"),parent.find(\".main-title\").addClass(\"hide\"),menuVertical.addClass(\"collapsible-menu-hide\"),menuVertical[0].insertAdjacentHTML(\"beforebegin\",'<input type=\"checkbox\" id=\"checkCollapsibleMenu\"><label for=\"checkCollapsibleMenu\" class=\"labelCollapsibleMenu\"><i class=\"glyphicon glyphicon-menu-right\" id=\"iconCollapsibleMenu\"></i></label>')):arguments[0].indexOf(\"vertical\")>-1&&(uiView.removeClass(\"main-view-horizontal\").removeClass(\"main-view-retratil\").addClass(\"main-view-vertical\"),menuVertical.removeClass(\"crn-navigator-retratil\").removeClass(\"collapsible-menu-hide\"),parent.find(\".main-title\").removeClass(\"hide\"),parent.find(\"#checkCollapsibleMenu\").remove(),parent.find(\".labelCollapsibleMenu\").remove()); return arguments[0]; }",
+      "onSave": "javascript:function(){ let currentElementId = this.currentObject.attr('id'); let selectedPosition = arguments[0]; let parent = this.currentObject.parent(); let menuVertical = this.currentObject; let uiView = parent.find('[ui-view]'); if(uiView.length === 0) { uiView = parent.parent().find('[ui-view]');} if (selectedPosition.indexOf('horizontal') > -1) { uiView.removeClass('main-view-vertical').removeClass('main-view-retratil').addClass('main-view-horizontal'); menuVertical.removeClass('crn-navigator-retratil').removeClass('crn-navigator-vertical').removeClass('collapsible-menu-hide'); parent.find('.main-title').removeClass('hide'); parent.find('#checkCollapsibleMenu').remove(); parent.find('.labelCollapsibleMenu').remove(); parent.removeClass('crn-navigator-vertical').removeClass('crn-navigator-retratil').removeClass('crn-navigator-retratil-left').addClass('crn-navigator-horizontal'); } else if (selectedPosition.indexOf('retratil') > -1) { uiView.removeClass('main-view-horizontal').addClass('main-view-retratil').addClass('main-view-vertical'); parent.find('.main-title').addClass('hide'); parent.removeClass('crn-navigator-horizontal').removeClass('crn-navigator-vertical').addClass('crn-navigator-retratil').addClass('crn-navigator-retratil-left'); menuVertical.addClass('collapsible-menu-hide'); menuVertical.addClass('crn-navigator-vertical'); menuVertical.addClass('crn-navigator-retratil'); menuVertical[0].insertAdjacentHTML('beforebegin', '<input type=\"checkbox\" id=\"checkCollapsibleMenu\"><label for=\"checkCollapsibleMenu\" class=\"labelCollapsibleMenu\"><i class=\"glyphicon glyphicon-menu-right\" id=\"iconCollapsibleMenu\"></i></label>'); parent.find('[main-nav-bar]').removeClass('crn-navigator-vertical'); } else if (selectedPosition.indexOf('vertical') > -1) { uiView.removeClass('main-view-horizontal').removeClass('main-view-retratil').addClass('main-view-vertical'); menuVertical.removeClass('crn-navigator-retratil').removeClass('collapsible-menu-hide'); parent.find('.main-title').removeClass('hide'); parent.find('#checkCollapsibleMenu').remove(); parent.find('.labelCollapsibleMenu').remove(); parent.removeClass('crn-navigator-horizontal').addClass('crn-navigator-vertical'); } return selectedPosition; }",
       "displayName_pt_BR": "Posição",
       "displayName_en_US": "Position",
       "selector": "div"
@@ -30,6 +30,14 @@
       "displayName_en_US": "Collapsible menu type",
       "selector": "div"
     },
+    "expand-sub-menu": {
+      "order": 1000,
+      "fixed": true,
+      "onSave": "javascript:function(){ let selected = arguments[0]; return selected;  }",
+      "displayName_pt_BR": "Expandir sub-menu",
+      "displayName_en_US": "Expand sub-menu",
+      "selector": "div"
+    },
     "id": {
       "order": 2
     }
@@ -73,6 +81,23 @@
           "icon": "mdi mdi-chevron-right"
         }
       ]
+    },
+    {
+      "name": "expand-sub-menu",
+      "type": "options",
+      "target": "class",
+      "values": [
+        {
+          "key": "submenu-click",
+          "value_pt_BR": "Ao clicar",
+          "value_en_US": "On clicking"
+        },
+        {
+          "key": "submenu-hover",
+          "value_pt_BR": "Ao passar o mouse",
+          "value_en_US": "Mouse over"
+        }
+      ]
     }
   ],
   "childrenProperties": [

package/components/crn-start.components.json

@@ -6,6 +6,9 @@
     "screen-params": {
       "removable": false
     },
+    "screen-variables": {
+      "removable": false
+    },
     "primary-datasource": {
       "displayName_pt_BR": "Fonte de dados principal",
       "displayName_en_US": "Primary datasource",

package/components/cron-breadcrumbs.components.json

@@ -12,7 +12,7 @@
   ],
   "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-breadcrumbs.template.html",
   "designTimeHTMLURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-breadcrumbs.designtime.html",
-  "designTimeSelector": ":self",
+  "designTimeSelector": "cron-breadcrumbs",
   "designTimeDynamic": true,
   "wrapper": false,
   "forcedGroup": true,
@@ -41,16 +41,20 @@
       "name": "crn-delimiter-icon",
       "type": "options",
       "target": "class",
+      "designTimeSelector": ".k-breadcrumb-delimiter-icon",
+      "designTimeTarget"  : "class",
       "values": [
         {
           "key": "arrow-chevron-right",
           "value_pt_BR": "Seta",
-          "value_en_US": "Arrow"
+          "value_en_US": "Arrow",
+          "designTimeKey": "k-i-arrow-chevron-right"
         },
         {
           "key": "line",
           "value_pt_BR": "Linha",
-          "value_en_US": "Line"
+          "value_en_US": "Line",
+          "designTimeKey": "k-i-line"
         }
       ]
     },

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-<span tabindex="-1" role="presentation" class="k-widget k-autocomplete cronAutoComplete k-autocomplete-clearable k-state-default" style="width: 100%;">
+<div><span tabindex="-1" role="presentation" class="k-widget k-autocomplete cronAutoComplete k-autocomplete-clearable k-state-default" style="width: 100%;">
     <input style="" id="cron-crn-enterprise-autocomplete-169514" required="" class="cronAutoComplete k-input" placeholder="Select an item" type="text" autocomplete="off">
     <span unselectable="on" class="k-icon k-clear-value k-i-close" title="clear" role="button" tabindex="-1"></span>
-</span>
+</span></div>

package/components/templates/cron-combobox-multiple.template.html

@@ -1,4 +1,4 @@
-<div class="form-group combobox-default" combobox-theme="combobox-default">
+<div class="form-group combobox-default" combobox-theme="combobox-default" id="cron-${COMPONENTID}">
     <label for="cron-${COMPONENTID}-container">Label</label>
     <cron-multi-select options="{}" ng-required="false" id="cron-${COMPONENTID}" ng-model="vars.multipleCombobox${RANDOM}" class="crn-select form-control k-content">
     </cron-multi-select>

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

@@ -30,7 +30,7 @@
             <th ng-repeat="item in attrs.options.columns" ng-if="item.visible" scope="col" role="columnheader" data-field="email" aria-haspopup="true" rowspan="1" data-title="Email" data-index="0" id="2b4d0eb0-1cc1-4f89-927b-b8c1fbcf430e" style="text-align: left;" class="k-header k-with-icon k-filterable" data-role="columnsorter">
                 <label ng-if="item.dataType == 'Selectable'" class="k-checkbox-label k-no-text"></label>
                 <a ng-if="item.dataType !== 'Selectable'" class="k-link" href="#">{{item.headerText?parseProperty(item.headerText):''}}</a>
-                <a ng-if="item.filterable && tem.dataType != 'Customized' && item.dataType != 'Command' && item.dataType !== 'Selectable'" class="k-grid-filter" href="#" title="Filtrar" aria-label="Filtrar" tabindex="0">
+                <a ng-if="item.filterable && tem.dataType != 'Customized' && item.dataType != 'Command' && item.dataType !== 'Selectable' && item.dataType !== 'GroupedButtons'" class="k-grid-filter" href="#" title="Filtrar" aria-label="Filtrar" tabindex="0">
                     <span class="k-icon k-i-filter"></span>
                 </a>
             </th>
@@ -39,13 +39,14 @@
         <tbody role="rowgroup">
         <tr data-uid="59430dcb-6ccd-497d-954d-9b5569408cb4" role="row">
 
-            <td ng-repeat="item in attrs.options.columns | filter: {visible:true}" role="gridcell" class="{{item.dataType == 'Command'|| item.dataType == 'Customized'?'k-command-cell':''}}">
+            <td ng-repeat="item in attrs.options.columns | filter: {visible:true}" role="gridcell" class="{{item.dataType == 'Command'|| item.dataType == 'Customized' || item.dataType == 'GroupedButtons'?'k-command-cell':''}}">
 
                 <label ng-if="item.dataType == 'Selectable'" class="k-checkbox-label k-no-text"></label>
-                <span ng-if="item.dataType != 'Customized' && item.dataType != 'Command'">{{item.headerText?parseProperty(item.headerText):''}}</span>
+                <span ng-if="item.dataType != 'Customized' && item.dataType != 'Command' && item.dataType != 'GroupedButtons'">{{item.headerText?parseProperty(item.headerText):''}}</span>
                 <a ng-if="item.dataType == 'Command' && (item.command == 'edit|destroy' || item.command == 'edit')" role="button" class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-i-edit"></span> </a>
                 <a ng-if="item.dataType == 'Command' && (item.command == 'edit|destroy' || item.command == 'destroy')" role="button" class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-i-close"></span> </a>
-                <a ng-if="item.dataType == 'Customized'" href="" class="k-button k-custom-command k-button-with-label k-grid-f06e"><span class="{{item.iconClass}}"></span>&nbsp;{{item.headerText?parseProperty(item.headerText):''}}</a>
+                <a ng-if="item.dataType == 'Customized'" style="width:{{item.width}}px" href="" class="k-button k-custom-command {{item.label != ''?'k-button-with-label':''}} btn {{item.theme}} k-grid-f06e"><span class="{{item.iconClass}}"></span>{{item.label?' ' + parseProperty(item.label):''}}</a>
+                <a ng-if="item.dataType == 'GroupedButtons'" ng-repeat="item2 in item.buttonColumns" style="width:{{item2.width}}px" href="" class="k-button k-custom-command {{item2.label != ''?'k-button-with-label':''}} btn {{item2.theme}} k-grid-f06e"><span class="{{item2.iconClass}}"></span>{{item2.label?' ' + parseProperty(item2.label):''}}</a>
             </td>
         </tr>
         </tbody>

package/components/templates/dynamicfile.designtime.html

@@ -0,0 +1,5 @@
+<div id="file-${RANDOM}" dynamic-file="" ng-model="vars.dynamicfile${RANDOM}" class="dynamic-image-container" style="padding: 50px 0;" ng-required="false" ngf-max-size="5MB" ngf-accept="'*.*'">
+  <button id="file-${RANDOM}-button" class="btn" ngf-drop ngf-select ngf-change="cronapi.internal.uploadFile('vars.dynamicfile${RANDOM}', $file, 'uploadprogress${RANDOM}', undefined, $invalidFiles)" style="position: absolute; left: 0;">
+    <span>Clique ou arraste um arquivo</span>
+  </button>
+</div>

package/components/templates/dynamicfile.template.html

@@ -1,6 +1,23 @@
 <div class="form-group">
     <label for="file-${RANDOM}-button">Arquivo</label>
-    <div id="file-${RANDOM}" dynamic-file="" ng-model="vars.dynamicfile${RANDOM}" class="dynamic-image-container" ng-required="false" max-file-size="5MB" accept-file="'*.*'">
-      {{"template.crud.clickOrDragAnFile" | translate}}
+    <div class="dynamic-input-upload">
+        <div class="component-holder ng-scope" id="crn-button-${RANDOM}">
+            <div ng-if="!vars.dynamicfile${RANDOM}">
+                <input id="file-${RANDOM}-input" type="text" ng-model="vars.dynamicfile${RANDOM}" class="hidden">
+                <button id="file-${RANDOM}-button" class="btn k-button btn-default" ng-click="" xattr-fullsize="" xattr-theme="btn-default" xattr-disabled="" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.uploadFile('vars.dynamicfile${RANDOM}', $file, 'uploadprogress${RANDOM}', undefined, $invalidFiles)" ngf-max-size="5MB" ngf-pattern="'*.*'" ngf-accept="'*.*'">                                    
+                    <span>Clique ou arraste um arquivo</span>
+                </button>
+                <div class="progress hidden" data-type="bootstrapProgress" id="uploadprogress${RANDOM}">
+                    <div class="progress-bar" role="progressbar"></div>
+                </div>
+            </div>
+            <div ng-if="vars.dynamicfile${RANDOM}" class="upload-image-component-attribute ng-scope">
+                <div ng-bind-html="cronapi.internal.generatePreviewDescriptionByte(vars.dynamicfile${RANDOM}, undefined)" class="ng-binding"></div>
+                <div class="btn-container">
+                    <a href="javascript:void(0)" ng-click="cronapi.internal.downloadFileEntity(vars,'dynamicfile${RANDOM}', undefined, undefined)">Baixar</a>
+                    <span class="cancel-btn" ng-click="vars.dynamicfile${RANDOM} = null">Cancelar</span>
+                </div>
+            </div>
+        </div>
     </div>
-</div>
+</div>

package/css/app.css

@@ -403,4 +403,9 @@ img[src='undefined'] {
 
 div.k-loading-pdf-mask > div.ng-scope.k-grid.k-widget.k-display-block.k-editable {
     width: 100%;
+}
+
+.k-dropdown-wrap.k-state-focused {
+    box-shadow: 0 0 4px 2px rgba(0, 123, 255, 0.5) !important;
+    border-color: #80bdff !important;
 }