q2-tecton-elements 1.18.0 → 1.19.0

package/dist/collection/components/q2-stepper-vertical/index.js

@@ -1,8 +1,7 @@
-import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment, } from '@stencil/core';
+import { h, Fragment, } from '@stencil/core';
 import { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';
 export class Q2AdvancedStepper {
   constructor() {
-    this.structuredPanes = [];
     this.scheduledAfterRender = [];
     this.determinePaneChanges = (mutations) => {
       mutations.forEach(mutation => {
@@ -70,6 +69,8 @@ export class Q2AdvancedStepper {
         return;
       this.focusStepBtn(selectedStepId, true);
     };
+    this.currentStepId = undefined;
+    this.structuredPanes = [];
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -239,14 +240,7 @@ export class Q2AdvancedStepper {
       stepClasses.push(`status-${status}`);
     const childIds = pane.children.map(child => child.id);
     const isExpanded = isCurrentStep || childIds.includes(currentStepId);
-    return (h("li", { role: "presentation" },
-      h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, "aria-controls": id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) },
-        statusIcon ? (h("div", { class: "step-icon" },
-          h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)),
-        label && (h("div", null,
-          h("div", { class: "step-label", id: labelId }, stepLabel),
-          description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))),
-      ((isLastStep && !!pane.children.length) || !isLastStep) && (h("div", { class: "spacer" }, !!pane.children.length && (h("ul", { ref: el => isExpanded && (this.expandedStepChildrenList = el), "aria-hidden": `${!isExpanded}` }, pane.children.map((child, index, children) => this.renderChildStepBtn(child, index, children.length, stepLabel))))))));
+    return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, "aria-controls": id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), ((isLastStep && !!pane.children.length) || !isLastStep) && (h("div", { class: "spacer" }, !!pane.children.length && (h("ul", { ref: el => isExpanded && (this.expandedStepChildrenList = el), "aria-hidden": `${!isExpanded}` }, pane.children.map((child, index, children) => this.renderChildStepBtn(child, index, children.length, stepLabel))))))));
   }
   renderChildStepBtn(pane, index, children, parentLabel) {
     const { currentStepId } = this;
@@ -262,86 +256,93 @@ export class Q2AdvancedStepper {
     const stepClasses = ['step-child-btn'];
     if (status)
       stepClasses.push(`status-${status}`);
-    return (h("li", { role: "presentation" },
-      h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-controls": id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) },
-        statusIcon && (h("div", { class: "step-child-icon" },
-          h("q2-icon", { type: statusIcon }))),
-        label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
+    return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-controls": id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
   }
   render() {
-    return (h(Fragment, null,
-      h("ul", { role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))),
-      h("div", null,
-        h("slot", null))));
+    return (h(Fragment, null, h("ul", { role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", null, h("slot", null))));
   }
   static get is() { return "q2-stepper-vertical"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "currentStepId": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "current-step-id",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "structuredPanes": {}
-  }; }
-  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 originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "currentStepId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-step-id",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "structuredPanes": {}
+    };
+  }
+  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": "currentStepId",
-      "methodName": "currentStepChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "defaultChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "statusChange",
-      "method": "statusChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "currentStepId",
+        "methodName": "currentStepChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "defaultChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "statusChange",
+        "method": "statusChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-stepper-vertical/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 {

package/dist/collection/components/q2-tab-container/index.js

@@ -1,17 +1,11 @@
-import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment, } from '@stencil/core';
+import { h, Fragment, } from '@stencil/core';
 import { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2TabContainer {
   constructor() {
-    this.noPrint = false;
     this.guid = createGuid();
     this.scheduledAfterRender = [];
     this.lastScrolled = new Date(null).getTime();
-    this.hasLeft = false;
-    this.hasRight = false;
-    this.scrollEnabled = false;
-    this.showScrollLeft = false;
-    this.showScrollRight = false;
     ///////// Actions /////////
     this.updateTabData = () => {
       this.updateTabPaneProps();
@@ -118,6 +112,17 @@ export class Q2TabContainer {
     this.onSlotChange = () => {
       this.checkScrollState();
     };
+    this.value = undefined;
+    this.type = undefined;
+    this.name = undefined;
+    this.color = undefined;
+    this.noPrint = false;
+    this.hasLeft = false;
+    this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    this.tabs = undefined;
   }
   resizeIframe() {
     var _a, _b;
@@ -201,196 +206,196 @@ export class Q2TabContainer {
   }
   ///////// View Methods /////////
   render() {
-    return (h(Fragment, null,
-      h("div", { class: "tab-container" },
-        this.scrollEnabled && (h(Fragment, null,
-          h("div", { class: "gradient-left", hidden: !this.showScrollLeft }),
-          h("div", { class: "gradient-right", hidden: !this.showScrollRight }),
-          h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') },
-            h("q2-icon", { type: "chevron-left" })),
-          h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') },
-            h("q2-icon", { type: "chevron-right" })))),
-        h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))),
-      h("div", { class: "tab-content" },
-        h("slot", { onSlotchange: () => this.onSlotChange() }))));
+    return (h(Fragment, null, h("div", { class: "tab-container" }, this.scrollEnabled && (h(Fragment, null, h("div", { class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { type: "chevron-left" })), h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { type: "chevron-right" })))), h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.onSlotChange() }))));
   }
   generateTab(tab, index) {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
-    return (h("li", { role: "presentation" },
-      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
+    return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
   }
   generateTabWithBadge(tab, isSelected) {
-    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` },
-      tab.label,
-      h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
+    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
   }
   static get is() { return "q2-tab-container"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": true
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "color",
-      "reflect": true
-    },
-    "noPrint": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true
       },
-      "attribute": "no-print",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasLeft": {},
-    "hasRight": {},
-    "scrollEnabled": {},
-    "showScrollLeft": {},
-    "showScrollRight": {},
-    "tabs": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "settled",
-      "name": "settled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "noPrint": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-print",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "hasLeft": {},
+      "hasRight": {},
+      "scrollEnabled": {},
+      "showScrollLeft": {},
+      "showScrollRight": {},
+      "tabs": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "settled",
+        "name": "settled",
+        "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": "value",
-      "methodName": "valueObserver"
-    }, {
-      "propName": "name",
-      "methodName": "nameObserver"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "defaultChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "onResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "focus",
-      "method": "onFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "badge",
-      "method": "onBadge",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueObserver"
+      }, {
+        "propName": "name",
+        "methodName": "nameObserver"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "defaultChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "onResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focus",
+        "method": "onFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "badge",
+        "method": "onBadge",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-tab-container/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 {