@kigi/components 1.4.7 → 1.4.8

package/package.json

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

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

@@ -88,12 +88,17 @@
     <ul class="ul-options"
         vs-repeat="{size: {{$ctrl.transcludeSize || 'null'}}}">
       <li ng-mousedown="$ctrl.selectOption(item)"
+          class="mbg-item-select"
           ng-style="$ctrl.transcludeSize && {'min-height': $ctrl.transcludeSize}"
           ng-repeat="item in $ctrl.data">
         <div ng-if="$ctrl.transcludeTemplate"
              mbg-dynamic-html="$ctrl.transcludeTemplate"></div>
-        <div ng-if="!$ctrl.transcludeTemplate && $ctrl.labelValue">{{item[$ctrl.labelValue]}}</div>
-        <div ng-if="!$ctrl.transcludeTemplate && !$ctrl.labelValue">{{item}}</div>
+        <div ng-if="!$ctrl.transcludeTemplate && $ctrl.labelValue"><span
+                ng-class="{'mbg-item-animation': item[$ctrl.labelValue].length > 30}">{{item[$ctrl.labelValue]}}</span>
+        </div>
+        <div ng-if="!$ctrl.transcludeTemplate && !$ctrl.labelValue"><span
+                ng-class="{'mbg-item-animation': item.length > 30}">{{item}}</span>
+        </div>
         <i title="Favoritar"
            ng-if="$ctrl.enableFavorite"
            ng-mousedown="$ctrl.favorite($event, item)"
@@ -115,4 +120,4 @@
       </li>
     </ul>
   </div>
-</div>
+</div>

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

@@ -1,5 +1,6 @@
 .mbg-select-wrapper {
   position: relative;
+
   .mbg-select-input-fake {
     border: 1px solid #ddd;
     background: #fff;
@@ -131,7 +132,8 @@
       transform: rotate(40deg);
       opacity: 0.4;
 
-      &:hover, &.fixed {
+      &:hover,
+      &.fixed {
         transform: rotate(0deg);
         opacity: 1;
       }
@@ -170,3 +172,35 @@ mbg-select[disabled="disabled"] {
     font-weight: 500;
   }
 }
+
+.mbg-item-select {
+  span.mbg-item-animation {
+    left: 0;
+    transition-delay: 1s;
+  }
+
+  &:hover {
+    text-overflow: initial;
+
+    span.mbg-item-animation {
+      display: inline-block;
+      position: relative;
+      animation: animation-select-label 5s infinite;
+    }
+  }
+}
+
+@keyframes animation-select-label {
+  0% {
+    transform: translateX(0%);
+  }
+  15% {
+    transform: translateX(0%);
+  }
+  80% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}

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

@@ -1,14 +1,14 @@
-<div class="mbg-text-area-wrapper mb-text-area-wrapper">
+<div class="mbg-text-wrapper mb-text-area-wrapper">
     <textarea 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-keyup="$ctrl.ngKeyup({ $event })"
-              ng-keypress="$ctrl.ngKeypress({ $event })"
-              ng-keydown="$ctrl.ngKeydown({ $event })"
-              placeholder="{{ $ctrl.placeholder }}">
+           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-keyup="$ctrl.ngKeyup({ $event })"
+           ng-keypress="$ctrl.ngKeypress({ $event })"
+           ng-keydown="$ctrl.ngKeydown({ $event })"
+           placeholder="{{ $ctrl.placeholder }}" >
     </textarea>
 </div>

package/src/components/mbg-text-area/mbg-text-area.scss

@@ -1,23 +1,3 @@
-.mbg-text-area-wrapper {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    height: 74px;
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-
-    textarea {
-        border: none;
-        padding: 8px 14px;
-        flex: 1;
-        background: transparent;
-        outline: none;
-        width: 500px;
-        &[disabled="disabled"] {
-            background: #f5f5f5;
-        }
-        font-weight: 500;
-    }
-}
+// .mbg-text-area-wrapper {
+   
+// }

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

@@ -4,4 +4,4 @@
             placeholder="{{ $ctrl.placeholder }}"
             id="editor-{{$ctrl.uid}}"
             name="editor-{{$ctrl.uid}}"></textarea>
-</div>
+</div>

package/src/helpers/mbg-error/mbg-error.ts

@@ -78,8 +78,6 @@ export class MbgError {
       return currentInput.length === 0
         ? elm[0].nodeName === 'MBG-SELECT' || elm[0].nodeName === 'MBG-MULTI-SELECT'
           ? angular.element(document.querySelector(`.mbg-select-list[uid="${selectUid}"] input`))
-          : elm[0].nodeName === 'MBG-TEXT-AREA'
-          ? elm.find('textarea')
           : elm.find('input')
         : elm.find('input')
     }
@@ -129,11 +127,6 @@ export class MbgError {
           element = elm.find('.mbg-select-input-fake')
           handleClassError(element, type)
           break
-
-        case 'MBG-TEXT-AREA':
-          element = elm.find('.mbg-text-area-wrapper')
-          handleClassError(element, type)
-          break
         case 'MBG-INPUT-STEP':
           element = elm.find('.mb-input-step-wrapper')
           handleClassError(element, type)
@@ -176,4 +169,4 @@ export class MbgError {
   }
 }
 
-MbgError['$inject'] = ['$timeout']
+MbgError.$inject = ['$timeout']