neo.mjs 5.17.1 → 5.18.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 (10) hide show
  1. package/apps/ServiceWorker.mjs +2 -2
  2. package/examples/ServiceWorker.mjs +2 -2
  3. package/examples/component/statusbadge/MainContainer.mjs +160 -45
  4. package/examples/form/field/fileupload/server.mjs +16 -6
  5. package/package.json +1 -1
  6. package/resources/scss/src/component/StatusBadge.scss +43 -3
  7. package/resources/scss/theme-dark/component/StatusBadge.scss +41 -0
  8. package/resources/scss/theme-light/component/StatusBadge.scss +41 -0
  9. package/src/DefaultConfig.mjs +2 -2
  10. package/src/component/StatusBadge.mjs +434 -7
package/apps/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='5.17.1'
23
+ * @member {String} version='5.18.0'
24
24
  */
25
- version: '5.17.1'
25
+ version: '5.18.0'
26
26
  }
27
27
 
28
28
  /**
package/examples/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='5.17.1'
23
+ * @member {String} version='5.18.0'
24
24
  */
25
- version: '5.17.1'
25
+ version: '5.18.0'
26
26
  }
27
27
 
28
28
  /**
package/examples/component/statusbadge/MainContainer.mjs CHANGED
@@ -1,9 +1,9 @@
1
- import CheckBox from '../../../src/form/field/CheckBox.mjs';
1
+ import CheckBox from '../../../src/form/field/CheckBox.mjs';
2
2
  import ConfigurationViewport from '../../ConfigurationViewport.mjs';
3
- import NumberField from '../../../src/form/field/Number.mjs';
4
- import Radio from '../../../src/form/field/Radio.mjs';
5
- import StatusBadge from '../../../src/component/StatusBadge.mjs';
6
- import TextField from '../../../src/form/field/Text.mjs';
3
+ import NumberField from '../../../src/form/field/Number.mjs';
4
+ import Radio from '../../../src/form/field/Radio.mjs';
5
+ import StatusBadge from '../../../src/component/StatusBadge.mjs';
6
+ import TextField from '../../../src/form/field/Text.mjs';
7
7
 
8
8
  /**
9
9
  * @class Neo.examples.component.statusbadge.MainContainer
@@ -11,58 +11,173 @@ import TextField from '../../../src/form/field/Text.mjs';
11
11
  */
12
12
  class MainContainer extends ConfigurationViewport {
13
13
  static config = {
14
- className : 'Neo.examples.component.statusbadge.MainContainer',
15
- autoMount : true,
14
+ className: 'Neo.examples.component.statusbadge.MainContainer',
15
+ autoMount: true,
16
16
  configItemLabelWidth: 110,
17
- configItemWidth : 230,
18
- layout : {ntype: 'hbox', align: 'stretch'}
17
+ configItemWidth: 230,
18
+ layout: { ntype: 'hbox', align: 'stretch' }
19
19
  }
20
20
 
21
21
  createConfigurationComponents() {
22
22
  let me = this;
23
23
 
24
24
  return [{
25
- module : CheckBox,
26
- checked : me.exampleComponent.closable,
25
+ module: CheckBox,
26
+ checked: me.exampleComponent.closable,
27
27
  labelText: 'closable',
28
- listeners: {change: me.onConfigChange.bind(me, 'closable')}
29
- }, {
30
- module : NumberField,
31
- clearable : true,
32
- labelText : 'height',
33
- listeners : {change: me.onConfigChange.bind(me, 'height')},
34
- maxValue : 100,
35
- minValue : 20,
36
- stepSize : 2,
37
- style : {marginTop: '10px'},
38
- value : me.exampleComponent.height
39
- }, {
40
- module : Radio,
41
- checked : me.exampleComponent.state === 'error',
28
+ listeners: { change: me.onConfigChange.bind(me, 'closable') }
29
+ }, {
30
+ module: NumberField,
31
+ clearable: true,
32
+ labelText: 'height',
33
+ listeners: { change: me.onConfigChange.bind(me, 'height') },
34
+ maxValue: 100,
35
+ minValue: 20,
36
+ stepSize: 2,
37
+ style: { marginTop: '10px' },
38
+ value: me.exampleComponent.height
39
+ }, {
40
+ module: NumberField,
41
+ clearable: true,
42
+ labelText: 'width',
43
+ listeners: { change: me.onConfigChange.bind(me, 'width') },
44
+ maxValue: 300,
45
+ minValue: 100,
46
+ stepSize: 5,
47
+ style: { marginTop: '10px' },
48
+ value: me.exampleComponent.width
49
+ }, {
50
+ module: TextField,
51
+ labelText: 'label Alert',
52
+ listeners: { change: me.onConfigChange.bind(me, 'labelAlert') },
53
+ style: { marginTop: '20px' },
54
+ value: me.exampleComponent.labelAlert
55
+ }, {
56
+ module: TextField,
57
+ labelText: 'icon Alert',
58
+ listeners: { change: me.onConfigChange.bind(me, 'iconAlert') },
59
+ value: me.exampleComponent.iconAlert
60
+ }, {
61
+ module: TextField,
62
+ labelText: 'side-icon Alert',
63
+ listeners: { change: me.onConfigChange.bind(me, 'sideIconAlert') },
64
+ value: me.exampleComponent.sideIconAlert
65
+ }, {
66
+ module: TextField,
67
+ labelText: 'label Error',
68
+ listeners: { change: me.onConfigChange.bind(me, 'labelError') },
69
+ style: { marginTop: '10px' },
70
+ value: me.exampleComponent.labelError
71
+ }, {
72
+ module: TextField,
73
+ labelText: 'icon Error',
74
+ listeners: { change: me.onConfigChange.bind(me, 'iconError') },
75
+ value: me.exampleComponent.iconError
76
+ }, {
77
+ module: TextField,
78
+ labelText: 'side-icon Error',
79
+ listeners: { change: me.onConfigChange.bind(me, 'sideIconError') },
80
+ value: me.exampleComponent.sideIconError
81
+ },{
82
+ module: TextField,
83
+ labelText: 'label Info',
84
+ listeners: { change: me.onConfigChange.bind(me, 'labelInfo') },
85
+ style: { marginTop: '10px' },
86
+ value: me.exampleComponent.labelInfo
87
+ }, {
88
+ module: TextField,
89
+ labelText: 'icon Info',
90
+ listeners: { change: me.onConfigChange.bind(me, 'iconInfo') },
91
+ value: me.exampleComponent.iconInfo
92
+ }, {
93
+ module: TextField,
94
+ labelText: 'side-icon Info',
95
+ listeners: { change: me.onConfigChange.bind(me, 'sideIconInfo') },
96
+ value: me.exampleComponent.sideIconInfo
97
+ }, {
98
+ module: TextField,
99
+ labelText: 'label Neutral',
100
+ listeners: { change: me.onConfigChange.bind(me, 'labelNeutral') },
101
+ style: { marginTop: '10px' },
102
+ value: me.exampleComponent.labelNeutral
103
+ }, {
104
+ module: TextField,
105
+ labelText: 'icon Neutral',
106
+ listeners: { change: me.onConfigChange.bind(me, 'iconNeutral') },
107
+ value: me.exampleComponent.iconNeutral
108
+ }, {
109
+ module: TextField,
110
+ labelText: 'side-icon Neutral',
111
+ listeners: { change: me.onConfigChange.bind(me, 'sideIconNeutral') },
112
+ value: me.exampleComponent.sideIconNeutral
113
+ }, {
114
+ module: TextField,
115
+ labelText: 'label Success',
116
+ listeners: { change: me.onConfigChange.bind(me, 'labelSuccess') },
117
+ style: { marginTop: '10px' },
118
+ value: me.exampleComponent.labelSuccess
119
+ }, {
120
+ module: TextField,
121
+ labelText: 'icon Success',
122
+ listeners: { change: me.onConfigChange.bind(me, 'iconSuccess') },
123
+ value: me.exampleComponent.iconSuccess
124
+ }, {
125
+ module: TextField,
126
+ labelText: 'side-icon Success',
127
+ listeners: { change: me.onConfigChange.bind(me, 'sideIconSuccess') },
128
+ value: me.exampleComponent.sideIconSuccess
129
+ }, {
130
+ module: CheckBox,
131
+ checked: me.exampleComponent.deactivateStateIcons,
132
+ labelText: 'deactivate State Icons',
133
+ style: { marginTop: '20px' },
134
+ listeners: { change: me.onConfigChange.bind(me, 'deactivateStateIcons') },
135
+ }, {
136
+ module: CheckBox,
137
+ checked: me.exampleComponent.deactivateSideIcons,
138
+ labelText: 'deactivate Side Icons',
139
+ listeners: { change: me.onConfigChange.bind(me, 'deactivateSideIcons') },
140
+ }, {
141
+ module: Radio,
142
+ checked: me.exampleComponent.state === 'alert',
42
143
  hideValueLabel: false,
43
- labelText : 'state',
44
- listeners : {change: me.onRadioChange.bind(me, 'state', 'error')},
45
- name : 'state',
46
- style : {marginTop: '10px'},
144
+ labelText: 'state',
145
+ listeners: { change: me.onRadioChange.bind(me, 'state', 'alert') },
146
+ name: 'state',
147
+ style: { marginTop: '20px' },
148
+ valueLabelText: 'alert'
149
+ }, {
150
+ module: Radio,
151
+ checked: me.exampleComponent.state === 'error',
152
+ hideValueLabel: false,
153
+ labelText: '',
154
+ listeners: { change: me.onRadioChange.bind(me, 'state', 'error') },
155
+ name: 'state',
47
156
  valueLabelText: 'error'
48
157
  }, {
49
- module : Radio,
50
- checked : me.exampleComponent.badgePosition === 'success',
158
+ module: Radio,
159
+ checked: me.exampleComponent.state === 'info',
51
160
  hideValueLabel: false,
52
- labelText : '',
53
- listeners : {change: me.onRadioChange.bind(me, 'state', 'success')},
54
- name : 'state',
55
- valueLabelText: 'success'
161
+ labelText: '',
162
+ listeners: { change: me.onRadioChange.bind(me, 'state', 'info') },
163
+ name: 'state',
164
+ valueLabelText: 'info'
165
+ }, {
166
+ module: Radio,
167
+ checked: me.exampleComponent.state === 'neutral',
168
+ hideValueLabel: false,
169
+ labelText: '',
170
+ listeners: { change: me.onRadioChange.bind(me, 'state', 'neutral') },
171
+ name: 'state',
172
+ valueLabelText: 'neutral'
56
173
  }, {
57
- module : NumberField,
58
- clearable : true,
59
- labelText : 'width',
60
- listeners : {change: me.onConfigChange.bind(me, 'width')},
61
- maxValue : 300,
62
- minValue : 100,
63
- stepSize : 5,
64
- style : {marginTop: '10px'},
65
- value : me.exampleComponent.width
174
+ module: Radio,
175
+ checked: me.exampleComponent.state === 'success',
176
+ hideValueLabel: false,
177
+ labelText: '',
178
+ listeners: { change: me.onRadioChange.bind(me, 'state', 'success') },
179
+ name: 'state',
180
+ valueLabelText: 'success'
66
181
  }]
67
182
  }
68
183
 
@@ -70,7 +185,7 @@ class MainContainer extends ConfigurationViewport {
70
185
  return Neo.create({
71
186
  module: StatusBadge,
72
187
  height: 30,
73
- state : 'error'
188
+ state: 'info'
74
189
  })
75
190
  }
76
191
  }
package/examples/form/field/fileupload/server.mjs CHANGED
@@ -9,11 +9,11 @@ app.use(cors());
9
9
  app.post('/file-upload-test', async (req, res) => {
10
10
 
11
11
  await new Promise(resolve => setTimeout(resolve, 3000));
12
-
12
+
13
13
  res.set('Content-Type', 'application/json');
14
14
  res.send('{"success":true,"documentId":"1"}');
15
15
  })
16
-
16
+
17
17
  app.post('/file-upload-test-fail', async (req, res) => {
18
18
  res.set('Content-Type', 'application/json');
19
19
  res.send('{"success":false,"message":"Something went wrong"}');
@@ -21,7 +21,7 @@ app.post('/file-upload-test-fail', async (req, res) => {
21
21
 
22
22
  app.get('/document-status', async(req, res) => {
23
23
  res.set('Content-Type', 'application/json');
24
- res.send('{"status":"scanning"}');
24
+ res.send('{"status":"SCANNING"}');
25
25
  });
26
26
 
27
27
  app.get('/document-delete', async(req, res) => {
@@ -31,17 +31,27 @@ app.get('/document-delete', async(req, res) => {
31
31
 
32
32
  app.get('/document-status-fail', async(req, res) => {
33
33
  res.set('Content-Type', 'application/json');
34
- res.send('{"status":"scan-failed"}');
34
+ res.send('{"status":"MALWARE_DETECTED"}');
35
35
  });
36
36
 
37
37
  app.get('/document-status-downloadable', async(req, res) => {
38
38
  res.set('Content-Type', 'application/json');
39
- res.send('{"status":"downloadable"}');
39
+ res.send('{"status":"DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
40
40
  });
41
41
 
42
42
  app.get('/document-status-not-downloadable', async(req, res) => {
43
43
  res.set('Content-Type', 'application/json');
44
- res.send('{"status":"not-downloadable"}');
44
+ res.send('{"status":"UN_DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
45
+ });
46
+
47
+ app.get('/document-status-non-existent', async(req, res) => {
48
+ res.set('Content-Type', 'application/json');
49
+ res.send('{"status":"DELETED","fileName":"testfile.pdf","size":9653413}');
50
+ });
51
+
52
+ app.get('/document-status-fails', async(req, res) => {
53
+ res.status(500);
54
+ res.send('');
45
55
  });
46
56
 
47
57
  app.listen(port, () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "5.17.1",
3
+ "version": "5.18.0",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
package/resources/scss/src/component/StatusBadge.scss CHANGED
@@ -1,9 +1,49 @@
1
1
  .neo-status-badge {
2
+ display: flex;
3
+ padding: v(status-badge-padding);
4
+ align-items: v(status-badge-align-items);
5
+
6
+ &.neo-state-alert {
7
+ background-color: v(status-badge-state-alert-background-color);
8
+ color: v(status-badge-state-alert-text-color);
9
+ }
10
+
2
11
  &.neo-state-error {
3
- background-color: red;
12
+ background-color: v(status-badge-state-error-background-color);
13
+ color: v(status-badge-state-error-text-color);
14
+ }
15
+
16
+ &.neo-state-info {
17
+ background-color: v(status-badge-state-info-background-color);
18
+ color: v(status-badge-state-info-text-color);
19
+ }
20
+
21
+ &.neo-state-neutral {
22
+ background-color: v(status-badge-state-neutral-background-color);
23
+ color: v(status-badge-state-neutral-text-color);
4
24
  }
5
25
 
6
26
  &.neo-state-success {
7
- background-color: darkgreen;
27
+ background-color: v(status-badge-state-success-background-color);
28
+ color: v(status-badge-state-success-text-color);
29
+
30
+ }
31
+
32
+ .neo-state-glyph {
33
+ font-size: v(status-badge-font-size);
34
+ pointer-events: none;
8
35
  }
9
- }
36
+
37
+ .neo-state-text {
38
+ flex: 1 1 auto;
39
+ font-family: v(status-badge-font-family);
40
+ font-size: v(status-badge-font-size);
41
+ font-weight: v(status-badge-font-weight);
42
+ line-height: v(status-badge-line-height);
43
+ pointer-events: none;
44
+ text-align: v(status-badge-align-items);
45
+ text-transform: v(status-badge-transform);
46
+ }
47
+
48
+
49
+ }
package/resources/scss/theme-dark/component/StatusBadge.scss ADDED
@@ -0,0 +1,41 @@
1
+ $neoMap: map-merge($neoMap, (
2
+ 'status-badge-padding' : 0px 5px 0px 5px,
3
+ 'status-badge-align-items' : center,
4
+ 'status-badge-state-alert-background-color' : orange,
5
+ 'status-badge-state-alert-text-color' : black,
6
+ 'status-badge-state-error-background-color' : red,
7
+ 'status-badge-state-error-text-color' : white,
8
+ 'status-badge-state-info-background-color' : lightblue,
9
+ 'status-badge-state-info-text-color' : black,
10
+ 'status-badge-state-neutral-background-color' : white,
11
+ 'status-badge-state-neutral-text-color' : black,
12
+ 'status-badge-state-success-background-color' : green,
13
+ 'status-badge-state-success-text-color' : white,
14
+ 'status-badge-font-size' : 11px,
15
+ 'status-badge-font-family' : #{neo(neo-font-family)},
16
+ 'status-badge-font-weight' : 600,
17
+ 'status-badge-line-height' : 11px,
18
+ 'status-badge-transform' : none
19
+ ));
20
+
21
+ @if $useCssVars == true {
22
+ :root .neo-theme-dark {
23
+ --status-badge-padding : #{neo(status-badge-padding)};
24
+ --status-badge-align-items : #{neo(status-badge-align-items)};
25
+ --status-badge-state-alert-background-color : #{neo(status-badge-state-alert-background-color)};
26
+ --status-badge-state-alert-text-color : #{neo(status-badge-state-alert-text-color)};
27
+ --status-badge-state-error-background-color : #{neo(status-badge-state-error-background-color)};
28
+ --status-badge-state-error-text-color : #{neo(status-badge-state-error-text-color)};
29
+ --status-badge-state-info-background-color : #{neo(status-badge-state-info-background-color)};
30
+ --status-badge-state-info-text-color : #{neo(status-badge-state-info-text-color)};
31
+ --status-badge-state-neutral-background-color : #{neo(status-badge-state-neutral-background-color)};
32
+ --status-badge-state-neutral-text-color : #{neo(status-badge-state-neutral-text-color)};
33
+ --status-badge-state-success-background-color : #{neo(status-badge-state-success-background-color)};
34
+ --status-badge-state-success-text-color : #{neo(status-badge-state-success-text-color)};
35
+ --status-badge-font-size : #{neo(status-badge-font-size)};
36
+ --status-badge-font-family : #{neo(status-badge-font-family)};
37
+ --status-badge-font-weight : #{neo(status-badge-font-weight)};
38
+ --status-badge-line-height : #{neo(status-badge-line-height)};
39
+ --status-badge-transform : #{neo(status-badge-transform)};
40
+ }
41
+ }
package/resources/scss/theme-light/component/StatusBadge.scss ADDED
@@ -0,0 +1,41 @@
1
+ $neoMap: map-merge($neoMap, (
2
+ 'status-badge-padding' : 0px 5px 0px 5px,
3
+ 'status-badge-align-items' : center,
4
+ 'status-badge-state-alert-background-color' : orange,
5
+ 'status-badge-state-alert-text-color' : black,
6
+ 'status-badge-state-error-background-color' : red,
7
+ 'status-badge-state-error-text-color' : white,
8
+ 'status-badge-state-info-background-color' : lightblue,
9
+ 'status-badge-state-info-text-color' : black,
10
+ 'status-badge-state-neutral-background-color' : white,
11
+ 'status-badge-state-neutral-text-color' : black,
12
+ 'status-badge-state-success-background-color' : green,
13
+ 'status-badge-state-success-text-color' : white,
14
+ 'status-badge-font-size' : 11px,
15
+ 'status-badge-font-family' : #{neo(neo-font-family)},
16
+ 'status-badge-font-weight' : 600,
17
+ 'status-badge-line-height' : 11px,
18
+ 'status-badge-transform' : none
19
+ ));
20
+
21
+ @if $useCssVars == true {
22
+ :root .neo-theme-light {
23
+ --status-badge-padding : #{neo(status-badge-padding)};
24
+ --status-badge-align-items : #{neo(status-badge-align-items)};
25
+ --status-badge-state-alert-background-color : #{neo(status-badge-state-alert-background-color)};
26
+ --status-badge-state-alert-text-color : #{neo(status-badge-state-alert-text-color)};
27
+ --status-badge-state-error-background-color : #{neo(status-badge-state-error-background-color)};
28
+ --status-badge-state-error-text-color : #{neo(status-badge-state-error-text-color)};
29
+ --status-badge-state-info-background-color : #{neo(status-badge-state-info-background-color)};
30
+ --status-badge-state-info-text-color : #{neo(status-badge-state-info-text-color)};
31
+ --status-badge-state-neutral-background-color : #{neo(status-badge-state-neutral-background-color)};
32
+ --status-badge-state-neutral-text-color : #{neo(status-badge-state-neutral-text-color)};
33
+ --status-badge-state-success-background-color : #{neo(status-badge-state-success-background-color)};
34
+ --status-badge-state-success-text-color : #{neo(status-badge-state-success-text-color)};
35
+ --status-badge-font-size : #{neo(status-badge-font-size)};
36
+ --status-badge-font-family : #{neo(status-badge-font-family)};
37
+ --status-badge-font-weight : #{neo(status-badge-font-weight)};
38
+ --status-badge-line-height : #{neo(status-badge-line-height)};
39
+ --status-badge-transform : #{neo(status-badge-transform)};
40
+ }
41
+ }
package/src/DefaultConfig.mjs CHANGED
@@ -245,12 +245,12 @@ const DefaultConfig = {
245
245
  useVdomWorker: true,
246
246
  /**
247
247
  * buildScripts/injectPackageVersion.mjs will update this value
248
- * @default '5.17.1'
248
+ * @default '5.18.0'
249
249
  * @memberOf! module:Neo
250
250
  * @name config.version
251
251
  * @type String
252
252
  */
253
- version: '5.17.1'
253
+ version: '5.18.0'
254
254
  };
255
255
 
256
256
  Object.assign(DefaultConfig, {
package/src/component/StatusBadge.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import Base from '../component/Base.mjs';
1
+ import Base from '../component/Base.mjs';
2
2
  import NeoArray from '../util/Array.mjs';
3
3
 
4
4
  /**
@@ -8,11 +8,11 @@ import NeoArray from '../util/Array.mjs';
8
8
  class StatusBadge extends Base {
9
9
  /**
10
10
  * Valid values for state
11
- * @member {String[]} states=['error','neutral','success']
11
+ * @member {String[]} states=['alert','error','info','neutral','success']
12
12
  * @protected
13
13
  * @static
14
14
  */
15
- static states = ['error', 'neutral', 'success']
15
+ static states = ['alert', 'error', 'info', 'neutral', 'success']
16
16
 
17
17
  static config = {
18
18
  /**
@@ -30,15 +30,297 @@ class StatusBadge extends Base {
30
30
  * @protected
31
31
  */
32
32
  baseCls: ['neo-status-badge'],
33
+ /**
34
+ * @member {String[]} currentStateIcon=null
35
+ */
36
+ _currentStateIcon: null,
37
+ /**
38
+ * @member {String[]} currentSideIcon=null
39
+ */
40
+ _currentSideIcon: null,
41
+ /**
42
+ * false calls Neo.Main.setRoute()
43
+ * @member {Boolean} deactivateStateIcons=false
44
+ */
45
+ deactivateStateIcons_: false,
46
+ /**
47
+ * false calls Neo.Main.setRoute()
48
+ * @member {Boolean} deactivateSideIcons=false
49
+ */
50
+ deactivateSideIcons_: false,
51
+
52
+ /**
53
+ * @member {String} iconAlert='fa-triangle-exclamation'
54
+ */
55
+ iconAlert_: 'fa fa-triangle-exclamation',
56
+ /**
57
+ * @member {String} iconError='fa-xmark'
58
+ */
59
+ iconError_: 'fa fa-xmark',
60
+ /**
61
+ * @member {String} iconInfo='fa-info'
62
+ */
63
+ iconInfo_: 'fa fa-info',
64
+ /**
65
+ * @member {String} iconNeutral='fa-circle'
66
+ */
67
+ iconNeutral_: 'fa fa-circle',
68
+ /**
69
+ * @member {String} iconSuccess='fa-check'
70
+ */
71
+ iconSuccess_: 'fa fa-check',
72
+
73
+ /**
74
+ * @member {String} sideIconAlert='fa fa-registered'
75
+ */
76
+ sideIconAlert_: 'fa fa-registered',
77
+ /**
78
+ * @member {String} sideIconError='fa fa-registered'
79
+ */
80
+ sideIconError_: 'fa fa-registered',
81
+ /**
82
+ * @member {String} sideIconInfo='fa fa-registered'
83
+ */
84
+ sideIconInfo_: 'fa fa-registered',
85
+ /**
86
+ * @member {String} sideIconNeutral='fa fa-registered'
87
+ */
88
+ sideIconNeutral_: 'fa fa-registered',
89
+ /**
90
+ * @member {String} sideIconSuccess='fa fa-registered'
91
+ */
92
+ sideIconSuccess_: 'fa fa-registered',
93
+
94
+
95
+
96
+ /**
97
+ * @member {String} labelAlert_='Alert'
98
+ */
99
+ labelAlert_: 'Alert',
100
+ /**
101
+ * @member {String} labelError_='Error'
102
+ */
103
+ labelError_: 'Error',
104
+ /**
105
+ * @member {String} labelInfo_='Info'
106
+ */
107
+ labelInfo_: 'Info',
108
+ /**
109
+ * @member {String} labelNeutral_='Neutral'
110
+ */
111
+ labelNeutral_: 'Neutral',
112
+ /**
113
+ * @member {String} labelSuccess_='Success'
114
+ */
115
+ labelSuccess_: 'Success',
116
+
117
+
33
118
  /**
34
119
  * @member {String} state_='neutral'
35
120
  */
36
121
  state_: 'neutral',
37
122
  /**
38
- * @member {Object} vdom
123
+ * @member {Object} _vdom
39
124
  */
40
- vdom:
41
- {}
125
+ _vdom:
126
+ {
127
+ tag: 'div', type: 'div', cn: [
128
+ { tag: 'span', cls: ['neo-state-glyph'] },
129
+ { tag: 'span', cls: ['neo-state-text'] },
130
+ { tag: 'span', cls: ['neo-state-glyph'] }
131
+ ]
132
+ }
133
+ }
134
+
135
+ /**
136
+ * Triggered after the deactivateStateIcons config got changed
137
+ * @param {String|null} value
138
+ * @param {String|null} oldValue
139
+ * @protected
140
+ */
141
+ afterSetDeactivateStateIcons(value, oldValue) {
142
+ this.updateStateIconNode(this._currentStateIcon);
143
+ }
144
+
145
+ /**
146
+ * Triggered after the deactivateSideIcons config got changed
147
+ * @param {String|null} value
148
+ * @param {String|null} oldValue
149
+ * @protected
150
+ */
151
+ afterSetDeactivateSideIcons(value, oldValue) {
152
+ this.updateSideIconNode(this._currentSideIcon);
153
+ }
154
+
155
+ /**
156
+ * Triggered after the labelAlert config got changed
157
+ * @param {String|null} value
158
+ * @param {String|null} oldValue
159
+ * @protected
160
+ */
161
+ afterSetLabelAlert(value, oldValue) {
162
+ if (this.state === 'alert') {
163
+ this.updateLabelNode(value);
164
+ }
165
+ }
166
+ /**
167
+ * Triggered after the iconAlert config got changed
168
+ * @param {String|null} value
169
+ * @param {String|null} oldValue
170
+ * @protected
171
+ */
172
+ afterSetIconAlert(value, oldValue) {
173
+ if (this.state === 'alert') {
174
+ this.updateStateIconNode(value);
175
+ }
176
+ }
177
+ /**
178
+ * Triggered after the sideIconAlert config got changed
179
+ * @param {String|null} value
180
+ * @param {String|null} oldValue
181
+ * @protected
182
+ */
183
+ afterSetSideIconAlert(value, oldValue) {
184
+ if (this.state === 'alert') {
185
+ this.updateSideIconNode(value);
186
+ }
187
+ }
188
+
189
+ /**
190
+ * Triggered after the labelError config got changed
191
+ * @param {String|null} value
192
+ * @param {String|null} oldValue
193
+ * @protected
194
+ */
195
+ afterSetLabelError(value, oldValue) {
196
+ if (this.state === 'error') {
197
+ this.updateLabelNode(value);
198
+ }
199
+ }
200
+ /**
201
+ * Triggered after the iconError config got changed
202
+ * @param {String|null} value
203
+ * @param {String|null} oldValue
204
+ * @protected
205
+ */
206
+ afterSetIconError(value, oldValue) {
207
+ if (this.state === 'error') {
208
+ this.updateStateIconNode(value);
209
+ }
210
+ }
211
+ /**
212
+ * Triggered after the sideIconError config got changed
213
+ * @param {String|null} value
214
+ * @param {String|null} oldValue
215
+ * @protected
216
+ */
217
+ afterSetSideIconError(value, oldValue) {
218
+ if (this.state === 'error') {
219
+ this.updateSideIconNode(value);
220
+ }
221
+ }
222
+
223
+
224
+ /**
225
+ * Triggered after the labelInfo config got changed
226
+ * @param {String|null} value
227
+ * @param {String|null} oldValue
228
+ * @protected
229
+ */
230
+ afterSetLabelInfo(value, oldValue) {
231
+ if (this.state === 'info') {
232
+ this.updateLabelNode(value);
233
+ }
234
+ }
235
+ /**
236
+ * Triggered after the iconInfo config got changed
237
+ * @param {String|null} value
238
+ * @param {String|null} oldValue
239
+ * @protected
240
+ */
241
+ afterSetIconInfo(value, oldValue) {
242
+ if (this.state === 'info') {
243
+ this.updateStateIconNode(value);
244
+ }
245
+ }
246
+ /**
247
+ * Triggered after the sideIconInfo config got changed
248
+ * @param {String|null} value
249
+ * @param {String|null} oldValue
250
+ * @protected
251
+ */
252
+ afterSetSideIconInfo(value, oldValue) {
253
+ if (this.state === 'info') {
254
+ this.updateSideIconNode(value);
255
+ }
256
+ }
257
+
258
+ /**
259
+ * Triggered after the labelNeutral config got changed
260
+ * @param {String|null} value
261
+ * @param {String|null} oldValue
262
+ * @protected
263
+ */
264
+ afterSetLabelNeutral(value, oldValue) {
265
+ if (this.state === 'neutral') {
266
+ this.updateLabelNode(value);
267
+ }
268
+ }
269
+ /**
270
+ * Triggered after the iconNeutral config got changed
271
+ * @param {String|null} value
272
+ * @param {String|null} oldValue
273
+ * @protected
274
+ */
275
+ afterSetIconNeutral(value, oldValue) {
276
+ if (this.state === 'neutral') {
277
+ this.updateStateIconNode(value);
278
+ }
279
+ }
280
+ /**
281
+ * Triggered after the sideIconNeutral config got changed
282
+ * @param {String|null} value
283
+ * @param {String|null} oldValue
284
+ * @protected
285
+ */
286
+ afterSetSideIconNeutral(value, oldValue) {
287
+ if (this.state === 'neutral') {
288
+ this.updateSideIconNode(value);
289
+ }
290
+ }
291
+
292
+ /**
293
+ * Triggered after the labelSuccess config got changed
294
+ * @param {String|null} value
295
+ * @param {String|null} oldValue
296
+ * @protected
297
+ */
298
+ afterSetLabelSuccess(value, oldValue) {
299
+ if (this.state === 'success') {
300
+ this.updateLabelNode(value);
301
+ }
302
+ }
303
+ /**
304
+ * Triggered after the iconSuccess config got changed
305
+ * @param {String|null} value
306
+ * @param {String|null} oldValue
307
+ * @protected
308
+ */
309
+ afterSetIconSuccess(value, oldValue) {
310
+ if (this.state === 'success') {
311
+ this.updateStateIconNode(value);
312
+ }
313
+ }
314
+ /**
315
+ * Triggered after the sideIconSuccess config got changed
316
+ * @param {String|null} value
317
+ * @param {String|null} oldValue
318
+ * @protected
319
+ */
320
+ afterSetSideIconSuccess(value, oldValue) {
321
+ if (this.state === 'success') {
322
+ this.updateSideIconNode(value);
323
+ }
42
324
  }
43
325
 
44
326
  /**
@@ -48,12 +330,58 @@ class StatusBadge extends Base {
48
330
  * @protected
49
331
  */
50
332
  afterSetState(value, oldValue) {
51
- let cls = this.cls;
333
+
334
+ let cls = this.cls,
335
+ me = this,
336
+ isEmpty = !value || value === '',
337
+ vdomRoot = me.getVdomRoot(),
338
+ labelNode = vdomRoot.cn[1];
52
339
 
53
340
  NeoArray.remove(cls, 'neo-state-' + oldValue);
54
341
  NeoArray.add(cls, 'neo-state-' + value);
55
342
 
56
343
  this.cls = cls
344
+
345
+ labelNode.removeDom = isEmpty;
346
+
347
+ if (!isEmpty) {
348
+ let showLabel = '';
349
+ let showStateIcon = '';
350
+ let showSideIcon = '';
351
+
352
+ switch (value) {
353
+ case 'alert':
354
+ showLabel = me.labelAlert;
355
+ showStateIcon = me.iconAlert;
356
+ showSideIcon = me.sideIconAlert;
357
+ break;
358
+ case 'error':
359
+ showLabel = me.labelError;
360
+ showStateIcon = me.iconError;
361
+ showSideIcon = me.sideIconError;
362
+ break;
363
+ case 'info':
364
+ showLabel = me.labelInfo;
365
+ showStateIcon = me.iconInfo;
366
+ showSideIcon = me.sideIconInfo;
367
+ break;
368
+ case 'neutral':
369
+ showLabel = me.labelNeutral;
370
+ showStateIcon = me.iconNeutral;
371
+ showSideIcon = me.sideIconNeutral;
372
+ break;
373
+ case 'success':
374
+ showLabel = me.labelSuccess;
375
+ showStateIcon = me.iconSuccess;
376
+ showSideIcon = me.sideIconSuccess;
377
+ break;
378
+ }
379
+ labelNode.innerHTML = showLabel;
380
+ this.updateStateIconNode(showStateIcon);
381
+ this.updateSideIconNode(showSideIcon);
382
+ }
383
+
384
+ me.update();
57
385
  }
58
386
 
59
387
  /**
@@ -66,6 +394,105 @@ class StatusBadge extends Base {
66
394
  beforeSetState(value, oldValue) {
67
395
  return this.beforeSetEnumValue(value, oldValue, 'state')
68
396
  }
397
+
398
+ /**
399
+ * Convenience shortcut
400
+ * @returns {Object}
401
+ */
402
+ updateLabelNode(value) {
403
+ let labelNode = this.getVdomRoot().cn[1];
404
+
405
+ labelNode.innerHTML = value;
406
+ labelNode.removeDom = !Boolean(value);
407
+
408
+ this.update();
409
+ }
410
+
411
+ /**
412
+ * Convenience shortcut
413
+ * @returns {Object}
414
+ */
415
+ updateStateIconNode(value) {
416
+ let iconNode = this.getStateIconNode();
417
+ let currentValue = this._currentStateIcon;
418
+
419
+ if (value && !Array.isArray(value)) {
420
+ value = value.split(' ').filter(Boolean);
421
+ }
422
+ if (currentValue && !Array.isArray(currentValue)) {
423
+ currentValue = value.split(' ').filter(Boolean);
424
+ }
425
+
426
+ NeoArray.remove(iconNode.cls, currentValue);
427
+ NeoArray.add(iconNode.cls, value);
428
+
429
+ iconNode.removeDom = !value || value === '' || this.deactivateStateIcons;
430
+
431
+ this._currentStateIcon = value;
432
+ this.update();
433
+ }
434
+
435
+ /**
436
+ * Convenience shortcut
437
+ * @returns {Object}
438
+ */
439
+ getStateIconNode() {
440
+ return this.getVdomRoot().cn[0]
441
+ }
442
+
443
+
444
+ /**
445
+ * Triggered after the StateIcon config got changed
446
+ * @param {String|null} value
447
+ * @param {String|null} oldValue
448
+ * @protected
449
+ */
450
+ afterSetStateIcon(value, oldValue) {
451
+ this.updateStateIconNode(value, oldValue);
452
+ }
453
+
454
+ /**
455
+ * Convenience shortcut
456
+ * @returns {Object}
457
+ */
458
+ updateSideIconNode(value) {
459
+ let iconNode = this.getSideIconNode();
460
+ let currentValue = this._currentSideIcon;
461
+
462
+ if (value && !Array.isArray(value)) {
463
+ value = value.split(' ').filter(Boolean);
464
+ }
465
+ if (currentValue && !Array.isArray(currentValue)) {
466
+ currentValue = value.split(' ').filter(Boolean);
467
+ }
468
+
469
+ NeoArray.remove(iconNode.cls, currentValue);
470
+ NeoArray.add(iconNode.cls, value);
471
+
472
+ iconNode.removeDom = !value || value === '' || this.deactivateSideIcons;
473
+
474
+ this._currentSideIcon = value;
475
+ this.update();
476
+ }
477
+
478
+ /**
479
+ * Convenience shortcut
480
+ * @returns {Object}
481
+ */
482
+ getSideIconNode() {
483
+ return this.getVdomRoot().cn[2]
484
+ }
485
+
486
+
487
+ /**
488
+ * Triggered after the StateIcon config got changed
489
+ * @param {String|null} value
490
+ * @param {String|null} oldValue
491
+ * @protected
492
+ */
493
+ afterSetSideIcon(value, oldValue) {
494
+ this.updateSideIconNode(value, oldValue);
495
+ }
69
496
  }
70
497
 
71
498
  Neo.applyClassConfig(StatusBadge);