@kigi/components 1.8.3-beta.3 → 1.8.5
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.
package/package.json
CHANGED
|
@@ -20,7 +20,10 @@
|
|
|
20
20
|
<div class="mbg-h-c-tone-loading"
|
|
21
21
|
ng-if="$ctrl.card.loading === true"
|
|
22
22
|
disable-animate></div>
|
|
23
|
-
|
|
23
|
+
|
|
24
|
+
<div ng-repeat="cardItem in $ctrl.card.items"
|
|
25
|
+
ng-if="$ctrl.card && $ctrl.card.items"
|
|
26
|
+
ng-class="{'flex flex-column': $ctrl.card.items && $ctrl.card.items.length > 0}">
|
|
24
27
|
<div class="mbg-h-c-tone-v-real-value"
|
|
25
28
|
ng-show="$ctrl.card.loading !== true && $ctrl.hideValue !== true"
|
|
26
29
|
disable-animate
|
|
@@ -35,13 +38,28 @@
|
|
|
35
38
|
</div>
|
|
36
39
|
|
|
37
40
|
<div class="mbg-h-c-tone-v-real-value"
|
|
38
|
-
ng-style="{'color': item.color, 'font-weight': item.weight || 400}"
|
|
39
|
-
ng-repeat="item in
|
|
41
|
+
ng-style="{'color': item.color, 'font-weight': item.weight || 400, 'font-style': item.fontStyle}"
|
|
42
|
+
ng-repeat="item in cardItem"
|
|
40
43
|
ng-show="$ctrl.card.loading !== true && $ctrl.hideValue !== true"
|
|
41
44
|
disable-animate>
|
|
42
45
|
{{ item.value }}
|
|
43
46
|
</div>
|
|
44
47
|
</div>
|
|
48
|
+
<div ng-if="$ctrl.card && !$ctrl.card.items"
|
|
49
|
+
ng-class="{'flex flex-column': $ctrl.card.items && $ctrl.card.items.length > 0}">
|
|
50
|
+
<div class="mbg-h-c-tone-v-real-value"
|
|
51
|
+
ng-show="$ctrl.card.loading !== true && $ctrl.hideValue !== true"
|
|
52
|
+
disable-animate
|
|
53
|
+
ng-class="{ greey: $ctrl.card.greyColor}">
|
|
54
|
+
{{ $ctrl.card.value }}
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div class="mbg-h-c-tone-v-hide-value"
|
|
58
|
+
ng-show="$ctrl.card.loading !== true && $ctrl.hideValue === true"
|
|
59
|
+
disable-animate>
|
|
60
|
+
{{ $ctrl.randomEmoji }}
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
45
63
|
</div>
|
|
46
64
|
<div ng-if="$ctrl.card.enableHideValues && $ctrl.card.loading !== true"
|
|
47
65
|
class="mbg-h-c-tone-show"
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import './typeone.scss'
|
|
2
2
|
import template from './typeone.html'
|
|
3
|
+
import { isArray } from '@uirouter/angularjs'
|
|
3
4
|
|
|
4
5
|
class MbgCardTypeOneController {
|
|
5
6
|
public hideValue: boolean
|
|
@@ -27,6 +28,9 @@ class MbgCardTypeOneController {
|
|
|
27
28
|
this.card.setNewValue = (value) => {
|
|
28
29
|
this.setValue(value)
|
|
29
30
|
}
|
|
31
|
+
if (this.card.items && this.card.items.length > 0 && !isArray(this.card.items[0])) {
|
|
32
|
+
this.card.items = [this.card.items]
|
|
33
|
+
}
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
renderIcon() {
|
|
@@ -4,100 +4,98 @@ import * as angular from 'angular'
|
|
|
4
4
|
import { UtilUID } from '../../helpers/util-uid'
|
|
5
5
|
const progressBar = require('progressbar.js')
|
|
6
6
|
class MbgProgressCircleController {
|
|
7
|
+
private unWatchPercentage: any
|
|
8
|
+
private unWatchShow: any
|
|
9
|
+
private progressCircle: any
|
|
10
|
+
private onFinish: Function
|
|
11
|
+
private uidComponent
|
|
12
|
+
private show = false
|
|
13
|
+
private closeOnFinish
|
|
14
|
+
private duration: number
|
|
15
|
+
private percentage
|
|
7
16
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
private uidComponent
|
|
13
|
-
private show = false
|
|
14
|
-
private duration: number
|
|
15
|
-
private percentage
|
|
16
|
-
|
|
17
|
-
constructor(public $scope, public $element, public $attrs, public $timeout) {
|
|
18
|
-
this.percentage = this.percentage || 100
|
|
17
|
+
constructor(public $scope, public $element, public $attrs, public $timeout) {
|
|
18
|
+
this.percentage = this.percentage || 100
|
|
19
|
+
if (this.closeOnFinish == undefined) {
|
|
20
|
+
this.closeOnFinish = true
|
|
19
21
|
}
|
|
22
|
+
}
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
24
|
+
createProgress() {
|
|
25
|
+
this.duration = this.duration || 1400
|
|
26
|
+
this.uidComponent = UtilUID.generete()
|
|
27
|
+
this.unWatchShow = this.$scope.$watch('$ctrl.show', (value) => {
|
|
28
|
+
this.$timeout(() => {
|
|
29
|
+
value !== undefined && value ? this.addInBody() : this.removeInBody()
|
|
30
|
+
})
|
|
31
|
+
})
|
|
32
|
+
this.$timeout(() => {
|
|
33
|
+
this.progressCircle = new progressBar.Circle('#progress', {
|
|
34
|
+
color: '#666',
|
|
35
|
+
strokeWidth: 4,
|
|
36
|
+
trailWidth: 1,
|
|
37
|
+
easing: 'easeInOut',
|
|
38
|
+
duration: this.duration,
|
|
39
|
+
text: {
|
|
40
|
+
autoStyleContainer: true,
|
|
41
|
+
},
|
|
42
|
+
from: { color: '#666', width: 1 },
|
|
43
|
+
to: { color: '#000', width: 4 },
|
|
44
|
+
step: (state, circle) => {
|
|
45
|
+
const value = Math.round(circle.value() * 100)
|
|
46
|
+
if (value === 0) {
|
|
47
|
+
circle.setText('')
|
|
48
|
+
} else {
|
|
49
|
+
if (this.duration && value === 100 && this.closeOnFinish) {
|
|
50
|
+
this.$timeout(() => (this.show = false), 2000)
|
|
51
|
+
}
|
|
52
|
+
circle.setText(value + '%')
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
})
|
|
56
|
+
this.progressCircle.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'
|
|
57
|
+
this.progressCircle.text.style.fontSize = '2rem'
|
|
58
|
+
this.progressCircle.animate(0.0)
|
|
56
59
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
this.unWatchPercentage = this.$scope.$watch('$ctrl.percentage', (value) => {
|
|
61
|
+
if (this.progressCircle && value !== undefined) {
|
|
62
|
+
this.progressCircle.animate(value / 100)
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
}
|
|
64
67
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
addInBody() {
|
|
69
|
+
const body = angular.element(document).find('body')
|
|
70
|
+
const list = this.$element.find('div.mbg-progress-circle-wrapper')
|
|
71
|
+
list.attr('uid', this.uidComponent)
|
|
72
|
+
body.append(list)
|
|
73
|
+
}
|
|
71
74
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
removeInBody() {
|
|
76
|
+
const list = angular.element(`[uid="${this.uidComponent}"]`)
|
|
77
|
+
this.$element.find('.mbg-progress-circle-wrapper').append(list)
|
|
78
|
+
}
|
|
76
79
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
80
|
+
$onDestroy() {
|
|
81
|
+
if (this.unWatchPercentage) {
|
|
82
|
+
this.unWatchPercentage()
|
|
81
83
|
}
|
|
82
|
-
|
|
84
|
+
}
|
|
83
85
|
}
|
|
84
86
|
|
|
85
|
-
MbgProgressCircleController.$inject = [
|
|
86
|
-
'$scope',
|
|
87
|
-
'$element',
|
|
88
|
-
'$attrs',
|
|
89
|
-
'$timeout'
|
|
90
|
-
]
|
|
87
|
+
MbgProgressCircleController.$inject = ['$scope', '$element', '$attrs', '$timeout']
|
|
91
88
|
|
|
92
89
|
const mbgProgressCircle = {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
90
|
+
bindings: {
|
|
91
|
+
percentage: '=?',
|
|
92
|
+
titleProgress: '@?',
|
|
93
|
+
show: '=?',
|
|
94
|
+
duration: '=?',
|
|
95
|
+
closeOnFinish: '=?',
|
|
96
|
+
},
|
|
97
|
+
template,
|
|
98
|
+
controller: MbgProgressCircleController,
|
|
101
99
|
}
|
|
102
100
|
|
|
103
101
|
export { mbgProgressCircle }
|