q2-tecton-elements 1.18.0 → 1.19.1

package/dist/collection/components/q2-section/index.js

@@ -1,8 +1,7 @@
-import { Component, Prop, Element, Listen, State, Watch, h, Event, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';
 export class Q2Section {
   constructor() {
-    this.hasYieldedHeader = false;
     this.titleId = 'title';
     this.contentId = 'content';
     /// Event Handlers ///
@@ -12,7 +11,12 @@ export class Q2Section {
       });
     };
     this.onTransitionEnd = () => {
-      this.contentHeight = this.currentHeight;
+      if (this.expanded) {
+        this.contentHeight = undefined;
+      }
+      else {
+        this.hideContent = true;
+      }
       setTimeout(() => {
         // This gives enough time for all values to get passed over
         // Previously, the interval was never cleared and the fn was called indefinitely then filtered
@@ -65,9 +69,19 @@ export class Q2Section {
       }
       this.contentSlotMutationObserver.disconnect();
     };
+    this.label = undefined;
+    this.collapsible = undefined;
+    this.noCollapseIcon = undefined;
+    this.expanded = undefined;
+    this.contentHeight = undefined;
+    this.hideContent = false;
+    this.hasYieldedHeader = false;
   }
   componentWillLoad() {
     this.onHeaderSlotChange();
+    const { collapsible, expanded } = this;
+    this.contentHeight = collapsible && expanded ? undefined : '0px';
+    this.hideContent = !expanded;
   }
   componentDidLoad() {
     this.addHeaderSlotListener();
@@ -94,15 +108,24 @@ export class Q2Section {
     this.clearResizeInterval();
     this.resizerFn = setInterval(resizeIframe, 5);
     if (expanded) {
-      this.contentHeight = this.currentHeight;
+      this.expandSection();
     }
     else {
-      this.contentHeight = this.contentContainerHeight;
-      await nextPaint(() => {
-        this.contentHeight = this.currentHeight;
-      });
+      this.collapseSection();
     }
   }
+  async collapseSection() {
+    this.contentHeight = this.contentContainerHeight;
+    await nextPaint(() => {
+      this.contentHeight = this.currentHeight;
+    });
+  }
+  async expandSection() {
+    this.hideContent = false;
+    await nextPaint(() => {
+      this.contentHeight = this.currentHeight;
+    });
+  }
   collapsibleObserver() {
     this.contentHeight = this.currentHeight;
   }
@@ -124,135 +147,150 @@ export class Q2Section {
   }
   render() {
     const hasHeader = this.label || this.hasYieldedHeader;
-    return (h("section", { class: "wrapper" },
-      h("header", { class: hasHeader ? 'has-header' : '' },
-        h("div", { class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick },
-          !this.hasYieldedHeader && !!this.label ? h("h2", { class: "title" }, loc(this.label)) : '',
-          h("div", { ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" },
-            h("slot", { ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))),
-        this.collapsible && !this.noCollapseIcon && (h("q2-btn", { label: this.label, ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
-          h("q2-icon", { type: "chevron-up" })))),
-      h("div", { class: "content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && { height: this.contentHeight } },
-        h("div", { ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" },
-          h("slot", { ref: (el) => (this.contentSlot = el) })))));
+    const wrapperClasses = ['content-wrapper'];
+    const { collapsible, hideContent, contentHeight } = this;
+    if (collapsible) {
+      if (hideContent)
+        wrapperClasses.push('is-closed');
+      else if (contentHeight)
+        wrapperClasses.push('is-transitioning');
+    }
+    return (h("section", { class: "wrapper" }, h("header", { class: hasHeader ? 'has-header' : '' }, h("div", { class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, !this.hasYieldedHeader && !!this.label ? h("h2", { class: "title" }, loc(this.label)) : '', h("div", { ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { label: this.label, ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { type: "chevron-up" })))), h("div", { class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        height: this.contentHeight,
+      } }, h("div", { ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { ref: (el) => (this.contentSlot = el) })))));
   }
   static get is() { return "q2-section"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "collapsible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "collapsible",
-      "reflect": true
-    },
-    "noCollapseIcon": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "no-collapse-icon",
-      "reflect": true
-    },
-    "expanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "collapsible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "collapsible",
+        "reflect": true
       },
-      "attribute": "expanded",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "contentHeight": {},
-    "hasYieldedHeader": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "noCollapseIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-collapse-icon",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expanded",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "contentHeight": {},
+      "hideContent": {},
+      "hasYieldedHeader": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "expanded",
-      "methodName": "expandedObserver"
-    }, {
-      "propName": "collapsible",
-      "methodName": "collapsibleObserver"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "defaultChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "expanded",
+        "methodName": "expandedObserver"
+      }, {
+        "propName": "collapsible",
+        "methodName": "collapsibleObserver"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "defaultChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-section/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {
@@ -129,13 +129,15 @@ q2-icon {
 .content-wrapper {
   height: auto;
 }
-:host([collapsible]) .content-wrapper {
-  transition: height var(--comp-tween);
+.content-wrapper.is-closed {
+  display: none;
   overflow: hidden;
 }
-:host([collapsible]) :host(:not([expanded])) .content-wrapper {
-  height: 0;
-  padding-top: 0;
+.content-wrapper.is-transitioning {
+  overflow: hidden;
+}
+:host([collapsible]) .content-wrapper {
+  transition: height var(--comp-tween);
 }
 
 .content {