q2-tecton-elements 1.14.2 → 1.15.1-alpha.0

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -137,7 +137,7 @@ textarea {
   box-sizing: border-box;
   min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
   padding: var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));
-  background-color: var(--tct-textarea-bg, var(--t-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))));
+  background-color: var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))));
   color: var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));
   border-width: var(--comp-textarea-border-width);
   border-style: solid;

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

@@ -0,0 +1,120 @@
+import { Component, Prop, h, Element, Fragment } from '@stencil/core';
+export class Q2Tooltip {
+  constructor() {
+    this.position = 'n';
+  }
+  render() {
+    const classList = ['q2-tooltip-container', 'tooltipped'];
+    classList.push(`tooltipped-${this.position}`);
+    if (this.block) {
+      classList.push('block');
+      this.hostElement.style.display = 'block';
+    }
+    if (this.multiline) {
+      classList.push('tooltipped-multiline');
+    }
+    if (this.persistent) {
+      classList.push('persistent');
+    }
+    return this.label ? (h(Fragment, null,
+      h("div", { class: classList.join(' '), "aria-label": this.label },
+        h("slot", null)))) : (h("slot", null));
+  }
+  static get is() { return "q2-tooltip"; }
+  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
+    },
+    "block": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "block",
+      "reflect": true
+    },
+    "multiline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiline",
+      "reflect": true
+    },
+    "persistent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "persistent",
+      "reflect": true
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'",
+        "resolved": "\"e\" | \"n\" | \"ne\" | \"nw\" | \"s\" | \"se\" | \"sw\" | \"w\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": true,
+      "defaultValue": "'n'"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,276 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+}
+
+: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: inline-block;
+}
+
+.tooltipped {
+  --comp-background: var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85))));
+  --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);
+  --comp-offset: var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));
+  --comp-position: var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));
+  --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);
+  --comp-body-offset: var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));
+  --comp-duration: var(--tct-tooltip-animation-duration, var(--t-tooltip-animation-duration, var(--app-duration-1, 0.2s)));
+  --comp-visible-duration: var(--tct-tooltip-animation-visible-duration, var(--t-tooltip-animation-visible-duration, 2s));
+  position: relative;
+}
+@keyframes tooltippedFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.tooltipped:before {
+  position: absolute;
+  z-index: 1000001;
+  width: 0;
+  height: 0;
+  color: var(--comp-background);
+  pointer-events: none;
+  content: "";
+  border: var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent;
+}
+.tooltipped:after {
+  --comp-padding: var(--app-scale-1x, 5px) 8px;
+  position: absolute;
+  z-index: 1000000;
+  padding: var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: var(--comp-background);
+  border-radius: 3px;
+}
+.tooltipped[label][stencil-hydrated]:after {
+  content: attr(label);
+}
+.tooltipped:before, .tooltipped:after {
+  display: inline-block;
+  visibility: hidden;
+  opacity: 0;
+  transition: all var(--comp-duration) ease-in-out 0s;
+}
+.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after, .tooltipped:focus-within:before, .tooltipped:focus-within:after {
+  text-decoration: none;
+  visibility: visible;
+  opacity: 1;
+}
+.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after {
+  transition: all var(--comp-duration) ease-in-out;
+}
+.tooltipped:hover:before, .tooltipped:hover:after {
+  transition-delay: 1s;
+}
+.tooltipped:focus:before, .tooltipped:focus:after, .tooltipped:focus-within:before, .tooltipped:focus-within:after {
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-name: tooltippedFade, tooltippedFade;
+  animation-direction: normal, reverse;
+  animation-duration: var(--comp-duration);
+  animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));
+}
+.tooltipped[stencil-hydrated]:not([label]):not([aria-label]):hover:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):hover:after, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):active:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):active:after, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:hover:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:hover:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:active:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:active:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):hover:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):hover:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):active:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):active:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus:after {
+  display: none;
+}
+.tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus-within:before, .tooltipped[stencil-hydrated]:not([label]):not([aria-label]):focus-within:after, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus-within:before, .tooltipped:not([stencil-hydrated])[aria-label=""]:focus-within:after, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus-within:before, .tooltipped:not([stencil-hydrated]):not([aria-label]):focus-within:after {
+  display: none;
+}
+.tooltipped-multiline:after {
+  width: max-content;
+  max-width: var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));
+  word-break: break-word;
+  word-wrap: normal;
+  white-space: pre-line;
+  border-collapse: separate;
+  text-align: left;
+}
+.tooltipped-multiline.tooltipped-s:after, .tooltipped-multiline.tooltipped-n:after {
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tooltipped-multiline.tooltipped-w:after, .tooltipped-multiline.tooltipped-e:after {
+  right: 100%;
+}
+.tooltipped-multiline:hover:after, .tooltipped-multiline:active:after, .tooltipped-multiline:focus:after {
+  display: table-cell;
+}
+.tooltipped-multiline:focus-within:after {
+  display: table-cell;
+}
+.tooltipped-sticky:before, .tooltipped-sticky:after {
+  display: inline-block;
+}
+.tooltipped-sticky.tooltipped-multiline:after {
+  display: table-cell;
+}
+.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
+  top: 100%;
+  right: 50%;
+  margin-top: var(--comp-position);
+}
+.tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before {
+  top: auto;
+  right: 50%;
+  bottom: var(--comp-offset);
+  margin-right: var(--comp-offset);
+  border-bottom-color: var(--comp-background);
+}
+.tooltipped-se:after {
+  right: auto;
+  left: 50%;
+  margin-left: var(--comp-body-offset);
+}
+.tooltipped-sw:after {
+  margin-right: var(--comp-body-offset);
+}
+.tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: var(--comp-position);
+}
+.tooltipped-n:before, .tooltipped-ne:before, .tooltipped-nw:before {
+  top: var(--comp-offset);
+  right: 50%;
+  bottom: auto;
+  margin-right: var(--comp-offset);
+  border-top-color: var(--comp-background);
+}
+.tooltipped-ne:after {
+  right: auto;
+  left: 50%;
+  margin-left: var(--comp-body-offset);
+}
+.tooltipped-nw:after {
+  margin-right: var(--comp-body-offset);
+}
+.tooltipped-s:after, .tooltipped-n:after {
+  transform: translateX(50%);
+}
+.tooltipped-w:after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: var(--comp-position);
+  transform: translateY(50%);
+}
+.tooltipped-w:before {
+  top: 50%;
+  bottom: 50%;
+  left: var(--comp-offset);
+  margin-top: var(--comp-offset);
+  border-left-color: var(--comp-background);
+}
+.tooltipped-e:after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: var(--comp-position);
+  transform: translateY(50%);
+}
+.tooltipped-e:before {
+  top: 50%;
+  right: var(--comp-offset);
+  bottom: 50%;
+  margin-top: var(--comp-offset);
+  border-right-color: var(--comp-background);
+}
+
+.phone .tooltipped:not(.tooltip-popover):hover:before, .phone .tooltipped:not(.tooltip-popover):hover:after, .phone .tooltipped:not(.tooltip-popover):active:before, .phone .tooltipped:not(.tooltip-popover):active:after, .phone .tooltipped:not(.tooltip-popover):focus:before, .phone .tooltipped:not(.tooltip-popover):focus:after, .phone .tooltipped:not(.tooltip-popover):focus-within:before, .phone .tooltipped:not(.tooltip-popover):focus-within:after,
+.tablet .tooltipped:not(.tooltip-popover):hover:before,
+.tablet .tooltipped:not(.tooltip-popover):hover:after,
+.tablet .tooltipped:not(.tooltip-popover):active:before,
+.tablet .tooltipped:not(.tooltip-popover):active:after,
+.tablet .tooltipped:not(.tooltip-popover):focus:before,
+.tablet .tooltipped:not(.tooltip-popover):focus:after,
+.tablet .tooltipped:not(.tooltip-popover):focus-within:before,
+.tablet .tooltipped:not(.tooltip-popover):focus-within:after {
+  display: none;
+}
+
+.q2-tooltip-container {
+  display: inline-block;
+  transition: all var(--comp-duration) ease-in-out 0s;
+}
+.q2-tooltip-container.block {
+  display: block;
+}
+.q2-tooltip-container.persistent.tooltipped:before, .q2-tooltip-container.persistent.tooltipped:after {
+  visibility: visible;
+  opacity: 1;
+}

package/dist/collection/components/tecton-tab-pane/index.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Prop, State, Event, Watch } from '@stencil/core';
 export class TectonTabPane {
   constructor() {
     ///////// Actions /////////
@@ -8,6 +8,9 @@ export class TectonTabPane {
         iframe.contentWindow.postMessage(`[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`, '*');
     };
   }
+  badgeObserver() {
+    this.badge.emit();
+  }
   get iframeTitle() {
     return this.moduleId.split('.').slice(-2).join('-');
   }
@@ -227,6 +230,40 @@ export class TectonTabPane {
       "attribute": "min-height",
       "reflect": true
     },
+    "badgeCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-count",
+      "reflect": true
+    },
+    "badgeDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-description",
+      "reflect": true
+    },
     "authPayload": {
       "type": "unknown",
       "mutable": false,
@@ -263,8 +300,27 @@ export class TectonTabPane {
   static get states() { return {
     "_showForm": {}
   }; }
+  static get events() { return [{
+      "method": "badge",
+      "name": "badge",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
+      "propName": "badgeCount",
+      "methodName": "badgeObserver"
+    }, {
       "propName": "selected",
       "methodName": "selectedObserver"
     }]; }

package/dist/collection/components/tecton-tab-pane/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {

package/dist/collection/utils/index.js

@@ -1,5 +1,8 @@
 import { h } from '@stencil/core';
-import smoothscroll from 'smoothscroll-polyfill';
+import smoothScroll from 'smoothscroll-polyfill';
+export function isRelatedTargetWithinHost(event, element) {
+  return event.relatedTarget !== element && !element.contains(event.relatedTarget);
+}
 export function isEventFromElement(event, element) {
   var _a;
   return ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) === element;
@@ -10,7 +13,7 @@ export function overrideFocus(hostElement) {
 export function addSmoothScrollPolyfill() {
   if (!isSafari())
     return false;
-  smoothscroll.polyfill();
+  smoothScroll.polyfill();
   return (window.__forceSmoothScrollPolyfill__ = true);
 }
 export function isFirefox() {
@@ -123,6 +126,7 @@ export function setPopProperties(target) {
     return (target.privatePopDirection = 'down');
   }
   else if (canShowFullSizeAbove || !minPopHeight) {
+    determinePopOffset(target);
     return (target.privatePopDirection = 'up');
   }
   // If full size will not fit and minHeight is set, then make as tall as possible
@@ -136,6 +140,18 @@ export function setPopProperties(target) {
   else {
     const maxAboveHeight = Math.max(topOffset, minPopHeight);
     dropdownContainer.style.maxHeight = `${maxAboveHeight}px`;
+    determinePopOffset(target);
     return (target.privatePopDirection = 'up');
   }
 }
+const determinePopOffset = ({ dropdownContainer, inputField }) => {
+  var _a, _b;
+  if (!inputField)
+    return;
+  const inputFieldHeight = (_b = (_a = inputField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-field')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
+  dropdownContainer.style.setProperty('--comp-dropup-offset', `${inputFieldHeight}px`);
+};
+export const resizeIframe = () => {
+  var _a, _b;
+  return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+};

package/dist/esm/{index-14e81efa.js → index-2ca8c93c.js}

@@ -446,6 +446,9 @@ var smoothscroll = createCommonjsModule(function (module, exports) {
 }());
 });
 
+function isRelatedTargetWithinHost(event, element) {
+  return event.relatedTarget !== element && !element.contains(event.relatedTarget);
+}
 function isEventFromElement(event, element) {
   var _a;
   return ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) === element;
@@ -559,6 +562,7 @@ function setPopProperties(target) {
     return (target.privatePopDirection = 'down');
   }
   else if (canShowFullSizeAbove || !minPopHeight) {
+    determinePopOffset(target);
     return (target.privatePopDirection = 'up');
   }
   // If full size will not fit and minHeight is set, then make as tall as possible
@@ -572,8 +576,20 @@ function setPopProperties(target) {
   else {
     const maxAboveHeight = Math.max(topOffset, minPopHeight);
     dropdownContainer.style.maxHeight = `${maxAboveHeight}px`;
+    determinePopOffset(target);
     return (target.privatePopDirection = 'up');
   }
 }
-
-export { isTouchDevice as a, addSmoothScrollPolyfill as b, createGuid as c, setMessageHeight as d, labelDOM as e, isFirefox as f, handleAriaLabel as h, isEventFromElement as i, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, setPopProperties as s };
+const determinePopOffset = ({ dropdownContainer, inputField }) => {
+  var _a, _b;
+  if (!inputField)
+    return;
+  const inputFieldHeight = (_b = (_a = inputField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-field')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
+  dropdownContainer.style.setProperty('--comp-dropup-offset', `${inputFieldHeight}px`);
+};
+const resizeIframe = () => {
+  var _a, _b;
+  return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
+};
+
+export { isTouchDevice as a, isRelatedTargetWithinHost as b, createGuid as c, addSmoothScrollPolyfill as d, setMessageHeight as e, labelDOM as f, isFirefox as g, handleAriaLabel as h, isEventFromElement as i, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, resizeIframe as r, setPopProperties as s };