q2-tecton-elements 1.25.1 → 1.26.0

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

@@ -31,11 +31,13 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription }) => ({
+      this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({
         label: (label && loc(label)) || '',
         value,
         badgeCount,
         badgeDescription,
+        badgeTheme,
+        badgeStatus,
       }));
     };
     this.onTabClick = (event) => {
@@ -226,7 +228,17 @@ const Q2TabContainer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
   }
   generateTabWithBadge(tab, isSelected) {
-    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
+    let theme;
+    if (!tab.badgeStatus && isSelected)
+      theme = tab.badgeTheme || 'primary';
+    let description;
+    if (tab.badgeDescription)
+      description = loc(tab.badgeDescription);
+    else if (tab.badgeStatus)
+      description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);
+    else
+      description = loc('tecton.element.tab.pane.new');
+    return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
   }
   get hostElement() { return this; }
   static get watchers() { return {

package/dist/components/q2-tab-pane.js

@@ -14,6 +14,8 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.selected = undefined;
     this.badgeCount = undefined;
     this.badgeDescription = undefined;
+    this.badgeTheme = undefined;
+    this.badgeStatus = undefined;
     this.index = undefined;
     this.guid = undefined;
   }
@@ -24,7 +26,10 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", null)));
   }
   static get watchers() { return {
-    "badgeCount": ["badgeObserver"]
+    "badgeCount": ["badgeObserver"],
+    "badgeDescription": ["badgeObserver"],
+    "badgeTheme": ["badgeObserver"],
+    "badgeStatus": ["badgeObserver"]
   }; }
   static get style() { return stylesCss; }
 }, [1, "q2-tab-pane", {
@@ -34,6 +39,8 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selected": [516],
     "badgeCount": [514, "badge-count"],
     "badgeDescription": [513, "badge-description"],
+    "badgeTheme": [513, "badge-theme"],
+    "badgeStatus": [513, "badge-status"],
     "index": [2],
     "guid": [2]
   }]);

package/dist/components/q2-tooltip.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { o as overrideFocus, a as isEventFromElement } from './index15.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}:host([block]){display:block}.tooltip{--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-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;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}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 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:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;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))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip: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}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";
 
@@ -13,9 +14,14 @@ const Q2Tooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.multiline = undefined;
     this.persistent = undefined;
     this.immediate = undefined;
+    this.focusable = false;
     this.position = 'n';
     this.focusClass = undefined;
   }
+  /// LifeCycle Hooks ///
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   /// Getters ///
   get shouldBeVisible() {
     if (this.persistent)
@@ -64,21 +70,30 @@ const Q2Tooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         break;
     }
   }
-  focusHandler() {
+  focusCaptureHandler() {
     this.checkFocusClass();
   }
+  focusHandler(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    if (!this.focusable)
+      return;
+    this.tooltipElement.focus();
+  }
   focusOutHandler() {
     if (this.shouldBeVisible)
       return;
     if (this.focusClass === 'has-generic-focus')
       this.focusClass = 'has-generic-focus-out';
+    else
+      this.focusClass = null;
   }
   render() {
     const { focusClass } = this;
     const classes = ['tooltip'];
     if (focusClass)
       classes.push(focusClass);
-    return this.label ? (h(Fragment, null, h("div", { ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: "tooltip" }, h("slot", null)))) : (h("slot", null));
+    return this.label ? (h(Fragment, null, h("div", { tabindex: this.focusable ? 0 : undefined, ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: "tooltip", "test-id": "tooltipContainer" }, h("slot", null)))) : (h("slot", null));
   }
   get hostElement() { return this; }
   static get style() { return stylesCss; }
@@ -88,9 +103,10 @@ const Q2Tooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "multiline": [516],
     "persistent": [516],
     "immediate": [516],
+    "focusable": [516],
     "position": [513],
     "focusClass": [32]
-  }, [[0, "keyup", "keyUpHandler"], [2, "focus", "focusHandler"], [0, "focusout", "focusOutHandler"]]]);
+  }, [[0, "keyup", "keyUpHandler"], [2, "focus", "focusCaptureHandler"], [0, "focus", "focusHandler"], [0, "focusout", "focusOutHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -26,6 +26,8 @@ const TectonTabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.minHeight = undefined;
     this.badgeCount = undefined;
     this.badgeDescription = undefined;
+    this.badgeTheme = undefined;
+    this.badgeStatus = undefined;
     this.authPayload = undefined;
     this.showForm = undefined;
     this._showForm = undefined;
@@ -70,6 +72,9 @@ const TectonTabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   get hostElement() { return this; }
   static get watchers() { return {
     "badgeCount": ["badgeObserver"],
+    "badgeDescription": ["badgeObserver"],
+    "badgeTheme": ["badgeObserver"],
+    "badgeStatus": ["badgeObserver"],
     "selected": ["selectedObserver"]
   }; }
   static get style() { return stylesCss; }
@@ -86,6 +91,8 @@ const TectonTabPane$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "minHeight": [513, "min-height"],
     "badgeCount": [514, "badge-count"],
     "badgeDescription": [513, "badge-description"],
+    "badgeTheme": [513, "badge-theme"],
+    "badgeStatus": [513, "badge-status"],
     "authPayload": [16],
     "showForm": [4, "show-form"],
     "_showForm": [32]