q2-tecton-elements 1.9.5 → 1.10.0

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;

package/dist/collection/utils/index.js

@@ -1,8 +1,26 @@
 import { h } from '@stencil/core';
+import smoothscroll from 'smoothscroll-polyfill';
+export function addSmoothScrollPolyfill() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+  if (!isSafari)
+    return false;
+  smoothscroll.polyfill();
+  return (window['__forceSmoothScrollPolyfill__'] = true);
+}
 let guid = 1000;
 export function createGuid() {
   return guid++;
 }
+export function nextPaint(fn, execute) {
+  if (execute)
+    fn();
+  else
+    requestAnimationFrame(() => nextPaint(fn, true));
+}
+export function capitalize(value) {
+  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
 export function pick(props) {
   return obj => {
     return props.reduce((memo, prop) => {
@@ -11,10 +29,13 @@ export function pick(props) {
   };
 }
 export function loc(key, subs) {
-  var _a, _b;
+  var _a, _b, _c;
   if (!key)
     return '';
-  return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.loc(key, subs)) !== null && _b !== void 0 ? _b : key;
+  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noString) === true) {
+    return key;
+  }
+  return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
 }
 export function labelDOM(target) {
   const { label, hideLabel } = target;