@kigi/components 1.53.0 → 1.54.0

package/package.json

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

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,