@kigi/components 1.56.0-beta.1 → 1.56.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.56.0-beta.1",
+  "version": "1.56.0-beta.2",
   "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-tags/mbg-input-tags.html

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

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

@@ -1,5 +1,6 @@
 import './mbg-input-tags.scss'
 import template from './mbg-input-tags.html'
+import { HelperNotificationService } from 'modules/helpers/services/notification.service'
 
 class MbgInputTagsController {
     private ngChange
@@ -9,8 +10,15 @@ class MbgInputTagsController {
     private ngKeyup
     private props
     private inputValue: string
+    private maxlength: number
+    private ngKeypress
+    private ngPaste
 
-    constructor(public $scope, public $element, public $attrs) {
+    constructor(public $scope,
+                public $element,
+                public $attrs,
+                public $timeout,
+                public helperNotificationService: HelperNotificationService) {
         if ($attrs.ngRequired === '') { this.ngRequired = true }
         if ($attrs.ngDisabled === '') { this.ngDisabled = true }
         this.props = {
@@ -39,8 +47,58 @@ 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)
         }
@@ -50,9 +108,14 @@ 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']
+MbgInputTagsController.$inject = ['$scope', '$element', '$attrs', '$timeout', 'helperNotificationService']
 
 const mbgInputTags = {
     bindings: {
@@ -66,6 +129,7 @@ const mbgInputTags = {
         ngKeypress: '&?',
         ngKeydown: '&?',
         inputValue: '=?',
+        maxlength: '=?'
     },
     template,
     controller: MbgInputTagsController,

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>

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

@@ -52,6 +52,7 @@ class MbgSelectController {
   private callBackFavorite: Function
   private favoriteModel
   private productKitList: boolean
+  private disableClearButton: boolean
   private focusableElements
   private nextIndex
 
@@ -68,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()
@@ -759,6 +761,7 @@ const mbgSelect = {
     mountValue: '&?',
     callBackFavorite: '&?',
     productKitList: '=?',
+    disableClearButton: '=?',
   },
   controller: MbgSelectController,
   template,