@kigi/components 1.5.11 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {
@@ -38,6 +38,7 @@
     "@syncfusion/ej2-navigations": "^17.4.43",
     "@syncfusion/ej2-splitbuttons": "^17.4.43",
     "@types/node": "^10.10.1",
+    "ace-builds": "1.3.3",
     "angular": "1.7.9",
     "angular-animate": "^1.7.9",
     "angular-bootstrap": "^0.12.2",
@@ -50,9 +51,10 @@
     "angular-ui-bootstrap": "^2.5.6",
     "angular-vs-repeat": "^2.0.14",
     "cep-promise": "^3.0.3",
+    "cropperjs": "^1.5.12",
     "croppie": "^2.6.2",
     "detect-browser": "^3.0.1",
-    "firebase": "^7.16.0",
+    "firebase": "7.16.0",
     "fuse.js": "^3.4.6",
     "grpc": "1.20.2",
     "highcharts": "^6.1.0",
@@ -71,8 +73,7 @@
     "progressbar.js": "^1.0.1",
     "raphael": "^2.2.8",
     "sugarss": "^2.0.0",
-    "webcamjs": "^1.0.25",
-    "ace-builds": "1.3.3"
+    "webcamjs": "^1.0.25"
   },
   "devDependencies": {
     "@types/angular": "^1.6.27",

package/src/components/index.ts

@@ -84,6 +84,7 @@ 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'
+import { mbgImageUploadCropModule } from './mbg-image-upload-crop'
 
 if (!window['$']) {
   window['$'] = $
@@ -100,6 +101,7 @@ const mbgComponentsModule = angular
     ngSanitize,
     ngAnimate,
     mbgImageUploadModule,
+    mbgImageUploadCropModule,
     mbgInputCnpjModule,
     mbgInputCpfModule,
     mbgInputCpfCnpjModule,

package/src/components/mbg-image-upload/helpers/firebase.ts

@@ -2,66 +2,90 @@ import firebase from 'firebase/app'
 import 'firebase/storage'
 
 export namespace ImageUploadFirebase {
-    const URL_FIREBASE = 'https://firebasestorage.googleapis.com/v0/b/bucket/o/id?alt=media'
+  const URL_FIREBASE = 'https://firebasestorage.googleapis.com/v0/b/bucket/o/id?alt=media'
 
-    export function getStorage(): any {
-        return window['firebase'] ? window['firebase'].storage() : firebase.storage()
-    }
+  export function getStorage(): any {
+    return window['firebase'] ? window['firebase'].storage() : firebase.storage()
+  }
 
-    export function guid() {
-        const s4 = () => Math.floor((1 + Math.random()) * 0x10000)
-            .toString(16)
-            .substring(1)
-        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
-    }
+  export function guid() {
+    const s4 = () =>
+      Math.floor((1 + Math.random()) * 0x10000)
+        .toString(16)
+        .substring(1)
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
+  }
 
-    export async function removeFiles(files) {
-        files.forEach((file) => {
-            if (file) {
-                const storageRef = getStorage().ref().child(file.idStorage)
-                storageRef.delete()
-            }
-        })
-    }
+  export async function removeFiles(files) {
+    files.forEach((file) => {
+      if (file) {
+        const storageRef = getStorage().ref().child(file.idStorage)
+        storageRef.delete()
+      }
+    })
+  }
 
-    export async function upload(files: Array<string>, folder = '') {
-        return await Promise.all(files.map(async (base64) => {
-            const imageID = this.guid()
-            const storageRef = getStorage().ref().child(folder ? `${folder}/${imageID}` : imageID)
-            const response = await storageRef.putString(base64, 'data_url')
-            const imageURL = folder ? URL_FIREBASE.replace(/bucket/g, response.metadata.bucket).replace(/id/g, `${folder}%2F${response.metadata.name}`)
-                : URL_FIREBASE.replace(/bucket/g, response.metadata.bucket).replace(/id/g, response.metadata.name)
-            const image = { url: imageURL, idStorage: imageID }
-            return image
-        }))
-    }
-    export function uploadFile(file: File, config: { onProgress, onPause, onResume, onError, onSuccess }, folder = '') {
+  export async function upload(files: Array<string>, folder = '') {
+    return await Promise.all(
+      files.map(async (base64) => {
         const imageID = this.guid()
-        const storageRef = getStorage().ref().child(folder ? `${folder}/${imageID}` : imageID)
-        const uploadTask = storageRef.put(file)
+        const storageRef = getStorage()
+          .ref()
+          .child(folder ? `${folder}/${imageID}` : imageID)
+        const response = await storageRef.putString(base64, 'data_url')
+        const imageURL = folder
+          ? URL_FIREBASE.replace(/bucket/g, response.metadata.bucket).replace(
+              /id/g,
+              `${folder}%2F${response.metadata.name}`,
+            )
+          : URL_FIREBASE.replace(/bucket/g, response.metadata.bucket).replace(
+              /id/g,
+              response.metadata.name,
+            )
+        const image = { url: imageURL, idStorage: imageID }
+        return image
+      }),
+    )
+  }
+  export function uploadFile(
+    file: File,
+    config: { onProgress; onPause; onResume; onError; onSuccess },
+    folder = '',
+  ) {
+    const imageID = this.guid()
+    const storageRef = getStorage()
+      .ref()
+      .child(folder ? `${folder}/${imageID}` : imageID)
+    const uploadTask = storageRef.put(file)
 
-        uploadTask.on('state_changed', (snapshot) => {
-            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
-            config.onProgress(progress)
-            switch (snapshot.state) {
-                case firebase.storage.TaskState.PAUSED:
-                    config.onPause()
-                    break
-                case firebase.storage.TaskState.RUNNING:
-                    config.onResume()
-                    break
-            }
-        }, (e) => {
+    uploadTask.on(
+      'state_changed',
+      (snapshot) => {
+        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+        config.onProgress(progress)
+        switch (snapshot.state) {
+          case firebase.storage.TaskState.PAUSED:
+            config.onPause()
+            break
+          case firebase.storage.TaskState.RUNNING:
+            config.onResume()
+            break
+        }
+      },
+      (e) => {
+        config.onError()
+      },
+      () => {
+        uploadTask.snapshot.ref
+          .getDownloadURL()
+          .then((downloadURL) => {
+            config.onSuccess({ fileName: file.name, fileURL: downloadURL, fileSize: file.size })
+          })
+          .catch(() => {
             config.onError()
-        }, () => {
-            uploadTask.snapshot.ref.getDownloadURL()
-                .then((downloadURL) => {
-                    config.onSuccess({ fileName: file.name, fileURL: downloadURL, fileSize: file.size })
-                })
-                .catch(() => {
-                    config.onError()
-                })
-        })
-        return uploadTask
-    }
+          })
+      },
+    )
+    return uploadTask
+  }
 }

package/src/components/mbg-image-upload-crop/image-upload-crop.html

@@ -0,0 +1,24 @@
+<div class="image-upload-crop-wrapper"
+     ng-style="{ 'width': $ctrl.config.width ? $ctrl.config.width : '200px', 'height': $ctrl.config.height ? $ctrl.config.height : '84px'}">
+     <div class="upload-item"
+          ng-style="{'cursor': $ctrl.ngModel ? 'default' : 'pointer'}"
+          ng-click="!$ctrl.ngModel && $ctrl.openModal()">
+          <div class="preview-image-crop"
+               ng-show="$ctrl.ngModel"
+               ng-click="$ctrl.openModal()">
+               <img ng-show="$ctrl.ngModel"
+                    ng-style="{ 'object-fit': 'contain', 'width': '100%'}"
+                    src="{{$ctrl.ngModel}}">
+          </div>
+          <div class="icon-upload-image-crop">
+               <i ng-show="!$ctrl.ngModel"
+                  class="fas fa-cloud-upload-alt"></i>
+               <div class="buttons"
+                    ng-class="{'remove': $ctrl.ngModel}">
+                    <a ng-click="$ctrl.removeImage($event)">{{$ctrl.ngModel ? 'Remover' : ''}}</a>
+                    <a ng-click="$ctrl.openModal()">{{$ctrl.ngModel ? 'Alterar' : 'Fazer upload'}}</a>
+               </div>
+          </div>
+
+     </div>
+</div>

package/src/components/mbg-image-upload-crop/image-upload-crop.scss

@@ -0,0 +1,76 @@
+.image-upload-crop-wrapper {
+    .upload-item {
+        padding: 4px;
+        border: 1px dashed #9c9c9c;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        transition: all 300ms ease-in-out;
+        height: 100%;
+        margin-top: 10px;
+        position: relative;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+
+        i {
+            font-size: 24px;
+            margin-top: 4px;
+            margin-bottom: 4px;
+            color: #4d4d4d;
+        }
+
+        label {
+            position: absolute;
+            top: -17px;
+            left: 0;
+            font-weight: 500;
+            font-size: 12px;
+        }
+
+        a {
+            text-align: center;
+            font-size: 12px;
+            margin-top: 2px;
+        }
+
+        .preview-image-crop {
+            height: calc(100% - 24px);
+            cursor: pointer;
+
+            img {
+                width: auto;
+                height: 100%;
+            }
+        }
+
+        .icon-upload-image-crop {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .buttons {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+
+                a {
+                    cursor: pointer;
+                }
+            }
+
+            .remove {
+                justify-content: space-around;
+            }
+        }
+        &:hover {
+            background: #e4e4e4;
+        }
+    }
+    .gap-12 {
+        gap: 12px;
+    }
+}

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

@@ -0,0 +1,50 @@
+import './image-upload-crop.scss'
+import template from './image-upload-crop.html'
+import { IConfigImageUploadCrop } from './interfaces/config-image-upload-crop.interface'
+import { UploadImageCropModal } from './modals/upload-image-crop-modal'
+
+class ImageUploadCropController {
+  public config: IConfigImageUploadCrop
+  public ngModel: string
+
+  constructor(
+    public $scope,
+    public $element,
+    public $timeout,
+    public uploadImageCropModal: UploadImageCropModal,
+  ) {}
+
+  $onInit() {
+    this.config = this.config || {
+      aspectRatio: 1 / 1,
+      minCropBoxWidth: 200,
+      minCropBoxHeight: 200,
+      minCanvasHeight: 100,
+      minContainerHeight: 100,
+    }
+  }
+
+  removeImage(e) {
+    e.stopPropagation()
+    this.ngModel = ''
+  }
+
+  openModal() {
+    this.uploadImageCropModal.open(this.config, this.ngModel).then((url) => {
+      if (url) {
+        this.ngModel = url
+      }
+    })
+  }
+}
+
+const imageUploadCrop = {
+  bindings: {
+    ngModel: '=?',
+    config: '=?',
+  },
+  controller: ImageUploadCropController,
+  template,
+}
+
+export { imageUploadCrop }

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

@@ -0,0 +1,9 @@
+import * as angular from 'angular'
+import { imageUploadCrop } from './image-upload-crop'
+import { uploadImageCropModalModule } from './modals/upload-image-crop-modal'
+
+const mbgImageUploadCropModule = angular
+  .module('mbg.components.imageUploadCrop', [uploadImageCropModalModule])
+  .component('mbgImageUploadCrop', imageUploadCrop).name
+
+export { mbgImageUploadCropModule }

package/src/components/mbg-image-upload-crop/interfaces/config-image-upload-crop.interface.ts

@@ -0,0 +1,9 @@
+export interface IConfigImageUploadCrop {
+  aspectRatio: number
+  minCropBoxWidth: number
+  minCropBoxHeight: number
+  minCanvasHeight: number
+  minContainerHeight: number
+  width?: string
+  height?: string
+}

package/src/components/mbg-image-upload-crop/modals/upload-image-crop-modal/index.ts

@@ -0,0 +1,31 @@
+import * as angular from 'angular'
+import './upload-image-crop-modal.scss'
+import { UploadImageCropModalController } from './upload-image-crop-modal'
+import UploadImageCropModalTemplate from './upload-image-crop-modal.html'
+import { IConfigImageUploadCrop } from '../../interfaces/config-image-upload-crop.interface'
+
+export class UploadImageCropModal {
+  constructor(public $uibModal) {}
+
+  open(cropOptions: IConfigImageUploadCrop, image: string) {
+    const modalInstance = this.$uibModal.open({
+      template: UploadImageCropModalTemplate,
+      controller: UploadImageCropModalController,
+      controllerAs: '$ctrl',
+      animation: true,
+      backdrop: 'static',
+      size: 'md',
+      resolve: {
+        cropOptions: () => cropOptions,
+        image: () => image,
+      },
+    })
+    return modalInstance.result
+  }
+}
+
+const uploadImageCropModalModule = angular
+  .module(`mbg.modals.uploadImageCropModal`, [])
+  .service('uploadImageCropModal', UploadImageCropModal).name
+
+export { uploadImageCropModalModule }

package/src/components/mbg-image-upload-crop/modals/upload-image-crop-modal/upload-image-crop-modal.html

@@ -0,0 +1,71 @@
+<div class="upload-image-crop-modal-wrapper">
+  <div class="head-logo">
+    <h1>Imagem</h1>
+
+  </div>
+  <div class="body-logo">
+    <div class="image-container-crop">
+      <input type="file"
+             multiple="false"
+             onchange="angular.element(this).scope().$ctrl.onSelectFiles(event)"
+             id="chooseFileLogo" />
+
+      <div ng-show="!$ctrl.file"
+           ng-click="$ctrl.chooseFileLogo()"
+           ondrop="angular.element(this).scope().$ctrl.onDropFile(event)"
+           ondragover="angular.element(this).scope().$ctrl.onDragOver(event)"
+           class="flex flex-column justify-center align-center image-drap-drop-container">
+        <div class="flex flex-column align-center justify-center">
+          <i ng-show="!$ctrl.image"
+             class="fas fa-cloud-upload-alt"></i>
+          <label ng-show="$ctrl.image"
+                 style="font-weight: 500;">Imagem atual</label>
+          <img ng-if="$ctrl.image"
+               style="max-height: 200px;max-width: 400px; object-fit: contain;"
+               class="m-b-24"
+               src="{{$ctrl.image}}"></i>
+
+          <label ng-show="$ctrl.image">Arraste e solte uma imagem ou clique aqui para editar</label>
+          <label ng-show="!$ctrl.image">Arraste e solte uma imagem ou clique aqui para adicionar</label>
+        </div>
+      </div>
+      <div class="relative-content"
+           ng-if="$ctrl.file">
+        <button type="button"
+                class="stop-upload"
+                ng-click="$ctrl.resetFile()">
+          <i class="fas fa-times"></i>
+        </button>
+        <img ng-src="{{ $ctrl.file }}"
+             class="crop-image-original"
+             ng-init="$ctrl.createCropier()"
+             alt="Logo" />
+      </div>
+    </div>
+    <div class="row"
+         ng-show="$ctrl.cropOptions.recommendedWidth && $ctrl.cropOptions.recommendedHeight">
+      <div class="col-md-12">
+        <p style="margin-bottom: 0px">Tamanho recomendado em pixels: ({{$ctrl.cropOptions.recommendedWidth}} x
+          {{$ctrl.cropOptions.recommendedHeight}})px
+        </p>
+      </div>
+    </div>
+    <div class="row m-t-24">
+      <div class="col-md-12 flex flex-column align-center justify-center">
+        <mbg-btn-form ng-click="$ctrl.save()"
+                      ng-disabled="$ctrl.loading"
+                      loading="$ctrl.loading"
+                      label="Confirmar"></mbg-btn-form>
+        <label class="error-label"
+               ng-class="{'active': $ctrl.activeError}">{{$ctrl.labelError}}</label>
+        <div class="flex align-center">
+          <a class="cancel-link"
+             target="_self"
+             ng-disabled="$ctrl.loading"
+             ng-click="$ctrl.closeModal()">Cancelar</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/src/components/mbg-image-upload-crop/modals/upload-image-crop-modal/upload-image-crop-modal.scss

@@ -0,0 +1,140 @@
+.upload-image-crop-modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .relative-content {
+    position: relative;
+    max-height: 400px;
+
+    .stop-upload {
+      z-index: 1000;
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      background: #fff;
+      border-radius: 50%;
+      font-size: 21px;
+      width: 34px;
+      height: 34px;
+      border: 2px solid #595959;
+      color: #666;
+      transform: scale(0.8);
+      transition: all 300ms ease;
+
+      &:hover {
+        transform: scale(0.9);
+      }
+    }
+  }
+
+  .cropper-container {
+    width: 100% !important;
+    height: 368px !important;
+  }
+
+  .head-logo {
+    padding: 0 24px;
+    h1 {
+      color: var(--neutral1);
+      font-size: 24px;
+    }
+  }
+  .body-logo {
+    flex: 1;
+    position: relative;
+    padding: 0 24px;
+    padding-bottom: 24px;
+  }
+  .image-container-crop {
+    width: 100%;
+    background: #f5f5f5;
+    height: 368px;
+    border-radius: 5px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  #chooseFileLogo {
+    display: none;
+  }
+  .crop-image-original {
+    display: block;
+    max-width: 100%;
+  }
+  .image-drap-drop-container {
+    height: 100%;
+
+    i {
+      font-size: 68px;
+      color: #666;
+    }
+    label {
+      font-size: 16px;
+      margin: 14px 4px;
+      cursor: pointer;
+    }
+    button {
+      margin-top: 18px;
+      height: 44px;
+      padding: 0 24px;
+      border-radius: 41px;
+      background: var(--contrast);
+      color: #fff;
+      border: none;
+    }
+  }
+
+  .flex {
+    display: flex;
+    .flex-1 {
+      flex: 1;
+    }
+    .fit-content {
+      min-height: fit-content;
+    }
+    &.flex-row {
+      flex-direction: row;
+    }
+    &.flex-column {
+      flex-direction: column;
+    }
+    &.align-center {
+      align-items: center;
+    }
+    &.align-end {
+      align-items: flex-end;
+    }
+    &.align-start {
+      align-items: flex-start;
+    }
+    &.align-between {
+      align-items: space-between;
+    }
+    &.justify-center {
+      justify-content: center;
+    }
+    &.justify-end {
+      justify-content: flex-end;
+    }
+    &.justify-start {
+      justify-content: flex-start;
+    }
+    &.justify-between {
+      justify-content: space-between;
+    }
+    &.justify-around {
+      justify-content: space-around;
+    }
+    &.wrap {
+      flex-wrap: wrap;
+    }
+  }
+  .m-t-24 {
+    margin-top: 24px;
+  }
+  .cancel-link {
+    margin: 18px 24px 0px 24px;
+    color: var(--neutral2);
+    cursor: pointer;
+  }
+}

package/src/components/mbg-image-upload-crop/modals/upload-image-crop-modal/upload-image-crop-modal.ts

@@ -0,0 +1,151 @@
+// import { MobiEVendiService } from 'modules/mobi-store/services/mobi-e-vendi-service'
+import 'cropperjs/dist/cropper.css'
+// import Cropper from 'cropperjs'
+import Cropper from 'cropperjs/dist/cropper.esm'
+import { UtilMbgFunctions } from '../../../../helpers/util-mbg-functions'
+import { UtilUID } from '../../../../helpers/util-uid'
+import { MbgImageUploadService } from '../../../mbg-image-upload/services/mbg-image-upload-service'
+import firebase from 'firebase/app'
+import 'firebase/storage'
+// import { UtilUID } from 'modules/helpers/namespaces/util-uid'
+// import { SessionStorage } from 'modules/helpers/namespaces/sessionstorage'
+// import { HelperNotificationService } from 'modules/helpers/services/notification.service'
+
+class UploadImageCropModalController {
+  private file
+  private cropper: Cropper
+  private loading
+  private activeError: boolean
+  private labelError: string
+
+  constructor(
+    public $timeout,
+    public $scope,
+    public $uibModalInstance,
+    public cropOptions,
+    public image,
+    public mbgImageUploadService: MbgImageUploadService,
+  ) {}
+
+  $onInit() {
+    this.$scope.$on('$destroy', () => {
+      this.destroyCropier()
+    })
+  }
+
+  closeModal() {
+    this.$uibModalInstance.close()
+  }
+
+  async onFileSelect(file) {
+    const base64 = await this.toBase64(file)
+    this.$timeout(() => {
+      this.file = base64
+    })
+  }
+
+  createCropier() {
+    this.$timeout(() => {
+      const image: any = document.querySelector('.crop-image-original')
+      this.cropper = new Cropper(
+        image,
+        Object.assign(
+          {
+            dragMode: 'move',
+          },
+          this.cropOptions,
+        ),
+      )
+    })
+  }
+
+  toBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => resolve(reader.result)
+      reader.onerror = (error) => reject(error)
+    })
+  }
+
+  onDropFile(ev) {
+    ev.preventDefault()
+    const dataTransfer = ev.dataTransfer
+    if (dataTransfer.files && dataTransfer.files.length > 0) {
+      const file = dataTransfer.files[0]
+      this.onFileSelect(file)
+    }
+  }
+
+  onDragOver(ev) {
+    ev.preventDefault()
+    ev.dataTransfer.dropEffect = 'move'
+  }
+
+  chooseFileLogo() {
+    const input: any = document.querySelector('#chooseFileLogo')
+    input.value = ''
+    input.click()
+  }
+
+  resetFile() {
+    this.file = null
+    const input: any = document.querySelector('#chooseFileLogo')
+    input.value = ''
+    this.destroyCropier()
+  }
+
+  onSelectFiles(ev) {
+    const files = ev.target.files
+    if (files && files.length > 0) {
+      this.onFileSelect(files[0])
+    }
+  }
+
+  destroyCropier() {
+    if (this.cropper) {
+      this.cropper.destroy()
+    }
+  }
+
+  dismiss() {
+    this.$uibModalInstance.close(false)
+  }
+
+  async save() {
+    try {
+      this.loading = true
+      this.activeError = false
+      const URL_FIREBASE = 'https://firebasestorage.googleapis.com/v0/b/bucket/o/id?alt=media'
+      const base64 = this.cropper.getCroppedCanvas().toDataURL()
+      const imageID = UtilUID.generete()
+
+      const storageRef = (window['firebase'] ? window['firebase'].storage() : firebase.storage())
+        .ref()
+        .child(imageID)
+      const response = await storageRef.putString(base64, 'data_url')
+      const imageURL = URL_FIREBASE.replace(/bucket/g, response.metadata.bucket).replace(
+        /id/g,
+        response.metadata.name,
+      )
+
+      this.$uibModalInstance.close(imageURL)
+    } catch (e) {
+      console.log(e)
+      this.loading = false
+      this.activeError = true
+      this.labelError = 'Erro ao salvar a imagem, tente novamente!'
+    }
+  }
+}
+
+UploadImageCropModalController[`$inject`] = [
+  '$timeout',
+  '$scope',
+  '$uibModalInstance',
+  'cropOptions',
+  'image',
+  'mbgImageUploadService',
+]
+
+export { UploadImageCropModalController }

package/src/index.html

@@ -982,7 +982,8 @@
   {{teste}}
   </div> -->
   <div style="padding: 100px">
-    <div class="panel panel-default">
+
+    <!-- <div class="panel panel-default">
       <div class="panel-heading">Ace Editor</div>
       <div class="panel-body">
         <mbg-ace-editor ng-model="aceEditor"
@@ -999,8 +1000,14 @@
         <mbg-input-text ng-model="asdasdasd"
                         ng-change="hhhsss($event)"></mbg-input-text>
       </div>
+    </div> -->
+
+    <div>
+      <mbg-image-upload-crop ng-model="imgCrop"
+                             config="configImgCrop"></mbg-image-upload-crop>
     </div>
 
+
   </div>
 </body>
 

package/src/index.ts

@@ -2,7 +2,8 @@
 
 import * as angular from 'angular'
 import components from './components'
-import { initializeApp } from 'firebase/app'
+import * as firebase from 'firebase'
+import 'firebase/firestore'
 import './assets/angular-locale_pt-br.js'
 import * as dataDocument from './assets/data-default.json'
 import { MbgAlert } from './helpers/services/mbg-alert'
@@ -13,7 +14,7 @@ const sizeJson = require('./json/sizes.json')
 const genderJson = require('./json/gender.json')
 const mockData = require('./json/MOCK_DATA.json')
 
-initializeApp({
+firebase.initializeApp({
   apiKey: 'AIzaSyB0aH7e6XjWJ-xViji3CuXHBbLuWRALC78',
   authDomain: 'app-kigi.firebaseapp.com',
   databaseURL: 'https://app-kigi-default-rtdb.firebaseio.com',
@@ -30,6 +31,17 @@ const module = angular.module('demo', ['ngLocale', components]).controller('demo
   '$http',
   'mbgAlert',
   ($scope, $timeout, $http, mbgAlert: MbgAlert) => {
+    $scope.imgCrop = 'https://i.pinimg.com/originals/c3/a5/b3/c3a5b332f9716abb1c67da38a12595e8.jpg'
+    $scope.configImgCrop = {
+      aspectRatio: 16 / 9,
+      minCropBoxWidth: 200,
+      minCropBoxHeight: 100,
+      minCanvasHeight: 200,
+      minContainerHeight: 100,
+      height: '124px',
+      // width: '300px',
+    }
+
     $scope.configDocument = {
       document: dataDocument,
       preview: true,