q2-tecton-elements 1.10.2 → 1.10.6

package/dist/collection/components/q2-tab-container/styles.css

@@ -64,120 +64,140 @@ button {
     visibility: hidden;
 }
 
+:host {
+  display: block;
+  position: relative;
+}
+
+button {
+  cursor: pointer;
+  margin: 0;
+}
 
 .tab-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
+  position: relative;
 }
-.tab-list {
-    padding: 0;
-    display: flex;
-    margin: 0;
-    list-style: none;
-    border-bottom: 1px solid
-        var(--tct-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
-    white-space: nowrap;
-    overflow-x: hidden;
-    align-items: center;
+
+ul {
+  --comp-container-padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  padding: var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));
+  display: flex;
+  gap: var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  list-style: none;
+  border-bottom: 1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
+  overflow-x: auto;
+  align-items: center;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
 }
-.tab-list li.nav {
-    position: absolute;
-    height: 44px;
-    width: 46px;
-}
-.tab-list li.nav-left {
-    left: -15px;
-    background: linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0));
-}
-.tab-list li.nav-right  {
-    right: -15px;
-    background: linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0));
-}
-.tab-list li.nav .arrow-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: inherit;
-    width: inherit;
-    cursor: pointer;
-}
-.tab-list li.nav .arrow-container a {
-    padding: 0;
-    margin: 0;
-    height: inherit;
-    width: inherit;
-    border-bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.tab-list li.nav .arrow-container a q2-icon {
-    width: 19px;
-    height: 19px;
-}
-
-.tab-list a {
-    width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
-    text-align: center;
-    text-decoration: none;
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px));
-    margin: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))
-        0;
-    color: var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));
-    font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
-    border-bottom: 3px solid transparent;
-    display: block;
-    transition: color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),
-        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
-}
-
-:host([type='section']) .tab-list a {
-    font-size: inherit;
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px))
-        var(--tct-scale-1, var(--app-scale-1, 5px));
+ul::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
-
-@media screen and (max-width: 767px) {
-    .tab-list a {
-        font-size: inherit;
-        padding: var(--tct-scale-2, var(--app-scale-2, 10px))
-            var(--tct-scale-1, var(--app-scale-1, 5px));
-    }
+ul::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+ul::-webkit-scrollbar-track {
+  background: transparent;
 }
-
 @media print {
-    .tab-list.no-print {
-        display: none;
-    }
+  ul.no-print {
+    display: none;
+  }
+}
+
+li {
+  flex: 0 0 auto;
+}
+li button {
+  background: var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));
+  border-width: var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));
+  border-color: var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));
+  border-style: var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));
+  border-radius: var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));
+  width: var(--tct-tab-width, var(--t-tab-width, 100%));
+  text-align: var(--tct-tab-text-align, var(--t-tab-text-align, center));
+  text-decoration: var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));
+  padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
+  color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
+  font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
+  display: block;
+  transition: color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+}
+:host([type=section]) li button {
+  --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+  font-size: inherit;
+  padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
+}
+li button:hover {
+  color: var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));
+  background-color: var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));
+  width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
+}
+li button[aria-selected=true] {
+  color: var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));
+  border-color: var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));
+  border-style: var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));
+  width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
+  background-color: var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit));
+}
+:host([color=alt]) li button {
+  color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit));
+}
+:host([color=alt]) li button:hover, :host([color=alt]) li button[aria-selected=true] {
+  color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit));
+}
+@media screen and (max-width: 767px) {
+  li button {
+    --comp-tab-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+    font-size: inherit;
+    padding: var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)));
+  }
 }
 
-.tab-list a:hover {
-    color: var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));
-    background-color: var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));
-    width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
+.tab-content {
+  --comp-tab-content-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) 0;
+  padding: var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)));
+}
+.tab-content:focus {
+  outline: none;
+  box-shadow: none;
 }
 
-.tab-list a[aria-selected='true'] {
-    color: var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));
-    border-color: currentColor;
-    width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
-    background-color: var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit));
+.gradient-left,
+.gradient-right {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 44px;
 }
 
-:host([color='alt']) .tab-list a {
-    color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit));
+.gradient-left {
+  background-image: linear-gradient(to right, var(--t-base), var(--t-base-a0));
+  left: 0;
 }
 
-:host([color='alt']) .tab-list a:hover,
-:host([color='alt']) .tab-list a[aria-selected='true'] {
-    color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit));
+.gradient-right {
+  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base));
+  right: 0;
 }
 
-.tab-content {
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px)) 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;
 }
-.tab-content:focus {
-	outline: none;
-	box-shadow: none;
+
+.btn-left {
+  left: 0;
 }
+
+.btn-right {
+  right: 0;
+}

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

@@ -14,6 +14,13 @@ export class TectonTabPane {
       .slice(-2)
       .join('-');
   }
+  componentWillRender() {
+    const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
+    if (loadingWrapper) {
+      loadingWrapper.style.minHeight = this.minHeight;
+      loadingWrapper.hidden = !this.selected;
+    }
+  }
   componentWillLoad() {
     this._showForm = this.showForm;
   }
@@ -26,7 +33,11 @@ export class TectonTabPane {
   }
   ///////// Observers /////////
   selectedObserver() {
+    const loader = this.hostElement.shadowRoot.querySelector('div[slot="loading-wrapper"]');
     this._showForm = this.showForm; // reset state
+    if (loader) {
+      loader.hidden = !this.selected;
+    }
   }
   ///////// View Methods /////////
   render() {

package/dist/collection/utils/index.js

@@ -1,13 +1,19 @@
 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)
+  if (!isSafari())
     return false;
   smoothscroll.polyfill();
   return (window['__forceSmoothScrollPolyfill__'] = true);
 }
+export function isFirefox() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('firefox');
+}
+export function isSafari() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('safari') && !userAgent.includes('chrome');
+}
 let guid = 1000;
 export function createGuid() {
   return guid++;

package/dist/esm/click-elsewhere.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement } from './index-5fa3e016.js';
+import { r as registerInstance, c as createEvent, g as getElement } from './index-be8376c0.js';
 
 const ClickElsewhere = class {
   constructor(hostRef) {