q2-tecton-elements 1.12.1 → 1.13.1

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Listen, State, Event, Watch } from '@stencil/core';
+import { Component, Prop, Element, h, Listen, State, Event, Watch, } from '@stencil/core';
 import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
 export class Q2Select {
   constructor() {
@@ -18,7 +18,7 @@ export class Q2Select {
     this.scheduledAfterRender = [];
     this.keyStore = {
       queue: [],
-      lastPressedAt: new Date()
+      lastPressedAt: new Date(),
     };
     this.guid = createGuid();
     this.onMutationObserved = () => {
@@ -63,9 +63,7 @@ export class Q2Select {
         return list.find(v => {
           return (!v.element.disabled &&
             v.element.display &&
-            v.element.display
-              .replace(/\s/g, '')
-              .match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
+            v.element.display.replace(/\s/g, '').match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
         });
       };
       const setFocus = ({ element, index }) => {
@@ -95,14 +93,13 @@ export class Q2Select {
         return;
       this.closeDropdown();
     };
+    /* tslint:disable:cyclomatic-complexity */
     this.dropdownKeydownHandler = (event) => {
       event.stopPropagation();
       const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
       const { key, shiftKey } = event;
       if (this.readonly ||
-        (multiSelectHeader &&
-          multiSelectHeader.contains(event.target) &&
-          [' ', 'Enter'].includes(key)))
+        (multiSelectHeader && multiSelectHeader.contains(event.target) && [' ', 'Enter'].includes(key)))
         return;
       switch (key) {
         case ' ':
@@ -284,9 +281,7 @@ export class Q2Select {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   getDefaultActiveIndex() {
     const firstSelected = this.optionElements.findIndex(element => element.selected);
@@ -347,9 +342,7 @@ export class Q2Select {
     const selectedOption = this.optionElements.find(option => {
       return this.value === option.value;
     });
-    return ((selectedOption && selectedOption.display && loc(selectedOption.display)) ||
-      this.value ||
-      '');
+    return (selectedOption && selectedOption.display && loc(selectedOption.display)) || this.value || '';
   }
   get minPopHeight() {
     const { minRows } = this;
@@ -366,9 +359,7 @@ export class Q2Select {
       // when closed they display the same as non searchable select (what is selected)
       return this.searchText || '';
     }
-    return this.multiple
-      ? this.calculateMultiSelectSelectedDisplay()
-      : this.calculateSingleSelectSelectedDisplay();
+    return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();
   }
   get selectedOptionsCount() {
     return this.selectedOptions.length;
@@ -406,7 +397,7 @@ export class Q2Select {
       const isSelected = this.selectedOptions.includes(value);
       if (isSelected) {
         this.change.emit({
-          selectedOptions: this.selectedOptions.filter(selectedValue => selectedValue !== value)
+          selectedOptions: this.selectedOptions.filter(selectedValue => selectedValue !== value),
         });
       }
       else {
@@ -566,14 +557,13 @@ export class Q2Select {
         }
         else {
           const { display = '', innerText = '' } = option;
-          const matched = display.toLowerCase().includes(query) ||
-            innerText.toLowerCase().includes(query);
+          const matched = display.toLowerCase().includes(query) || innerText.toLowerCase().includes(query);
           option.hidden = !matched;
           if (matched)
             matchedCount++;
         }
       });
-      let statusMessageLocString = query
+      const statusMessageLocString = query
         ? 'tecton.element.select.searchable.results'
         : 'tecton.element.select.allOptions';
       const count = query ? matchedCount : options.length;
@@ -594,12 +584,12 @@ export class Q2Select {
   }
   clickHandler(event) {
     const selected = event.target.closest('q2-option');
-    if (!selected ||
-      (selected.hasAttribute('disabled') && selected.getAttribute('disabled') !== 'false')) {
+    if (!selected || (selected.hasAttribute('disabled') && selected.getAttribute('disabled') !== 'false')) {
       return;
     }
     this.selectOption(selected.getAttribute('value'), true);
   }
+  /* tslint:enable:cyclomatic-complexity */
   keydownHandler(event) {
     this.inputKeydownHandler(event);
   }
@@ -610,7 +600,7 @@ export class Q2Select {
           this.errors.length > 0 &&
           this.errors.map(error => loc(error))) ||
           (this.invalid && ['tecton.element.select.invalid']) ||
-          [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
+          [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
       h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick },
         h("slot", { name: "q2-select-display" })),
       this.optionsDropdown()));
@@ -626,9 +616,7 @@ export class Q2Select {
     return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) },
       loc('tecton.element.select.multiHeader.showing'),
       h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')),
-      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [
-          this.selectedOptionsCount
-        ]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
+      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [this.selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }

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

@@ -136,9 +136,9 @@ button {
 .custom-display-content {
   position: absolute;
   bottom: 0;
-  left: calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);
+  left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);
   height: 44px;
-  width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));
+  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));
   overflow: hidden;
   cursor: pointer;
   transition: left var(--tct-tween-2, var(--app-tween-1, 0.2s ease));
@@ -151,11 +151,11 @@ button {
 
 .is-searchable.is-focused .custom-display-content,
 .is-searchable .custom-display-content:active {
-  left: calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px);
+  left: calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px);
 }
 
 .has-error .custom-display-content {
-  width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px));
+  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)));
 }
 
 .dropdown-open .q2-select-dropdown {

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment } from '@stencil/core';
+import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment, } from '@stencil/core';
 import { loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2Stepper {
@@ -17,7 +17,7 @@ export class Q2Stepper {
       const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
       this.listElement.scrollBy({
         left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     };
     this.onStepClick = (event, selectedStep) => {
@@ -29,7 +29,7 @@ export class Q2Stepper {
         selectedStep,
         lastEnabledStep,
         currentStep,
-        stepCount
+        stepCount,
       });
     };
     this.onStepKeyDown = (event, stepNumber) => {
@@ -100,9 +100,7 @@ export class Q2Stepper {
   ////////// HOST EVENTS ////////
   defaultChangeHandler(event) {
     const { hostElement } = this;
-    if (event.target === hostElement &&
-      !hostElement.getAttribute('onchange') &&
-      !!event.detail) {
+    if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {
       this.currentStep = event.detail.selectedStep;
     }
   }
@@ -124,7 +122,7 @@ export class Q2Stepper {
         selectedStep: null,
         lastEnabledStep: stepNumber,
         currentStep,
-        stepCount
+        stepCount,
       });
     }
     this.scheduledAfterRender.push(this.resizeIframe);
@@ -132,8 +130,8 @@ export class Q2Stepper {
     this.focusStep(stepNumber, this.scrollEnabled);
   }
   resizeIframe() {
-    var _a;
-    return (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe();
+    var _a, _b;
+    return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   showStepPane(stepNumber) {
     this.allPanes.forEach((pane, index) => {
@@ -153,7 +151,7 @@ export class Q2Stepper {
       const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     }
   }

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

@@ -171,9 +171,9 @@ li {
 }
 
 hr {
-  width: calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );
-  top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));
-  left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));
+  width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));
+  top: calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));
+  left: calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));
   border: 0;
   border-top: 1px solid var(--comp-bullet-bg);
   height: 0;

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

@@ -1,15 +1,50 @@
-import { Component, Prop, h, Element } from '@stencil/core';
-import { createGuid, loc } from 'src/utils';
+import { Component, Prop, h, Element, Fragment, Event, Watch, Listen, State, } from '@stencil/core';
+import { createGuid, loc, nextPaint } from 'src/utils';
 export class Q2StepperPane {
-  ////////// LIFECYCLE HOOKS ////////
+  constructor() {
+    this.isChildActive = false;
+  }
+  /// LifeCycle Hooks ///
   connectedCallback() {
     if (!this.hostElement.id)
       this.hostElement.id = `step-${createGuid()}`;
   }
+  componentWillLoad() {
+    this.checkForActiveChildren();
+  }
+  /// Watchers and Listeners ///
+  statusChanged(status) {
+    this.statusChange.emit({
+      status,
+      isActive: !!this.isActive,
+      id: this.hostElement.id,
+      host: this.hostElement,
+    });
+  }
+  isActiveChanged(isActive) {
+    this.activeChange.emit({
+      status: this.status || '',
+      isActive,
+      id: this.hostElement.id,
+      host: this.hostElement,
+    });
+  }
+  checkForActiveChildren() {
+    if (!this.showWithChildren)
+      return;
+    nextPaint(() => {
+      setTimeout(() => {
+        this.isChildActive = !!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]");
+      });
+    });
+  }
+  /// DOM ///
   render() {
     const { label, description, isActive } = this;
-    return (h("div", { role: "tabpanel", "aria-label": label && loc(label), "aria-description": description && loc(description), tabindex: "0", hidden: !isActive },
-      h("slot", null)));
+    return (h(Fragment, null,
+      h("div", { role: "tabpanel", "aria-label": label && loc(label), "aria-description": description && loc(description), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) },
+        h("slot", null)),
+      h("slot", { name: "children" })));
   }
   static get is() { return "q2-stepper-pane"; }
   static get encapsulation() { return "shadow"; }
@@ -70,7 +105,100 @@ export class Q2StepperPane {
       },
       "attribute": "is-active",
       "reflect": true
+    },
+    "showWithChildren": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-with-children",
+      "reflect": true
+    },
+    "status": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'complete' | 'error' | 'locked'",
+        "resolved": "\"complete\" | \"error\" | \"locked\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": true
     }
   }; }
+  static get states() { return {
+    "isChildActive": {}
+  }; }
+  static get events() { return [{
+      "method": "statusChange",
+      "name": "statusChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "IStepperPaneEvent",
+        "resolved": "IStepperPaneEvent",
+        "references": {
+          "IStepperPaneEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "activeChange",
+      "name": "activeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "IStepperPaneEvent",
+        "resolved": "IStepperPaneEvent",
+        "references": {
+          "IStepperPaneEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "status",
+      "methodName": "statusChanged"
+    }, {
+      "propName": "isActive",
+      "methodName": "isActiveChanged"
+    }, {
+      "propName": "showWithChildren",
+      "methodName": "checkForActiveChildren"
+    }]; }
+  static get listeners() { return [{
+      "name": "activeChange",
+      "method": "checkForActiveChildren",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }