@kigi/components 1.52.0 → 1.53.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.52.0",
+  "version": "1.53.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-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

@@ -9,8 +9,11 @@ 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) {
         if ($attrs.ngRequired === '') { this.ngRequired = true }
         if ($attrs.ngDisabled === '') { this.ngDisabled = true }
         this.props = {
@@ -39,6 +42,35 @@ class MbgInputTagsController {
         }
     }
 
+    onKeypress(param) {
+        const evt = param.$event
+        if (evt.target && evt.target.value && this.maxlength && this.validadeLength(evt.target.value) >= this.maxlength) {
+            param.$event.preventDefault()
+            param.$event.stopPropagation()
+            return
+        }
+        if (this.ngKeypress) {
+            this.ngKeypress(param)
+        }
+    }
+
+    onPaste(param) {
+        let currentInputValue = this.inputValue;
+        let actualLength = (this.inputValue || '').length
+
+        navigator.clipboard.readText().then(text => {
+            let pastedValue = text;
+            let pastedLength = pastedValue.length;
+            if (pastedLength + actualLength > this.maxlength) {
+                this.$timeout(() => {
+                    let partiallyPastedValue = pastedValue.slice(0, this.maxlength - actualLength);
+                    this.inputValue = `${currentInputValue}${partiallyPastedValue}`
+                    this.ngPaste && this.ngPaste(param);
+                })
+            }
+        })
+    }
+
     addTag(str: string) {
         const newTag = str.trim()
         if ((this.ngModel || []).filter((tag) => tag === newTag).length === 0) {
@@ -50,9 +82,14 @@ class MbgInputTagsController {
         this.ngModel.splice(index, 1)
     }
 
+    validadeLength(currentInputValue) {
+        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']
 
 const mbgInputTags = {
     bindings: {
@@ -66,6 +103,7 @@ const mbgInputTags = {
         ngKeypress: '&?',
         ngKeydown: '&?',
         inputValue: '=?',
+        maxlength: '=?'
     },
     template,
     controller: MbgInputTagsController,