@kigi/components 1.8.0 → 1.8.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.8.0",
+  "version": "1.8.3-beta.1",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-address/mbg-address.html

@@ -1,45 +1,26 @@
 <div class="mbg-address-row">
-       <div class="mbg-address-wrapper"
-            disable-animate>
-              <div class="mbg-input-wrapper input-cep-wrapper"
-                   ng-class="$ctrl.cepClass"
-                   disable-animate>
-                     <input ng-if="!$ctrl.ngModel.EX"
-                            autocomplete="{{ $ctrl.autocompleteValue }}"
-                            autocorrect="{{ $ctrl.autocompleteValue }}"
-                            spellcheck="false"
-                            type="text"
-                            ng-change="$ctrl.onChangeCep()"
-                            ng-model="$ctrl.address.zipCode"
-                            placeholder="99999-999"
+       <div class="mbg-address-wrapper" disable-animate>
+              <div class="mbg-input-wrapper input-cep-wrapper" ng-class="$ctrl.cepClass" disable-animate>
+                     <input ng-if="!$ctrl.ngModel.EX" autocomplete="{{ $ctrl.autocompleteValue }}"
+                            autocorrect="{{ $ctrl.autocompleteValue }}" spellcheck="false" type="text"
+                            ng-change="$ctrl.onChangeCep()" ng-model="$ctrl.address.zipCode" placeholder="99999-999"
                             ui-br-cep-mask />
-                     <input ng-if="$ctrl.ngModel.EX"
-                            type="text"
-                            ng-model="$ctrl.address.zipCode"
-                            placeholder="99999" />
+                     <input ng-if="$ctrl.ngModel.EX" type="text" ng-model="$ctrl.address.zipCode" placeholder="99999" />
               </div>
-              <input type="text"
-                     placeholder="Endereço completo"
-                     ng-model="$ctrl.fullAddress"
-                     class="input-place mbg-input" />
+              <input type="text" placeholder="Endereço completo" ng-model="$ctrl.fullAddress"
+                     ng-change="$ctrl.onChangeComplete($event)" class="input-place mbg-input" />
               <div class="input-spacing"></div>
-              <input type="text"
-                     ng-model="$ctrl.address.number"
-                     class="input-place mbg-input input-number enable-enter"
-                     ng-change="$ctrl.searchAddressInfo()"
-                     placeholder="Número" />
+              <input type="text" ng-model="$ctrl.address.number" class="input-place mbg-input input-number enable-enter"
+                     ng-change="$ctrl.searchAddressInfo()" placeholder="Número" />
               <div class="input-spacing"></div>
-              <input type="text"
-                     class="input-place mbg-input input-information"
-                     ng-model="$ctrl.address.information"
-                     placeholder="Complemento" />
+              <input type="text" class="input-place mbg-input input-information" ng-model="$ctrl.address.information"
+                     ng-change="$ctrl.onChangeComplement($event)" placeholder="Complemento" />
        </div>
        <div class="manual-link">
               <a ng-click="$ctrl.openModalManual()">{{ $ctrl.manualLabel ? $ctrl.manualLabel : 'Cadastrar endereço
                      manual' }}</a>
               <span class="separator-address-link">|</span>
-              <a ng-click="$ctrl.resetAndUpdate()"
-                 ng-show="$ctrl.ngModel.EX">X</a>
+              <a ng-click="$ctrl.resetAndUpdate()" ng-show="$ctrl.ngModel.EX">X</a>
               <a ng-click="$ctrl.openModalManual(true)">Cadastrar endereço do exterior</a>
        </div>
 </div>

package/src/components/mbg-address/mbg-address.ts

@@ -7,6 +7,7 @@ import * as angular from 'angular'
 import { detect } from 'detect-browser'
 import { MbgAddressManualController } from './modals/mbg-address-manual/mbg-address-manual'
 import MbgAddressManualTemplate from './modals/mbg-address-manual/mbg-address-manual.html'
+import { Capitalize } from '../../helpers/capitalize'
 
 declare let google
 
@@ -40,6 +41,7 @@ class MbgAddressController {
   public fullAddress
   private GOOGLE_API_KEY = 'AIzaSyB0aH7e6XjWJ-xViji3CuXHBbLuWRALC78'
   private notFoundPremisse
+  private capitalize
 
   constructor(
     public $scope,
@@ -51,6 +53,12 @@ class MbgAddressController {
   ) {}
 
   $onInit() {
+    if (this.capitalize && this.address) {
+      this.address.information = this.capitalizeBool(this.address.information || '')
+    }
+    if (this.capitalize && this.fullAddress) {
+      this.fullAddress = this.capitalizeBool(this.fullAddress || '')
+    }
     this.checkScript()
     this.navigatorData = detect()
     this.navigatorData.currentVersion = Number(
@@ -98,6 +106,22 @@ class MbgAddressController {
     )
   }
 
+  capitalizeBool(str) {
+    return Capitalize.format(str)
+  }
+
+  onChangeComplete($event) {
+    if (this.capitalize) {
+      this.fullAddress = this.capitalizeBool(this.fullAddress)
+    }
+  }
+
+  onChangeComplement($event) {
+    if (this.capitalize) {
+      this.address.information = this.capitalizeBool(this.address.information)
+    }
+  }
+
   checkScript() {
     const elm: any = document.body.querySelector('#googlePlace')
     if (!elm) {
@@ -577,6 +601,7 @@ const mbgAddress = {
     onFinishFocusElement: '@?',
     manualLabel: '@?',
     notFoundPremisse: '&?',
+    capitalize: '=?',
   },
   template,
   controller: MbgAddressController,

package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.html

@@ -1,102 +1,76 @@
 <div class="mbg-address-manual-wrapper">
 
   <form name="manualAddress">
-    <div class="row"
-         ng-if="$ctrl.EX">
+    <div class="row" ng-if="$ctrl.EX">
       <div class="col-md-6">
         <label>País</label>
-        <mbg-select ng-model="$ctrl.entity.country"
-                    placeholder="Brasil"
-                    ng-if="$ctrl.countries"
-                    on-select="$ctrl.selectCountry(value)"
-                    on-unselect="$ctrl.unselectCountry()"
-                    label="label"
-                    ng-value="label"
-                    fetch="$ctrl.countries"></mbg-select>
+        <mbg-select ng-model="$ctrl.entity.country" placeholder="Brasil" ng-if="$ctrl.countries"
+          on-select="$ctrl.selectCountry(value)" on-unselect="$ctrl.unselectCountry()" label="label" ng-value="label"
+          fetch="$ctrl.countries"></mbg-select>
       </div>
       <div class="col-md-6">
         <label>CEP</label>
         <div class="mbg-input-wrapper input-cep-wrapper">
-          <input type="text"
-                 ng-model="$ctrl.entity.zipCode"
-                 ng-change="$ctrl.validateLenth($event)"
-                 placeholder="99999" />
+          <input type="text" ng-model="$ctrl.entity.zipCode" ng-change="$ctrl.validateLenth($event)"
+            placeholder="99999" />
         </div>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-4"
-           ng-if="!$ctrl.EX">
+      <div class="col-md-4" ng-if="!$ctrl.EX">
         <label>CEP</label>
         <div class="mbg-input-wrapper input-cep-wrapper">
-          <input autocomplete="{{ $ctrl.autocompleteValue }}"
-                 autocorrect="{{ $ctrl.autocompleteValue }}"
-                 ng-class="{'mbg-error': (!$ctrl.entity.zipCode && $ctrl.inputErrors) || $ctrl.notFoundCep}"
-                 mbg-error="!$ctrl.entity.zipCode || $ctrl.notFoundCep"
-                 mbg-error-when="$ctrl.inputErrors"
-                 mbg-error-message="É necessário informar o CEP"
-                 spellcheck="false"
-                 type="text"
-                 ng-change="$ctrl.onChangeCep()"
-                 ng-model="$ctrl.entity.zipCode"
-                 placeholder="99999-999"
-                 ui-br-cep-mask />
+          <input autocomplete="{{ $ctrl.autocompleteValue }}" autocorrect="{{ $ctrl.autocompleteValue }}"
+            ng-class="{'mbg-error': (!$ctrl.entity.zipCode && $ctrl.inputErrors) || $ctrl.notFoundCep}"
+            mbg-error="!$ctrl.entity.zipCode || $ctrl.notFoundCep" mbg-error-when="$ctrl.inputErrors"
+            mbg-error-message="É necessário informar o CEP" spellcheck="false" type="text"
+            ng-change="$ctrl.onChangeCep()" ng-model="$ctrl.entity.zipCode" placeholder="99999-999" ui-br-cep-mask />
         </div>
       </div>
       <div ng-class="$ctrl.EX ? 'col-md-12' : 'col-md-8'">
         <label>Logradouro</label>
-        <mbg-input-text ng-model="$ctrl.entity.premisse"
-                        placeholder="Ex. Av Duque de Caxias"></mbg-input-text>
+        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.premisse" placeholder="Ex. Av Duque de Caxias">
+        </mbg-input-text>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
         <label>Bairro</label>
-        <mbg-input-text ng-model="$ctrl.entity.neighbourhood"
-                        placeholder="Ex. Jardim América"></mbg-input-text>
+        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.neighbourhood" placeholder="Ex. Jardim América">
+        </mbg-input-text>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-6"
-           ng-if="!$ctrl.EX">
+      <div class="col-md-6" ng-if="!$ctrl.EX">
         <label>Estado</label>
-        <mbg-select ng-model="$ctrl.entity.state"
-                    fetch="$ctrl.searchState(query)"
-                    label="name"
-                    ng-value="shortName"
-                    placeholder="Ex. Paraná"></mbg-select>
+        <mbg-select capitalize="true" ng-model="$ctrl.entity.state" fetch="$ctrl.searchState(query)" label="name"
+          ng-value="shortName" placeholder="Ex. Paraná"></mbg-select>
       </div>
-      <div class="col-md-6"
-           ng-if="$ctrl.EX">
+      <div class="col-md-6" ng-if="$ctrl.EX">
         <label>Estado</label>
-        <mbg-input-text ng-model="$ctrl.entity.state"
-                        placeholder="Ex. Maringá"></mbg-input-text>
+        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.state" placeholder="Ex. Maringá"></mbg-input-text>
       </div>
       <div class="col-md-6">
         <label>Cidade</label>
-        <mbg-input-text ng-model="$ctrl.entity.localization"
-                        placeholder="Ex. Maringá"></mbg-input-text>
+        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.localization" placeholder="Ex. Maringá">
+        </mbg-input-text>
       </div>
     </div>
     <div class="row">
       <div class="col-md-4">
         <label>Número</label>
-        <mbg-input-text ng-model="$ctrl.entity.number"
-                        placeholder="Ex. 36"></mbg-input-text>
+        <mbg-input-text ng-model="$ctrl.entity.number" placeholder="Ex. 36"></mbg-input-text>
       </div>
       <div class="col-md-8">
         <label>Complemento</label>
-        <mbg-input-text ng-model="$ctrl.entity.information"
-                        placeholder="Ex. Restaurante X"></mbg-input-text>
+        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.information" placeholder="Ex. Restaurante X">
+        </mbg-input-text>
       </div>
     </div>
   </form>
 
   <div class="content-confirm-upload">
-    <mbg-btn-form label="Salvar"
-                  loading="$ctrl.loading"
-                  ng-click="$ctrl.finish(manualAddress.$valid)"></mbg-btn-form>
-    <a class="btn-cancel"
-       ng-click="$ctrl.dismiss()">Cancelar</a>
+    <mbg-btn-form label="Salvar" loading="$ctrl.loading" ng-click="$ctrl.finish(manualAddress.$valid)"></mbg-btn-form>
+    <a class="btn-cancel" ng-click="$ctrl.dismiss()">Cancelar</a>
   </div>
 </div>

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

@@ -1,4 +1,3 @@
-// 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'

package/src/components/mbg-input-text/mbg-input-text.ts

@@ -1,64 +1,80 @@
 import './mbg-input-text.scss'
 import * as angular from 'angular'
 import template from './mbg-input-text.html'
+import { Capitalize } from '../../helpers/capitalize'
 
 class MbgInputTextController {
-    private ngChange
-    private ngModel
-    private ngRequired
-    private ngDisabled
-    private props
-    private ngKeydown
-    private ngValue
+  private ngChange
+  private ngModel
+  private ngRequired
+  private ngDisabled
+  private props
+  private ngKeydown
+  private ngValue
+  private capitalize
 
-    constructor(public $scope, public $element, public $attrs) {
-        if ($attrs.ngRequired === '') { this.ngRequired = true }
-        if ($attrs.ngDisabled === '') { this.ngDisabled = true }
-        this.props = {}
+  constructor(public $scope, public $element, public $attrs) {
+    if ($attrs.ngRequired === '') {
+      this.ngRequired = true
     }
-
-    $onInit() {
-        if (this.ngValue) {
-            this.ngModel = this.ngValue
-        }
+    if ($attrs.ngDisabled === '') {
+      this.ngDisabled = true
     }
+    this.props = {}
+  }
 
-    fillAttributes() {
-        // console.log(this.$attrs.$attr.hasOwnProperty('enableKeyboard'))
+  $onInit() {
+    if (this.capitalize) {
+      this.ngModel = this.capitalizeBool(this.ngModel || '')
     }
-
-    onChange($event) {
-        if (this.ngChange) {
-            this.ngChange({ $event })
-        }
+    if (this.ngValue) {
+      this.ngModel = this.ngValue
     }
+  }
+
+  fillAttributes() {
+    // console.log(this.$attrs.$attr.hasOwnProperty('enableKeyboard'))
+  }
 
-    onKeydown($event: Event) {
-        $event.stopPropagation()
-        if (this.ngKeydown) {
-            this.ngKeydown({ $event })
-        }
+  capitalizeBool(str) {
+    return Capitalize.format(str)
+  }
+
+  onChange($event) {
+    if (this.capitalize) {
+      this.ngModel = this.capitalizeBool(this.ngModel)
+    }
+    if (this.ngChange) {
+      this.ngChange({ $event })
     }
+  }
 
+  onKeydown($event: Event) {
+    $event.stopPropagation()
+    if (this.ngKeydown) {
+      this.ngKeydown({ $event })
+    }
+  }
 }
 MbgInputTextController.$inject = ['$scope', '$element', '$attrs']
 
 const mbgInputText = {
-    bindings: {
-        ngValue: '=?',
-        ngModel: '=',
-        ngChange: '&?',
-        ngRequired: '=?',
-        ngDisabled: '=?',
-        placeholder: '@?',
-        ngBlur: '&?',
-        ngFocus: '&?',
-        ngKeyup: '&?',
-        ngKeypress: '&?',
-        ngKeydown: '&?',
-    },
-    template,
-    controller: MbgInputTextController,
+  bindings: {
+    ngValue: '=?',
+    ngModel: '=',
+    ngChange: '&?',
+    ngRequired: '=?',
+    ngDisabled: '=?',
+    placeholder: '@?',
+    ngBlur: '&?',
+    ngFocus: '&?',
+    ngKeyup: '&?',
+    ngKeypress: '&?',
+    ngKeydown: '&?',
+    capitalize: '=?',
+  },
+  template,
+  controller: MbgInputTextController,
 }
 
 export { mbgInputText }

package/src/components/mbg-product-grid/mbg-product-grid.html

@@ -62,7 +62,7 @@
               ng-model="$ctrl.gridValues[$index][$parent.$index].stock" placeholder="0"
               ng-keydown="$ctrl.onKeydown($event)"
               ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }"
-              ng-change="$ctrl.handleGridValues()" ng-model-options="{ debounce: 500 }" class="grid-product-stock" />
+              ng-change="$ctrl.handleGridValues()" ng-model-options="{ debounce: 500 }" class="grid-product-stock" onwheel="this.blur()" />
             <input tabindex="-1" type="text" ng-model="$ctrl.gridValues[$index][$parent.$index].price"
               ng-show="$ctrl.enablePrice" ui-money-mask ng-disabled="$ctrl.ngDisabled"
               onclick="angular.element(this).scope().$ctrl.focusInput(this)"

package/src/components/mbg-product-grid/mbg-product-grid.scss

@@ -1,4 +1,13 @@
 .mbg-product-grid-wrapper {
+    input[type="number"]::-webkit-outer-spin-button,
+        input[type="number"]::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    
+        input[type="number"] {
+            -moz-appearance: textfield;
+        }
     overflow: auto;
     table {
         border-radius: 5px;

package/src/components/mbg-product-inline/mbg-product-inline.html

@@ -40,7 +40,7 @@
           <div class="stock-col">
             <input tabindex="0" type="number" onclick="angular.element(this).scope().$ctrl.focusInput(this)"
               ng-model="item.stock" ng-keydown="$ctrl.onKeydown($event)" placeholder="0" placeholder="Estoque"
-              ng-model-options="{ debounce: 500 }" class="inline-product-stock" />
+              ng-model-options="{ debounce: 500 }" class="inline-product-stock" onwheel="this.blur()" />
           </div>
           <div class="price-col" ng-hide="$ctrl.hidePrice">
             <input tabindex="-1" type="text" onclick="angular.element(this).scope().$ctrl.focusInput(this)"

package/src/components/mbg-product-inline/mbg-product-inline.scss

@@ -1,4 +1,13 @@
 .mbg-product-inline-wrapper {
+    input[type="number"]::-webkit-outer-spin-button,
+      input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    
+      input[type="number"] {
+        -moz-appearance: textfield;
+      }
   .inline-content {
     overflow: auto;
   }

package/src/components/mbg-select/mbg-select.ts

@@ -1,3 +1,4 @@
+import { Capitalize } from '@kigi/components/src/helpers/capitalize';
 import * as angular from 'angular'
 import './mbg-select.scss'
 import template from './mbg-select.html'
@@ -42,6 +43,7 @@ class MbgSelectController {
   private fixedValue: string
   private transcludeSize: any
   private getCustomModel: Function
+  private capitalize
 
   constructor(
     public $scope,
@@ -50,7 +52,7 @@ class MbgSelectController {
     public $timeout,
     public $compile,
     public $transclude,
-  ) {}
+  ) { }
 
   $onInit() {
     this.fixedValue = this.ngValue || 'id'
@@ -251,6 +253,9 @@ class MbgSelectController {
   }
 
   onInputChange() {
+    if (this.capitalize) {
+      this.inputValue = Capitalize.format(this.inputValue)
+    }
     if (this.timeoutChange) {
       this.$timeout.cancel(this.timeoutChange)
     }
@@ -667,6 +672,7 @@ const mbgSelect = {
     callbackAddFixedOption: '&?',
     transcludeSize: '=?',
     getCustomModel: '&?',
+    capitalize: '=?'
   },
   controller: MbgSelectController,
   template,

package/src/helpers/capitalize.ts

@@ -1,24 +1,46 @@
 export namespace Capitalize {
-    const prepositions = [
-        'de', 'da', 'do', 'dos', 'de',
-        'a', 'ante', 'após', 'até', 'com', 'contra', 'desde',
-        'em', 'entre', 'para', 'per', 'perante', 'por', 'sem',
-        'sob', 'sobre', 'trás'
-    ]
+  const prepositions = [
+    'de',
+    'da',
+    'do',
+    'dos',
+    'de',
+    'a',
+    'ante',
+    'após',
+    'até',
+    'com',
+    'contra',
+    'desde',
+    'em',
+    'entre',
+    'para',
+    'per',
+    'perante',
+    'por',
+    'sem',
+    'sob',
+    'sobre',
+    'trás',
+  ]
 
-    export function format(str: string) {
-        return (str || '')
-            .toLowerCase()
-            .replace(/  /g, '')
-            .split(' ')
-            .map((w, index) => prepositions.filter((e) => e.toLowerCase() === w.toLowerCase()).length === 0
-                ? w.charAt(0).toUpperCase() + w.slice(1)
-                : lowerCase(w, index))
-            .join(' ')
-    }
+  export function format(str: string) {
+    return (str || '')
+      .toLowerCase()
+      .replace(/  /g, '')
+      .split(' ')
+      .map((w, index) =>
+        prepositions.filter((e) => e.toLowerCase() === w.toLowerCase()).length === 0
+          ? w.charAt(0).toUpperCase() + w.slice(1)
+          : lowerCase(w, index),
+      )
+      .join(' ')
+  }
 
-    const lowerCase = (str, index) => {
-        const lowerCaseString = (str || '').toLowerCase()
-        return index === 0 ? lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1) : lowerCaseString
-    }
+  const lowerCase = (str, index) => {
+    const lowerCaseString = (str || '').toLowerCase()
+    return index === 0
+      ? lowerCaseString.charAt(0).toUpperCase() + lowerCaseString.slice(1)
+      : lowerCaseString
+  }
 }