q2-tecton-elements 1.10.2 → 1.10.6

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

@@ -64,113 +64,106 @@ button {
     visibility: hidden;
 }
 
-
 :host {
-    display: block;
+  display: block;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .message {
-    border-left-width: var(--tct-message-bar-width, var(--app-scale-1, 5px));
-    border-left-style: solid;
-    display: flex;
-    align-items: flex-start;
-    background: var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-    color: var(--tct-message-font-color, inherit);
-    box-shadow: var(--tct-message-box-shadow, inherit);
-    border-radius: var(--tct-message-border-radius, inherit);
+  border-left-width: var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));
+  border-left-style: solid;
+  display: grid;
+  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  align-items: flex-start;
+  background: var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
+  color: var(--tct-message-font-color, var(--t-message-font-color, inherit));
+  box-shadow: var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));
+  border-radius: var(--tct-message-border-radius, var(--t-message-border-radius, inherit));
+}
+
+.message-icon {
+  width: 24px;
+}
+
+.message-content {
+  flex: 1;
 }
 
 ::slotted(ul) {
-    padding-left: var(--tct-scale-l3, var(--app-scale-3, 15px));
+  padding-left: var(--tct-scale-l3, var(--app-scale-3, 15px));
 }
 
 :host(:not([appearance])),
-:host([appearance='standard']) {
-    margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
+:host([appearance=standard]) {
+  margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
 }
-
 :host(:not([appearance])) .message,
-:host([appearance='standard']) .message {
-    padding: var(--tct-message-padding, var(--app-scale-3, 15px));
+:host([appearance=standard]) .message {
+  grid-template-columns: 24px 1fr;
+  --comp-padding: var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));
+  padding: var(--comp-padding);
+  padding-top: calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));
+  padding-left: calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)));
+}
+:host(:not([appearance])) .message-content,
+:host([appearance=standard]) .message-content {
+  padding-top: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
-
 :host(:not([appearance])) ::slotted(ul),
-:host([appearance='standard']) ::slotted(ul) {
-    margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
+:host([appearance=standard]) ::slotted(ul) {
+  margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
 }
 
-:host([appearance='minimal']) {
-    margin: 0;
+:host([appearance=minimal]) {
+  margin: 0;
 }
-:host([appearance='minimal']) .message {
-    padding: var(--tct-message-minimal-padding, var(--app-scale-2, 10px));
+:host([appearance=minimal]) .message {
+  padding: var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));
+  grid-template-columns: 1fr;
 }
-:host([appearance='minimal']) ::slotted(ul) {
-    margin: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+:host([appearance=minimal]) ::slotted(ul) {
+  margin: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
 }
 
 :host(:not([type])) .message,
-:host([type='info']) .message {
-    border-left-color: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
+:host([type=info]) .message {
+  border-left-color: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
 }
-
 :host(:not([type])) .message-icon,
-:host([type='info']) .message-icon {
-    --tct-icon-stroke-primary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
-    --tct-icon-stroke-secondary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
-}
-
-:host([type='success']) .message {
-    border-left-color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
-}
-:host([type='success']) .message-icon {
-    --tct-icon-stroke-primary: var(
-        --tct-stoplight-success,
-        var(--const-stoplight-success, #0e8a00)
-    );
-    --tct-icon-stroke-secondary: var(
-        --tct-stoplight-success,
-        var(--const-stoplight-success, #0e8a00)
-    );
-}
-
-:host([type='warning']) .message {
-    border-left-color: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
+:host(:not([type])) .message-icon,
+:host([type=info]) .message-icon,
+:host([type=info]) .message-icon {
+  --tct-icon-stroke-primary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
+  --tct-icon-stroke-secondary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
 }
 
-:host([type='warning']) .message-icon {
-    --tct-icon-stroke-primary: var(
-        --tct-stoplight-warning,
-        var(--const-stoplight-warning, #f0b400)
-    );
-    --tct-icon-stroke-secondary: var(
-        --tct-stoplight-warning,
-        var(--const-stoplight-warning, #f0b400)
-    );
+:host([type=success]) .message {
+  border-left-color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
 }
-
-:host([type='error']) .message,
-:host([type='danger']) .message {
-    border-left-color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+:host([type=success]) .message-icon {
+  --tct-icon-stroke-primary: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
+  --tct-icon-stroke-secondary: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
 }
 
-:host([type='error']) .message-icon,
-:host([type='danger']) .message-icon {
-    --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-    --tct-icon-stroke-secondary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+:host([type=warning]) .message {
+  border-left-color: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
 }
-
-.message-icon {
-    width: 24px;
-    margin-top: calc(var(--tct-scale-1, var(--app-scale-1, 5px)) * -1);
-    margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
-    margin-left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) * -1);
+:host([type=warning]) .message-icon {
+  --tct-icon-stroke-primary: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
+  --tct-icon-stroke-secondary: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
 }
 
-.message-content {
-    flex: 1;
+:host([type=error]) .message,
+:host([type=danger]) .message {
+  border-left-color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
 }
+:host([type=error]) .message-icon,
+:host([type=error]) .message-icon,
+:host([type=danger]) .message-icon,
+:host([type=danger]) .message-icon {
+  --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  --tct-icon-stroke-secondary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+}

package/dist/collection/components/q2-radio-group/index.js

@@ -70,7 +70,11 @@ export class Q2RadioGroup {
   }
   inputDom() {
     if (this.tilelayout) {
-      return (h("div", { class: this.tileAlignment === 'left' ? 'flexed left' : 'flexed' },
+      const { tileAlignment } = this;
+      const alignment = ['left', 'center', 'right'].includes(tileAlignment)
+        ? tileAlignment
+        : 'center';
+      return (h("div", { class: `flexed ${alignment}` },
         h("slot", null)));
     }
     else {
@@ -193,8 +197,8 @@ export class Q2RadioGroup {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'left' | 'center' | 'right'",
+        "resolved": "\"center\" | \"left\" | \"right\"",
         "references": {}
       },
       "required": false,

package/dist/collection/components/q2-radio-group/styles.css

@@ -133,3 +133,6 @@ legend.sr-only {
 .flexed.left {
     justify-content: left;
 }
+.flexed.right {
+    justify-content: right;
+}

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

@@ -102,12 +102,6 @@ export class Q2Section {
     const animateClass = this.animating ? ' animate' : '';
     return `q2-section-wrapper${collapsibleClass}${stateClass}${headerClass}${animateClass}`;
   }
-  get btnLabel() {
-    const label = loc(this.label);
-    return this.expanded
-      ? `${loc('tecton.element.section.collapse')} ${label}`
-      : `${loc('tecton.element.section.expand')} ${label}`;
-  }
   get slottedContentHeight() {
     const content = this.contentContainer;
     return `${content.offsetHeight || 0}px`;
@@ -158,7 +152,7 @@ export class Q2Section {
           !this.hasYieldedHeader && !!this.label ? (h("h2", { class: "title" }, loc(this.label))) : (''),
           h("div", { class: "q2-section-header-slot-wrapper" },
             h("slot", { name: "q2-section-header" }))),
-        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.btnLabel, ariaExpanded: !!this.expanded, ariaControls: this.contentId, ariaHasPopup: true, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
+        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: !!this.expanded, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
           h("q2-icon", { type: "chevron-up", class: "toggle-icon" }))) : ('')),
       h("div", { class: "q2-section-content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onAnimationStart: this.onAnimationStart, onAnimationEnd: this.onAnimationEnd },
         h("div", { class: "q2-section-content" },

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Event, State, Listen, Watch, h } from '@stencil/core';
+import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment } from '@stencil/core';
 import { createGuid, loc, addSmoothScrollPolyfill } from 'src/utils';
 addSmoothScrollPolyfill();
 const userAgent = navigator.userAgent.toLowerCase();
@@ -11,6 +11,9 @@ export class Q2TabContainer {
     this.lastScrolled = new Date(null).getTime();
     this.hasLeft = false;
     this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
     ///////// Actions /////////
     this.updateTabData = () => {
       this.updateTabPaneProps();
@@ -24,131 +27,97 @@ export class Q2TabContainer {
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value }) => {
-        return {
-          label: (label && loc(label)) || '',
-          value
-        };
-      });
+      this.tabs = this.tabPanes.map(({ label, value }) => ({
+        label: (label && loc(label)) || '',
+        value
+      }));
     };
     this.onTabClick = (event) => {
+      const isAlreadySelected = this.value === event.target.dataset.value;
+      if (isAlreadySelected)
+        return;
       this.change.emit({
         value: event.target.dataset.value
       });
     };
     this.onTabKeyDown = (event) => {
       const value = event.target.dataset.value;
-      if (event.key === 'ArrowRight' || event.key === 'Right') {
-        this.moveToAdjacentTab(value, 'next');
-        return;
-      }
-      if (event.key === 'ArrowLeft' || event.key === 'Left') {
-        this.moveToAdjacentTab(value, 'prev');
-        return;
-      }
-      if (event.code === 'Space' || event.code === 'Enter') {
-        // to prevent triggering scroll when press the space key
-        event.preventDefault();
-        this.change.emit({ value });
-        return;
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'next');
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'prev');
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'last');
+          break;
+        case 'Space':
+        case 'Enter':
+          event.preventDefault();
+          this.change.emit({ value });
+          break;
       }
     };
     this.moveToAdjacentTab = (value, direction) => {
       let index = this.tabs.map(({ value }) => value).indexOf(value);
-      let newIndex = direction === 'next'
-        ? Math.min(index + 1, this.tabs.length - 1)
-        : Math.max(index - 1, 0);
-      if (index !== newIndex) {
-        const focusedTab = this.moveFocus(newIndex);
-        // Scroll only if it overflows
-        if (this.tabList.scrollWidth > this.tabList.clientWidth) {
-          // Scroll only if it's first or last tab
-          if (newIndex !== 0 && newIndex !== this.tabs.length - 1) {
-            this.scrollByKeyboard(direction, focusedTab);
-          }
-          else {
-            // first or last element: just show or hide nav arrow
-            this.onTabScroll(direction);
-          }
-        }
+      let newIndex;
+      switch (direction) {
+        case 'next':
+          newIndex = Math.min(index + 1, this.tabs.length - 1);
+          break;
+        case 'prev':
+          newIndex = Math.max(index - 1, 0);
+          break;
+        case 'first':
+          newIndex = 0;
+          break;
+        case 'last':
+          newIndex = this.tabs.length - 1;
+          break;
       }
+      if (index === newIndex)
+        return;
+      this.moveFocus(newIndex, false);
     };
     this.moveFocus = (index, preventScroll = true) => {
       const focusedValue = this.tabs[index].value;
-      const focusedTab = this.hostElement.shadowRoot.querySelector(`.tab-list a[data-value="${focusedValue}"]`);
+      const focusedTab = this.listElement.querySelector(`[data-value="${focusedValue}"]`);
       focusedTab.focus({ preventScroll });
+      const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
       return focusedTab;
     };
-    this.calculateKeyboardScroll = (direction, focusedTab) => {
-      const { left: tabListLeft } = this.tabList.getBoundingClientRect();
-      const { left: focusedTabLeft } = focusedTab.getBoundingClientRect();
-      const arrowWidth = 46;
-      let scrollAmount = 0;
-      // check how much focused tab overflows
-      if (direction === 'next' &&
-        focusedTabLeft + focusedTab.clientWidth >
-          tabListLeft + this.tabList.clientWidth + arrowWidth) {
-        scrollAmount =
-          this.tabList.scrollLeft +
-            arrowWidth +
-            (focusedTabLeft + focusedTab.clientWidth) -
-            (tabListLeft + this.tabList.clientWidth);
-      }
-      else if (direction === 'prev' && focusedTabLeft + arrowWidth < tabListLeft) {
-        scrollAmount = this.tabList.scrollLeft - arrowWidth + (focusedTabLeft - tabListLeft);
-      }
-      return scrollAmount;
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
     };
-    this.scrollByKeyboard = (direction, focusedTab) => {
-      const scrollAmount = this.calculateKeyboardScroll(direction, focusedTab);
-      if (scrollAmount !== 0) {
-        this.tabList.scroll({ left: scrollAmount, behavior: 'smooth' });
-        // wait to finish scroll then show or hide nav arrow
-        setTimeout(() => this.onTabScroll(), 100);
-      }
-    };
-    this.calculateTabScroll = ({ direction, scrollWidth, clientWidth, scrollLeft }) => {
-      const directions = { prev: -1, next: 1 };
-      // step 0 means no scroll needed, re-render or resize can trigger this
-      const step = directions[direction] || 0;
-      const scrollRate = 0.5; // half of visual width
-      const delta = Math.round(clientWidth * scrollRate);
-      const newScrollLeft = scrollLeft + step * delta;
-      const scrolled = clientWidth + newScrollLeft;
-      const hasLeft = newScrollLeft > 0;
-      const hasRight = scrollWidth > scrolled;
-      return {
-        newScrollLeft,
-        hasLeft,
-        hasRight
-      };
-    };
-    this.onTabScroll = (direction) => {
-      // throttle under 50ms due to re-rendering & resizing
-      const now = new Date().getTime();
-      if (now - this.lastScrolled < 50)
-        return;
-      this.lastScrolled = now;
-      if (!this.tabList)
-        return;
-      let { scrollWidth, clientWidth, scrollLeft } = this.tabList;
-      const { newScrollLeft, hasLeft, hasRight } = this.calculateTabScroll({
-        direction,
-        scrollWidth,
-        clientWidth,
-        scrollLeft
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
       });
-      this.hasLeft = hasLeft;
-      this.hasRight = hasRight;
-      if (direction) {
-        this.tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
-      }
+    };
+    this.onSlotChange = () => {
+      this.checkScrollState();
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.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);
   }
   get tabPanes() {
     const tabPanes = this.hostElement.querySelectorAll('q2-tab-pane, tecton-tab-pane');
@@ -170,7 +139,7 @@ export class Q2TabContainer {
     }
   }
   onResize() {
-    this.onTabScroll();
+    this.checkScrollState();
   }
   onFocus() {
     // firefox receives focus on overflowed element even if it's not interactive element
@@ -184,25 +153,26 @@ export class Q2TabContainer {
     const observer = new MutationObserver(this.updateTabData);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
     this.updateTabData();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
     this.settled.emit();
-    this.onTabScroll();
   }
   componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
     const index = this.tabs.findIndex(el => el.value === this.value);
-    // move focus if the value is valid and not the first tab's value
-    if (index > 0) {
-      this.scheduledAfterRender.push(() => {
-        const tab = this.moveFocus(index, false);
-        tab.blur();
-      });
-    }
+    this.scheduledAfterRender.push(() => {
+      const tab = this.moveFocus(Math.max(index, 0), false);
+      this.value = tab.dataset.value;
+      tab.blur();
+    });
   }
   disconnectedCallback() {
+    this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
     this.mutationObserver = null;
   }
@@ -220,30 +190,29 @@ export class Q2TabContainer {
   }
   ///////// View Methods /////////
   render() {
-    return (h("div", { class: "tab-container" },
-      h("ul", { class: `tab-list ${this.noPrint ? 'no-print' : ''}`, role: "tablist" },
-        this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: () => this.onTabScroll('prev') },
-          h("div", { class: "arrow-container" },
-            h("a", null,
-              h("q2-icon", { type: "chevron-left" }))))),
-        this.tabs.map((tab, index) => this.generateTab(tab, index)),
-        this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: () => this.onTabScroll('next') },
-          h("div", { class: "arrow-container" },
-            h("a", null,
-              h("q2-icon", { type: "chevron-right" })))))),
+    return (h(Fragment, null,
+      h("div", { class: "tab-container" },
+        this.scrollEnabled && (h(Fragment, null,
+          h("div", { class: "gradient-left", hidden: !this.showScrollLeft }),
+          h("div", { class: "gradient-right", hidden: !this.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), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))),
       h("div", { class: "tab-content" },
-        h("slot", null))));
+        h("slot", { onSlotchange: () => this.onSlotChange() }))));
   }
   generateTab(tab, index) {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
     return (h("li", { role: "presentation" },
-      h("a", { id: `tab-${this.guid}-${index}`, href: "javascript://", "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": `${isSelected}`, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
+      h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : undefined, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
   }
   static get is() { return "q2-tab-container"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -339,6 +308,9 @@ export class Q2TabContainer {
   static get states() { return {
     "hasLeft": {},
     "hasRight": {},
+    "scrollEnabled": {},
+    "showScrollLeft": {},
+    "showScrollRight": {},
     "tabs": {}
   }; }
   static get events() { return [{