@kigi/components 1.55.0 → 1.56.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.55.0",
+  "version": "1.56.0-beta.1",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {
@@ -100,4 +100,4 @@
     "webpack": "^2.5.1",
     "webpack-dev-server": "^2.6.1"
   }
-}
+}

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-tags/mbg-input-tags.html

@@ -8,9 +8,8 @@
            ng-blur="$ctrl.ngBlur({ $event })"
            ng-focus="$ctrl.ngFocus({ $event })"
            ng-keyup="$ctrl.onKeyUp({ $event })"
-           ng-keypress="$ctrl.onKeypress({ $event })"
-           ng-keydown="$ctrl.onKeydown({ $event })"
-           ng-paste="$ctrl.onPaste({$event})"
+           ng-keypress="$ctrl.ngKeypress({ $event })"
+           ng-keydown="$ctrl.ngKeydown({ $event })"
            placeholder="{{ $ctrl.props.placeholder }}" />
     <div class="mbg-input-tags-content">
         <div ng-repeat="tag in $ctrl.ngModel track by $index">
@@ -42,7 +41,4 @@
             </div>
         </div>
     </div>
-</div>
-<span class="flex justify-end">
-    {{$ctrl.validadeLength() }} / {{$ctrl.maxlength}} Caracteres
-</span>
+</div>

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

@@ -1,6 +1,5 @@
 import './mbg-input-tags.scss'
 import template from './mbg-input-tags.html'
-import { HelperNotificationService } from 'modules/helpers/services/notification.service'
 
 class MbgInputTagsController {
     private ngChange
@@ -10,15 +9,8 @@ class MbgInputTagsController {
     private ngKeyup
     private props
     private inputValue: string
-    private maxlength: number
-    private ngKeypress
-    private ngPaste
 
-    constructor(public $scope,
-                public $element,
-                public $attrs,
-                public $timeout,
-                public helperNotificationService: HelperNotificationService) {
+    constructor(public $scope, public $element, public $attrs) {
         if ($attrs.ngRequired === '') { this.ngRequired = true }
         if ($attrs.ngDisabled === '') { this.ngDisabled = true }
         this.props = {
@@ -47,58 +39,8 @@ class MbgInputTagsController {
         }
     }
 
-    onKeypress(param) {
-        const evt = param.$event
-
-        let keywordsTotalLength = this.ngModel.reduce((total, keyword) => total + keyword.length, 0)
-        if (keywordsTotalLength === this.maxlength) {
-            this.inputValue = '';
-            param.$event.preventDefault()
-            this.helperNotificationService.error('Limite de caracteres atingido!')
-            return
-        }
-        if (evt.target && evt.target.value && this.maxlength && this.validadeLength(evt.target.value, keywordsTotalLength) >= this.maxlength) {
-            param.$event.preventDefault()
-            param.$event.stopPropagation()
-            return
-        }
-        if (this.ngKeypress) {
-            this.ngKeypress(param)
-        }
-    }
-
-
-    onPaste(param) {
-        const evt = param.$event;
-        const currentInputValue = this.inputValue || '';
-        const keywordsTotalLength = this.ngModel.reduce((total, keyword) => total + keyword.length, 0);
-        const actualLength = currentInputValue.length;
-        const maxLengthRemaining = this.maxlength - keywordsTotalLength;
-
-        navigator.clipboard.readText().then((text) => {
-            const pastedValue = text || '';
-
-            let spaceLeft = maxLengthRemaining - actualLength;
-
-            if (spaceLeft > 0) {
-                this.$timeout(() => {
-                    const partiallyPastedValue = pastedValue.slice(0, spaceLeft);
-                    this.inputValue = `${currentInputValue}${partiallyPastedValue}`;
-                    this.ngPaste && this.ngPaste(param);
-                });
-            } else {
-                this.inputValue = '';
-                evt.preventDefault();
-                this.helperNotificationService.error('Limite de caracteres atingido!')
-            }
-        }).catch((err) => {
-            console.error('Erro ao acessar o texto do clipboard:', err);
-        });
-    }
-
     addTag(str: string) {
         const newTag = str.trim()
-        if (!newTag) { return }
         if ((this.ngModel || []).filter((tag) => tag === newTag).length === 0) {
             this.ngModel.push(newTag)
         }
@@ -108,14 +50,9 @@ class MbgInputTagsController {
         this.ngModel.splice(index, 1)
     }
 
-    validadeLength(currentInputValue, keywordsTotalLength) {
-        const inputValueLength = (currentInputValue || this.inputValue || '').length
-        return this.ngModel.reduce((total, keyword) => total + keyword.length, 0) + inputValueLength
-    }
-
 }
 
-MbgInputTagsController.$inject = ['$scope', '$element', '$attrs', '$timeout', 'helperNotificationService']
+MbgInputTagsController.$inject = ['$scope', '$element', '$attrs']
 
 const mbgInputTags = {
     bindings: {
@@ -129,7 +66,6 @@ const mbgInputTags = {
         ngKeypress: '&?',
         ngKeydown: '&?',
         inputValue: '=?',
-        maxlength: '=?'
     },
     template,
     controller: MbgInputTagsController,

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

@@ -83,6 +83,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,8 @@ class MbgSelectController {
   private callBackFavorite: Function
   private favoriteModel
   private productKitList: boolean
+  private focusableElements
+  private nextIndex
 
   constructor(
     public $scope,
@@ -357,7 +360,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 +512,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)

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()
+  }
+}