@nys-cui/cui-section 0.2.6 → 0.2.8

package/package.json

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

package/src/section.js

@@ -6,7 +6,7 @@ export default class CUI_SECTION extends HTMLElement {
 
         super();
 
-        this.attachShadow({mode: 'open'});
+        this.attachShadow({ mode: 'open' });
 
         this.state = {
             sTitle: null
@@ -96,17 +96,19 @@ export default class CUI_SECTION extends HTMLElement {
         // have the dContainer transition to the height of its inner content
         dContainer.style.height = sectionHeight + 'px';
         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);
-      
+
 
     }
 
     collapse(dContainer) {
 
         function transitionEnd(e) {
-            
+
             dContainer.style.height = "";
             dContainer.style.overflow = null;
 
@@ -121,31 +123,44 @@ export default class CUI_SECTION extends HTMLElement {
 
         // get the height of the dContainer's inner content, regardless of its actual size
         var sectionHeight = dContainer.scrollHeight;
-        
+
         // temporarily disable all css transitions
         var dContainerTransition = dContainer.style.transition;
         dContainer.style.transition = '';
+
+        let sdSection = this.sdSection;
+
+        //sdSection.style.transition = '';
+        let header = sdSection.querySelector("header");
+        let headerStyle = getComputedStyle(header);
+        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'
-        requestAnimationFrame(function() {
+        requestAnimationFrame(function () {
             dContainer.style.height = sectionHeight + 'px';
             dContainer.style.transition = dContainerTransition;
             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() {
+            requestAnimationFrame(function () {
 
                 dContainer.style.height = 0 + 'px';
 
+                sdSection.style.setProperty("height", collapseSectionHeight + 'px', "important");
+
                 dContainer.addEventListener('transitionend', transitionEnd, true);
 
             });
 
         });
-        
+
 
     }
 
@@ -161,7 +176,7 @@ export default class CUI_SECTION extends HTMLElement {
         this.sIconBasePath = this.getAttribute('iconbase') || null;
 
         let dMessageList = this.querySelector(`[slot="section-messages"]`);
-        if(dMessageList) {
+        if (dMessageList) {
             this._cMessageList = dMessageList;
         }
 
@@ -178,7 +193,7 @@ export default class CUI_SECTION extends HTMLElement {
 
         this.sdSectionTitle.appendChild(document.createTextNode(this.state.sTitle));
 
-       if (!this.state.bHideControls) {
+        if (!this.state.bHideControls) {
 
             this.sdSectionCollapseControl = this.shadowRoot.querySelector(`#collapse-control`);
 
@@ -190,28 +205,29 @@ export default class CUI_SECTION extends HTMLElement {
 
                     this.sdSectionCollapseControl.classList.add('collapsed');
                     this.sdContentsContainer.setAttribute('data-collapsed', "true");
+                    this.sdSection.style.setProperty("height", 'auto', "important");
                 }
 
                 this.sdSectionCollapseControl.addEventListener('click', () => {
-        
+
                     if (!this.bLock) {
-        
+
                         if (this.sdContentsContainer.getAttribute('data-collapsed') === "true") {
-        
+
                             this.sdSectionCollapseControl.classList.remove('collapsed');
-            
+
                             this.expand(this.sdContentsContainer);
                         }
                         else {
-        
+
                             this.sdSectionCollapseControl.classList.add('collapsed');
-            
+
                             this.collapse(this.sdContentsContainer);
                         }
-        
+
                         this.bLock = false;
                     }
-        
+
                 });
             }
 
@@ -221,7 +237,7 @@ export default class CUI_SECTION extends HTMLElement {
 
             for (let sStyle of this.state.asStyles) {
 
-                switch(sStyle.toLowerCase()) {
+                switch (sStyle.toLowerCase()) {
 
                     case "subsection":
 
@@ -243,10 +259,8 @@ export default class CUI_SECTION extends HTMLElement {
 
     }
 
-    get messages()
-    {
-        if(!this._cMessageList)
-        {
+    get messages() {
+        if (!this._cMessageList) {
             this._cMessageList = document.createElement('cui-message-list');
             this._cMessageList.slot = "section-messages";
             this.appendChild(this._cMessageList);
@@ -255,12 +269,30 @@ export default class CUI_SECTION extends HTMLElement {
         return this._cMessageList;
     }
 
-    reset()
-    {
-        if(this._cMessageList)
-        {
+    reset() {
+        if (this._cMessageList) {
             this._cMessageList.reset();
         }
     }
 
+    setMessages(aoMessages) {
+        for (let i = 0; i < aoMessages.length; i++) {
+            if (this.messages) {
+                this.messages.add(aoMessages[i]);
+            }
+        }
+    }
+
+    removeMessages() {
+        this.messages.removeAll();
+    }
+
+    removeMessage(id) {
+        this.messages.removeMessageWithId(id);
+    }
+
+    removeMessageIndex(index) {
+        this.messages.removeMessageAtIndex(index);
+    }
+
 }

package/src/section.scss

@@ -89,6 +89,7 @@
     section {
         border: 1px solid var(--section-header-border-color);
         box-shadow: none;
+        transition: height 0.5s ease;
 
         header {
             margin: 0 0 20px;