Merge V3 back to master (#730)

* Redo package updates - add npmrc to force node engine check

* try later chart.js

* add optional class option to ui items (#708)

* fix unexpected line break of widget size input popup (#705)

* add optional class option to ui items

* cleanup

* Apply remaining changes for supporting "Class" field (#722)

* add optional class option to ui items

* Apply changes requested to Class feature PR...
-- update readme
-- set placeholder to indicate class is optional
-- updated built in help of all nodes

* update changelog and contributors

* bump version

* Merge branch 'ddresch-master' into v3

Fix merge manually
to close  #717

* Update dashboard.appcache

* slightly better positioning for 1x1 colour picker

to close #724

* Fix form to return false for switch and checkbox on reset

to close #725

* Fix form widget not accepting preset time

to close #711

* catch button parse error (and switch)

to close #726

* re-re-fix dropdown output types.. again

to close #723

* bump version for beta release

* tidy up before release

also address #583

* Ready for release v3

Co-authored-by: Stephen McLaughlin <[email protected]>

Author: dceejay

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

CHANGELOG.md

@@ -1,17 +1,18 @@
 
-### 2.30.0: Milestone Release
+### 3.0.4: Major Release
 
 **Enhancements**
 
- - Add site option to allow swipe to open/close side menu, instead of moving tabs.
+ - Set minimum requirement to be Node12 (in line with core)
+ - Bump libraries to latest including socketIO - this also drops node 8 support, Node10 is also EOL
+ - Add optional CSS Class field to core widgets
 
-**Fixes**
+ **Fixes**
 
- - Fix dropdown to allow use of id property if selecting an object. Issue #707
- - Activate deploy button on any change to site options (even a non-change)
- - Fix spacer node to be on tab so can be exported as part of the tab (needs Node-RED v2)
- - Try to handle disabled groups and tabs more cleanly.
- - Disable mouse for swipe actions - only use touch events.
+  - Fix dropdown string types (again)
+  - Fix button and switch invalid buffer to not crash NR
+  - Fix form to correctly send false on reset of checkbox and switch
+  - Better position for 1x1 colour picker
 
 ### 2.29.3: Maintenance Release
 
@@ -22,7 +23,7 @@
  - Adjust CSS for better alignment of icons in ui-list
  - Fix color-picker z layer to be behind dropdown if necessary
 
- ### 2.29.1: Maintenance Release
+### 2.29.1: Maintenance Release
 
 **Fixes**
 

README.md

@@ -144,8 +144,26 @@ Each node may parse the `msg.payload` to make it suitable for display. This conv
 
 Any widget can be disabled by passing in a `msg.enabled` property set to `false;`. *Note:* this doesn't stop the widget receiving messages but does stop inputs being active and does re-style the widget.
 
+Most widgets and the ui **group** can have a CSS class or multiple CSS class names. This permits the user to override styles one or more widgets and their inner contents. e.g to colourise a warning toast, add the CSS class `notification-warn` to the **notification** widget and add a **ui-template** (set to "Add to site head section")...
+```html
+<style>
+  md-toast.notification-warn {
+    border-width: 10px;
+    border-color: darkorange;
+  }
+  md-toast.notification-warn > h3 {
+    background-color: orange;
+  }
+  md-toast.notification-warn > div {
+    background: rgba(245, 173, 66, 0.5);
+    color: darkorange;
+  }
+</style>  
+```
+Additionally, any widget that has a Class field can be dynamically updated by passing in a `msg.className` string property set to one or more class names.
+
 Most ui widgets can also be configured by using a `msg.ui_control` message - see **[config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)**
-for futher details.
+for further details.
 
   - **Audio out** - a widget that will let you play audio (wav or mp3) or send Text to Speech (TTS) to the client.
   - **Button** - the icon can be set using either Material or fa-icons - the colour and background colour may also be set. If the widget is sized to 1 wide the icon has precedence.

angular-chart.js-1.1.1-patched.tgz

@@ -14,6 +14,7 @@ node to set msg.ui_control to JSON `{ "min":10, "max":50 }`
 |                       |icon               |string     | on refresh
 |                       |format             |string     | not needed
 |                       |tooltip            |string     | on refresh
+|                       |className          |string     | (Note 4)
 |ui_chart               |look               |string     |"line","bar","horizontalBar","pie","polar-area","radar"
 |                       |legend             |boolean    | 
 |                       |interpolate        |string     |"linear","step","bezier"
@@ -28,38 +29,48 @@ node to set msg.ui_control to JSON `{ "min":10, "max":50 }`
 |                       |spanGaps           |boolean    | n/a
 |                       |animation          |string     | (Note 1), {duration:1000, easing:"easeInOutSine"}
 |                       |options            |object     | (Note 2), {scales: {yAxes: [{ticks: {fontSize: 20}}]}}
+|                       |className          |string     | (Note 4)
 |ui_colour_picker       |format             |string     | on refresh
 |                       |showPicker         |boolean    | on refresh
 |                       |showSwatch         |boolean    | on refresh
 |                       |showValue          |boolean    | on refresh
 |                       |showAlpha          |boolean    | on refresh
 |                       |showLightness      |boolean    | on refresh
+|                       |className          |string     | (Note 4)
 |ui_dropdown            |place              |string     |"placeholder text"
 |                       |options            |array      |[{"label":"foo","value":"0","type":"str"}]
+|                       |className          |string     | (Note 4)
 |ui_gauge               |gtype              |string     |"gage", "donut", "compass", "wave"
 |                       |min                |number     | 
 |                       |seg1               |number     |segment 1 limit
 |                       |seg2               |number     |segment 2 limit
 |                       |max                |number     | 
 |                       |colors             |array      |["blue","#00ff00","#f00"]
 |                       |options            |object     |(see Note 3 below)
+|                       |className          |string     | (Note 4)
 |ui_numeric             |min                |number     | 
 |                       |max                |number     | 
 |                       |step               |number     | 
 |                       |format             |string     |"{{value}}"
+|                       |className          |string     | (Note 4)
 |ui_slider              |min                |number     | 
 |                       |max                |number     | 
 |                       |step               |number     | 
+|                       |className          |string     | (Note 4)
 |ui_switch              |onicon             |string     | all or nothing
 |                       |officon            |string     | all or nothing
 |                       |oncolor            |string     | all or nothing
 |                       |offcolor           |string     | all or nothing
+|                       |className          |string     | (Note 4)
 |ui_template            |format             |string     | the script
 |                       |templateScope      |string     | "local" or "global"
+|                       |className          |string     | (Note 4)
 |ui_text                |format             |string     |"{{value}}"
 |                       |layout             |string     | "row-left", "row-right", etc
+|                       |className          |string     | (Note 4)
 |ui_text_input          |mode               |string     | "text", "email", "password", "color"
 |                       |delay              |number     | 
+|                       |className          |string     | (Note 4)
 
 **Notes**:
 
@@ -72,6 +83,9 @@ node to set msg.ui_control to JSON `{ "min":10, "max":50 }`
          {"options":{"pointer":false,"gaugeWidthScale":1.5}}
          {"options":{"pointer":true,"gaugeWidthScale":0.4,"reverse":true}}
 
+4. when a className is specified, it is added to the parent element. E.g for a button, the class is added to the `md-card`
+    This permits overriding of styles in all sub elements e.g. `md-card.my-button button { color: red }`
+
 Likewise the Wave type gauge can accept [liquidfillgauge config](http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) options for example:
 
         {options:{circleColor:"#FF7777", textColor:"#FF4444", waveTextColor:"#FFAAAA", waveColor:"#FFDDDD", circleThickness:0.3, textVertPosition:0.2, waveHeight:0.05, waveCount:8}}

config-fields.md

@@ -32305,6 +32305,10 @@ reason: https://github.com/angular/material/issues/6214
   border-width: 0px;
 }
 
+.color-picker-wrapper .color-picker-input-wrapper {
+  display: flex;
+}
+
 color-picker {
   z-index: 2;
 }

dist/css/app.min.css

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Time: Tue Aug 03 2021 17:48:58 GMT+0100 (British Summer Time)
+# Time: Thu Sep 16 2021 11:45:54 GMT+0100 (British Summer Time)
 
 CACHE:
 i18n.js
@@ -26,4 +26,4 @@ loading.html
 NETWORK:
 *
 
-# hash: 936560a0d1d1485a62afc5652a5003895f7563032b45441ca5b3ebbcf9e3dc7a
+# hash: f1b244f0828b19c2a33e49b084fec0db1cb548db24b36db833e840bec675d173

dist/dashboard.appcache

@@ -16,7 +16,9 @@
       "whenClicked": "Sende beim Klicken:",
       "payload": "Payload",
       "topic": "Topic",
-      "emulateClick": "Emuliere einen Klick bei einer eingehenden Nachricht:"
+      "emulateClick": "Emuliere einen Klick bei einer eingehenden Nachricht:",
+      "className": "Klasse",
+      "classNamePlaceholder": "Optionale(r) CSS-Klassenname(n) für das Widget"
     }
   }
 }

dist/js/app.min.js

@@ -21,4 +21,5 @@
     Dazu muss der Name der Eigenschaft in das Feld eingetragen werden, zum Beispiel <code>{{msg.topic}}</code>.</p>
   <p>Der Node-Ausgang enthält ein Array des Diagrammstatus, das bei Bedarf gespeichert werden kann.
     Wird dieses zum <code>ui_chart</code>-Node gesendet, so werden die gespeicherten Daten erneut angezeigt.</p>
+  <p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
 </script>