@kigi/components 1.55.0 → 1.56.0-beta.2

package/package.json

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

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

@@ -12,7 +12,7 @@
          ng-focus="$ctrl.ngFocus({ $event })"
          ng-keyup="$ctrl.ngKeyup({ $event })"
          ng-keypress="$ctrl.ngKeypress({ $event })"
-         ng-keydown="$ctrl.ngKeydown({ $event })"
+         ng-keydown="$ctrl.onInputKeydown($event)"
          ui-date-mask="{{ $ctrl.format }}" />
   <!-- with calendar -->
   <input type="text"
@@ -27,7 +27,7 @@
          ng-focus="$ctrl.handleFocus({ $event })"
          ng-keyup="$ctrl.ngKeyup({ $event })"
          ng-keypress="$ctrl.ngKeypress({ $event })"
-         ng-keydown="$ctrl.ngKeydown({ $event })"
+         ng-keydown="$ctrl.onInputKeydown($event)"
          ui-date-mask="{{ $ctrl.format }}"
          only-month-year="$ctrl.onlyMonthYear"
          ng-class="{'input-date':$ctrl.titleMode}"
@@ -46,7 +46,7 @@
            ng-focus="$ctrl.handleFocus({ $event })"
            ng-keyup="$ctrl.ngKeyup({ $event })"
            ng-keypress="$ctrl.ngKeypress({ $event })"
-           ng-keydown="$ctrl.ngKeydown({ $event })"
+           ng-keydown="$ctrl.onInputKeydown($event)"
            ui-date-mask="{{ $ctrl.format }}"
            on-select="$ctrl.onSelectStart()"
            only-month-year="$ctrl.onlyMonthYear"
@@ -65,7 +65,7 @@
            ng-focus="$ctrl.handleFocus({ $event })"
            ng-keyup="$ctrl.ngKeyup({ $event })"
            ng-keypress="$ctrl.ngKeypress({ $event })"
-           ng-keydown="$ctrl.ngKeydown({ $event })"
+           ng-keydown="$ctrl.onInputKeydown($event)"
            ui-date-mask="{{ $ctrl.format }}"
            on-select="$ctrl.onSelectEnd()"
            only-month-year="$ctrl.onlyMonthYear"

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

@@ -1,5 +1,6 @@
-import './mbg-input-date.scss'
+import { focusNextElement, getNextFocusableElement } from '../../helpers/custom-key-down'
 import template from './mbg-input-date.html'
+import './mbg-input-date.scss'
 declare let $
 
 class MbgInputDateController {
@@ -17,7 +18,7 @@ class MbgInputDateController {
   public betweenText: string
   public filterDate: Function
   public onlyMonthYear: boolean
-
+  private ngKeydown: Function
 
   constructor(public $scope, public $element, public $attrs, public $timeout) {
     if ($attrs.ngRequired === '') {
@@ -110,6 +111,25 @@ class MbgInputDateController {
         this.ngModel.end ? this.ngModel.end.getTime() >= new Date(date).getTime() : true,
     })
   }
+
+  onInputKeydown(evt) {
+    if (this.ngDisabled) {
+      return
+    }
+
+    switch (evt.keyCode) {
+      case 9: // TAB
+        evt.preventDefault()
+        evt.stopPropagation()
+        const { focusableElements, nextIndex } = getNextFocusableElement(this.$element)
+        focusNextElement(focusableElements, nextIndex)
+        break
+    }
+
+    if (this.ngKeydown) {
+      this.ngKeydown({ $event: evt })
+    }
+  }
 }
 
 MbgInputDateController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']

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

@@ -2,13 +2,14 @@
      tabindex="-1"
      ng-click="$ctrl.selectInput()"
      ng-if="$ctrl.props">
-    <input type="text"
-           ng-model="$ctrl.ngModel"
-           ng-change="$ctrl.onChange()"
-           ng-required="$ctrl.ngRequired"
-           ng-disabled="$ctrl.ngDisabled"
-           ng-blur="$ctrl.ngBlur({ $event })"
-           ng-focus="$ctrl.ngFocus({ $event })"
-           ui-money-mask="{{ $ctrl.props.precision }}"
-           placeholder="{{ $ctrl.props.placeholder }}" />
+     <input type="text"
+            ng-model="$ctrl.ngModel"
+            ng-change="$ctrl.onChange()"
+            ng-required="$ctrl.ngRequired"
+            ng-disabled="$ctrl.ngDisabled"
+            ng-blur="$ctrl.ngBlur({ $event })"
+            ng-focus="$ctrl.ngFocus({ $event })"
+            ng-keydown="$ctrl.onInputKeydown($event)"
+            ui-money-mask="{{ $ctrl.props.precision }}"
+            placeholder="{{ $ctrl.props.placeholder }}" />
 </div>

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

@@ -1,54 +1,79 @@
-import './mbg-input-money.scss'
+import { focusNextElement, getNextFocusableElement } from '../../helpers/custom-key-down'
 import template from './mbg-input-money.html'
+import './mbg-input-money.scss'
 
 class MbgInputMoneyController {
-    private ngChange
-    private ngModel
-    private ngRequired
-    private ngDisabled
-    private props
-    private ngKeyup: Function
-
-    constructor(public $scope, public $element, public $attrs) {
-        if ($attrs.ngRequired === '') { this.ngRequired = true }
-        if ($attrs.ngDisabled === '') { this.ngDisabled = true }
-        this.props = {
-            placeholder: $attrs.placeholder || '',
-            prefix: $attrs.prefix || 'R$ ',
-            decimal: $attrs.decimal || ',',
-            thousands: $attrs.decimal || '.',
-            precision: this.$scope.$parent.$eval($attrs.precision) || 2,
-            allowNegative: $attrs.allowNegative ? JSON.parse($attrs.allowNegative) : true,
-            allowZero: $attrs.allowZero ? JSON.parse($attrs.allowZero) : false,
-            allowEmpty: $attrs.allowEmpty ? JSON.parse($attrs.allowEmpty) : false,
-        }
+  private ngChange
+  private ngModel
+  private ngRequired
+  private ngDisabled
+  private props
+  private ngKeyup: Function
+  private ngKeydown: Function
+
+  constructor(public $scope, public $element, public $attrs) {
+    if ($attrs.ngRequired === '') {
+      this.ngRequired = true
+    }
+    if ($attrs.ngDisabled === '') {
+      this.ngDisabled = true
+    }
+    this.props = {
+      placeholder: $attrs.placeholder || '',
+      prefix: $attrs.prefix || 'R$ ',
+      decimal: $attrs.decimal || ',',
+      thousands: $attrs.decimal || '.',
+      precision: this.$scope.$parent.$eval($attrs.precision) || 2,
+      allowNegative: $attrs.allowNegative ? JSON.parse($attrs.allowNegative) : true,
+      allowZero: $attrs.allowZero ? JSON.parse($attrs.allowZero) : false,
+      allowEmpty: $attrs.allowEmpty ? JSON.parse($attrs.allowEmpty) : false,
     }
+  }
 
-    onChange() {
-        if (this.ngChange) {
-            this.ngChange({})
-        }
+  onChange() {
+    if (this.ngChange) {
+      this.ngChange({})
     }
+  }
 
-    selectInput() {
-        this.$element.find('input').select()
+  selectInput() {
+    this.$element.find('input').select()
+  }
+
+  onInputKeydown(evt) {
+    if (this.ngDisabled) {
+      return
+    }
+
+    switch (evt.keyCode) {
+      case 9: // TAB
+        evt.preventDefault()
+        evt.stopPropagation()
+        const { focusableElements, nextIndex } = getNextFocusableElement(this.$element)
+        focusNextElement(focusableElements, nextIndex)
+        break
     }
 
+    if (this.ngKeydown) {
+      this.ngKeydown({ $event: evt })
+    }
+  }
 }
 
-MbgInputMoneyController.$inject = ['$scope', '$element', '$attrs']
+MbgInputMoneyController['$inject'] = ['$scope', '$element', '$attrs']
 
 const mbgInputMoney = {
-    bindings: {
-        ngModel: '=',
-        ngChange: '&?',
-        ngRequired: '=?',
-        ngDisabled: '=?',
-        ngBlur: '&?',
-        ngFocus: '&?'
-    },
-    template,
-    controller: MbgInputMoneyController,
+  bindings: {
+    ngModel: '=',
+    ngChange: '&?',
+    ngRequired: '=?',
+    ngDisabled: '=?',
+    ngBlur: '&?',
+    ngFocus: '&?',
+    ngKeydown: '&?',
+  },
+  template,
+  controller: MbgInputMoneyController,
 }
 
 export { mbgInputMoney }

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

@@ -3,6 +3,7 @@
      <input type="text"
             ng-model="$ctrl.ngModel"
             ng-change="$ctrl.onChange($event)"
+            ng-keydown="$ctrl.onInputKeydown($event)"
             ng-required="$ctrl.ngRequired"
             ng-disabled="$ctrl.ngDisabled"
             ng-blur="$ctrl.ngBlur({ $event })"

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

@@ -1,7 +1,7 @@
-import './mbg-input-text.scss'
-import * as angular from 'angular'
-import template from './mbg-input-text.html'
 import { Capitalize } from '../../helpers/capitalize'
+import { focusNextElement, getNextFocusableElement } from '../../helpers/custom-key-down'
+import template from './mbg-input-text.html'
+import './mbg-input-text.scss'
 
 class MbgInputTextController {
   private ngChange
@@ -12,6 +12,8 @@ class MbgInputTextController {
   private ngKeydown
   private ngValue
   private capitalize
+  private focusableElements
+  private nextIndex
 
   constructor(public $scope, public $element, public $attrs) {
     if ($attrs.ngRequired === '') {
@@ -49,14 +51,27 @@ class MbgInputTextController {
     }
   }
 
-  onKeydown($event: Event) {
-    $event.stopPropagation()
+  onInputKeydown(evt) {
+    if (this.ngDisabled) {
+      return
+    }
+
+    switch (evt.keyCode) {
+      case 9: // TAB
+        evt.preventDefault()
+        evt.stopPropagation()
+        const { focusableElements, nextIndex } = getNextFocusableElement(this.$element)
+        focusNextElement(focusableElements, nextIndex)
+        break
+    }
+
     if (this.ngKeydown) {
-      this.ngKeydown({ $event })
+      this.ngKeydown({ $event: evt })
     }
   }
 }
-MbgInputTextController.$inject = ['$scope', '$element', '$attrs']
+
+MbgInputTextController['$inject'] = ['$scope', '$element', '$attrs']
 
 const mbgInputText = {
   bindings: {

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

@@ -41,10 +41,11 @@
     </path>
   </svg>
   <i class="fa fa-caret-down mbg-icon-select"
-     ng-show="!$ctrl.ngModel && !$ctrl.isLoading"
+     ng-show="(!$ctrl.ngModel && !$ctrl.isLoading) || $ctrl.disableClearButton"
      ng-click="$ctrl.clickArrow()"
      aria-hidden="true"></i>
   <i class="fa fa-times mbg-icon-select"
+     ng-if="!$ctrl.disableClearButton"
      ng-show="$ctrl.ngModel && !$ctrl.isLoading"
      aria-hidden="true"
      ng-click="$ctrl.clearNgModel(true)"></i>
@@ -83,6 +84,7 @@
       <input ng-model="$ctrl.inputValue"
              ng-keydown="$ctrl.onInputKeydown($event)"
              ng-blur="$ctrl.onInputBlur()"
+             ng-disabled="$ctrl.ngDisabled"
              placeholder="Digite algo para pesquisar..."
              ng-change="$ctrl.onInputChange()" />
     </div>

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

@@ -1,10 +1,11 @@
-import { Capitalize } from '../../helpers/capitalize'
 import * as angular from 'angular'
-import './mbg-select.scss'
-import template from './mbg-select.html'
+import { AbsPosition } from '../../helpers/abs-position'
+import { Capitalize } from '../../helpers/capitalize'
 import { MbgCookie } from '../../helpers/cookie'
+import { focusNextElement, getNextFocusableElement } from '../../helpers/custom-key-down'
 import { UtilUID } from '../../helpers/util-uid'
-import { AbsPosition } from '../../helpers/abs-position'
+import template from './mbg-select.html'
+import './mbg-select.scss'
 
 class MbgSelectController {
   private data: any
@@ -51,6 +52,9 @@ class MbgSelectController {
   private callBackFavorite: Function
   private favoriteModel
   private productKitList: boolean
+  private disableClearButton: boolean
+  private focusableElements
+  private nextIndex
 
   constructor(
     public $scope,
@@ -65,6 +69,7 @@ class MbgSelectController {
     this.fixedValue = this.ngValue || 'id'
     this.inputValue = ''
     this.enableAdd = this.enableAdd || false
+    this.disableClearButton = this.disableClearButton || false
     this.observeModel()
     this.updateInputValue()
     this.findTransclude()
@@ -357,7 +362,10 @@ class MbgSelectController {
         this.moveToDown()
         break
       case 9: // TAB
+        evt.preventDefault()
+        evt.stopPropagation()
         this.setModel()
+        focusNextElement(this.focusableElements, this.nextIndex)
         break
       case 8: // BACKSPACE
         this.cancelBeforePromise()
@@ -506,6 +514,9 @@ class MbgSelectController {
   }
 
   addInBody() {
+    const { focusableElements, nextIndex } = getNextFocusableElement(this.$element)
+    this.focusableElements = focusableElements
+    this.nextIndex = nextIndex
     const body = angular.element(document).find('body')
     const list = this.$element.find('.mbg-select-list')
     list.attr('uid', this.uid)
@@ -750,6 +761,7 @@ const mbgSelect = {
     mountValue: '&?',
     callBackFavorite: '&?',
     productKitList: '=?',
+    disableClearButton: '=?',
   },
   controller: MbgSelectController,
   template,

package/src/helpers/custom-key-down.ts

@@ -0,0 +1,28 @@
+import * as angular from 'angular'
+
+export function getNextFocusableElement(element) {
+  var input = element.find('input')[0]
+  const focusableSelectors = 'input, select, textarea, button, a[href]'
+  const focusableElements = Array.from(document.querySelectorAll(focusableSelectors)).filter(
+    (el: any) => {
+      const notDisabled = !el.disabled && el.tabIndex !== -1
+      const isVisible = !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
+      const isNotButton = el.tagName.toLowerCase() !== 'button'
+      return notDisabled && isVisible && isNotButton
+    },
+  )
+
+  const currentIndex = focusableElements.indexOf(input)
+  const nextIndex = (currentIndex + 1) % focusableElements.length
+  return { focusableElements, nextIndex }
+}
+
+export function focusNextElement(focusableElements, nextIndex) {
+  const nextElement = focusableElements[nextIndex]
+  const nextScope = angular.element(focusableElements[nextIndex]).scope()
+  if (nextScope && nextScope.$ctrl && nextScope.$ctrl.clickInputFake) {
+    nextScope.$ctrl.clickInputFake()
+  } else {
+    nextElement.focus()
+  }
+}