@nys-cui/cui-section 0.2.12 → 0.2.14

package/package.json

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

package/src/section.js

@@ -25,6 +25,14 @@ export default class CUI_SECTION extends HTMLElement {
         this.sdContentsContainer = null;
 
         this.bLock = false;
+
+        this.oPropsToStateNames = {
+            "sectiontitle": "sTitle",
+            "hideControls": "bHideControls",
+            "collapsed": "bCollapsed",
+            "styles": "asStyles"
+
+        }
     }
 
     get style() {
@@ -43,7 +51,7 @@ export default class CUI_SECTION extends HTMLElement {
                 sTemplate += `
                     <div class="header-controls" part="header-controls">
                         <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
-                            <cui-icon src="caret-down" base="${this.sIconBasePath}" part="collapse-control-icon"></cui-icon>
+                            <cui-icon src="caret-down" basePath="${this.sIconBasePath}" part="collapse-control-icon"></cui-icon>
                         </button>
                     </div>`;
 
@@ -70,6 +78,27 @@ export default class CUI_SECTION extends HTMLElement {
         return sTemplate;
     }
 
+    setState(props) {
+        // Need to map props to state variable names if we want to keep them prefixed. 
+        this.state = Object.assign(this.state, this.normalizeProps(props));
+
+        if (this.isConnected) {
+            this.render();
+        }
+    }
+
+    normalizeProps(props) {
+        let updatedProps = {};
+
+        for (const [key, value] of Object.entries(props)) {
+            if (this.oPropsToStateNames[key]) {
+                updatedProps[this.oPropsToStateNames[key]] = value;
+            }
+        }
+
+        return updatedProps;
+    }
+
     expand(dContainer) {
 
         function transitionEnd() {
@@ -98,7 +127,7 @@ export default class CUI_SECTION extends HTMLElement {
         dContainer.style.overflow = "hidden";
 
         this.sdSection.style.removeProperty('height');
-  
+
         // when the next css transition finishes (which should be the one we just triggered)
         dContainer.addEventListener('transitionend', transitionEnd, true);
 
@@ -137,7 +166,7 @@ export default class CUI_SECTION extends HTMLElement {
         let sectionStyle = getComputedStyle(sdSection);
         let collapseSectionHeight = header.offsetHeight + parseInt(headerStyle.marginBottom) + parseInt(headerStyle.marginTop);
         collapseSectionHeight += parseInt(sectionStyle.borderBottom) + parseInt(sectionStyle.borderTop);
-        
+
         // on the next frame (as soon as the previous style change has taken effect),
         // explicitly set the dContainer's height to its current pixel height, so we 
         // aren't transitioning out of 'auto'
@@ -147,7 +176,7 @@ export default class CUI_SECTION extends HTMLElement {
             dContainer.style.overflow = "hidden";
 
             sdSection.style.setProperty("height", sdSection.offsetHeight + 'px', "important");
-            
+
             // on the next frame (as soon as the previous style change has taken effect),
             // have the dContainer transition to height: 0
             requestAnimationFrame(function () {