@kigi/components 1.18.0 → 1.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/mbg-address/mbg-address.ts +10 -12
  3. package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.html +61 -25
  4. package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.ts +9 -7
  5. package/src/components/mbg-multi-select/mbg-multi-select.html +2 -2
  6. package/src/components/mbg-multi-select/mbg-multi-select.scss +21 -13
  7. package/src/components/mbg-multi-select/mbg-multi-select.ts +15 -4
  8. package/src/components/mbg-select/mbg-select.ts +4 -2
  9. package/src/helpers/interfaces/confirm-alert.ts +1 -0
  10. package/src/helpers/modals/mbg-confirm/mbg-confirm-alert.html +1 -0
  11. package/src/helpers/modals/mbg-confirm/mbg-confirm-alert.scss +17 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kigi/components",
3
- "version": "1.18.0",
3
+ "version": "1.19.0",
4
4
  "description": "@kigi/components",
5
5
  "main": "src/components/index.ts",
6
6
  "scripts": {
package/src/components/mbg-address/mbg-address.ts CHANGED
@@ -50,7 +50,7 @@ class MbgAddressController {
50
50
  public $timeout,
51
51
  public mbgAddressService: MbgAddressService,
52
52
  public $uibModal,
53
- ) {}
53
+ ) { }
54
54
 
55
55
  $onInit() {
56
56
  if (this.capitalize && this.address) {
@@ -93,8 +93,8 @@ class MbgAddressController {
93
93
  state: this.address.state
94
94
  ? this.address.state
95
95
  : this.address.uf && this.address.uf.initial
96
- ? this.address.uf.initial
97
- : '',
96
+ ? this.address.uf.initial
97
+ : '',
98
98
  }
99
99
  if (this.ngModel) {
100
100
  this.ngModel.EX = (this.ngModel.country || '').toLowerCase() !== 'brasil'
@@ -236,13 +236,10 @@ class MbgAddressController {
236
236
 
237
237
  createFullName() {
238
238
  if (this.address.premisse) {
239
- this.fullAddress = `${
240
- this.address.premisse ? this.address.premisse : this.ngModel.premisse
241
- } - ${
242
- this.address.neighbourhood ? this.address.neighbourhood : this.ngModel.neighbourhood
243
- }, ${this.address.localization ? this.address.localization : this.ngModel.localization} - ${
244
- this.ngModel.state
245
- }, ${this.ngModel.country}`
239
+ this.fullAddress = `${this.address.premisse ? this.address.premisse : this.ngModel.premisse
240
+ } - ${this.address.neighbourhood ? this.address.neighbourhood : this.ngModel.neighbourhood
241
+ }, ${this.address.localization ? this.address.localization : this.ngModel.localization} - ${this.ngModel.state
242
+ }, ${this.ngModel.country}`
246
243
  }
247
244
  }
248
245
 
@@ -289,8 +286,8 @@ class MbgAddressController {
289
286
  countryCode: this.ngModel.countryCode,
290
287
  zipCode: this.address.zipCode ? this.address.zipCode : this.ngModel.zipCode.replace('-', ''),
291
288
  neighbourhood: this.address.neighbourhood
292
- ? this.address.neighbourhood
293
- : this.ngModel.neighbourhood,
289
+ ? this.ngModel.neighbourhood
290
+ : this.address.neighbourhood,
294
291
  localization: this.ngModel.localization,
295
292
  premisse: this.address.premisse
296
293
  ? this.address.premisse
@@ -575,6 +572,7 @@ class MbgAddressController {
575
572
  response.zipCode = response.zipCode || ''
576
573
  this.address.country = response.country || 'Brasil'
577
574
  this.address.premisse = response.premisse || this.address.premisse
575
+ this.address.neighbourhood = response.neighbourhood || 'Centro'
578
576
  this.ngModel = response
579
577
  if (!EX) {
580
578
  this.$timeout(() => this.searchAddressInfo(JSON.parse(JSON.stringify(response))))
package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.html CHANGED
@@ -1,76 +1,112 @@
1
1
  <div class="mbg-address-manual-wrapper">
2
2
 
3
3
  <form name="manualAddress">
4
- <div class="row" ng-if="$ctrl.EX">
4
+ <div class="row"
5
+ ng-if="$ctrl.EX">
5
6
  <div class="col-md-6">
6
7
  <label>País</label>
7
- <mbg-select ng-model="$ctrl.entity.country" placeholder="Brasil" ng-if="$ctrl.countries"
8
- on-select="$ctrl.selectCountry(value)" on-unselect="$ctrl.unselectCountry()" label="label" ng-value="label"
9
- fetch="$ctrl.countries"></mbg-select>
8
+ <mbg-select ng-model="$ctrl.entity.country"
9
+ placeholder="Brasil"
10
+ ng-if="$ctrl.countries"
11
+ on-select="$ctrl.selectCountry(value)"
12
+ on-unselect="$ctrl.unselectCountry()"
13
+ label="label"
14
+ ng-value="label"
15
+ fetch="$ctrl.countries"></mbg-select>
10
16
  </div>
11
17
  <div class="col-md-6">
12
18
  <label>CEP</label>
13
19
  <div class="mbg-input-wrapper input-cep-wrapper">
14
- <input type="text" ng-model="$ctrl.entity.zipCode" ng-change="$ctrl.validateLenth($event)"
15
- placeholder="99999" />
20
+ <input type="text"
21
+ ng-model="$ctrl.entity.zipCode"
22
+ ng-change="$ctrl.validateLenth($event)"
23
+ placeholder="99999" />
16
24
  </div>
17
25
  </div>
18
26
  </div>
19
27
  <div class="row">
20
- <div class="col-md-4" ng-if="!$ctrl.EX">
28
+ <div class="col-md-4"
29
+ ng-if="!$ctrl.EX">
21
30
  <label>CEP</label>
22
31
  <div class="mbg-input-wrapper input-cep-wrapper">
23
- <input autocomplete="{{ $ctrl.autocompleteValue }}" autocorrect="{{ $ctrl.autocompleteValue }}"
24
- ng-class="{'mbg-error': (!$ctrl.entity.zipCode && $ctrl.inputErrors) || $ctrl.notFoundCep}"
25
- mbg-error="!$ctrl.entity.zipCode || $ctrl.notFoundCep" mbg-error-when="$ctrl.inputErrors"
26
- mbg-error-message="É necessário informar o CEP" spellcheck="false" type="text"
27
- ng-change="$ctrl.onChangeCep()" ng-model="$ctrl.entity.zipCode" placeholder="99999-999" ui-br-cep-mask />
32
+ <input autocomplete="{{ $ctrl.autocompleteValue }}"
33
+ autocorrect="{{ $ctrl.autocompleteValue }}"
34
+ ng-class="{'mbg-error': (!$ctrl.entity.zipCode && $ctrl.inputErrors) || $ctrl.notFoundCep}"
35
+ mbg-error="!$ctrl.entity.zipCode || $ctrl.notFoundCep"
36
+ mbg-error-when="$ctrl.inputErrors"
37
+ mbg-error-message="É necessário informar o CEP"
38
+ spellcheck="false"
39
+ type="text"
40
+ ng-change="$ctrl.onChangeCep()"
41
+ ng-model="$ctrl.entity.zipCode"
42
+ placeholder="99999-999"
43
+ ui-br-cep-mask />
28
44
  </div>
29
45
  </div>
30
46
  <div ng-class="$ctrl.EX ? 'col-md-12' : 'col-md-8'">
31
- <label>Logradouro</label>
32
- <mbg-input-text capitalize="true" ng-model="$ctrl.entity.premisse" placeholder="Ex. Av Duque de Caxias">
47
+ <label>Logradouros</label>
48
+ <mbg-input-text capitalize="true"
49
+ ng-model="$ctrl.entity.premisse"
50
+ placeholder="Ex. Av Duque de Caxias">
33
51
  </mbg-input-text>
34
52
  </div>
35
53
  </div>
36
54
  <div class="row">
37
55
  <div class="col-md-12">
38
56
  <label>Bairro</label>
39
- <mbg-input-text capitalize="true" ng-model="$ctrl.entity.neighbourhood" placeholder="Ex. Jardim América">
57
+ <mbg-input-text capitalize="true"
58
+ ng-model="$ctrl.entity.neighbourhood"
59
+ placeholder="Ex. Jardim América">
40
60
  </mbg-input-text>
41
61
  </div>
42
62
  </div>
43
63
  <div class="row">
44
- <div class="col-md-6" ng-if="!$ctrl.EX">
64
+ <div class="col-md-6"
65
+ ng-if="!$ctrl.EX">
45
66
  <label>Estado</label>
46
- <mbg-select capitalize="true" ng-model="$ctrl.entity.state" fetch="$ctrl.searchState(query)" label="name"
47
- ng-value="shortName" placeholder="Ex. Paraná"></mbg-select>
67
+ <mbg-select capitalize="true"
68
+ ng-model="$ctrl.entity.state"
69
+ fetch="$ctrl.searchState(query)"
70
+ label="name"
71
+ ng-value="shortName"
72
+ placeholder="Ex. Paraná"></mbg-select>
48
73
  </div>
49
- <div class="col-md-6" ng-if="$ctrl.EX">
74
+ <div class="col-md-6"
75
+ ng-if="$ctrl.EX">
50
76
  <label>Estado</label>
51
- <mbg-input-text capitalize="true" ng-model="$ctrl.entity.state" placeholder="Ex. Maringá"></mbg-input-text>
77
+ <mbg-input-text capitalize="true"
78
+ ng-model="$ctrl.entity.state"
79
+ placeholder="Ex. Maringá"></mbg-input-text>
52
80
  </div>
53
81
  <div class="col-md-6">
54
82
  <label>Cidade</label>
55
- <mbg-input-text capitalize="true" ng-model="$ctrl.entity.localization" placeholder="Ex. Maringá">
83
+ <mbg-input-text capitalize="true"
84
+ ng-model="$ctrl.entity.localization"
85
+ placeholder="Ex. Maringá">
56
86
  </mbg-input-text>
57
87
  </div>
58
88
  </div>
59
89
  <div class="row">
60
90
  <div class="col-md-4">
61
91
  <label>Número</label>
62
- <mbg-input-text ng-model="$ctrl.entity.number" placeholder="Ex. 36"></mbg-input-text>
92
+ <mbg-input-text ng-model="$ctrl.entity.number"
93
+ placeholder="Ex. 36"></mbg-input-text>
63
94
  </div>
64
95
  <div class="col-md-8">
65
96
  <label>Complemento</label>
66
- <mbg-input-text capitalize="true" ng-model="$ctrl.entity.information" placeholder="Ex. Restaurante X">
97
+ <mbg-input-text capitalize="true"
98
+ ng-model="$ctrl.entity.information"
99
+ placeholder="Ex. Restaurante X">
67
100
  </mbg-input-text>
68
101
  </div>
69
102
  </div>
70
103
  </form>
71
104
 
72
105
  <div class="content-confirm-upload">
73
- <mbg-btn-form label="Salvar" loading="$ctrl.loading" ng-click="$ctrl.finish(manualAddress.$valid)"></mbg-btn-form>
74
- <a class="btn-cancel" ng-click="$ctrl.dismiss()">Cancelar</a>
106
+ <mbg-btn-form label="Salvar"
107
+ loading="$ctrl.loading"
108
+ ng-click="$ctrl.finish(manualAddress.$valid)"></mbg-btn-form>
109
+ <a class="btn-cancel"
110
+ ng-click="$ctrl.dismiss()">Cancelar</a>
75
111
  </div>
76
112
  </div>
package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.ts CHANGED
@@ -38,15 +38,16 @@ class MbgAddressManualController {
38
38
  public EX,
39
39
  public notFound,
40
40
  public address,
41
- ) {}
41
+ ) { }
42
42
 
43
- $onInit() {
43
+ async $onInit() {
44
44
  this.navigatorData = detect()
45
45
  this.createAutocompleteDisabled()
46
- this.loadStates()
46
+ await this.loadStates()
47
47
  this.loadCountries()
48
48
  if (this.address) {
49
49
  this.entity = this.address
50
+ this.searchAddressByCEP()
50
51
  }
51
52
  }
52
53
 
@@ -116,9 +117,9 @@ class MbgAddressManualController {
116
117
  this.entity = {
117
118
  zipCode: this.entity.zipCode.replace('-', ''),
118
119
  neighbourhood: response.data.bairro ? response.data.bairro.trim() : 'Centro',
119
- localization: this.entity.localization
120
- ? this.entity.localization
121
- : (response.data.localidade || '').trim(),
120
+ localization: response.data.localidade
121
+ ? (response.data.localidade || '').trim()
122
+ : this.entity.localization,
122
123
  premisse: premisse || 'CEP Único',
123
124
  number: this.entity.number || '',
124
125
  information: this.entity.information || '',
@@ -148,8 +149,9 @@ class MbgAddressManualController {
148
149
  )
149
150
  }
150
151
 
152
+
151
153
  loadStates = () => {
152
- this.$http.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados`).then((resp) => {
154
+ return this.$http.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados`).then((resp) => {
153
155
  this.states = resp.data.map((city) => {
154
156
  return {
155
157
  id: city.id,
package/src/components/mbg-multi-select/mbg-multi-select.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <div class="mbg-multi-select-wrapper">
2
- <span ng-if="$ctrl.showScrollArrows" class="arrow-left visibility" ng-click="$ctrl.scrollToLeft()">
2
+ <span ng-if="$ctrl.showScrollArrows" class="arrow-left" ng-click="$ctrl.scrollToLeft()">
3
3
  <i class="fas fa-chevron-circle-left"></i>
4
4
  </span>
5
5
  <div class="mbg-multi-select-scroll"
@@ -37,7 +37,7 @@
37
37
  label="{{ $ctrl.label }}"></mbg-select>
38
38
  </div>
39
39
  </div>
40
- <span ng-if="$ctrl.showScrollArrows" class="arrow-right visibility" ng-click="$ctrl.scrollToRight()">
40
+ <span ng-if="$ctrl.showScrollArrows" class="arrow-right" ng-click="$ctrl.scrollToRight()">
41
41
  <i class="fas fa-chevron-circle-right"></i>
42
42
  </span>
43
43
  </div>
package/src/components/mbg-multi-select/mbg-multi-select.scss CHANGED
@@ -9,6 +9,8 @@
9
9
  position: absolute;
10
10
  font-size: 20px;
11
11
 
12
+ z-index: 10;
13
+
12
14
  background: white;
13
15
  overflow: hidden;
14
16
  height: 20px;
@@ -21,22 +23,28 @@
21
23
  }
22
24
  }
23
25
 
24
- .visibility {
25
- display: none;
26
- }
27
-
28
- &:hover {
29
- .visibility {
30
- display: block;
31
- }
32
- }
33
-
34
26
  .arrow-left {
35
- left: 8px;
36
- }
27
+ left: 0px;
28
+ transition: transform .5s;
29
+ transform: translateX(-40px);
30
+ }
37
31
 
38
32
  .arrow-right {
39
- right: 8px;
33
+ right: 0px;
34
+ transition: transform .5s;
35
+ transform: translateX(40px);
36
+ }
37
+
38
+
39
+ &:hover {
40
+ .arrow-left {
41
+ transition: transform .3s;
42
+ transform: translateX(8px);
43
+ }
44
+ .arrow-right {
45
+ transition: transform .3s;
46
+ transform: translateX(-8px);
47
+ }
40
48
  }
41
49
 
42
50
  .mbg-multi-select-scroll {
package/src/components/mbg-multi-select/mbg-multi-select.ts CHANGED
@@ -22,6 +22,8 @@ class MbgMultiSelectController {
22
22
  private enableFavorite: boolean
23
23
  private stepScrollSize: any
24
24
  private showScrollArrows: boolean
25
+ private onRemoveItem: Function
26
+ private index
25
27
 
26
28
  constructor(public $scope, public $element, public $attrs, public $timeout) {}
27
29
 
@@ -30,6 +32,8 @@ class MbgMultiSelectController {
30
32
  this.stepScrollSize = 200
31
33
  }
32
34
 
35
+ this.index = this.index || 0
36
+
33
37
  this.widthEllipsis = this.widthEllipsis || '154px'
34
38
  this.$scope.$watch(
35
39
  '$ctrl.ngModel',
@@ -53,7 +57,7 @@ class MbgMultiSelectController {
53
57
 
54
58
  verifyScroll() {
55
59
  this.$timeout(() => {
56
- const elm = angular.element(`.mbg-multi-select-scroll`)[0]
60
+ const elm = angular.element(`.mbg-multi-select-scroll`)[this.index]
57
61
  this.$timeout(() => {
58
62
  ScrollAnimate.scrollLeftTo(elm, elm.scrollWidth, 350)
59
63
  }, 100)
@@ -62,7 +66,7 @@ class MbgMultiSelectController {
62
66
 
63
67
  scrollToLeft() {
64
68
  this.$timeout(() => {
65
- const elm: Element = angular.element(`.mbg-multi-select-scroll`)[0]
69
+ const elm: Element = angular.element(`.mbg-multi-select-scroll`)[this.index]
66
70
  this.$timeout(() => {
67
71
  const value = +elm.scrollLeft - this.stepScrollSize
68
72
  elm.scroll({
@@ -75,8 +79,7 @@ class MbgMultiSelectController {
75
79
 
76
80
  scrollToRight() {
77
81
  this.$timeout(() => {
78
- const elm = angular.element(`.mbg-multi-select-scroll`)[0]
79
-
82
+ const elm = angular.element(`.mbg-multi-select-scroll`)[this.index]
80
83
  this.$timeout(() => {
81
84
  const value = +elm.scrollLeft + this.stepScrollSize
82
85
  elm.scroll({
@@ -119,6 +122,8 @@ class MbgMultiSelectController {
119
122
  }
120
123
 
121
124
  remoteItem(index) {
125
+ const item = this.ngModel[index]
126
+
122
127
  this.ngModel.splice(index, 1)
123
128
  this.verifyScroll()
124
129
  this.$timeout(() => {
@@ -126,6 +131,10 @@ class MbgMultiSelectController {
126
131
  this.ngChange()
127
132
  }
128
133
  })
134
+
135
+ if (this.onRemoveItem) {
136
+ this.onRemoveItem({ item, index })
137
+ }
129
138
  }
130
139
 
131
140
  stopDragEvents() {
@@ -279,6 +288,8 @@ const mbgMultiSelect = {
279
288
  enableFavorite: '=?',
280
289
  stepScrollSize: '=?',
281
290
  showScrollArrows: '=?',
291
+ onRemoveItem: '&?',
292
+ index: '=?',
282
293
  },
283
294
  template,
284
295
  controller: MbgMultiSelectController,
package/src/components/mbg-select/mbg-select.ts CHANGED
@@ -56,7 +56,7 @@ class MbgSelectController {
56
56
  public $timeout,
57
57
  public $compile,
58
58
  public $transclude,
59
- ) {}
59
+ ) { }
60
60
 
61
61
  $onInit() {
62
62
  this.fixedValue = this.ngValue || 'id'
@@ -409,7 +409,8 @@ class MbgSelectController {
409
409
  item = isNaN(this.inputValue) ? this.inputValue : Number(this.inputValue)
410
410
  }
411
411
  }
412
- await this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
412
+ this.selectOption(item)
413
+ return
413
414
  }
414
415
  } else {
415
416
  await this.updateModelValue(this.inputValue)
@@ -458,6 +459,7 @@ class MbgSelectController {
458
459
  value &&
459
460
  (!angular.equals(value, this.ngModel) || !angular.equals(value, this.inputValue))
460
461
  ) {
462
+ this.inputValue = ''
461
463
  this.updateInputValue()
462
464
  }
463
465
  }
package/src/helpers/interfaces/confirm-alert.ts CHANGED
@@ -21,4 +21,5 @@ export interface ConfirmAlert {
21
21
  blockSpecialChars?: boolean
22
22
  buttons?: ButtonConfirmModal[]
23
23
  focusClose?: boolean
24
+ showCloseButton?: boolean
24
25
  }
package/src/helpers/modals/mbg-confirm/mbg-confirm-alert.html CHANGED
@@ -56,6 +56,7 @@
56
56
  </svg>
57
57
  </div>
58
58
  <div class="information-wrapper">
59
+ <button ng-if="$ctrl.config.showCloseButton" class="close-button" ng-click="$ctrl.dismiss()">x</button>
59
60
  <h3>{{$ctrl.config.title}}</h3>
60
61
  <p ng-if="$ctrl.config.message"
61
62
  class="message">{{$ctrl.config.message}}</p>
package/src/helpers/modals/mbg-confirm/mbg-confirm-alert.scss CHANGED
@@ -57,6 +57,23 @@
57
57
  text-align: center;
58
58
  }
59
59
  }
60
+
61
+ .close-button {
62
+ position: absolute;
63
+ top: 10px;
64
+ right: 10px;
65
+
66
+ border: none;
67
+ background-color: transparent;
68
+ font-weight: bold;
69
+ color: var(--neutral2);
70
+ border-radius: 999px;
71
+ transition:all .500ms ease-in-out;
72
+
73
+ &:hover {
74
+ box-shadow:1px 1px 5px var(--neutral2);
75
+ }
76
+ }
60
77
  }
61
78
 
62
79
  .mbg-alert-icon {