q2-tecton-elements 1.13.0-alpha.0 → 1.13.2

package/dist/collection/components/q2-stepper-vertical/styles.css

@@ -0,0 +1,273 @@
+* {
+  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: grid;
+  grid-template-columns: var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px)) 1fr;
+  gap: var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px));
+}
+
+.step-label,
+.step-child-label {
+  color: var(--comp-btn-label-color);
+  font-size: var(--comp-btn-label-font-size);
+  font-weight: var(--comp-label-font-weight, 400);
+  height: 1.5em;
+}
+
+.step-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+[aria-selected=true] .step-label {
+  font-weight: var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600));
+}
+[aria-describedby] .step-label {
+  -webkit-line-clamp: 1;
+}
+
+.step-child-label {
+  grid-area: content;
+  color: var(--comp-btn-label-color);
+}
+
+.step-description {
+  color: var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+  font-size: var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  padding-bottom: 0.2em;
+}
+
+ul {
+  --comp-top-btn-icon-size: var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px));
+  --comp-btn-icon-size: var(--comp-top-btn-icon-size);
+  --comp-btn-content-gap: var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px)));
+  --comp-btn-label-font-size: var-list(var-prefixer(advanced-stepper-btn-label-font-size), 16px);
+  --comp-btn-label-color: var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d)));
+  --comp-tween: var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease)));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ul ul {
+  --comp-btn-icon-size: var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px));
+  --comp-btn-content-gap: var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px)));
+  --comp-btn-label-font-size: var-list(
+      var-prefixer(advanced-stepper-child-btn-label-font-size),
+      --app-font-size-small,
+      12px
+  );
+}
+ul ul[aria-hidden=true] {
+  display: none;
+}
+
+.step-btn,
+.step-child-btn {
+  display: grid;
+  grid-template-columns: var(--comp-btn-icon-size) 1fr;
+  gap: var(--comp-btn-content-gap);
+  text-align: var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start));
+  grid-template-areas: "icon content";
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+  transition-property: box-shadow;
+  outline: none;
+}
+.step-btn[aria-disabled],
+.step-child-btn[aria-disabled] {
+  cursor: default;
+  --comp-label-font-weight: 300;
+  --comp-btn-label-color: var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+}
+.step-btn[aria-selected=true],
+.step-child-btn[aria-selected=true] {
+  --comp-label-font-weight: 600;
+}
+
+.step-btn {
+  min-height: var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px));
+  font-size: var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px));
+  --comp-active-color: var(--t-primary);
+}
+.step-btn.status-complete {
+  --comp-active-color: var(--const-stoplight-success);
+}
+.step-btn.status-error {
+  --comp-active-color: var(--const-stoplight-alert);
+}
+.step-btn.status-locked {
+  cursor: not-allowed;
+}
+
+.step-child-btn {
+  --comp-active-color: var(--t-primary);
+  min-height: var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px));
+  padding-left: var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px)));
+  font-size: var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px));
+  border-left-width: var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px));
+  border-left-style: var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid));
+  border-left-color: transparent;
+}
+.step-child-btn[aria-selected=true] {
+  --comp-btn-label-color: var(--comp-active-color);
+  border-left-color: var(--comp-active-color);
+}
+.step-child-btn.status-error {
+  --comp-btn-label-color: var(--const-stoplight-alert);
+  --comp-active-color: var(--const-stoplight-alert);
+}
+.step-child-btn.status-locked {
+  cursor: not-allowed;
+}
+
+.step-content {
+  grid-area: content;
+}
+
+.step-icon,
+.step-bubble,
+.step-child-icon {
+  grid-area: icon;
+  width: var(--comp-btn-icon-size);
+  height: var(--comp-btn-icon-size);
+}
+.step-icon q2-icon,
+.step-bubble q2-icon,
+.step-child-icon q2-icon {
+  width: var(--comp-btn-icon-size);
+  height: var(--comp-btn-icon-size);
+  --tct-icon-stroke-primary: var(--comp-active-color);
+}
+
+.step-icon,
+.step-bubble {
+  background: var(--t-primary);
+  color: var(--t-base);
+  border-radius: 50%;
+}
+.status-complete .step-icon, .status-error .step-icon,
+.status-complete .step-bubble,
+.status-error .step-bubble {
+  background: var(--comp-active-color);
+}
+.step-icon q2-icon,
+.step-bubble q2-icon {
+  --tct-icon-stroke-secondary: var(--t-base);
+}
+.status-locked .step-icon,
+.status-locked .step-bubble {
+  background: var(--t-gray-12);
+  color: var(--t-text);
+}
+[aria-selected=true] .step-icon,
+[aria-selected=true] .step-bubble {
+  box-shadow: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-active-color);
+}
+
+.step-bubble {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
+}
+
+.step-child-icon q2-icon {
+  --tct-icon-stroke-primary: var(--comp-active-color);
+  --tct-icon-stroke-secondary: var(--comp-active-color);
+}
+[aria-selected=true] .step-child-icon q2-icon {
+  fill: var(--comp-active-color);
+  --tct-icon-stroke-secondary: var(--t-base);
+}
+
+.spacer {
+  height: var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px)));
+  border-left-width: var(--tct-advanced-stepper-child-border-width, var(--t-advanced-stepper-child-border-width, 1px));
+  border-left-style: var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid));
+  border-left-color: var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9)));
+  overflow: hidden;
+  margin-left: calc(var(--comp-top-btn-icon-size) / 2);
+  transition: height var(--comp-tween);
+}
+.spacer ul {
+  opacity: 0;
+  transition: opacity var(--comp-tween);
+}
+.spacer.is-opening ul, .spacer.is-open ul {
+  display: block;
+  opacity: 1 !important;
+}
+.spacer.is-open {
+  overflow: visible;
+}

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment } from '@stencil/core';
+import { Component, Prop, Element, Event, State, Listen, Watch, h, Fragment, } from '@stencil/core';
 import { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2TabContainer {
@@ -27,7 +27,7 @@ export class Q2TabContainer {
     this.setTabs = () => {
       this.tabs = this.tabPanes.map(({ label, value }) => ({
         label: (label && loc(label)) || '',
-        value
+        value,
       }));
     };
     this.onTabClick = (event) => {
@@ -35,7 +35,7 @@ export class Q2TabContainer {
       if (isAlreadySelected)
         return;
       this.change.emit({
-        value: event.target.dataset.value
+        value: event.target.dataset.value,
       });
     };
     this.onTabKeyDown = (event) => {
@@ -65,7 +65,7 @@ export class Q2TabContainer {
       }
     };
     this.moveToAdjacentTab = (value, direction) => {
-      let index = this.tabs.map(({ value }) => value).indexOf(value);
+      const index = this.tabs.map(({ value }) => value).indexOf(value);
       let newIndex;
       switch (direction) {
         case 'next':
@@ -92,7 +92,7 @@ export class Q2TabContainer {
       const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
       return focusedTab;
     };
@@ -108,7 +108,7 @@ export class Q2TabContainer {
       const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
       this.listElement.scrollBy({
         left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     };
     this.onSlotChange = () => {
@@ -166,6 +166,9 @@ export class Q2TabContainer {
     overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
+      const hasTabs = this.tabs.length > 0;
+      if (!hasTabs)
+        return;
       const tab = this.moveFocus(Math.max(index, 0));
       this.value = tab.dataset.value;
       tab.blur();
@@ -174,6 +177,7 @@ export class Q2TabContainer {
   disconnectedCallback() {
     this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
+    this.resizeObserver = null;
     this.mutationObserver = null;
   }
   ///////// Observers /////////
@@ -207,7 +211,7 @@ export class Q2TabContainer {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
     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' : undefined, "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' : 'false', "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"; }

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

@@ -0,0 +1,200 @@
+import { Component, State, Prop, h, Listen, Element, Fragment, Event, } from '@stencil/core';
+import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+export class Q2Tag {
+  constructor() {
+    this.role = 'listitem';
+    /// Getters ///
+    /// Helpers
+    this.determineHasOptions = () => {
+      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+      this.hasOptions = hasOptions;
+    };
+    /// Event Handlers ///
+    this.handleChange = event => {
+      event.stopPropagation();
+      if (!this.hasOptions)
+        return;
+      const { value } = event.detail;
+      this.click.emit({ value });
+    };
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.optionList.toggle();
+    };
+    this.handleKeydown = (event) => {
+      this.optionList.handleExternalKeydown(event);
+    };
+    this.handleButtonFocusout = (event) => {
+      var _a;
+      const relatedTarget = event.relatedTarget;
+      if ((_a = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.tagName) === 'Q2-OPTION') !== null && _a !== void 0 ? _a : false)
+        return;
+      this.open = false;
+    };
+    this.handleOptionListFocusout = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
+        return;
+      if (relatedTarget && relatedTarget.closest('.btn-wrapper'))
+        return;
+      this.open = false;
+    };
+    this.handleWrapperClick = () => {
+      this.dropdownBtn.focus();
+      this.dropdownBtn.click();
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    const observer = new MutationObserver(this.determineHasOptions);
+    observer.observe(this.hostElement, { childList: true, attributes: true });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    if (!this.hasOptions)
+      return;
+    this.dropdownBtn.focus();
+  }
+  optionListStateEvent({ detail: { open } }) {
+    this.open = open;
+    if (!open)
+      this.dropdownBtn.focus();
+  }
+  /// DOM ///
+  render() {
+    const { hasOptions, open } = this;
+    const wrapperClassNames = ['tag-wrapper'];
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (h(Fragment, null,
+      h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() },
+        h("div", { class: "tag" }, this.label),
+        this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick },
+          h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') },
+            h("q2-icon", { type: "options" }))))),
+      this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, onFocusout: this.handleOptionListFocusout, align: "right", type: "menu", "no-select": true },
+        h("slot", null)))));
+  }
+  static get is() { return "q2-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true
+    },
+    "role": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "role",
+      "reflect": true,
+      "defaultValue": "'listitem'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'tertiary'",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "hasOptions": {}
+  }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ value: string }",
+        "resolved": "{ value: string; }",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "optionListState",
+      "method": "optionListStateEvent",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,141 @@
+* {
+  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: inline-block;
+  position: relative;
+}
+
+:host(:not(:last-child)) {
+  margin-inline-end: var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)));
+}
+
+.tag-wrapper {
+  --comp-tag-btn-size: var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));
+  --comp-tag-background: var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));
+  --comp-tag-color: var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));
+  position: relative;
+}
+:host([theme=primary]) .tag-wrapper {
+  --comp-tag-background: var(--t-primary-l5, #61c4ff);
+  --comp-tag-color: var(--t-primary-text, #ffffff);
+}
+:host([theme=secondary]) .tag-wrapper {
+  --comp-tag-background: var(--t-secondary-l5, #61c4ff);
+  --comp-tag-color: var(--t-secondary-text, #000000);
+}
+:host([theme=tertiary]) .tag-wrapper {
+  --comp-tag-background: var(--t-tertiary-l5, #61c4ff);
+  --comp-tag-color: var(--t-tertiary-text, #000000);
+}
+
+.tag {
+  height: var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));
+  line-height: var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));
+  padding-inline: var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)));
+  background: var(--comp-tag-background);
+  color: var(--comp-tag-color);
+  border-radius: var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));
+}
+.has-options .tag {
+  padding-right: var(--comp-tag-btn-size);
+}
+
+.btn-wrapper {
+  --comp-tag-clickable-size: var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));
+  --comp-tag-btn-offset: calc(
+      calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1
+  );
+  height: var(--comp-tag-clickable-size);
+  width: var(--comp-tag-clickable-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: var(--comp-tag-btn-offset);
+  top: var(--comp-tag-btn-offset);
+  cursor: pointer;
+}
+
+button {
+  width: var(--comp-tag-btn-size);
+  height: var(--comp-tag-btn-size);
+  stroke: var(--comp-tag-color);
+  --tct-icon-stroke-primary: var(--comp-tag-color);
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  --tct-icon-size: 18px;
+}
+
+q2-option-list {
+  position: absolute;
+  right: 0;
+}