@kigi/components 1.5.4 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.5.4",
+  "version": "1.5.7",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {
@@ -46,6 +46,7 @@
     "angular-sanitize": "1.7.9",
     "angular-scroll-animate": "^0.9.9",
     "angular-timeline": "^1.7.0",
+    "angular-ui-ace": "^0.2.3",
     "angular-ui-bootstrap": "^2.5.6",
     "angular-vs-repeat": "^2.0.14",
     "cep-promise": "^3.0.3",
@@ -70,7 +71,8 @@
     "progressbar.js": "^1.0.1",
     "raphael": "^2.2.8",
     "sugarss": "^2.0.0",
-    "webcamjs": "^1.0.25"
+    "webcamjs": "^1.0.25",
+    "ace-builds": "1.3.3"
   },
   "devDependencies": {
     "@types/angular": "^1.6.27",

package/src/components/index.ts

@@ -8,6 +8,9 @@ import './common.scss'
 import '../helpers/locale'
 import 'progressbar.js/dist/progressbar.min.js'
 import 'angular-vs-repeat'
+import 'ace-builds/src-min-noconflict/ace'
+import 'ace-builds/src-min-noconflict/ext-language_tools'
+import 'angular-ui-ace'
 import * as ngSanitize from 'angular-sanitize'
 import * as ngAnimate from 'angular-animate'
 import { MbgDynamicHTML } from '../helpers/dynamic-html/dynamic-html'
@@ -80,6 +83,7 @@ import { mbgRepasseModule } from './mbg-repasse'
 import { mbgTextEditorModule } from './mbg-text-editor'
 import 'jodit/src/langs/pt_br.js'
 import { NgMaskIe } from '../helpers/ie-directive/ie-directive'
+import { mbgAceEditorModule } from './mbg-ace-editor'
 
 if (!window['$']) {
   window['$'] = $
@@ -88,6 +92,7 @@ if (!window['$']) {
 
 const mbgComponentsModule = angular
   .module('mbg.components', [
+    'ui.ace',
     'ui.utils.masks',
     'ngEasyInfiniteScroll',
     'ui.bootstrap',
@@ -143,6 +148,7 @@ const mbgComponentsModule = angular
     mbgTimelineModule,
     mbgRepasseModule,
     mbgTextEditorModule,
+    mbgAceEditorModule,
   ])
   .config(appConfig)
   .service('mbgAlert', MbgAlert)

package/src/components/mbg-ace-editor/index.ts

@@ -0,0 +1,8 @@
+import * as angular from 'angular'
+import { mbgAceEditor } from './mbg-ace-editor'
+
+const mbgAceEditorModule = angular
+  .module('mbg.components.mbgAceEditor', [])
+  .component('mbgAceEditor', mbgAceEditor).name
+
+export { mbgAceEditorModule }

package/src/components/mbg-ace-editor/interface/mbg-ace-editor-variables.interface.ts

@@ -0,0 +1,5 @@
+export interface IMbgAceEditorVariables {
+  caption?: string
+  value?: string
+  meta?: string
+}

package/src/components/mbg-ace-editor/mbg-ace-editor.html

@@ -0,0 +1,5 @@
+<div class="mbg-ace-editor-wrapper"
+     ng-style="{'height': $ctrl.height || '84px'}">
+    <div ui-ace="$ctrl.aceConfig"
+         ng-model="$ctrl.ngModel"></div>
+</div>

package/src/components/mbg-ace-editor/mbg-ace-editor.scss

@@ -0,0 +1,16 @@
+.mbg-ace-editor-wrapper {
+    border: 1px solid #ddd;
+    background: #fff;
+    border-radius: 5px;
+    padding: 8px 10px;
+
+    .ace_editor {
+        height: 100%;
+        border: none !important;
+
+        .ace_cursor {
+            border-left: 1px solid !important;
+            height: 20px !important;
+        }
+    }
+}

package/src/components/mbg-ace-editor/mbg-ace-editor.ts

@@ -0,0 +1,66 @@
+import './mbg-ace-editor.scss'
+import template from './mbg-ace-editor.html'
+import { IMbgAceEditorVariables } from './interface/mbg-ace-editor-variables.interface'
+
+class MbgAceEditorController {
+  private aceConfig: any
+  private ngChange
+  private ngModel
+  private variables: IMbgAceEditorVariables[]
+  private editorRef
+
+  constructor(private $scope, private $element, private $attrs) {}
+
+  $onInit() {
+    this.aceConfig = {
+      onLoad: this.onLoadEditor,
+    }
+  }
+
+  onLoad(editor, variables) {
+    this.editorRef = editor
+    const ace = (<any>window).ace
+    const languageTools = ace.require('ace/ext/language_tools')
+    const customCompleter = {
+      getCompletions: (_, __, ___, ____, callback) => {
+        callback(null, variables)
+      },
+    }
+    languageTools.addCompleter(customCompleter)
+    this.editorRef.completers = [customCompleter]
+    this.editorRef.setOptions({
+      enableBasicAutocompletion: true,
+      fontSize: '14px',
+      enableSnippets: true,
+      enableLiveAutocompletion: false,
+      showLineNumbers: false,
+      showFoldWidgets: false,
+      printMarginColumn: -1,
+      showPrintMargin: false,
+      displayIndentGuides: false,
+      showGutter: false,
+      highlightActiveLine: false,
+    })
+    this.editorRef.$blockScrolling = Infinity
+  }
+
+  onLoadEditor = (editor) => {
+    const variables = this.variables
+    this.onLoad(editor, variables)
+  }
+}
+
+MbgAceEditorController['$inject'] = ['$scope', '$element', '$attrs']
+
+const mbgAceEditor = {
+  bindings: {
+    ngModel: '=',
+    variables: '=?',
+    height: '@?',
+    editorRef: '=?',
+  },
+  template,
+  controller: MbgAceEditorController,
+}
+
+export { mbgAceEditor }

package/src/components/mbg-editor/index.ts

@@ -2,8 +2,7 @@ import * as angular from 'angular'
 import { mbgEditor } from './mbg-editor'
 
 const mbgEditorModule = angular
-    .module('mbg.components.mbgEditor', [])
-    .component('mbgEditor', mbgEditor)
-    .name
+  .module('mbg.components.mbgEditor', [])
+  .component('mbgEditor', mbgEditor).name
 
 export { mbgEditorModule }

package/src/components/mbg-image-upload/index.ts

@@ -7,17 +7,15 @@ import { imageUploadNoImage } from './components/image-upload-no-image/image-upl
 import { imageUploadLoading } from './components/image-upload-loading/image-upload-loading'
 import { MbgImageUploadService } from './services/mbg-image-upload-service'
 
-
 const mbgImageUploadModule = angular
-    .module('mbg.components.imageUpload', [])
-    .service('mbgImageUploadService', MbgImageUploadService)
-    .component('mbgImageUpload', imageUpload)
-    .component('mbgImageUploadMain', imageUploadMain)
-    .component('mbgImageUploadChildren', imageUploadChildren)
-    .component('mbgImageUploadNoImage', imageUploadNoImage)
-    .component('mbgImageUploadLoading', imageUploadLoading)
-    .component('mbgImageCrop', imageCrop)
-    .name
+  .module('mbg.components.imageUpload', [])
+  .service('mbgImageUploadService', MbgImageUploadService)
+  .component('mbgImageUpload', imageUpload)
+  .component('mbgImageUploadMain', imageUploadMain)
+  .component('mbgImageUploadChildren', imageUploadChildren)
+  .component('mbgImageUploadNoImage', imageUploadNoImage)
+  .component('mbgImageUploadLoading', imageUploadLoading)
+  .component('mbgImageCrop', imageCrop).name
 
 export * from './interfaces'
 export { mbgImageUploadModule }

package/src/index.html

@@ -176,9 +176,6 @@
                   label="Opções"></mbg-dropdown>
   </div> -->
 
-  <!-- <mbg-input-text ng-model="asdasdasd"
-                  ng-change="hhhsss($event)"></mbg-input-text> -->
-
   <!-- <div style="padding: 24px;">
     <div class="container">
       <br />
@@ -795,7 +792,7 @@
       </div>
     </div> -->
 
-  <div style="padding: 100px">
+  <!-- <div style="padding: 100px">
     <div class="panel panel-default">
       <div class="panel-heading">Email</div>
       <div class="panel-body">
@@ -809,7 +806,7 @@
         <mbg-address ng-model="address"></mbg-address>
       </div>
     </div>
-  </div>
+  </div> -->
 
 
   <!-- <form>
@@ -984,6 +981,26 @@
   </div>
   {{teste}}
   </div> -->
+  <div style="padding: 100px">
+    <div class="panel panel-default">
+      <div class="panel-heading">Ace Editor</div>
+      <div class="panel-body">
+        <mbg-ace-editor ng-model="aceEditor"
+                        height="104px"
+                        editor-ref="uiAceRef"
+                        variables="uiAceVariables"></mbg-ace-editor>
+        <button type="button"
+                ng-click="onPastEditor('Teste Label')"> Clique aqui!</button>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">Text</div>
+      <div class="panel-body">
+        <mbg-input-text ng-model="asdasdasd"
+                        ng-change="hhhsss($event)"></mbg-input-text>
+      </div>
+    </div>
+
   </div>
 </body>
 

package/src/index.ts

@@ -39,6 +39,8 @@ const module = angular.module('demo', ['ngLocale', components]).controller('demo
       onSave: (json) => {},
     }
 
+    $scope.uiAceRef = null
+
     $scope.addEvent = () => {
       $timeout(() => {
         $scope.events.push({
@@ -771,87 +773,6 @@ const module = angular.module('demo', ['ngLocale', components]).controller('demo
       $scope.columnQntHidden = !$scope.columnQntHidden
     }
 
-    $scope.produtos = [
-      {
-        code: '0',
-        product: 'Camiseta Adidas farm floral',
-        qnt: 20,
-        costValue: 200.0,
-      },
-      {
-        code: '1',
-        product: 'Blusa Adidas undeground',
-        qnt: 37,
-        costValue: 435.9,
-      },
-      {
-        code: '2',
-        product: 'Calça Nike undeground',
-        qnt: 25,
-        costValue: 348.9,
-      },
-      {
-        code: '3',
-        product: 'Shorts Nike undeground',
-        qnt: 25,
-        costValue: 348.9,
-      },
-      {
-        code: '0',
-        product: 'Camiseta Adidas farm floral',
-        qnt: 20,
-        costValue: 200.0,
-      },
-      {
-        code: '1',
-        product: 'Blusa Adidas undeground',
-        qnt: 37,
-        costValue: 435.9,
-      },
-      {
-        code: '2',
-        product: 'Calça Nike undeground',
-        qnt: 25,
-        costValue: 348.9,
-      },
-      {
-        code: '3',
-        product: 'Shorts Nike undeground',
-        qnt: 25,
-        costValue: 348.9,
-      },
-      {
-        code: '0',
-        product: 'Camiseta Adidas farm floral',
-        qnt: 20,
-        costValue: 200.0,
-      },
-      {
-        code: '1',
-        product: 'Blusa Adidas undeground',
-        qnt: 37,
-        costValue: 435.9,
-      },
-      {
-        code: '2',
-        product: 'Calça Nike undeground',
-        qnt: 25,
-        costValue: 348.9,
-      },
-      {
-        code: '3',
-        product: 'Shorts Nike undeground',
-        qnt: 25,
-        costValue: 348.9,
-      },
-      {
-        code: '0',
-        product: 'Camiseta Adidas farm floral',
-        qnt: 20,
-        costValue: 200.0,
-      },
-    ]
-
     $scope.lalala = () => {
       console.log('aspodasdpoasdoasd')
     }
@@ -8954,6 +8875,20 @@ const module = angular.module('demo', ['ngLocale', components]).controller('demo
     $scope.testecons = () => {
       console.log('asdihasoidashpid')
     }
+
+    $scope.uiAceVariables = [
+      {
+        caption: 'Teste 1',
+        value: '{teste1}',
+        meta: 'Variável',
+      },
+    ]
+
+    $scope.onPastEditor = (value) => {
+      if ($scope.uiAceRef) {
+        $scope.uiAceRef.insert(value)
+      }
+    }
   },
 ])
 angular.bootstrap(document, [module.name])