@nys-cui/cui-section 0.2.2 → 0.2.4

package/package.json

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

package/src/section.js

@@ -31,17 +31,17 @@ export default class CUI_SECTION extends HTMLElement {
 
     get template() {
 
-        let sTemplate = `<section><header>
-            <h2 id="section-title"></h2>`;
+        let sTemplate = `<section part="root-section"><header part="section-header">
+            <h2 id="section-title" part="section-title"></h2>`;
 
         if (!this.state.bHideControls) {
 
             if (this.sIconBasePath) {
 
                 sTemplate += `
-                    <div class="header-controls">
-                        <button type="button" id="collapse-control" aria-controls="container">
-                            <cui-icon src="caret-down" base="${this.sIconBasePath}"></cui-icon>
+                    <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>
                         </button>
                     </div>`;
 
@@ -49,16 +49,16 @@ export default class CUI_SECTION extends HTMLElement {
             else {
 
                 sTemplate += `
-                    <div class="header-controls">
-                        <button type="button" id="collapse-control" aria-controls="container">
-                            <cui-icon src="caret-down"></cui-icon>
+                    <div class="header-controls" part="header-controls">
+                        <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
+                            <cui-icon src="caret-down" part="collapse-control-icon"></cui-icon>
                         </button>
                     </div>`;
             }
 
         }
 
-        sTemplate += `</header><div class="container" id="container">
+        sTemplate += `</header><div class="container" id="container" part="container">
                 <slot name="section-text"></slot>
                 <slot name="section-contents"></slot>
                 <slot name="section-footer"></slot>
@@ -73,6 +73,7 @@ export default class CUI_SECTION extends HTMLElement {
 
             // remove "height" from the dContainer's inline styles, so it can return to its initial value
             dContainer.style.height = "";
+            dContainer.style.overflow = null;
 
             // mark the section as "currently not collapsed"
             dContainer.setAttribute('data-collapsed', 'false');
@@ -91,6 +92,7 @@ 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);
@@ -103,6 +105,7 @@ export default class CUI_SECTION extends HTMLElement {
         function transitionEnd(e) {
             
             dContainer.style.height = "";
+            dContainer.style.overflow = null;
 
             // mark the section as "currently collapsed"
             dContainer.setAttribute('data-collapsed', 'true');
@@ -126,7 +129,7 @@ export default class CUI_SECTION extends HTMLElement {
         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
@@ -147,7 +150,7 @@ export default class CUI_SECTION extends HTMLElement {
 
         this.state = {
             sTitle: this.getAttribute('sectiontitle') || "SECTION TITLE",
-            bHideControls: (this.getAttribute("hideControls") === "true") ? true : false,
+            bHideControls: this.hasAttribute("hideControls") ? true : false,
             bCollapsed: (this.getAttribute('collapsed') === "true") ? true : false,
             asStyles: (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null
         }

package/src/section.scss

@@ -64,15 +64,21 @@
         }
 
         .container {
+            box-sizing:content-box;
             //margin: 0 0.75em 20px;
             //margin: 0 0.75em;
-            transition: height 0.5s ease;
-            overflow: hidden;
+            transition: height 0.5s ease;            
 
             &[data-collapsed="true"] {
                 height: 0;
+                overflow: hidden;
             }
 
+            // Prevent margin collapse of section contents when collapsing/expanding.
+            &::before, &::after{
+                content: ' ';
+                display: table;
+            }
             
         }
     }