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

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;
+}

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

@@ -26,7 +26,7 @@ export class Q2Textarea {
       setMessageHeight(this);
     };
     this.onTextareaBlur = () => {
-      const { valueOnFocus, textareaField: { value } } = this;
+      const { valueOnFocus, textareaField: { value }, } = this;
       this.hasFocus = false;
       setMessageHeight(this);
       if (valueOnFocus !== value)
@@ -48,7 +48,7 @@ export class Q2Textarea {
         width: contentContainer.offsetWidth,
         height: contentContainer.offsetHeight,
         x: event.clientX,
-        y: event.clientY
+        y: event.clientY,
       };
       document.addEventListener('mousemove', this.onMouseMove);
       document.addEventListener('mouseup', this.onMouseUp);
@@ -67,7 +67,7 @@ export class Q2Textarea {
         width: contentContainer.offsetWidth,
         height: contentContainer.offsetHeight,
         x: firstTouch.pageX,
-        y: firstTouch.pageY
+        y: firstTouch.pageY,
       };
       document.addEventListener('touchmove', this.onTouchMove);
       document.addEventListener('touchend', this.onTouchMove);
@@ -157,7 +157,7 @@ export class Q2Textarea {
   }
   setWidth(event) {
     var _a, _b;
-    const { contentContainer, resize, downParams: { width, x } } = this;
+    const { contentContainer, resize, downParams: { width, x }, } = this;
     const resizeX = ['both', 'horizontal'].includes(resize);
     if (!resizeX)
       return;
@@ -167,7 +167,7 @@ export class Q2Textarea {
   }
   setHeight(event) {
     var _a, _b;
-    const { contentContainer, resize, downParams: { height, y } } = this;
+    const { contentContainer, resize, downParams: { height, y }, } = this;
     const resizeY = ['both', 'vertical'].includes(resize);
     if (!resizeY)
       return;
@@ -194,7 +194,7 @@ export class Q2Textarea {
   inputDOM() {
     return (h("div", { class: "input-container" },
       h("textarea", { id: this.inputId, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }),
-      this.hasError ? h("q2-icon", { type: "error", class: "icon-error" }) : '',
+      this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''),
       this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 },
         h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
           h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));

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

@@ -9,10 +9,7 @@ export class TectonTabPane {
     };
   }
   get iframeTitle() {
-    return this.moduleId
-      .split('.')
-      .slice(-2)
-      .join('-');
+    return this.moduleId.split('.').slice(-2).join('-');
   }
   componentWillRender() {
     const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
@@ -234,13 +231,9 @@ export class TectonTabPane {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Array<{ key: string; value: string }>",
+        "original": "{ key: string; value: string }[]",
         "resolved": "{ key: string; value: string; }[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
+        "references": {}
       },
       "required": false,
       "optional": false,

package/dist/collection/utils/index.js

@@ -11,12 +11,15 @@ export function addSmoothScrollPolyfill() {
   if (!isSafari())
     return false;
   smoothscroll.polyfill();
-  return (window['__forceSmoothScrollPolyfill__'] = true);
+  return (window.__forceSmoothScrollPolyfill__ = true);
 }
 export function isFirefox() {
   const userAgent = navigator.userAgent.toLowerCase();
   return userAgent.includes('firefox');
 }
+export function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
 export function isSafari() {
   const userAgent = navigator.userAgent.toLowerCase();
   return userAgent.includes('safari') && !userAgent.includes('chrome');
@@ -54,9 +57,16 @@ export function labelDOM(target) {
   const { label, hideLabel } = target;
   if (!label || hideLabel)
     return;
+  let helpText = '';
+  if (target.optional) {
+    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+  }
+  if (target.readonly) {
+    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+  }
   return (h("label", { htmlFor: target.inputId, class: target.readonly ? 'readonly-field' : '' },
     loc(target.label),
-    target.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : ('')));
+    helpText));
 }
 export function handleAriaLabel(target) {
   const { ariaLabel } = target;
@@ -76,17 +86,19 @@ export function messagesDOM(target) {
 export function setMessageHeight(target) {
   const messageContainer = target.hostElement.shadowRoot.querySelector('.messages-container');
   const q2Message = messageContainer.querySelector('q2-message');
-  const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;
-  if (messageContainer.style.getPropertyValue('height') === `${height}px`)
-    return;
-  if (height === 0) {
-    q2Message.classList.add('invisible');
-    messageContainer.style.removeProperty('height');
-  }
-  else {
-    q2Message.classList.remove('invisible');
-    messageContainer.style.setProperty('height', `${height}px`);
-  }
+  nextPaint(() => {
+    const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;
+    if (messageContainer.style.getPropertyValue('height') === `${height}px`)
+      return;
+    if (height === 0) {
+      q2Message.classList.add('invisible');
+      messageContainer.style.removeProperty('height');
+    }
+    else {
+      q2Message.classList.remove('invisible');
+      messageContainer.style.setProperty('height', `${height}px`);
+    }
+  });
 }
 export function setPopProperties(target) {
   const { dropdownContainer, popDirection } = target;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement } from './index-be8376c0.js';
+import { r as registerInstance, c as createEvent, g as getElement } from './index-dbfb3ecc.js';
 
 const ClickElsewhere = class {
   constructor(hostRef) {
@@ -11,8 +11,7 @@ const ClickElsewhere = class {
     this.isCurrentlyFocused = false;
     this.mouseHandler = (event) => {
       const isCurrentlyFocused = this.shadowContains(this.findActiveElement());
-      const aboutToBeFocused = this.shadowContains(this.shadowEventTarget(event)) ||
-        this.originatesInSlots(event.target);
+      const aboutToBeFocused = this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target);
       if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {
         this.isCurrentlyFocused = false;
         this.change.emit();
@@ -69,12 +68,11 @@ const ClickElsewhere = class {
   }
   originatesInSlots(target) {
     const slots = this.hostElement.querySelectorAll('slot');
-    for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
-      const currentSlot = slots[slotIndex];
+    for (const currentSlot of Array.from(slots)) {
       const lightNodes = (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||
         this.hostElement.childNodes;
-      for (let nodeIndex = 0; nodeIndex < lightNodes.length; nodeIndex++) {
-        if (lightNodes[nodeIndex].contains(target)) {
+      for (const currentNode of Array.from(lightNodes)) {
+        if (currentNode.contains(target)) {
           return true;
         }
       }