@kigi/components 1.19.0-beta.1 → 1.19.0-beta.2

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/mbg-address/mbg-address.ts +12 -9
  3. package/src/components/mbg-multi-select/mbg-multi-select.html +2 -10
  4. package/src/components/mbg-multi-select/mbg-multi-select.scss +150 -231
  5. package/src/components/mbg-multi-select/mbg-multi-select.ts +0 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kigi/components",
3
- "version": "1.19.0-beta.1",
3
+ "version": "1.19.0-beta.2",
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,10 +236,13 @@ class MbgAddressController {
236
236
 
237
237
  createFullName() {
238
238
  if (this.address.premisse) {
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}`
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}`
243
246
  }
244
247
  }
245
248
 
@@ -286,8 +289,8 @@ class MbgAddressController {
286
289
  countryCode: this.ngModel.countryCode,
287
290
  zipCode: this.address.zipCode ? this.address.zipCode : this.ngModel.zipCode.replace('-', ''),
288
291
  neighbourhood: this.address.neighbourhood
289
- ? this.ngModel.neighbourhood
290
- : this.address.neighbourhood,
292
+ ? this.address.neighbourhood
293
+ : this.ngModel.neighbourhood,
291
294
  localization: this.ngModel.localization,
292
295
  premisse: this.address.premisse
293
296
  ? this.address.premisse
package/src/components/mbg-multi-select/mbg-multi-select.html CHANGED
@@ -1,14 +1,9 @@
1
1
  <div class="mbg-multi-select-wrapper">
2
-
3
- <span ng-if="$ctrl.showScrollArrows"
4
- class="arrow-left"
5
- ng-click="$ctrl.scrollToLeft()">
2
+ <span ng-if="$ctrl.showScrollArrows" class="arrow-left" ng-click="$ctrl.scrollToLeft()">
6
3
  <i class="fas fa-chevron-circle-left"></i>
7
4
  </span>
8
-
9
5
  <div class="mbg-multi-select-scroll"
10
6
  ng-class="{'disabled': $ctrl.ngDisabled, 'inline-mode-wrapper': $ctrl.inlineMode}">
11
-
12
7
  <div class="mbg-multi-select-content">
13
8
  <ul class="items-selected">
14
9
  <li ng-repeat="item in $ctrl.ngModel track by $index"
@@ -42,10 +37,7 @@
42
37
  label="{{ $ctrl.label }}"></mbg-select>
43
38
  </div>
44
39
  </div>
45
-
46
- <span ng-if="$ctrl.showScrollArrows"
47
- class="arrow-right"
48
- ng-click="$ctrl.scrollToRight()">
40
+ <span ng-if="$ctrl.showScrollArrows" class="arrow-right" ng-click="$ctrl.scrollToRight()">
49
41
  <i class="fas fa-chevron-circle-right"></i>
50
42
  </span>
51
43
  </div>
package/src/components/mbg-multi-select/mbg-multi-select.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  .mbg-multi-select-wrapper {
2
2
 
3
3
  position: relative;
4
+
4
5
  display: flex;
5
6
  align-items: center;
6
7
 
@@ -23,270 +24,188 @@
23
24
  }
24
25
 
25
26
  .arrow-left {
26
- animation: left-exit .2s linear forwards ;
27
- }
27
+ left: 0px;
28
+ transition: transform .5s;
29
+ transform: translateX(-40px);
30
+ }
28
31
 
29
32
  .arrow-right {
30
- animation: right-exit .2s linear forwards ;
33
+ right: 0px;
34
+ transition: transform .5s;
35
+ transform: translateX(40px);
31
36
  }
37
+
32
38
 
33
39
  &:hover {
34
40
  .arrow-left {
35
- animation: left-enter .3s linear forwards;
36
-
41
+ transition: transform .3s;
42
+ transform: translateX(8px);
37
43
  }
38
44
  .arrow-right {
39
- animation: right-enter .3s linear forwards;
45
+ transition: transform .3s;
46
+ transform: translateX(-8px);
40
47
  }
41
48
  }
42
49
 
43
- .mbg-multi-select-scroll {
44
- border: 1px solid #ddd;
45
- background: #fff;
46
- border-radius: 5px;
47
- padding: 8px;
48
- -ms-flex: 1 1;
49
- flex: 1 1;
50
- outline: none;
51
- width: inherit;
52
- display: inline-flex;
53
- height: 44px;
54
- align-items: center;
55
- overflow: visible;
56
- max-width: 100%;
57
- overflow: scroll;
58
- overflow: -moz-scrollbars-none;
59
- -ms-overflow-style: none;
60
- scrollbar-width: none;
61
- padding-top: 0;
62
- padding-bottom: 0;
63
- width: 100%;
64
-
65
- &.inline-mode-wrapper {
66
- height: auto;
67
- max-height: 284px;
68
-
69
- .mbg-multi-select-content {
70
- flex-direction: column;
71
- width: 100%;
50
+ .mbg-multi-select-scroll {
51
+ border: 1px solid #ddd;
52
+ background: #fff;
53
+ border-radius: 5px;
54
+ padding: 8px;
55
+ -ms-flex: 1 1;
56
+ flex: 1 1;
57
+ outline: none;
58
+ width: inherit;
59
+ display: inline-flex;
60
+ height: 44px;
61
+ align-items: center;
62
+ overflow: visible;
63
+ max-width: 100%;
64
+ overflow: scroll;
65
+ overflow: -moz-scrollbars-none;
66
+ -ms-overflow-style: none;
67
+ scrollbar-width: none;
68
+ padding-top: 0;
69
+ padding-bottom: 0;
70
+ width: 100%;
72
71
 
73
- mbg-select {
74
- width: 100%;
75
- }
72
+ &.inline-mode-wrapper {
73
+ height: auto;
74
+ max-height: 284px;
76
75
 
77
- ul {
76
+ .mbg-multi-select-content {
78
77
  flex-direction: column;
79
78
  width: 100%;
80
- max-height: 234px;
81
- overflow-y: auto;
82
- overflow-x: hidden;
83
79
 
84
- li {
80
+ mbg-select {
85
81
  width: 100%;
86
- margin-top: 4px;
87
- position: relative;
88
- min-height: 28px;
89
-
90
- svg {
91
- position: absolute;
92
- right: 6px;
93
- }
82
+ }
94
83
 
95
- label {
96
- white-space: nowrap;
97
- overflow: hidden;
98
- text-overflow: ellipsis;
99
- padding-right: 14px;
84
+ ul {
85
+ flex-direction: column;
86
+ width: 100%;
87
+ max-height: 234px;
88
+ overflow-y: auto;
89
+ overflow-x: hidden;
90
+
91
+ li {
92
+ width: 100%;
93
+ margin-top: 4px;
94
+ position: relative;
95
+ min-height: 28px;
96
+
97
+ svg {
98
+ position: absolute;
99
+ right: 6px;
100
+ }
100
101
 
101
- &:hover {
102
- &::after {
103
- content: attr(data-text);
104
- overflow: visible;
105
- text-overflow: inherit;
106
- background: #fff;
107
- position: absolute;
108
- width: auto;
109
- max-width: 25rem;
110
- border: 1px solid #eaebec;
111
- border-radius: 4px;
112
- padding: 0 1rem;
113
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
114
- white-space: normal;
115
- word-wrap: break-word;
116
- display: block;
117
- color: #666;
118
- font-weight: 500;
119
- margin-top: -20px;
120
- z-index: 100;
102
+ label {
103
+ white-space: nowrap;
104
+ overflow: hidden;
105
+ text-overflow: ellipsis;
106
+ padding-right: 14px;
107
+
108
+ &:hover {
109
+ &::after {
110
+ content: attr(data-text);
111
+ overflow: visible;
112
+ text-overflow: inherit;
113
+ background: #fff;
114
+ position: absolute;
115
+ width: auto;
116
+ max-width: 25rem;
117
+ border: 1px solid #eaebec;
118
+ border-radius: 4px;
119
+ padding: 0 1rem;
120
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
121
+ white-space: normal;
122
+ word-wrap: break-word;
123
+ display: block;
124
+ color: #666;
125
+ font-weight: 500;
126
+ margin-top: -20px;
127
+ z-index: 100;
128
+ }
121
129
  }
122
130
  }
123
131
  }
124
132
  }
125
133
  }
126
134
  }
127
- }
128
135
 
129
- &.disabled {
130
- background-color: #f5f5f5;
131
- border: 1px solid #ddd !important;
132
- }
136
+ &.disabled {
137
+ background-color: #f5f5f5;
138
+ border: 1px solid #ddd !important;
139
+ }
133
140
 
134
- &::-webkit-scrollbar {
135
- display: none;
136
- }
137
- .mbg-multi-select-content {
138
- display: inline-flex;
139
- align-items: center;
140
- }
141
- input {
142
- width: 100%;
143
- border: none;
144
- background-color: transparent;
145
- padding: 0 0 0 10px;
146
- &:focus {
147
- outline: none;
148
- box-shadow: none;
141
+ &::-webkit-scrollbar {
142
+ display: none;
149
143
  }
150
- }
151
- ul {
152
- &.items-selected {
153
- margin: 0;
154
- padding: 0;
155
- list-style: none;
156
- display: flex;
157
- width: fit-content;
158
- min-width: fit-content;
159
- li {
160
- min-width: fit-content;
161
- background: #e6e6e6;
162
- border-radius: 4px;
163
- height: 28px;
144
+ .mbg-multi-select-content {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ }
148
+ input {
149
+ width: 100%;
150
+ border: none;
151
+ background-color: transparent;
152
+ padding: 0 0 0 10px;
153
+ &:focus {
154
+ outline: none;
155
+ box-shadow: none;
156
+ }
157
+ }
158
+ ul {
159
+ &.items-selected {
160
+ margin: 0;
161
+ padding: 0;
162
+ list-style: none;
164
163
  display: flex;
165
- align-items: center;
166
- justify-content: center;
167
- padding: 0px 5px 0px 8px;
168
- color: #666;
169
- margin-right: 8px;
170
- font-size: 14px;
171
- width: max-content;
172
- cursor: move;
173
- font-weight: 500;
174
- * {
175
- user-select: none;
176
- }
177
- svg {
178
- cursor: pointer;
179
- width: 14px;
180
- fill: currentColor;
181
- margin-left: 4px;
164
+ width: fit-content;
165
+ min-width: fit-content;
166
+ li {
167
+ min-width: fit-content;
168
+ background: #e6e6e6;
169
+ border-radius: 4px;
170
+ height: 28px;
182
171
  display: flex;
183
172
  align-items: center;
184
- pointer-events: all;
185
- }
186
- &.dragging {
187
- opacity: 0.6;
188
- }
189
- &.over {
190
- background: red;
173
+ justify-content: center;
174
+ padding: 0px 5px 0px 8px;
175
+ color: #666;
176
+ margin-right: 8px;
177
+ font-size: 14px;
178
+ width: max-content;
179
+ cursor: move;
180
+ font-weight: 500;
181
+ * {
182
+ user-select: none;
183
+ }
184
+ svg {
185
+ cursor: pointer;
186
+ width: 14px;
187
+ fill: currentColor;
188
+ margin-left: 4px;
189
+ display: flex;
190
+ align-items: center;
191
+ pointer-events: all;
192
+ }
193
+ &.dragging {
194
+ opacity: 0.6;
195
+ }
196
+ &.over {
197
+ background: red;
198
+ }
191
199
  }
192
200
  }
193
201
  }
194
- }
195
- .mbg-select-input-fake {
196
- flex: 1;
197
- min-width: 191.03px;
198
- border: none;
199
- }
200
- .mbg-select-wrapper .mbg-icon-select {
201
- display: none;
202
- }
203
- }
204
-
205
- @keyframes right-enter {
206
- 0% {
207
- opacity: 0;
208
- right: 0px;
209
- }
210
- 25% {
211
- right: 2px;
212
- }
213
- 50% {
214
- right: 4px;
215
- }
216
- 75% {
217
- right: 6px;
218
- }
219
- 100% {
220
- opacity: 1;
221
- right: 8px;
222
- }
223
- }
224
-
225
- @keyframes right-exit {
226
- 0% {
227
- opacity: 0;
228
- right: 8px;
229
- }
230
- 25% {
231
- right: 6px;
232
- opacity: .5;
233
- }
234
- 50% {
235
- right: 4px;
236
- opacity: .3;
237
- }
238
- 75% {
239
- right: 2px;
240
- opacity: .1;
241
-
242
- }
243
- 100% {
244
- right: 0px;
245
- opacity: 0;
246
- }
247
- }
248
-
249
- @keyframes left-enter {
250
- 0% {
251
- opacity: 0;
252
- left: 0px;
253
- }
254
- 25% {
255
- left: 2px;
256
- }
257
- 50% {
258
- left: 4px;
259
- }
260
- 75% {
261
- left: 6px;
262
- }
263
- 100% {
264
- opacity: 1;
265
- left: 8px;
266
- }
267
- }
268
-
269
- @keyframes left-exit {
270
- 0% {
271
- opacity: 0;
272
- left: 8px;
273
- }
274
- 25% {
275
- left: 6px;
276
- opacity: .5;
277
- }
278
- 50% {
279
- left: 4px;
280
- opacity: .3;
281
- }
282
- 75% {
283
- left: 2px;
284
- opacity: .1;
285
-
286
- }
287
- 100% {
288
- left: 0px;
289
- opacity: 0;
202
+ .mbg-select-input-fake {
203
+ flex: 1;
204
+ min-width: 191.03px;
205
+ border: none;
206
+ }
207
+ .mbg-select-wrapper .mbg-icon-select {
208
+ display: none;
209
+ }
290
210
  }
291
211
  }
292
- }
package/src/components/mbg-multi-select/mbg-multi-select.ts CHANGED
@@ -266,10 +266,6 @@ class MbgMultiSelectController {
266
266
  this.ngModel = Array.from(this.$element.find('ul.items-selected li')).map(
267
267
  (liElement: HTMLElement) => angular.element(liElement).scope().item,
268
268
  )
269
-
270
- if (this.ngChange) {
271
- this.ngChange({ value: this.ngModel })
272
- }
273
269
  })
274
270
  }
275
271
  }