q2-tecton-elements 1.9.7 → 1.10.2

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

@@ -0,0 +1,283 @@
+import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment } from '@stencil/core';
+import { loc, addSmoothScrollPolyfill } from 'src/utils';
+addSmoothScrollPolyfill();
+export class Q2Stepper {
+  constructor() {
+    this.currentStep = 1;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    this.scheduledAfterRender = [];
+    ////////// EVENT HANDLERS ////////
+    this.onSlotChange = () => {
+      this.checkForPanes();
+      this.checkScrollState();
+    };
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    };
+    this.onStepClick = (event, selectedStep) => {
+      event.stopPropagation();
+      const { currentStep, stepCount, lastEnabledStep } = this;
+      if (selectedStep > lastEnabledStep || selectedStep === currentStep)
+        return;
+      this.change.emit({
+        selectedStep,
+        lastEnabledStep,
+        currentStep,
+        stepCount
+      });
+    };
+    this.onStepKeyDown = (event, stepNumber) => {
+      const { lastEnabledStep, stepCount } = this;
+      const { key } = event;
+      let selectedStep;
+      switch (key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          selectedStep = Math.max(stepNumber - 1, 0);
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          selectedStep = Math.min(stepNumber + 1, stepCount);
+          break;
+        case 'Home':
+          event.preventDefault();
+          selectedStep = 1;
+          break;
+        case 'End':
+          event.preventDefault();
+          selectedStep = lastEnabledStep;
+          break;
+      }
+      if (!selectedStep)
+        return;
+      this.focusStep(selectedStep, true);
+    };
+    this.checkForPanes = () => {
+      const { allPanes } = this;
+      if (!allPanes.length)
+        return;
+      this.stepCount = allPanes.length;
+    };
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
+    };
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    if (!this.lastEnabledStep)
+      this.lastEnabledStep = this.currentStep || 1;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+    this.checkForPanes();
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
+    setTimeout(() => this.showStep(this.currentStep || 1), 0);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  ////////// WATCHER METHODS ////////
+  currentStepChanged(stepNumber) {
+    this.showStep(stepNumber);
+  }
+  ////////// HOST EVENTS ////////
+  defaultChangeHandler(event) {
+    const { hostElement } = this;
+    if (event.target === hostElement &&
+      !hostElement.getAttribute('onchange') &&
+      !!event.detail) {
+      this.currentStep = event.detail.selectedStep;
+    }
+  }
+  ////////// GETTER METHODS ////////
+  get allPanes() {
+    return this.hostElement.querySelectorAll('q2-stepper-pane');
+  }
+  ////////// HELPER METHODS ////////
+  showStep(stepNumber) {
+    if (stepNumber > this.lastEnabledStep) {
+      const { currentStep, stepCount } = this;
+      this.lastEnabledStep = stepNumber;
+      this.change.emit({
+        selectedStep: null,
+        lastEnabledStep: stepNumber,
+        currentStep,
+        stepCount
+      });
+    }
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(stepNumber);
+    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();
+  }
+  showStepPane(stepNumber) {
+    this.allPanes.forEach((pane, index) => {
+      pane.isActive = stepNumber === index + 1;
+    });
+  }
+  focusStep(stepNumber, scrollIntoView) {
+    var _a;
+    const stepListItem = this.listElement.children[stepNumber - 1];
+    const isActive = document.activeElement === this.hostElement;
+    if (!stepListItem)
+      return;
+    if (isActive) {
+      (_a = stepListItem.firstElementChild) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    if (scrollIntoView) {
+      const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
+    }
+  }
+  ////////// RENDER METHODS ////////
+  renderStepBtn(stepIndex) {
+    var _a;
+    const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
+    const { id, label, description } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
+    const stepNumber = stepIndex + 1;
+    const isCurrentStep = stepNumber === currentStep;
+    const labelId = label && `label-${id}`;
+    const descriptionId = label && description && `description-${id}`;
+    const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
+    return (h("li", { role: "presentation" },
+      h("button", { class: "step-btn", type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": stepNumber > lastEnabledStep ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => this.onStepClick(ev, stepNumber) },
+        h("div", { class: "step-bubble" }, stepNumber),
+        label && (h(Fragment, null,
+          h("div", { class: "step-label", id: labelId }, loc(label)),
+          description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))),
+      stepIndex ? h("hr", null) : ''));
+  }
+  render() {
+    const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
+    const containerClasses = ['step-container'];
+    if (scrollEnabled)
+      containerClasses.push('has-scroll');
+    return (h(Fragment, null,
+      h("div", { class: containerClasses.join(' ') },
+        scrollEnabled && (h(Fragment, null,
+          h("div", { class: "gradient-left", hidden: !showScrollLeft }),
+          h("div", { class: "gradient-right", hidden: !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), role: "tablist" }, [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))),
+      h("div", null,
+        h("slot", { onSlotchange: () => this.onSlotChange() }))));
+  }
+  static get is() { return "q2-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "currentStep": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-step",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "stepCount": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "step-count",
+      "reflect": false
+    },
+    "lastEnabledStep": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "last-enabled-step",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "scrollEnabled": {},
+    "showScrollLeft": {},
+    "showScrollRight": {}
+  }; }
+  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": "currentStep",
+      "methodName": "currentStepChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "defaultChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,253 @@
+* {
+    box-sizing: border-box;
+}
+
+*:active {
+    outline: none;
+}
+
+*:focus {
+    outline: none;
+    box-shadow: var(--const-global-focus);
+}
+
+:host {
+    box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+    border: none;
+}
+
+input,
+textarea,
+button {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+.sr,
+.sr button {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+.hidden {
+    display: none;
+}
+
+:host([hidden]) {
+    display: none;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+:host {
+  display: block;
+  position: relative;
+}
+
+ul {
+  --comp-bullet-bg: var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));
+  --comp-bullet-font-color: var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));
+  --comp-bullet-size: var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));
+  --comp-bullet-gap: var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));
+  --comp-bullet-border-offset: var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));
+  --comp-bullet-border: var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));
+  --comp-bullet-font-size: var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));
+  --comp-step-width: var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));
+  --comp-step-gap: var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));
+  --comp-tween: var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));
+  overflow-x: auto;
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  padding: var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));
+  margin: 0;
+  gap: var(--comp-step-gap);
+  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
+  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
+  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
+  scrollbar-width: thin;
+  scrollbar-color: var(--comp-scrollbar-color) transparent;
+}
+ul::-webkit-scrollbar {
+  width: var(--comp-scrollbar-size);
+  height: var(--comp-scrollbar-size);
+  margin: 5px;
+}
+ul::-webkit-scrollbar-thumb {
+  background: var(--comp-scrollbar-color);
+  border-radius: var(--comp-scrollbar-border-radius);
+}
+ul::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: var(--comp-scrollbar-border-radius);
+}
+.has-scroll ul {
+  justify-content: unset;
+}
+
+li {
+  min-height: var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));
+  flex: 0 0 auto;
+  position: relative;
+  width: var(--comp-step-width);
+  text-align: center;
+  max-width: 150px;
+  min-width: 80px;
+}
+
+.step-btn {
+  position: relative;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: calc(100% - 4px);
+  width: 100%;
+  transition: var(--comp-tween);
+  padding: 0;
+  transition-property: box-shadow;
+  outline: none;
+}
+.step-btn[aria-disabled] {
+  cursor: default;
+}
+.step-btn[aria-disabled], .step-btn[aria-disabled] + hr {
+  --comp-bullet-font-color: var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));
+  --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)));
+}
+
+.step-bubble {
+  margin: var(--comp-bullet-gap) auto;
+  background: var(--comp-bullet-bg);
+  color: var(--comp-bullet-font-color);
+  width: var(--comp-bullet-size);
+  height: var(--comp-bullet-size);
+  min-height: var(--comp-bullet-size);
+  font-size: var(--comp-bullet-font-size);
+  transition: var(--comp-tween);
+  transition-property: background, color;
+  border-radius: 50%;
+  position: relative;
+}
+[aria-selected] .step-bubble {
+  font-weight: var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600));
+}
+[aria-selected] .step-bubble:before {
+  content: "";
+  position: absolute;
+  inset: calc(var(--comp-bullet-border-offset) * -1);
+  width: calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));
+  height: calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));
+  border-radius: 50%;
+  border: var(--comp-bullet-border);
+}
+
+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));
+  border: 0;
+  border-top: 1px solid var(--comp-bullet-bg);
+  height: 0;
+  position: absolute;
+  margin: 0;
+  transition: border var(--comp-tween);
+}
+
+.step-container {
+  position: relative;
+}
+
+.step-label {
+  color: var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));
+  font-size: var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));
+  height: 1.5em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[aria-selected] .step-label {
+  font-weight: var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600));
+}
+[aria-describedby] .step-label {
+  -webkit-line-clamp: 1;
+}
+
+.step-description {
+  color: var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+  font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-bottom: 0.2em;
+}
+
+.gradient-left,
+.gradient-right {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 18px;
+}
+
+.gradient-left {
+  background-image: linear-gradient(to right, var(--t-base), var(--t-base-a0));
+  left: 0;
+}
+
+.gradient-right {
+  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base));
+  right: 0;
+}
+
+.btn-left,
+.btn-right {
+  --tct-icon-size: 18px;
+  --tct-btn-icon-hover-bg: transparent;
+  --tct-btn-icon-width: 22px;
+  --tct-icon-stroke-primary: var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));
+  position: absolute;
+  top: calc(50% - 22px);
+  z-index: 2;
+}
+
+.btn-left {
+  left: 0;
+}
+
+.btn-right {
+  right: 0;
+}

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

@@ -0,0 +1,76 @@
+import { Component, Prop, h, Element } from '@stencil/core';
+import { createGuid, loc } from 'src/utils';
+export class Q2StepperPane {
+  ////////// LIFECYCLE HOOKS ////////
+  connectedCallback() {
+    if (!this.hostElement.id)
+      this.hostElement.id = `step-${createGuid()}`;
+  }
+  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)));
+  }
+  static get is() { return "q2-stepper-pane"; }
+  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
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": true
+    },
+    "isActive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-active",
+      "reflect": true
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,70 @@
+* {
+    box-sizing: border-box;
+}
+
+*:active {
+    outline: none;
+}
+
+*:focus {
+    outline: none;
+    box-shadow: var(--const-global-focus);
+}
+
+:host {
+    box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+    border: none;
+}
+
+input,
+textarea,
+button {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+.sr,
+.sr button {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+.hidden {
+    display: none;
+}
+
+:host([hidden]) {
+    display: none;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+:host {
+  display: block;
+  position: relative;
+}

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

@@ -1,15 +1,8 @@
 import { Component, Prop, Element, Event, State, Listen, Watch, h } from '@stencil/core';
-import { createGuid, loc } from 'src/utils';
-import smoothscroll from 'smoothscroll-polyfill';
-// enable scroll animation polyfill only on safari
+import { createGuid, loc, addSmoothScrollPolyfill } from 'src/utils';
+addSmoothScrollPolyfill();
 const userAgent = navigator.userAgent.toLowerCase();
-const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
 const isFirefox = userAgent.includes('firefox');
-if (isSafari) {
-  // smooth scroll is not supported on safari
-  smoothscroll.polyfill();
-  window['__forceSmoothScrollPolyfill__'] = true;
-}
 export class Q2TabContainer {
   constructor() {
     this.noPrint = false;