q2-tecton-elements 1.13.0-alpha.0 → 1.13.2

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
+    }]; }
 }

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

@@ -0,0 +1,346 @@
+import { Component, Prop, h, Element, State, Watch, Listen, Event, 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 => {
+        var _a, _b;
+        if (mutation.type !== 'childList')
+          return;
+        if (!mutation.addedNodes.length && !mutation.removedNodes.length)
+          return;
+        if (((_a = mutation.addedNodes[0]) === null || _a === void 0 ? void 0 : _a.nodeType) !== Node.ELEMENT_NODE &&
+          ((_b = mutation.removedNodes[0]) === null || _b === void 0 ? void 0 : _b.nodeType) !== Node.ELEMENT_NODE)
+          return;
+        this.buildPaneList();
+      });
+    };
+    this.buildPaneList = () => {
+      const { allRootPanes } = this;
+      if (!allRootPanes.length)
+        return;
+      this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {
+        var _a, _b;
+        const children = Array.from((_b = (_a = pane.querySelector('[slot=children]')) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [])
+          .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')
+          .map(this.extractDetails);
+        accum.push(Object.assign(Object.assign({}, this.extractDetails(pane)), { children }));
+        return accum;
+      }, []);
+    };
+    /// Event Handlers ///
+    this.onStepClick = (event, stepId) => {
+      event.stopPropagation();
+      const { currentStepId } = this;
+      if (stepId === currentStepId)
+        return;
+      const selectedStep = this.allPanes.find(pane => pane.id === stepId);
+      this.change.emit({
+        selectedStep,
+        selectedStepId: stepId,
+        currentStepId,
+      });
+    };
+    this.onStepKeyDown = (event, stepId) => {
+      const { key } = event;
+      let selectedStepId;
+      switch (key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'prev');
+          break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'next');
+          break;
+        case 'Home':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          selectedStepId = this.getStepId(stepId, 'last');
+          break;
+      }
+      if (!selectedStepId)
+        return;
+      this.focusStepBtn(selectedStepId, true);
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.setDefaultPane();
+    this.buildPaneList();
+    const observer = new MutationObserver(this.determinePaneChanges);
+    const observerOptions = {
+      childList: true,
+    };
+    observer.observe(this.hostElement, observerOptions);
+    this.allRootPanes.forEach(pane => {
+      const childrenSlot = pane.querySelector('[slot=children]');
+      if (childrenSlot)
+        observer.observe(childrenSlot, observerOptions);
+    });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+    setTimeout(() => this.showStep(this.currentStepId), 0);
+  }
+  componentWillUpdate() {
+    this.expandedStepChildrenList = null;
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+    this.openCurrentStepChildren();
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Getters ///
+  get allRootPanes() {
+    return Array.from(this.hostElement.querySelectorAll(':scope > q2-stepper-pane'));
+  }
+  get allPanes() {
+    return Array.from(this.hostElement.querySelectorAll('q2-stepper-pane'));
+  }
+  /// Helpers ///
+  setDefaultPane() {
+    if (this.currentStepId)
+      return;
+    const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');
+    if (!firstEnabledStep)
+      return;
+    if (!firstEnabledStep.id)
+      firstEnabledStep.id = `step-${createGuid()}`;
+    this.currentStepId = firstEnabledStep.id;
+  }
+  getStepId(currentStepId, goTo) {
+    const allEnabledStepBtns = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));
+    const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('aria-controls') === currentStepId);
+    let nextStepIndex;
+    switch (goTo) {
+      case 'prev':
+        nextStepIndex = Math.max(currentStepIndex - 1, 0);
+        break;
+      case 'next':
+        nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);
+        break;
+      case 'first':
+        nextStepIndex = 0;
+        break;
+      case 'last':
+        nextStepIndex = allEnabledStepBtns.length - 1;
+        break;
+    }
+    return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');
+  }
+  showStep(stepId) {
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(stepId);
+    this.focusStepBtn(stepId);
+  }
+  extractDetails(pane) {
+    const { label, description, status } = pane;
+    if (!pane.id)
+      pane.id = `step-${createGuid()}`;
+    return {
+      id: pane.id,
+      label,
+      description,
+      status,
+    };
+  }
+  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);
+  }
+  openCurrentStepChildren() {
+    const { expandedStepChildrenList } = this;
+    const allSpacers = this.hostElement.shadowRoot.querySelectorAll('.spacer');
+    allSpacers.forEach(spacer => {
+      if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {
+        spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;
+        if (spacer.classList.contains('is-open'))
+          return;
+        spacer.classList.add('is-opening');
+        spacer.addEventListener('transitionend', () => {
+          spacer.classList.remove('is-opening');
+          spacer.classList.add('is-open');
+        }, { once: true });
+      }
+      else {
+        spacer.removeAttribute('style');
+        spacer.classList.remove('is-open', 'is-opening');
+      }
+    });
+  }
+  showStepPane(stepId) {
+    this.allPanes.forEach(pane => {
+      if (pane.isActive || pane.id === stepId) {
+        pane.isActive = stepId === pane.id;
+      }
+    });
+  }
+  focusStepBtn(stepId, forceFocus) {
+    const stepBtn = this.hostElement.shadowRoot.querySelector(`button[aria-controls="${stepId}"]`);
+    const isComponentActive = document.activeElement === this.hostElement;
+    if (!stepBtn)
+      return;
+    if (isComponentActive || forceFocus) {
+      stepBtn.focus();
+    }
+  }
+  /// Listeners ///
+  defaultChangeHandler(event) {
+    const { hostElement } = this;
+    if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {
+      this.currentStepId = event.detail.selectedStepId;
+    }
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.focusStepBtn(this.currentStepId, true);
+  }
+  statusChangeHandler() {
+    this.buildPaneList();
+  }
+  /// Watchers ///
+  currentStepChanged(stepId) {
+    this.showStep(stepId);
+  }
+  /// DOM ///
+  renderStepBtn(pane, index) {
+    const { currentStepId, structuredPanes } = this;
+    const isLastStep = index === structuredPanes.length - 1;
+    const { id, label, description, status } = pane;
+    const stepNumber = index + 1;
+    const isCurrentStep = id === currentStepId;
+    const labelId = label && `label-${id}`;
+    const isLocked = status === 'locked';
+    const stepLabel = label && loc(label);
+    const descriptionId = label && description && `description-${id}`;
+    const btnLabel = !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);
+    let statusIcon;
+    if (status === 'complete')
+      statusIcon = 'success';
+    else if (status === 'error')
+      statusIcon = 'warning';
+    const stepClasses = ['step-btn'];
+    if (status)
+      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))))))));
+  }
+  renderChildStepBtn(pane, index, children, parentLabel) {
+    const { currentStepId } = this;
+    const { id, label, status } = pane;
+    const stepNumber = index + 1;
+    const labelId = label && `label-${id}`;
+    const isCurrentStep = id === currentStepId;
+    const isLocked = status === 'locked';
+    const btnLabel = !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);
+    let statusIcon;
+    if (status === 'error')
+      statusIcon = 'warning';
+    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))))));
+  }
+  render() {
+    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 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
+    }]; }
+}