@kigi/components 1.62.1-beta.4 → 1.62.3-beta.1

package/package.json

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

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

@@ -152,65 +152,44 @@ class MbgAddressController {
   }
 
   afterLoad() {
-    const inputPlace = this.$element.find('.input-place')[0]
-    const autocomplete = new google.maps.places.Autocomplete(inputPlace, { types: ['address'] })
-
-    autocomplete.setFields(['address_component', 'geometry'])
-
+    const autocomplete = new google.maps.places.Autocomplete(
+      this.$element.find('.input-place')[0],
+      { types: ['address'] },
+    )
+    autocomplete.setFields(['address_component'])
     autocomplete.addListener('place_changed', () => {
       this.$timeout(() => {
         const place = autocomplete.getPlace()
+        if (place.address_components) {
+          for (const component of place.address_components) {
+            const types = component.types || []
+            if (types.includes('route')) {
+              this.address.premisse = component.long_name
+            }
 
-        if (!place.address_components) return
-
-        const newAddress: any = {
-          country: 'Brasil',
-        }
-
-        for (const component of place.address_components) {
-          const types = component.types || []
-          const longName = component.long_name || ''
-          const shortName = component.short_name || ''
-
-          if (types.includes('route')) {
-            newAddress.premisse = longName
-          }
-
-          if (
-            types.includes('sublocality_level_1') ||
-            types.includes('sublocality') ||
-            types.includes('neighborhood')
-          ) {
-            newAddress.neighbourhood = longName
-          }
-
-          if (types.includes('administrative_area_level_2')) {
-            newAddress.localization = longName
-          }
-
-          if (types.includes('administrative_area_level_1')) {
-            newAddress.uf = { name: longName, initial: shortName }
-          }
-
-          if (types.includes('country')) {
-            newAddress.country = longName
-          }
+            if (
+              types.includes('sublocality_level_1') ||
+              types.includes('sublocality') ||
+              types.includes('neighborhood')
+            ) {
+              this.address.neighbourhood = component.long_name
+            }
 
-          if (types.includes('postal_code')) {
-            newAddress.zipCode = longName.replace(/-/g, '')
+            if (types.includes('administrative_area_level_2')) {
+              this.address.localization = component.long_name
+            }
+            if (types.includes('administrative_area_level_1')) {
+              this.address.uf = { name: component.long_name, initial: component.short_name }
+            }
+            if (types.includes('country')) {
+              this.address.country = component.long_name
+            }
+            if (types.includes('postal_code')) {
+              this.address.zipCode = component.long_name.replace(/-/g, '')
+            }
+            this.focusInputNumber()
           }
         }
-
-        this.address = newAddress
-
-        this.focusInputNumber()
-
-        const hasAddressData = newAddress.uf && newAddress.localization && newAddress.premisse
-        const missingZip = !newAddress.zipCode
-
-        if (hasAddressData && missingZip) {
-          this.searchAddressInfo()
-        }
       })
     })
   }

package/src/components/mbg-input-password/mbg-input-password.html

@@ -7,8 +7,8 @@
          ng-change="$ctrl.onChange()"
          ng-required="$ctrl.ngRequired"
          ng-disabled="$ctrl.ngDisabled"
-         ng-blur="$ctrl.ngBlur({ $event })"
-         ng-focus="$ctrl.ngFocus({ $event })"
+         ng-blur="$ctrl.onBlur(); $ctrl.ngBlur({ $event })"
+         ng-focus="$ctrl.onFocus(); $ctrl.ngFocus({ $event })"
          ng-keyup="$ctrl.ngKeyup({ $event })"
          ng-keypress="$ctrl.ngKeypress({ $event })"
          ng-keydown="$ctrl.ngKeydown({ $event })"
@@ -18,4 +18,15 @@
      ng-if="$ctrl.showBtnPassword">
     <i class="fas {{$ctrl.show ? 'fa-eye' : 'fa-eye-slash' }}"></i>
   </a>
+  <div class="mbg-password-rules-modal"
+       ng-if="$ctrl.showRules && $ctrl.rulesVisible">
+    <ul>
+      <li ng-repeat="rule in $ctrl.rules"
+          ng-class="{'rule-valid': rule.check($ctrl.ngModel)}">
+        <i class="fas"
+           ng-class="rule.check($ctrl.ngModel) ? 'fa-check' : 'fa-circle'"></i>
+        {{ rule.label }}
+      </li>
+    </ul>
+  </div>
 </div>

package/src/components/mbg-input-password/mbg-input-password.scss

@@ -11,4 +11,45 @@
         right: 0;
         padding: 13px 10px;  
     } 
+
+    .mbg-password-rules-modal {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        z-index: 1000;
+        margin-top: 5px;
+        padding: 10px;
+
+        ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+
+            li {
+                font-size: 12px;
+                color: #999;
+                margin-bottom: 5px;
+                display: flex;
+                align-items: center;
+
+                i {
+                    margin-right: 8px;
+                    font-size: 10px;
+                    width: 12px;
+                }
+
+                &.rule-valid {
+                    color: #28a745;
+                    i {
+                        color: #28a745;
+                    }
+                }
+            }
+        }
+    }
 }

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

@@ -6,6 +6,9 @@ class MbgInputPasswordController {
   private ngModel
   private ngRequired
   private ngDisabled
+  private showRules
+  private rulesVisible = false
+  private rules = []
   private props
 
   constructor(public $scope, public $element, public $attrs) {
@@ -18,7 +21,29 @@ class MbgInputPasswordController {
     this.props = {
       placeholder: $attrs.placeholder || '',
     }
+    this.initRules()
   }
+
+  initRules() {
+    this.rules = [
+      { label: 'Mínimo 8 caracteres', check: (val) => !!(val && val.length >= 8) },
+      { label: 'Letra maiúscula', check: (val) => !!(val && /[A-Z]/.test(val)) },
+      { label: 'Letra minúscula', check: (val) => !!(val && /[a-z]/.test(val)) },
+      { label: 'Número', check: (val) => !!(val && /[0-9]/.test(val)) },
+      { label: 'Caractere especial (ex.: !@#$%^&*)', check: (val) => !!(val && /[!@#$%^&*]/.test(val)) },
+    ]
+  }
+
+  onFocus() {
+    if (this.showRules) {
+      this.rulesVisible = true
+    }
+  }
+
+  onBlur() {
+    this.rulesVisible = false
+  }
+
   onChange() {
     if (this.ngChange) {
       this.ngChange({})
@@ -39,6 +64,7 @@ const mbgInputPassword = {
     ngKeypress: '&?',
     ngKeydown: '&?',
     showBtnPassword: '=?',
+    showRules: '=?',
   },
   template,
   controller: MbgInputPasswordController,

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

@@ -12,6 +12,8 @@ class MbgInputPhoneController {
   private maxLength: number
 
   constructor(public $scope, public $element, public $attrs) {
+    this.phoneNumberMask = this.enableCountryCode ? 'countryCode' : 'areaCode'
+    this.maxLength = this.maxLength ? this.maxLength : this.enableCountryCode ? 19 : 15
     if ($attrs.ngRequired === '') {
       this.ngRequired = true
     }
@@ -23,14 +25,6 @@ class MbgInputPhoneController {
     }
   }
 
-  $onInit() {
-    this.phoneNumberMask = this.enableCountryCode ? 'countryCode' : 'areaCode'
-
-    if (!this.maxLength) {
-      this.maxLength = this.enableCountryCode ? 19 : 15
-    }
-  }
-
   onChange() {
     if (this.ngChange) {
       this.ngChange({})