@nys-cui/cui-section 0.2.5 → 0.2.7

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/section.js",
     "type": "module",
-    "version": "0.2.5",
+    "version": "0.2.7",
     "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,17 @@ 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";
-  
+
         // 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,22 +121,22 @@ 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 = '';
-        
+
         // 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";
-            
+
             // 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';
 
@@ -145,7 +145,7 @@ export default class CUI_SECTION extends HTMLElement {
             });
 
         });
-        
+
 
     }
 
@@ -160,6 +160,11 @@ export default class CUI_SECTION extends HTMLElement {
 
         this.sIconBasePath = this.getAttribute('iconbase') || null;
 
+        let dMessageList = this.querySelector(`[slot="section-messages"]`);
+        if (dMessageList) {
+            this._cMessageList = dMessageList;
+        }
+
         this.render();
     }
 
@@ -173,7 +178,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`);
 
@@ -188,25 +193,25 @@ export default class CUI_SECTION extends HTMLElement {
                 }
 
                 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;
                     }
-        
+
                 });
             }
 
@@ -216,7 +221,7 @@ export default class CUI_SECTION extends HTMLElement {
 
             for (let sStyle of this.state.asStyles) {
 
-                switch(sStyle.toLowerCase()) {
+                switch (sStyle.toLowerCase()) {
 
                     case "subsection":
 
@@ -238,16 +243,40 @@ 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 = "messages";
+            this._cMessageList.slot = "section-messages";
             this.appendChild(this._cMessageList);
         }
 
         return 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);
+    }
+
 }