q2-tecton-elements 1.21.2 → 1.22.1

package/dist/components/q2-tag.js

@@ -0,0 +1,156 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { o as overrideFocus, i as isEventFromElement, l as loc } from './index13.js';
+import { d as defineCustomElement$5 } from './index2.js';
+import { d as defineCustomElement$4 } from './index7.js';
+import { d as defineCustomElement$3 } from './index11.js';
+import { d as defineCustomElement$2 } from './index12.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;position:relative;line-height:0}: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, #d9e1e6);--comp-tag-color:var(--t-secondary-text, #000000)}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--t-tertiary-l5, #f4fafe);--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}";
+
+const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.click = createEvent(this, "click", 7);
+    this.activateFirstOption = false;
+    /// Getters ///
+    /// Helpers
+    this.determineHasOptions = () => {
+      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+      this.hasOptions = hasOptions;
+    };
+    /// Event Handlers ///
+    this.onClickElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        this.popoverElement.open = false;
+      }
+    };
+    this.handleChange = event => {
+      event.stopPropagation();
+      if (!this.hasOptions)
+        return;
+      const { value } = event.detail;
+      this.click.emit({ value });
+    };
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.activateFirstOption = false;
+      this.popoverElement.toggle();
+    };
+    this.handleKeydown = (event) => {
+      this.activateFirstOption = true;
+      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.handleWrapperClick = () => {
+      this.dropdownBtn.focus();
+      this.dropdownBtn.click();
+    };
+    this.open = undefined;
+    this.role = 'listitem';
+    this.label = undefined;
+    this.theme = undefined;
+    this.popoverMinHeight = 150;
+    this.popoverDirection = undefined;
+    this.hasOptions = undefined;
+  }
+  /// 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();
+  }
+  popoverStateHandler({ detail: { open } }) {
+    if (this.open !== open)
+      this.open = open;
+    if (open && this.activateFirstOption) {
+      this.optionList.focus();
+      this.activateFirstOption = false;
+    }
+    else {
+      this.optionList.setActiveElement(null);
+      this.dropdownBtn.focus();
+    }
+  }
+  /// DOM ///
+  render() {
+    const { hasOptions, open } = this;
+    const wrapperClassNames = ['tag-wrapper'];
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, 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-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return stylesCss; }
+}, [1, "q2-tag", {
+    "open": [1540],
+    "role": [513],
+    "label": [513],
+    "theme": [513],
+    "popoverMinHeight": [2, "popover-min-height"],
+    "popoverDirection": [1, "popover-direction"],
+    "hasOptions": [32]
+  }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-tag", "click-elsewhere", "q2-icon", "q2-option-list", "q2-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Tag$1);
+      }
+      break;
+    case "click-elsewhere":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Tag = Q2Tag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Tag, defineCustomElement };

package/dist/components/q2-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Textarea extends Components.Q2Textarea, HTMLElement {}
+export const Q2Textarea: {
+  prototype: Q2Textarea;
+  new (): Q2Textarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-textarea.js

@@ -0,0 +1,265 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createGuid, e as setMessageHeight, o as overrideFocus, i as isEventFromElement, f as labelDOM, m as messagesDOM, l as loc } from './index13.js';
+import { d as defineCustomElement$2 } from './index7.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:block;margin-top:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px)));margin-bottom:var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0));padding-right:var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0));margin-top:var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0));margin-bottom:var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px))));color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.optional-tag{margin-left:var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px))));color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));background-color:var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));box-shadow:var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
+
+const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.input = createEvent(this, "input", 7);
+    this.change = createEvent(this, "change", 7);
+    this.scheduledAfterRender = [];
+    this.guid = createGuid();
+    this.checkRows = () => {
+      const { contentContainer, rows, textareaField, resize } = this;
+      if (!rows || ['none', 'horizontal'].includes(resize))
+        return;
+      contentContainer.style.height = `${contentContainer.offsetHeight}px`;
+      textareaField.removeAttribute('rows');
+    };
+    this.checkCols = () => {
+      const { contentContainer, cols, textareaField, resize } = this;
+      if (!cols || ['none', 'vertical'].includes(resize))
+        return;
+      contentContainer.style.width = `${contentContainer.offsetWidth}px`;
+      textareaField.removeAttribute('cols');
+    };
+    ///// ACTIONS ////////
+    this.onTextareaFocus = () => {
+      this.hasFocus = true;
+      this.valueOnFocus = this.value;
+      setMessageHeight(this);
+    };
+    this.onTextareaBlur = () => {
+      const { valueOnFocus, textareaField: { value }, } = this;
+      this.hasFocus = false;
+      setMessageHeight(this);
+      if (valueOnFocus !== value)
+        this.change.emit({ value });
+    };
+    this.onTextareaInput = (event) => {
+      event.stopPropagation();
+      const value = event.target.value;
+      this.input.emit({ value });
+    };
+    this.onTextareaChange = (event) => {
+      event.stopPropagation();
+      const value = event.target.value;
+      this.change.emit({ value });
+    };
+    this.onMouseDown = (event) => {
+      const { contentContainer } = this;
+      this.downParams = {
+        width: contentContainer.offsetWidth,
+        height: contentContainer.offsetHeight,
+        x: event.clientX,
+        y: event.clientY,
+      };
+      document.addEventListener('mousemove', this.onMouseMove);
+      document.addEventListener('mouseup', this.onMouseUp);
+    };
+    this.onMouseMove = (event) => {
+      this.setHeight(event);
+      this.setWidth(event);
+    };
+    this.onTouchStart = (event) => {
+      if (event.touches.length !== 1)
+        return;
+      event.preventDefault();
+      const { contentContainer } = this;
+      const firstTouch = event.touches[0];
+      this.downParams = {
+        width: contentContainer.offsetWidth,
+        height: contentContainer.offsetHeight,
+        x: firstTouch.pageX,
+        y: firstTouch.pageY,
+      };
+      document.addEventListener('touchmove', this.onTouchMove);
+      document.addEventListener('touchend', this.onTouchMove);
+    };
+    this.onTouchMove = (event) => {
+      this.setHeight(event);
+      this.setWidth(event);
+    };
+    this.onMouseUp = () => {
+      document.removeEventListener('mousemove', this.onMouseMove);
+      this.downParams = null;
+    };
+    this.value = undefined;
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.hideMessages = undefined;
+    this.optional = undefined;
+    this.placeholder = undefined;
+    this.disabled = undefined;
+    this.readonly = undefined;
+    this.spellcheck = undefined;
+    this.maxlength = undefined;
+    this.rows = undefined;
+    this.cols = undefined;
+    this.resize = 'vertical';
+    this.errors = undefined;
+    this.hints = undefined;
+    this.hasFocus = undefined;
+    this.downParams = undefined;
+  }
+  /////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    if (isNaN(this.maxlength)) {
+      this.maxlength = undefined;
+    }
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.push(this.checkRows, this.checkCols);
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  get hasError() {
+    return Array.isArray(this.errors) && this.errors.length > 0;
+  }
+  get messages() {
+    return ((this.errors && this.errors.length > 0 && this.errors) ||
+      (this.hints && this.hints.length > 0 && this.hints) ||
+      []);
+  }
+  get showMessages() {
+    return this.messages.length > 0 && !this.hideMessages;
+  }
+  get inputId() {
+    return `input-guid-${this.guid}`;
+  }
+  get inputDescribedBy() {
+    return this.showMessages ? `${this.inputId}-description` : undefined;
+  }
+  get wrapperClasses() {
+    const errorClass = this.hasError ? ' has-error' : '';
+    const valueClass = !!this.value ? ' has-value' : '';
+    const focusClass = this.hasFocus ? ' has-focus' : '';
+    return `field-container${errorClass}${valueClass}${focusClass}`;
+  }
+  get showResize() {
+    const { resize } = this;
+    return resize && resize !== 'none';
+  }
+  //////// OBSERVERS //////////
+  valueObserver() {
+    const { maxlength, value = '' } = this;
+    if (!maxlength)
+      return;
+    const truncatedValue = value.substr(0, maxlength);
+    if (truncatedValue === value)
+      return;
+    this.change.emit({ value: truncatedValue });
+  }
+  rowsObserver() {
+    this.contentContainer.style.height = null;
+  }
+  colsObserver() {
+    this.contentContainer.style.width = null;
+  }
+  hintsObserver() {
+    this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
+  }
+  errorsObserver() {
+    this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
+  }
+  ///////// HOST ELEMENT EVENTS //////
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.textareaField.focus();
+  }
+  onHostElementChange(event) {
+    if (event.target === this.hostElement && !this.hostElement.onchange) {
+      this.value = event.detail.value;
+    }
+  }
+  setWidth(event) {
+    var _a, _b;
+    const { contentContainer, resize, downParams: { width, x }, } = this;
+    const resizeX = ['both', 'horizontal'].includes(resize);
+    if (!resizeX)
+      return;
+    const eventX = event instanceof MouseEvent ? event.clientX : (_b = (_a = event.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX) !== null && _b !== void 0 ? _b : 0;
+    const newWidth = width - (x - eventX);
+    contentContainer.style.width = `${newWidth}px`;
+  }
+  setHeight(event) {
+    var _a, _b;
+    const { contentContainer, resize, downParams: { height, y }, } = this;
+    const resizeY = ['both', 'vertical'].includes(resize);
+    if (!resizeY)
+      return;
+    const eventY = event instanceof MouseEvent ? event.clientY : (_b = (_a = event.touches[0]) === null || _a === void 0 ? void 0 : _a.pageY) !== null && _b !== void 0 ? _b : 0;
+    const newHeight = height - (y - eventY);
+    contentContainer.style.height = `${newHeight}px`;
+  }
+  /////// VIEW METHODS ///////
+  render() {
+    return (h("div", { class: this.wrapperClasses }, labelDOM(this), h("div", { class: "content-container", ref: el => (this.contentContainer = el) }, this.inputDOM(), this.maxlength ? this.maxLengthDOM() : '', messagesDOM(this))));
+  }
+  maxLengthDOM() {
+    var _a;
+    return (h("div", { class: "max-length", "aria-hidden": "true" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, "/", this.maxlength));
+  }
+  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.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" }))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["valueObserver"],
+    "rows": ["rowsObserver"],
+    "cols": ["colsObserver"],
+    "hints": ["hintsObserver"],
+    "errors": ["errorsObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-textarea", {
+    "value": [1025],
+    "label": [513],
+    "hideLabel": [516, "hide-label"],
+    "hideMessages": [516, "hide-messages"],
+    "optional": [516],
+    "placeholder": [513],
+    "disabled": [516],
+    "readonly": [516],
+    "spellcheck": [516],
+    "maxlength": [1538],
+    "rows": [514],
+    "cols": [514],
+    "resize": [513],
+    "errors": [16],
+    "hints": [16],
+    "hasFocus": [32],
+    "downParams": [32]
+  }, [[0, "focus", "onHostElementFocus"], [0, "change", "onHostElementChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-textarea", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Textarea$1);
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Textarea = Q2Textarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Textarea, defineCustomElement };

package/dist/components/q2-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Tooltip extends Components.Q2Tooltip, HTMLElement {}
+export const Q2Tooltip: {
+  prototype: Q2Tooltip;
+  new (): Q2Tooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-tooltip.js

@@ -0,0 +1,112 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+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)}";
+
+const Q2Tooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.animationEndCount = 0;
+    this.label = undefined;
+    this.block = undefined;
+    this.multiline = undefined;
+    this.persistent = undefined;
+    this.immediate = undefined;
+    this.position = 'n';
+    this.focusClass = undefined;
+  }
+  /// Getters ///
+  get shouldBeVisible() {
+    if (this.persistent)
+      return true;
+    return this.hostElement.matches(':hover, :focus-within');
+  }
+  /// Helpers //
+  checkFocusClass() {
+    if (!this.shouldBeVisible)
+      return;
+    const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);
+    this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';
+    if (isKeyboardFocus)
+      return;
+  }
+  hideTooltip() {
+    if (this.focusClass === 'has-generic-focus')
+      this.focusClass = 'has-generic-focus-out';
+    else
+      this.focusClass = null;
+  }
+  animationEndHandler() {
+    this.animationEndCount = this.animationEndCount + 1;
+    const { focusClass, animationEndCount } = this;
+    // animationEnd is fired once for :before and once for :after pseudo elements
+    // there are multiple animations defined for .has-generic-focus
+    // so we need to wait for all of them to finish before we can remove the class
+    if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {
+      this.focusClass = null;
+      this.animationEndCount = 0;
+    }
+  }
+  findFocusVisibleElement(element) {
+    if (!element)
+      return;
+    if (element.shadowRoot)
+      element = this.findFocusVisibleElement(element.shadowRoot.activeElement);
+    return (element === null || element === void 0 ? void 0 : element.matches(':focus-visible')) ? element : null;
+  }
+  /// Listeners ///
+  keyUpHandler(event) {
+    switch (event.key) {
+      case 'Esc':
+      case 'Escape':
+        this.hideTooltip();
+        break;
+    }
+  }
+  focusHandler() {
+    this.checkFocusClass();
+  }
+  focusOutHandler() {
+    if (this.shouldBeVisible)
+      return;
+    if (this.focusClass === 'has-generic-focus')
+      this.focusClass = 'has-generic-focus-out';
+  }
+  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));
+  }
+  get hostElement() { return this; }
+  static get style() { return stylesCss; }
+}, [1, "q2-tooltip", {
+    "label": [513],
+    "block": [516],
+    "multiline": [516],
+    "persistent": [516],
+    "immediate": [516],
+    "position": [513],
+    "focusClass": [32]
+  }, [[0, "keyup", "keyUpHandler"], [2, "focus", "focusHandler"], [0, "focusout", "focusOutHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Tooltip$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Tooltip = Q2Tooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Tooltip, defineCustomElement };