@kigi/components 1.27.9-alpha → 1.28.0-alpha

package/package.json

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

package/src/components/mbg-btn-form/mbg-btn-form.html

@@ -8,4 +8,4 @@
     <span ng-if="$ctrl.loading || $ctrl.virtualDisable"
           class="mbg-btn-loading"></span>
   </button>
-</div>
+</div>

package/src/components/mbg-btn-form/mbg-btn-form.ts

@@ -23,7 +23,7 @@ class MbgBtnFormController {
     }
   }
 }
-MbgBtnFormController.$inject = ['$scope', '$element', '$attrs', '$timeout']
+MbgBtnFormController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
 
 const mbgBtnForm = {
   bindings: {

package/src/components/mbg-input-date/mbg-input-date.html

@@ -1,73 +1,73 @@
 <div class="mbg-input-wrapper mb-input-date-wrapper"
      ng-if="$ctrl.props">
-       <!-- only mask -->
-       <input type="text"
-              ng-if="!$ctrl.calendar && !$ctrl.between"
-              ng-model="$ctrl.ngModel"
-              ng-change="$ctrl.onChange()"
-              placeholder="{{ $ctrl.placeholder }}"
-              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 })"
-              ui-date-mask="{{ $ctrl.format }}" />
-       <!-- with calendar -->
-       <input type="text"
-              class="input-with-calendar"
-              ng-if="$ctrl.calendar && !$ctrl.between"
-              ng-model="$ctrl.ngModel"
-              ng-change="$ctrl.onChange()"
-              placeholder="{{ $ctrl.placeholder }}"
-              ng-required="$ctrl.ngRequired"
-              ng-disabled="$ctrl.ngDisabled"
-              ng-blur="$ctrl.handleBlur({ $event })"
-              ng-focus="$ctrl.handleFocus({ $event })"
-              ng-keyup="$ctrl.ngKeyup({ $event })"
-              ng-keypress="$ctrl.ngKeypress({ $event })"
-              ng-keydown="$ctrl.ngKeydown({ $event })"
-              ui-date-mask="{{ $ctrl.format }}"
-              only-month-year="$ctrl.onlyMonthYear"
-              mbg-datepicker />
-       <!-- between dates -->
-       <div class="mbg-date-between"
-            ng-if="$ctrl.between">
-              <input type="text"
-                     class="mbg-date-between-start"
-                     ng-model="$ctrl.ngModel.start"
-                     ng-change="$ctrl.onChange()"
-                     placeholder="{{ $ctrl.props.placeholderStart }}"
-                     ng-required="$ctrl.ngRequired"
-                     ng-disabled="$ctrl.ngDisabled"
-                     ng-blur="$ctrl.handleBlur({ $event })"
-                     ng-focus="$ctrl.handleFocus({ $event })"
-                     ng-keyup="$ctrl.ngKeyup({ $event })"
-                     ng-keypress="$ctrl.ngKeypress({ $event })"
-                     ng-keydown="$ctrl.ngKeydown({ $event })"
-                     ui-date-mask="{{ $ctrl.format }}"
-                     on-select="$ctrl.onSelectStart()"
-                     only-month-year="$ctrl.onlyMonthYear"
-                     mbg-datepicker />
-              <div class="mbg-date-between-space">
-                     {{ $ctrl.betweenText == undefined ? 'Até' : $ctrl.betweenText }}
-              </div>
-              <input type="text"
-                     class="mbg-date-between-end"
-                     ng-model="$ctrl.ngModel.end"
-                     ng-change="$ctrl.onChangeEndDate()"
-                     placeholder="{{ $ctrl.props.placeholderEnd }}"
-                     ng-required="$ctrl.ngRequired"
-                     ng-disabled="$ctrl.ngDisabled"
-                     ng-blur="$ctrl.handleBlur({ $event })"
-                     ng-focus="$ctrl.handleFocus({ $event })"
-                     ng-keyup="$ctrl.ngKeyup({ $event })"
-                     ng-keypress="$ctrl.ngKeypress({ $event })"
-                     ng-keydown="$ctrl.ngKeydown({ $event })"
-                     ui-date-mask="{{ $ctrl.format }}"
-                     on-select="$ctrl.onSelectEnd()"
-                     only-month-year="$ctrl.onlyMonthYear"
-                     mbg-datepicker />
-       </div>
+  <!-- only mask -->
+  <input type="text"
+         ng-if="!$ctrl.calendar && !$ctrl.between"
+         ng-model="$ctrl.ngModel"
+         ng-change="$ctrl.onChange()"
+         placeholder="{{ $ctrl.placeholder }}"
+         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 })"
+         ui-date-mask="{{ $ctrl.format }}" />
+  <!-- with calendar -->
+  <input type="text"
+         class="input-with-calendar"
+         ng-if="$ctrl.calendar && !$ctrl.between"
+         ng-model="$ctrl.ngModel"
+         ng-change="$ctrl.onChange()"
+         placeholder="{{ $ctrl.placeholder }}"
+         ng-required="$ctrl.ngRequired"
+         ng-disabled="$ctrl.ngDisabled"
+         ng-blur="$ctrl.handleBlur({ $event })"
+         ng-focus="$ctrl.handleFocus({ $event })"
+         ng-keyup="$ctrl.ngKeyup({ $event })"
+         ng-keypress="$ctrl.ngKeypress({ $event })"
+         ng-keydown="$ctrl.ngKeydown({ $event })"
+         ui-date-mask="{{ $ctrl.format }}"
+         only-month-year="$ctrl.onlyMonthYear"
+         mbg-datepicker />
+  <!-- between dates -->
+  <div class="mbg-date-between"
+       ng-if="$ctrl.between">
+    <input type="text"
+           class="mbg-date-between-start"
+           ng-model="$ctrl.ngModel.start"
+           ng-change="$ctrl.onChange()"
+           placeholder="{{ $ctrl.props.placeholderStart }}"
+           ng-required="$ctrl.ngRequired"
+           ng-disabled="$ctrl.ngDisabled"
+           ng-blur="$ctrl.handleBlur({ $event })"
+           ng-focus="$ctrl.handleFocus({ $event })"
+           ng-keyup="$ctrl.ngKeyup({ $event })"
+           ng-keypress="$ctrl.ngKeypress({ $event })"
+           ng-keydown="$ctrl.ngKeydown({ $event })"
+           ui-date-mask="{{ $ctrl.format }}"
+           on-select="$ctrl.onSelectStart()"
+           only-month-year="$ctrl.onlyMonthYear"
+           mbg-datepicker />
+    <div class="mbg-date-between-space">
+      {{ $ctrl.betweenText == undefined ? 'Até' : $ctrl.betweenText }}
+    </div>
+    <input type="text"
+           class="mbg-date-between-end"
+           ng-model="$ctrl.ngModel.end"
+           ng-change="$ctrl.onChangeEndDate()"
+           placeholder="{{ $ctrl.props.placeholderEnd }}"
+           ng-required="$ctrl.ngRequired"
+           ng-disabled="$ctrl.ngDisabled"
+           ng-blur="$ctrl.handleBlur({ $event })"
+           ng-focus="$ctrl.handleFocus({ $event })"
+           ng-keyup="$ctrl.ngKeyup({ $event })"
+           ng-keypress="$ctrl.ngKeypress({ $event })"
+           ng-keydown="$ctrl.ngKeydown({ $event })"
+           ui-date-mask="{{ $ctrl.format }}"
+           on-select="$ctrl.onSelectEnd()"
+           only-month-year="$ctrl.onlyMonthYear"
+           mbg-datepicker />
+  </div>
 </div>

package/src/components/mbg-input-date/mbg-input-date.scss

@@ -13,6 +13,10 @@
   }
 }
 
+.mbg-input-wrapper {
+  display: block;
+}
+
 body {
   .datepicker-top-left, .datepicker-top-right {
     border-top-color: var(--primary);

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

@@ -111,7 +111,7 @@ class MbgInputDateController {
   }
 }
 
-MbgInputDateController.$inject = ['$scope', '$element', '$attrs', '$timeout']
+MbgInputDateController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
 
 const mbgInputDate = {
   bindings: {

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

@@ -1,8 +1,8 @@
 import './mbg-list.scss'
 import * as angular from 'angular'
 import template from './mbg-list.html'
-import { MbgListColumnController } from './components/mbg-list-column/mbg-list-column'
-import { MbgListRowController } from './components/mbg-list-row/mbg-list-row'
+import {MbgListColumnController} from './components/mbg-list-column/mbg-list-column'
+import {MbgListRowController} from './components/mbg-list-row/mbg-list-row'
 
 export class MbgListController {
   public rows: Array<any>
@@ -28,7 +28,8 @@ export class MbgListController {
   public indexToPush
   private movementManual
 
-  constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {}
+  constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {
+  }
 
   $onInit() {
     this.enableOnSelectByRow =
@@ -95,6 +96,7 @@ export class MbgListController {
   removeCircularJson(json) {
     const parsed = JSON.parse(json)
     delete parsed.$json
+    delete parsed.$$hashKey
     return JSON.stringify(parsed)
   }
 
@@ -193,7 +195,7 @@ export class MbgListController {
 
   isAllSelected() {
     if (this.checkboxIf) {
-      const possibleActive = this.list.filter((row) => this.checkboxIf({ $row: row }))
+      const possibleActive = this.list.filter((row) => this.checkboxIf({$row: row}))
       return (
         possibleActive.filter(
           (row) => !this.selectedMap[this.removeCircularJson(JSON.stringify(row))],
@@ -209,7 +211,7 @@ export class MbgListController {
   toogleAll(selectAll) {
     this.list.forEach((row) => {
       if (this.checkboxIf) {
-        if (this.checkboxIf({ $row: row })) {
+        if (this.checkboxIf({$row: row})) {
           this.selectedMap[this.removeCircularJson(JSON.stringify(row))] = selectAll
         }
       } else {
@@ -240,7 +242,7 @@ export class MbgListController {
     if (this.rowsAdicional !== index && (this.checkbox || this.radio) && this.enableOnSelectByRow) {
       if (this.radio) {
         if (this.checkboxIf) {
-          if (this.checkboxIf({ $row: row })) {
+          if (this.checkboxIf({$row: row})) {
             this.toogleRadio(row.$json)
           }
         } else {
@@ -248,7 +250,7 @@ export class MbgListController {
         }
       } else {
         if (this.checkboxIf) {
-          if (this.checkboxIf({ $row: row })) {
+          if (this.checkboxIf({$row: row})) {
             this.selectedMap[row.$json] = !this.selectedMap[row.$json]
             this.toogleCheckbox()
           }
@@ -259,7 +261,7 @@ export class MbgListController {
       }
     }
     if (this.onClickRow) {
-      this.onClickRow({ $row: row })
+      this.onClickRow({$row: row})
     }
   }
 
@@ -282,7 +284,7 @@ export class MbgListController {
   getRowStripedStyle(row, index) {
     if (row.isAdicional) {
       const background = this.$element.find(`table tr`)[index].style.backgroundColor
-      return { background }
+      return {background}
     }
 
     return {
@@ -293,7 +295,7 @@ export class MbgListController {
             r.$json ? r.$json : JSON.stringify(r),
           )
         }) %
-          2 ===
+        2 ===
         0
           ? '#eaeaea'
           : '#F5F5F5',
@@ -325,4 +327,4 @@ const mbgList = {
   controller: MbgListController,
 }
 
-export { mbgList }
+export {mbgList}

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

@@ -273,7 +273,7 @@ class MbgMultiSelectController {
     })
   }
 }
-MbgMultiSelectController.$inject = ['$scope', '$element', '$attrs', '$timeout']
+MbgMultiSelectController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
 
 const mbgMultiSelect = {
   bindings: {

package/src/components/mbg-range-value/index.ts

@@ -0,0 +1,8 @@
+import * as angular from 'angular'
+import { mbgRangeValue } from './mbg-range-value'
+
+const mbgRangeValueModule = angular
+  .module('mbg.components.mbgRangeValue', [])
+  .component('mbgRangeValue', mbgRangeValue).name
+
+export { mbgRangeValueModule }

package/src/components/mbg-range-value/mbg-range-value.html

@@ -0,0 +1,35 @@
+<div class="mbg-value-between">
+  <input type="text"
+         class="mbg-value-between-startValue"
+         ng-model="$ctrl.ngModel.startValue"
+         ng-change="$ctrl.onChangeStart()"
+         ng-model-options="$ctrl.ngModelOptions"
+         placeholder="{{ $ctrl.props.placeholderStart }}"
+         ng-required="$ctrl.ngRequired"
+         ng-disabled="$ctrl.ngDisabled"
+         ng-blur="$ctrl.handleBlur({ $event })"
+         ng-focus="$ctrl.handleFocus({ $event })"
+         ng-keyup="$ctrl.ngKeyup({ $event })"
+         ng-keypress="$ctrl.ngKeypress({ $event })"
+         ng-keydown="$ctrl.ngKeydown({ $event })"
+         ui-money-mask="{{ $ctrl.props.precision }}"
+         on-select="$ctrl.onSelectStart()" />
+  <div class="mbg-value-between-space">
+    {{ $ctrl.betweenText == undefined ? 'Até' : $ctrl.betweenText }}
+  </div>
+  <input type="text"
+         class="mbg-value-between-endValue"
+         ng-model="$ctrl.ngModel.endValue"
+         ng-change="$ctrl.onChangeEnd()"
+         ng-model-options="$ctrl.ngModelOptions"
+         placeholder="{{ $ctrl.props.placeholderEnd }}"
+         ng-required="$ctrl.ngRequired"
+         ng-disabled="$ctrl.ngDisabled"
+         ng-blur="$ctrl.handleBlur({ $event })"
+         ng-focus="$ctrl.handleFocus({ $event })"
+         ng-keyup="$ctrl.ngKeyup({ $event })"
+         ng-keypress="$ctrl.ngKeypress({ $event })"
+         ng-keydown="$ctrl.ngKeydown({ $event })"
+         ui-money-mask="{{ $ctrl.props.precision }}"
+         on-select="$ctrl.onSelectEnd()" />
+</div>

package/src/components/mbg-range-value/mbg-range-value.scss

@@ -0,0 +1,20 @@
+.mbg-value-between {
+  display: flex;
+
+  input {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 8px 14px;
+    flex: 1;
+    outline: none;
+    height: 44px;
+   }
+
+  }
+  
+  .mbg-value-between-space {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   padding: 0 8px;
+ }

package/src/components/mbg-range-value/mbg-range-value.ts

@@ -0,0 +1,100 @@
+import './mbg-range-value.scss'
+import template from './mbg-range-value.html'
+declare let $
+
+class MbgRangeValueController {
+  public ngChange
+  public ngModel
+  public ngFocus
+  public ngBlur
+  public ngRequired
+  public ngDisabled
+  public props
+  public betweenText: string
+
+  constructor(public $scope, public $element, public $attrs, public $timeout) {
+    if ($attrs.ngRequired === '') {
+      this.ngRequired = true
+    }
+    if ($attrs.ngDisabled === '') {
+      this.ngDisabled = true
+    }
+    this.props = {
+      placeholder: $attrs.placeholder || '',
+      placeholderStart: $attrs.placeholderStart || '',
+      placeholderEnd: $attrs.placeholderEnd || '',
+      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,
+    }
+  }
+
+  $onInit() {}
+
+  onChangeStart() {
+    if (this.ngChange) {
+      this.ngChange({})
+    }
+  }
+
+  onChangeEnd(a) {
+    if (this.ngChange) {
+      this.ngChange({})
+    }
+  }
+
+  handleFocus(props) {
+    if (this.ngFocus) {
+      this.ngFocus(props)
+    }
+  }
+
+  handleBlur(props) {
+    if (this.ngBlur) {
+      this.ngBlur(props)
+    }
+  }
+
+  onSelectStart = () => {
+    this.$timeout(() => {
+      if (!this.ngModel.endValue) {
+        this.$element.find(`.mbg-value-between-endValue`).focus()
+      }
+    })
+  }
+
+  onSelectEnd = () => {
+    this.$timeout(() => {
+      if (!this.ngModel.startValue) {
+        this.$element.find(`.mbg-value-between-startValue`).focus()
+      }
+    })
+  }
+}
+
+MbgRangeValueController['$inject'] = ['$scope', '$element', '$attrs', '$timeout']
+
+const mbgRangeValue = {
+  bindings: {
+    ngModel: '=',
+    ngChange: '&?',
+    ngRequired: '=?',
+    ngDisabled: '=?',
+    ngBlur: '&?',
+    ngFocus: '&?',
+    ngKeyup: '&?',
+    ngKeypress: '&?',
+    ngKeydown: '&?',
+    betweenText: '@?',
+    placeholder: '@?',
+    ngModelOptions: '=?',
+  },
+  template,
+  controller: MbgRangeValueController,
+}
+
+export { mbgRangeValue }