@nys-cui/cui-section 0.2.17 → 0.2.18

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/section.js",
     "type": "module",
-    "version": "0.2.17",
+    "version": "0.2.18",
     "scripts": {
         "clean": "rm -rf ./dist",
         "build": "npm run clean && cui --dep",

package/src/section.js

@@ -31,8 +31,8 @@ export default class CUI_SECTION extends HTMLElement {
             "hideControls": "bHideControls",
             "collapsed": "bCollapsed",
             "styles": "asStyles",
-            "label": "sTitle"
-
+            "label": "sTitle",
+            "instructions": "oInstructions"
         }
     }
 
@@ -201,9 +201,10 @@ export default class CUI_SECTION extends HTMLElement {
 
         this.state = {
             sTitle: this.state.sTitle || this.getAttribute('sectiontitle') || "SECTION TITLE",
-            bHideControls: this.hasAttribute("hideControls") ? true : false,
-            bCollapsed: (this.getAttribute('collapsed') === "true") ? true : false,
-            asStyles: (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null
+            bHideControls: this.state.bHideControls || this.hasAttribute("hideControls") ? true : false,
+            bCollapsed: this.state.bCollapsed || (this.getAttribute('collapsed') === "true") ? true : false,
+            asStyles: this.state.asStyles || (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null,
+            oInstructions: this.state.oInstructions || null
         }
 
         this.sIconBasePath = this.getAttribute('iconbase') || null;
@@ -290,6 +291,14 @@ export default class CUI_SECTION extends HTMLElement {
             })
         })
 
+        if(this.state.oInstructions && (this.state.oInstructions.text || this.state.oInstructions.html)) {
+            let dSectionInstructions = document.createElement("div");
+            dSectionInstructions.innerHTML = this.state.oInstructions.html || this.state.oInstructions.text;
+            dSectionInstructions.classList.add("section-instructions");
+            dSectionInstructions.setAttribute('slot', 'section-text');
+            this.appendChild(dSectionInstructions);
+        }
+
     }
 
     get messages() {