neo.mjs 5.17.0 → 5.18.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.17.0'
+         * @member {String} version='5.18.0'
          */
-        version: '5.17.0'
+        version: '5.18.0'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.17.0'
+         * @member {String} version='5.18.0'
          */
-        version: '5.17.0'
+        version: '5.18.0'
     }
 
     /**

package/examples/component/statusbadge/MainContainer.mjs

@@ -1,9 +1,9 @@
-import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import CheckBox from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
-import NumberField           from '../../../src/form/field/Number.mjs';
-import Radio                 from '../../../src/form/field/Radio.mjs';
-import StatusBadge           from '../../../src/component/StatusBadge.mjs';
-import TextField             from '../../../src/form/field/Text.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import Radio from '../../../src/form/field/Radio.mjs';
+import StatusBadge from '../../../src/component/StatusBadge.mjs';
+import TextField from '../../../src/form/field/Text.mjs';
 
 /**
  * @class Neo.examples.component.statusbadge.MainContainer
@@ -11,58 +11,173 @@ import TextField             from '../../../src/form/field/Text.mjs';
  */
 class MainContainer extends ConfigurationViewport {
     static config = {
-        className           : 'Neo.examples.component.statusbadge.MainContainer',
-        autoMount           : true,
+        className: 'Neo.examples.component.statusbadge.MainContainer',
+        autoMount: true,
         configItemLabelWidth: 110,
-        configItemWidth     : 230,
-        layout              : {ntype: 'hbox', align: 'stretch'}
+        configItemWidth: 230,
+        layout: { ntype: 'hbox', align: 'stretch' }
     }
 
     createConfigurationComponents() {
         let me = this;
 
         return [{
-            module   : CheckBox,
-            checked  : me.exampleComponent.closable,
+            module: CheckBox,
+            checked: me.exampleComponent.closable,
             labelText: 'closable',
-            listeners: {change: me.onConfigChange.bind(me, 'closable')}
-        }, {
-            module    :  NumberField,
-            clearable : true,
-            labelText : 'height',
-            listeners : {change: me.onConfigChange.bind(me, 'height')},
-            maxValue  : 100,
-            minValue  : 20,
-            stepSize  : 2,
-            style     : {marginTop: '10px'},
-            value     : me.exampleComponent.height
-        }, {
-            module        : Radio,
-            checked       : me.exampleComponent.state === 'error',
+            listeners: { change: me.onConfigChange.bind(me, 'closable') }
+        }, {
+            module: NumberField,
+            clearable: true,
+            labelText: 'height',
+            listeners: { change: me.onConfigChange.bind(me, 'height') },
+            maxValue: 100,
+            minValue: 20,
+            stepSize: 2,
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.height
+        }, {
+            module: NumberField,
+            clearable: true,
+            labelText: 'width',
+            listeners: { change: me.onConfigChange.bind(me, 'width') },
+            maxValue: 300,
+            minValue: 100,
+            stepSize: 5,
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.width
+        }, {
+            module: TextField,
+            labelText: 'label Alert',
+            listeners: { change: me.onConfigChange.bind(me, 'labelAlert') },
+            style: { marginTop: '20px' },
+            value: me.exampleComponent.labelAlert
+        }, {
+            module: TextField,
+            labelText: 'icon Alert',
+            listeners: { change: me.onConfigChange.bind(me, 'iconAlert') },
+            value: me.exampleComponent.iconAlert
+        }, {
+            module: TextField,
+            labelText: 'side-icon Alert',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconAlert') },
+            value: me.exampleComponent.sideIconAlert
+        }, {
+            module: TextField,
+            labelText: 'label Error',
+            listeners: { change: me.onConfigChange.bind(me, 'labelError') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelError
+        }, {
+            module: TextField,
+            labelText: 'icon Error',
+            listeners: { change: me.onConfigChange.bind(me, 'iconError') },
+            value: me.exampleComponent.iconError
+        }, {
+            module: TextField,
+            labelText: 'side-icon Error',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconError') },
+            value: me.exampleComponent.sideIconError
+        },{
+            module: TextField,
+            labelText: 'label Info',
+            listeners: { change: me.onConfigChange.bind(me, 'labelInfo') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelInfo
+        }, {
+            module: TextField,
+            labelText: 'icon Info',
+            listeners: { change: me.onConfigChange.bind(me, 'iconInfo') },
+            value: me.exampleComponent.iconInfo
+        }, {
+            module: TextField,
+            labelText: 'side-icon Info',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconInfo') },
+            value: me.exampleComponent.sideIconInfo 
+        }, {
+            module: TextField,
+            labelText: 'label Neutral',
+            listeners: { change: me.onConfigChange.bind(me, 'labelNeutral') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelNeutral
+        }, {
+            module: TextField,
+            labelText: 'icon Neutral',
+            listeners: { change: me.onConfigChange.bind(me, 'iconNeutral') },
+            value: me.exampleComponent.iconNeutral
+        }, {
+            module: TextField,
+            labelText: 'side-icon Neutral',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconNeutral') },
+            value: me.exampleComponent.sideIconNeutral
+        }, {
+            module: TextField,
+            labelText: 'label Success',
+            listeners: { change: me.onConfigChange.bind(me, 'labelSuccess') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelSuccess
+        }, {
+            module: TextField,
+            labelText: 'icon Success',
+            listeners: { change: me.onConfigChange.bind(me, 'iconSuccess') },
+            value: me.exampleComponent.iconSuccess
+        }, {
+            module: TextField,
+            labelText: 'side-icon Success',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconSuccess') },
+            value: me.exampleComponent.sideIconSuccess
+        }, {
+            module: CheckBox,
+            checked: me.exampleComponent.deactivateStateIcons,
+            labelText: 'deactivate State Icons',
+            style: { marginTop: '20px' },
+            listeners: { change: me.onConfigChange.bind(me, 'deactivateStateIcons') },
+        }, {
+            module: CheckBox,
+            checked: me.exampleComponent.deactivateSideIcons,
+            labelText: 'deactivate Side Icons',
+            listeners: { change: me.onConfigChange.bind(me, 'deactivateSideIcons') },
+        }, {
+            module: Radio,
+            checked: me.exampleComponent.state === 'alert',
             hideValueLabel: false,
-            labelText     : 'state',
-            listeners     : {change: me.onRadioChange.bind(me, 'state', 'error')},
-            name          : 'state',
-            style         : {marginTop: '10px'},
+            labelText: 'state',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'alert') },
+            name: 'state',
+            style: { marginTop: '20px' },
+            valueLabelText: 'alert'
+        }, {
+            module: Radio,
+            checked: me.exampleComponent.state === 'error',
+            hideValueLabel: false,
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'error') },
+            name: 'state',
             valueLabelText: 'error'
         }, {
-            module        : Radio,
-            checked       : me.exampleComponent.badgePosition === 'success',
+            module: Radio,
+            checked: me.exampleComponent.state === 'info',
             hideValueLabel: false,
-            labelText     : '',
-            listeners     : {change: me.onRadioChange.bind(me, 'state', 'success')},
-            name          : 'state',
-            valueLabelText: 'success'
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'info') },
+            name: 'state',
+            valueLabelText: 'info'
+        }, {
+            module: Radio,
+            checked: me.exampleComponent.state === 'neutral',
+            hideValueLabel: false,
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'neutral') },
+            name: 'state',
+            valueLabelText: 'neutral'
         }, {
-            module    :  NumberField,
-            clearable : true,
-            labelText : 'width',
-            listeners : {change: me.onConfigChange.bind(me, 'width')},
-            maxValue  : 300,
-            minValue  : 100,
-            stepSize  : 5,
-            style     : {marginTop: '10px'},
-            value     : me.exampleComponent.width
+            module: Radio,
+            checked: me.exampleComponent.state === 'success',
+            hideValueLabel: false,
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'success') },
+            name: 'state',
+            valueLabelText: 'success'
         }]
     }
 
@@ -70,7 +185,7 @@ class MainContainer extends ConfigurationViewport {
         return Neo.create({
             module: StatusBadge,
             height: 30,
-            state : 'error'
+            state: 'info'
         })
     }
 }

package/examples/form/field/fileupload/MainContainer.mjs

@@ -140,6 +140,21 @@ class MainContainer extends ConfigurationViewport {
                     xls : 1,
                     pdf : 1
                 }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-failing-document-status-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-fails?documentId={documentId}',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete?documentId={documentId}',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument?documentId={documentId}',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
             }]
         });
     }

package/examples/form/field/fileupload/server.mjs

@@ -9,11 +9,11 @@ app.use(cors());
 app.post('/file-upload-test', async (req, res) => {
 
     await new Promise(resolve => setTimeout(resolve, 3000));
-
+  
     res.set('Content-Type', 'application/json');
     res.send('{"success":true,"documentId":"1"}');
   })
-
+  
 app.post('/file-upload-test-fail', async (req, res) => {
     res.set('Content-Type', 'application/json');
     res.send('{"success":false,"message":"Something went wrong"}');
@@ -21,7 +21,7 @@ app.post('/file-upload-test-fail', async (req, res) => {
 
 app.get('/document-status', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"scanning"}');
+    res.send('{"status":"SCANNING"}');
 });
 
 app.get('/document-delete', async(req, res) => {
@@ -31,17 +31,27 @@ app.get('/document-delete', async(req, res) => {
 
 app.get('/document-status-fail', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"scan-failed"}');
+    res.send('{"status":"MALWARE_DETECTED"}');
 });
 
 app.get('/document-status-downloadable', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"downloadable"}');
+    res.send('{"status":"DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
 });
 
 app.get('/document-status-not-downloadable', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"not-downloadable"}');
+    res.send('{"status":"UN_DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
+});
+
+app.get('/document-status-non-existent', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"DELETED","fileName":"testfile.pdf","size":9653413}');
+});
+
+app.get('/document-status-fails', async(req, res) => {
+    res.status(500);
+    res.send('');
 });
 
 app.listen(port, () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.17.0",
+    "version": "5.18.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/component/StatusBadge.scss

@@ -1,9 +1,49 @@
 .neo-status-badge {
+    display: flex;
+    padding: v(status-badge-padding);
+    align-items: v(status-badge-align-items);
+
+    &.neo-state-alert {
+        background-color: v(status-badge-state-alert-background-color);
+        color: v(status-badge-state-alert-text-color);
+    }
+
     &.neo-state-error {
-        background-color: red;
+        background-color: v(status-badge-state-error-background-color);
+        color: v(status-badge-state-error-text-color);
+    }
+
+    &.neo-state-info {
+        background-color: v(status-badge-state-info-background-color);
+        color: v(status-badge-state-info-text-color);
+    }
+
+    &.neo-state-neutral {
+        background-color: v(status-badge-state-neutral-background-color);
+        color: v(status-badge-state-neutral-text-color);
     }
 
     &.neo-state-success {
-        background-color: darkgreen;
+        background-color: v(status-badge-state-success-background-color);
+        color: v(status-badge-state-success-text-color);
+
+    }
+
+    .neo-state-glyph {
+        font-size: v(status-badge-font-size);
+        pointer-events: none; 
     }
-}
+
+    .neo-state-text {
+        flex: 1 1 auto;
+        font-family: v(status-badge-font-family);
+        font-size: v(status-badge-font-size);
+        font-weight: v(status-badge-font-weight);
+        line-height: v(status-badge-line-height);
+        pointer-events: none;
+        text-align:  v(status-badge-align-items);
+        text-transform: v(status-badge-transform);
+    }
+
+
+}

package/resources/scss/theme-dark/component/StatusBadge.scss

@@ -0,0 +1,41 @@
+$neoMap: map-merge($neoMap, (
+    'status-badge-padding'                          : 0px 5px 0px 5px,
+    'status-badge-align-items'                      : center,
+    'status-badge-state-alert-background-color'     : orange,
+    'status-badge-state-alert-text-color'           : black,
+    'status-badge-state-error-background-color'     : red,
+    'status-badge-state-error-text-color'           : white,
+    'status-badge-state-info-background-color'      : lightblue,
+    'status-badge-state-info-text-color'            : black,
+    'status-badge-state-neutral-background-color'   : white,
+    'status-badge-state-neutral-text-color'         : black,
+    'status-badge-state-success-background-color'   : green,
+    'status-badge-state-success-text-color'         : white,
+    'status-badge-font-size'                        : 11px,
+    'status-badge-font-family'                      : #{neo(neo-font-family)},
+    'status-badge-font-weight'                      : 600,
+    'status-badge-line-height'                      : 11px,
+    'status-badge-transform'                        : none
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark {
+        --status-badge-padding                          : #{neo(status-badge-padding)};
+        --status-badge-align-items                      : #{neo(status-badge-align-items)};
+        --status-badge-state-alert-background-color     : #{neo(status-badge-state-alert-background-color)};
+        --status-badge-state-alert-text-color           : #{neo(status-badge-state-alert-text-color)};
+        --status-badge-state-error-background-color     : #{neo(status-badge-state-error-background-color)};
+        --status-badge-state-error-text-color           : #{neo(status-badge-state-error-text-color)};
+        --status-badge-state-info-background-color      : #{neo(status-badge-state-info-background-color)};
+        --status-badge-state-info-text-color            : #{neo(status-badge-state-info-text-color)};
+        --status-badge-state-neutral-background-color   : #{neo(status-badge-state-neutral-background-color)};
+        --status-badge-state-neutral-text-color         : #{neo(status-badge-state-neutral-text-color)};
+        --status-badge-state-success-background-color   : #{neo(status-badge-state-success-background-color)};
+        --status-badge-state-success-text-color         : #{neo(status-badge-state-success-text-color)};
+        --status-badge-font-size                        : #{neo(status-badge-font-size)};
+        --status-badge-font-family                      : #{neo(status-badge-font-family)};
+        --status-badge-font-weight                      : #{neo(status-badge-font-weight)};
+        --status-badge-line-height                      : #{neo(status-badge-line-height)};
+        --status-badge-transform                        : #{neo(status-badge-transform)};
+    }
+}

package/resources/scss/theme-light/component/StatusBadge.scss

@@ -0,0 +1,41 @@
+$neoMap: map-merge($neoMap, (
+    'status-badge-padding'                          : 0px 5px 0px 5px,
+    'status-badge-align-items'                      : center,
+    'status-badge-state-alert-background-color'     : orange,
+    'status-badge-state-alert-text-color'           : black,
+    'status-badge-state-error-background-color'     : red,
+    'status-badge-state-error-text-color'           : white,
+    'status-badge-state-info-background-color'      : lightblue,
+    'status-badge-state-info-text-color'            : black,
+    'status-badge-state-neutral-background-color'   : white,
+    'status-badge-state-neutral-text-color'         : black,
+    'status-badge-state-success-background-color'   : green,
+    'status-badge-state-success-text-color'         : white,
+    'status-badge-font-size'                        : 11px,
+    'status-badge-font-family'                      : #{neo(neo-font-family)},
+    'status-badge-font-weight'                      : 600,
+    'status-badge-line-height'                      : 11px,
+    'status-badge-transform'                        : none
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light {
+        --status-badge-padding                          : #{neo(status-badge-padding)};
+        --status-badge-align-items                      : #{neo(status-badge-align-items)};
+        --status-badge-state-alert-background-color     : #{neo(status-badge-state-alert-background-color)};
+        --status-badge-state-alert-text-color           : #{neo(status-badge-state-alert-text-color)};
+        --status-badge-state-error-background-color     : #{neo(status-badge-state-error-background-color)};
+        --status-badge-state-error-text-color           : #{neo(status-badge-state-error-text-color)};
+        --status-badge-state-info-background-color      : #{neo(status-badge-state-info-background-color)};
+        --status-badge-state-info-text-color            : #{neo(status-badge-state-info-text-color)};
+        --status-badge-state-neutral-background-color   : #{neo(status-badge-state-neutral-background-color)};
+        --status-badge-state-neutral-text-color         : #{neo(status-badge-state-neutral-text-color)};
+        --status-badge-state-success-background-color   : #{neo(status-badge-state-success-background-color)};
+        --status-badge-state-success-text-color         : #{neo(status-badge-state-success-text-color)};
+        --status-badge-font-size                        : #{neo(status-badge-font-size)};
+        --status-badge-font-family                      : #{neo(status-badge-font-family)};
+        --status-badge-font-weight                      : #{neo(status-badge-font-weight)};
+        --status-badge-line-height                      : #{neo(status-badge-line-height)};
+        --status-badge-transform                        : #{neo(status-badge-transform)};
+    }
+}

package/src/DefaultConfig.mjs

@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.17.0'
+     * @default '5.18.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.17.0'
+    version: '5.18.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/StatusBadge.mjs

@@ -1,4 +1,4 @@
-import Base     from '../component/Base.mjs';
+import Base from '../component/Base.mjs';
 import NeoArray from '../util/Array.mjs';
 
 /**
@@ -8,11 +8,11 @@ import NeoArray from '../util/Array.mjs';
 class StatusBadge extends Base {
     /**
      * Valid values for state
-     * @member {String[]} states=['error','neutral','success']
+     * @member {String[]} states=['alert','error','info','neutral','success']
      * @protected
      * @static
      */
-    static states = ['error', 'neutral', 'success']
+    static states = ['alert', 'error', 'info', 'neutral', 'success']
 
     static config = {
         /**
@@ -30,15 +30,297 @@ class StatusBadge extends Base {
          * @protected
          */
         baseCls: ['neo-status-badge'],
+        /**
+        * @member {String[]} currentStateIcon=null
+        */
+        _currentStateIcon: null,
+        /**
+        * @member {String[]} currentSideIcon=null
+        */
+        _currentSideIcon: null,
+        /**
+         * false calls Neo.Main.setRoute()
+         * @member {Boolean} deactivateStateIcons=false
+         */
+        deactivateStateIcons_: false,
+        /**
+         * false calls Neo.Main.setRoute()
+         * @member {Boolean} deactivateSideIcons=false
+         */
+        deactivateSideIcons_: false,
+
+        /**
+        * @member {String} iconAlert='fa-triangle-exclamation'
+        */
+        iconAlert_: 'fa fa-triangle-exclamation',
+        /**
+        * @member {String} iconError='fa-xmark'
+        */
+        iconError_: 'fa fa-xmark',
+        /**
+        * @member {String} iconInfo='fa-info'
+        */
+        iconInfo_: 'fa fa-info',
+        /**
+        * @member {String} iconNeutral='fa-circle'
+        */
+        iconNeutral_: 'fa fa-circle',
+        /**
+        * @member {String} iconSuccess='fa-check'
+        */
+        iconSuccess_: 'fa fa-check',
+
+        /**
+        * @member {String} sideIconAlert='fa fa-registered'
+        */
+        sideIconAlert_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconError='fa fa-registered'
+        */
+        sideIconError_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconInfo='fa fa-registered'
+        */
+        sideIconInfo_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconNeutral='fa fa-registered'
+        */
+        sideIconNeutral_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconSuccess='fa fa-registered'
+        */
+        sideIconSuccess_: 'fa fa-registered',
+
+
+
+        /**
+         * @member {String} labelAlert_='Alert'
+        */
+        labelAlert_: 'Alert',
+        /**
+         * @member {String} labelError_='Error'
+        */
+        labelError_: 'Error',
+        /**
+         * @member {String} labelInfo_='Info'
+        */
+        labelInfo_: 'Info',
+        /**
+         * @member {String} labelNeutral_='Neutral'
+        */
+        labelNeutral_: 'Neutral',
+        /**
+         * @member {String} labelSuccess_='Success'
+        */
+        labelSuccess_: 'Success',
+
+
         /**
          * @member {String} state_='neutral'
          */
         state_: 'neutral',
         /**
-         * @member {Object} vdom
+         * @member {Object} _vdom
          */
-        vdom:
-        {}
+        _vdom:
+        {
+            tag: 'div', type: 'div', cn: [
+                { tag: 'span', cls: ['neo-state-glyph'] },
+                { tag: 'span', cls: ['neo-state-text'] },
+                { tag: 'span', cls: ['neo-state-glyph'] }
+            ]
+        }
+    }
+
+    /**
+    * Triggered after the deactivateStateIcons config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetDeactivateStateIcons(value, oldValue) {
+        this.updateStateIconNode(this._currentStateIcon);
+    }
+
+    /**
+    * Triggered after the deactivateSideIcons config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetDeactivateSideIcons(value, oldValue) {
+        this.updateSideIconNode(this._currentSideIcon);
+    }
+
+    /**
+     * Triggered after the labelAlert config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelAlert(value, oldValue) {
+        if (this.state === 'alert') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+     * Triggered after the iconAlert config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetIconAlert(value, oldValue) {
+        if (this.state === 'alert') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconAlert config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconAlert(value, oldValue) {
+        if (this.state === 'alert') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+    /**
+     * Triggered after the labelError config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelError(value, oldValue) {
+        if (this.state === 'error') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconError config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconError(value, oldValue) {
+        if (this.state === 'error') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconError config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconError(value, oldValue) {
+        if (this.state === 'error') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+
+    /**
+     * Triggered after the labelInfo config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelInfo(value, oldValue) {
+        if (this.state === 'info') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconInfo config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconInfo(value, oldValue) {
+        if (this.state === 'info') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconInfo config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconInfo(value, oldValue) {
+        if (this.state === 'info') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+    /**
+     * Triggered after the labelNeutral config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelNeutral(value, oldValue) {
+        if (this.state === 'neutral') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconNeutral config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconNeutral(value, oldValue) {
+        if (this.state === 'neutral') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconNeutral config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconNeutral(value, oldValue) {
+        if (this.state === 'neutral') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+    /**
+     * Triggered after the labelSuccess config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelSuccess(value, oldValue) {
+        if (this.state === 'success') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconSuccess config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconSuccess(value, oldValue) {
+        if (this.state === 'success') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconSuccess config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconSuccess(value, oldValue) {
+        if (this.state === 'success') {
+            this.updateSideIconNode(value);
+        }
     }
 
     /**
@@ -48,12 +330,58 @@ class StatusBadge extends Base {
      * @protected
      */
     afterSetState(value, oldValue) {
-        let cls = this.cls;
+
+        let cls = this.cls,
+            me = this,
+            isEmpty = !value || value === '',
+            vdomRoot = me.getVdomRoot(),
+            labelNode = vdomRoot.cn[1];
 
         NeoArray.remove(cls, 'neo-state-' + oldValue);
         NeoArray.add(cls, 'neo-state-' + value);
 
         this.cls = cls
+
+        labelNode.removeDom = isEmpty;
+
+        if (!isEmpty) {
+            let showLabel = '';
+            let showStateIcon = '';
+            let showSideIcon = '';
+
+            switch (value) {
+                case 'alert':
+                    showLabel = me.labelAlert;
+                    showStateIcon = me.iconAlert;
+                    showSideIcon = me.sideIconAlert;
+                    break;
+                case 'error':
+                    showLabel = me.labelError;
+                    showStateIcon = me.iconError;
+                    showSideIcon = me.sideIconError;
+                    break;
+                case 'info':
+                    showLabel = me.labelInfo;
+                    showStateIcon = me.iconInfo;
+                    showSideIcon = me.sideIconInfo;
+                    break;
+                case 'neutral':
+                    showLabel = me.labelNeutral;
+                    showStateIcon = me.iconNeutral;
+                    showSideIcon = me.sideIconNeutral;
+                    break;
+                case 'success':
+                    showLabel = me.labelSuccess;
+                    showStateIcon = me.iconSuccess;
+                    showSideIcon = me.sideIconSuccess;
+                    break;
+            }
+            labelNode.innerHTML = showLabel;
+            this.updateStateIconNode(showStateIcon);
+            this.updateSideIconNode(showSideIcon);
+        }
+
+        me.update();
     }
 
     /**
@@ -66,6 +394,105 @@ class StatusBadge extends Base {
     beforeSetState(value, oldValue) {
         return this.beforeSetEnumValue(value, oldValue, 'state')
     }
+
+    /**
+     * Convenience shortcut
+    * @returns {Object}
+    */
+    updateLabelNode(value) {
+        let labelNode = this.getVdomRoot().cn[1];
+
+        labelNode.innerHTML = value;
+        labelNode.removeDom = !Boolean(value);
+
+        this.update();
+    }
+
+    /**
+     * Convenience shortcut
+    * @returns {Object}
+    */
+    updateStateIconNode(value) {
+        let iconNode = this.getStateIconNode();
+        let currentValue = this._currentStateIcon;
+
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean);
+        }
+        if (currentValue && !Array.isArray(currentValue)) {
+            currentValue = value.split(' ').filter(Boolean);
+        }
+
+        NeoArray.remove(iconNode.cls, currentValue);
+        NeoArray.add(iconNode.cls, value);
+
+        iconNode.removeDom = !value || value === '' || this.deactivateStateIcons;
+
+        this._currentStateIcon = value;
+        this.update();
+    }
+
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getStateIconNode() {
+        return this.getVdomRoot().cn[0]
+    }
+
+
+    /**
+     * Triggered after the StateIcon config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetStateIcon(value, oldValue) {
+        this.updateStateIconNode(value, oldValue);
+    }
+
+    /**
+     * Convenience shortcut
+    * @returns {Object}
+    */
+    updateSideIconNode(value) {
+        let iconNode = this.getSideIconNode();
+        let currentValue = this._currentSideIcon;
+
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean);
+        }
+        if (currentValue && !Array.isArray(currentValue)) {
+            currentValue = value.split(' ').filter(Boolean);
+        }
+
+        NeoArray.remove(iconNode.cls, currentValue);
+        NeoArray.add(iconNode.cls, value);
+
+        iconNode.removeDom = !value || value === '' || this.deactivateSideIcons;
+
+        this._currentSideIcon = value;
+        this.update();
+    }
+
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getSideIconNode() {
+        return this.getVdomRoot().cn[2]
+    }
+
+
+    /**
+     * Triggered after the StateIcon config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetSideIcon(value, oldValue) {
+        this.updateSideIconNode(value, oldValue);
+    }
 }
 
 Neo.applyClassConfig(StatusBadge);

package/src/form/field/FileUpload.mjs

@@ -134,7 +134,7 @@ class FileUpload extends Base {
          * An Object containing a default set of headers to be passed to the server on every HTTP request.
          * @member {Object} headers
          */
-        headers : {},
+        headers_ : {},
 
         /**
          * An Object which allows the status text returned from the {@link #property-documentStatusUrl} to be
@@ -217,7 +217,7 @@ class FileUpload extends Base {
          *
          * @member {String} downloadUrl
          */
-        downloadUrl : null,
+        downloadUrl_ : null,
 
         /**
          * The URL of the file status reporting service.
@@ -246,7 +246,7 @@ class FileUpload extends Base {
          *
          * @member {String} documentStatusUrl
          */
-        documentStatusUrl : null,
+        documentStatusUrl_ : null,
 
         /**
          * The polling interval *in milliseconds* to wait between asking the server how the document scan
@@ -279,7 +279,7 @@ class FileUpload extends Base {
          *
          * @member {String} documentDeleteUrl
          */
-        documentDeleteUrl : null,
+        documentDeleteUrl_ : null,
 
         /**
          * @member {String} state_=null
@@ -589,17 +589,12 @@ class FileUpload extends Base {
                         me.state = 'ready';
                         break;
                     default:
-                        const { fileName, size } = serverJson;
-
-                        if (fileName) {
-                            me.vdom.cn[1].cn[0].innerHTML = fileName;
-                            me.fileSize = me.formatSize(size);
-                        }
                         me.state = status;
                 }
             }
             else {
-                me.error = `${documentStatusError}: ${statusResponse.statusText}`;
+                me.error = `${me.documentStatusError}: ${statusResponse.statusText || `Server error ${statusResponse.status}`}`;
+                me.state = 'deleted';
             }
         }
     }
@@ -659,7 +654,7 @@ class FileUpload extends Base {
                 break;
             case 'not-downloadable':
                 status.innerHTML = me.preExistingDocument ?
-                me.fileSize : `${successfullyUploaded} \u2022 ${me.fileSize}`;
+                me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
                 break;
             case 'deleted':
                 status.innerHTML = me.fileWasDeleted;
@@ -694,18 +689,24 @@ class FileUpload extends Base {
     }
 
     beforeGetDocumentStatusUrl(documentStatusUrl) {
+        const me = this;
+
         return typeof documentStatusUrl === 'function'? documentStatusUrl.call(me, me) : me.createUrl(documentStatusUrl, {
             [me.documentIdParameter] : me.documentId
         });
     }
 
     beforeGetDocumentDeleteUrl(documentDeleteUrl) {
+        const me = this;
+
         return typeof documentDeleteUrl === 'function'? documentDeleteUrl.call(me, me) : me.createUrl(documentDeleteUrl, {
             [me.documentIdParameter] : me.documentId
         });
     }
 
     beforeGetDownloadUrl(downloadUrl) {
+        const me = this;
+
         return typeof downloadUrl === 'function'? downloadUrl.call(me, me) : me.createUrl(downloadUrl, {
             [me.documentIdParameter] : me.documentId
         });
@@ -758,7 +759,9 @@ class FileUpload extends Base {
      * @returns {Boolean}
      */
     validate() {
-        const { isValid, cls } = this;
+        const
+            { cls } = this,
+            isValid = this.isValid();
 
         NeoArray.toggle(cls, 'neo-invalid', !isValid);
         this.cls = cls;
@@ -766,13 +769,13 @@ class FileUpload extends Base {
         return isValid;
     }
 
-    get isValid() {
+    isValid() {
         const me = this;
 
-        return !me.error &&
-               ((me.state === 'ready' && !me.required) ||
-               (me.state === 'downloadable') ||
-               (me.state === 'not-downloadable'));
+        return !me.error &&  !(me.state === 'ready' && me.required) ||
+               (    (me.state === 'downloadable') ||
+                    (me.state === 'not-downloadable')
+               );
     }
 }