q2-tecton-elements 1.66.2 → 1.67.1

package/dist/{esm/q2-tag.entry.js → components/q2-tag2.js}

@@ -1,13 +1,19 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-CGkHOjh1.js';
-import { o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-B4WYBDS9.js';
-import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-B7adb3xs.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index2.js';
+import { m as mirrorEmit } from './mirror-emit.js';
+import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
+import { d as defineCustomElement$4 } from './click-elsewhere2.js';
+import { d as defineCustomElement$3 } from './q2-icon2.js';
+import { d as defineCustomElement$2 } from './q2-option-list2.js';
+import { d as defineCustomElement$1 } from './q2-popover2.js';
 
-const q2TagCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);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, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, 0);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, inherit);font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag{display:flex;align-items:center;width:max-content;gap:6px;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)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.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);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{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;padding-right:6px;--tct-icon-size:18px}";
+const q2TagCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);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, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, 0);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, inherit);font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag-wrapper:focus-visible{box-shadow:var(--tct-tag-focus-visible-box-shadow, var(--const-double-focus-ring))}.tag{display:flex;align-items:center;width:max-content;gap:6px;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)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.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);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{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;padding-right:6px;--tct-icon-size:18px}";
 
-const Q2Tag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const Q2Tag = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.click = createEvent(this, "click", 7);
         this.tctClick = createEvent(this, "tctClick", 7);
         var _a;
@@ -197,13 +203,60 @@ const Q2Tag = class {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: '2ce592e9fc8db8d547cad71623270837ec0539d6' }, h("click-elsewhere", { key: 'b0a0ad314e84ccae1e06b197bc6fec8f1c333349', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: 'd67e1d087a62530ef3c013f070ae522531acd508', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '6c2484d7110eeff81dfebef4c05dec99adffe935', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'db0c912240b4e2425c16bce894abb8be42ab67e2' })))))));
+        return (h(Host, { key: '664af4451fdb556b1746ec0f1a0a66de86642a7a' }, h("click-elsewhere", { key: '8da25535a510070733d25fa1d63dedfa0865b7ab', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '28397ef79ce03d335959ad993a4de4278073a9ba', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '3379d0003bde9036485c06ff696a2f08fc599451', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '1cf6372351972e02563e74ba1e9cc79e261a9a2a' })))))));
     }
-    get hostElement() { return getElement(this); }
-};
-Q2Tag.style = q2TagCss;
+    get hostElement() { return this; }
+    static get style() { return q2TagCss; }
+}, [1, "q2-tag", {
+        "hoist": [4],
+        "label": [513],
+        "open": [1540],
+        "optionListLabel": [1, "option-list-label"],
+        "popoverAlignment": [1025, "popover-alignment"],
+        "popoverDirection": [1, "popover-direction"],
+        "popoverMaxHeight": [2, "popover-max-height"],
+        "popoverMinHeight": [2, "popover-min-height"],
+        "theme": [513],
+        "optionCount": [32],
+        "closePopover": [64],
+        "openPopover": [64],
+        "selectOption": [64]
+    }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
+function defineCustomElement() {
+    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);
+            }
+            break;
+        case "click-elsewhere":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "q2-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "q2-option-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "q2-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { Q2Tag as q2_tag };
-//# sourceMappingURL=q2-tag.entry.js.map
+export { Q2Tag as Q, defineCustomElement as d };
+//# sourceMappingURL=q2-tag2.js.map
 
-//# sourceMappingURL=q2-tag.entry.js.map
+//# sourceMappingURL=q2-tag2.js.map

package/dist/components/q2-tag2.js.map

@@ -0,0 +1 @@
+{"file":"q2-tag2.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,mqIAAmqI;;MC0BvqI,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AADlB,IAAA,WAAA,GAAA;;;;;;;;;AAwBI;;;;AAIG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAY,CAAC,EAAC,CAAA,EAAA,GAAA,MAAM,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAA;;AAmBjD,QAAA,IAAe,CAAA,eAAA,GAAW,SAAS;;AAInC,QAAA,IAAgB,CAAA,gBAAA,GAAqB,OAAO;AAkI5C,QAAA,IAAoB,CAAA,oBAAA,GAAG,MAAK;AACxB,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,MAAM;AAC7E,YAAA,IAAI,CAAC,WAAW,GAAG,eAAe;AACtC,SAAC;AAED,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,MAAM,IAAI,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC;AACjG,YAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,gBAAgB,EAAE,KAAI,EAAE,CAAC;YACnE,IAAI,CAAC,gBAAgB,CAAC,MAAM;gBAAE;AAE9B,YAAA,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC;YAChD,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;AACxC,gBAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;oBAC1D,OAAO,CAAC,MAAM,EAAE;;AAExB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,oBAAoB,GAAG,OAAO,KAAiB,KAAI;;AAC/C,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B;YACxD,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,aAAa,CAAC;gBAAE;AAClD,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAAE;AAC9C,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACrB,SAAC;AAED,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK,IAAG;YACnB,KAAK,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE;AACvB,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM;AAE9B,YAAA,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;AACtD,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,OAAO,KAAiB,KAAI;YACtC,KAAK,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW;AACrD,YAAA,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE;gBAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;AACxD,gBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AACxB,gBAAA,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;;iBAC/C;AACH,gBAAA,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;;AAE1C,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,OAAO,KAAoB,KAAI;AAC3C,YAAA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;AAC7E,YAAA,IAAI,eAAe;gBAAE;YAErB,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW;AACrD,YAAA,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;gBACpC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;AACxD,gBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AACxB,gBAAA,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;;iBAC/C;AACH,gBAAA,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC;;AAEpD,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AACxB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AAC5B,SAAC;AAED,QAAA,IAAoB,CAAA,oBAAA,GAAG,MAAK;AACxB,YAAA,IAAI,EAAE,kBAAkB,IAAI,MAAM,CAAC;gBAAE;YACrC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC;AAC9D,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AACzE,YAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;AACpC,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAkB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmC;AACxD,YAAA,IAAI,MAAM,CAAC,SAAS,KAAK,iBAAiB,EAAE;gBACxC,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,gBAAA,IAAI,CAAC,cAAc;oBAAE;AACrB,gBAAA,cAAc,CAAC,IAAI,GAAG,KAAK;;AAEnC,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;YACtB,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,qBAAqB,EAAE;AAChC,SAAC;AA6FJ;;;IAtQG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;QACb,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,oBAAoB,EAAE;;IAG/B,gBAAgB,GAAA;AACZ,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;QAC/B,IAAI,CAAC,qBAAqB,EAAE;;;;AAOhC,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;QAClD,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;;AAI5B,IAAA,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAkC,EAAA;AACpE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AACxC,QAAA,IAAI,IAAI;YAAE;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC;;;;AAM1C;;;AAGG;AAEH,IAAA,MAAM,YAAY,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;QACrC,IAAI,CAAC,cAAc,EAAE;;AAGzB;;;AAGG;AAEH,IAAA,MAAM,WAAW,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI;YAAE;QACpC,IAAI,CAAC,cAAc,EAAE;;AAGzB;;;;;;;AAOG;IAEH,MAAM,YAAY,CAAC,KAAK,EAAA;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE;AACvB,QAAA,MAAM,IAAI,CAAC,WAAW,EAAE;QACxB,MAAM,gBAAgB,EAAE;QACxB,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE;AACrD,QAAA,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;AACvE,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;;;;IAM1B,cAAc,GAAA;AACV,QAAA,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI;AAC5B,QAAA,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,KAAK,EAAE;AACpB,QAAA,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,KAAK,EAAE;QACpB,WAAW,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;;;IA8FtD,mBAAmB,GAAA;AACf,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAC,IAAI,EAAA,aAAA,EACE,MAAM,EAAA,EAEjB,GAAG,CAAC,uCAAuC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAC/D;;IAId,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC;QACjC,IAAI,IAAI,CAAC,WAAW;AAAE,YAAA,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC;AAC3D,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC;AAE9C,QAAA,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAC3C,iBAAiB,IACd,EAAC,QAAQ,EAAA,IAAA,EACL,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAEhC,CAAA,CAAA,QAAA,EAAA,EACI,KAAK,EAAC,aAAa,EACnB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAC1B,SAAA,EAAA,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAA,eAAA,EACvB,aAAa,EACZ,eAAA,EAAA,IAAI,GAAG,MAAM,GAAG,OAAO,EAAA,kBAAA,EACrB,oBAAoB,EAAA,YAAA,EACzB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,EAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAO,EAChE,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,SAAS,EAAA,CAAW,CAC7B,CACP,EACL,IAAI,CAAC,mBAAmB,EAAE,CACpB,KAEX,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAG,CAAA,EACxB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CACd,CACJ,CACT,EAEA,iBAAiB,KACd,CACI,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAE5B,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,EAAE,EAAC,aAAa,EAChB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAA,WAAA,EAAA,IAAA,EAAA,EAGrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACK,CACR,CAChB,CACa,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, 0);\n    border-color: var(--comp-tag-border-color);\n    font-size: var(--tct-tag-font-size, inherit);\n    font-weight: var(--tct-tag-font-weight, inherit);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n\n    &:focus-visible {\n        box-shadow: var-list(--tct-tag-focus-visible-box-shadow, --const-double-focus-ring);\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n        --tct-icon-stroke-primary: var(--tct-tag-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-decorator-icon-secondary-stroke);\n    }\n\n    :host([theme=\"primary\"]) & ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-stroke-primary: var(--tct-tag-primary-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-primary-decorator-icon-secondary-stroke);\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Tag\n * @category Display\n * @summary Use for displaying metadata labels or categories on content.\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    tctClick: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        mirrorEmit(this, ['click', 'tctClick'], { value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                    aria-label={loc(this.label)}\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-textarea.js

@@ -3,7 +3,7 @@ import { f as debounce, c as createGuid, s as setMessageHeight, o as overrideFoc
 import { m as mirrorEmit } from './mirror-emit.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
 
-const q2TextareaCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);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, inherit));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.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)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);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, 4px));--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-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))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.content-container{--comp-textarea-min-height:46px;--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{--comp-textarea-padding:var(--tct-textarea-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)))));--comp-textarea-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--comp-textarea-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)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);font-size:var(--tct-textarea-font-size, inherit);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(--comp-textarea-padding);backdrop-filter:var(--comp-textarea-backdrop-filter);background:var(--comp-textarea-background);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(--comp-textarea-border-color);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:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), 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%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea:focus-visible{box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}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}textarea.resize-vertical-auto{overflow:hidden}.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, #d20a0a)))}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, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, 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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));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:var(--tct-textarea-messages-margin-top, 2px);z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-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))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-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,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
+const q2TextareaCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}: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{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);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, inherit));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.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)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);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, 4px));--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-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))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.content-container{--comp-textarea-min-height:46px;--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{--comp-textarea-padding:var(--tct-textarea-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)))));--comp-textarea-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--comp-textarea-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)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);font-size:var(--tct-textarea-font-size, inherit);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(--comp-textarea-padding);backdrop-filter:var(--comp-textarea-backdrop-filter);background:var(--comp-textarea-background);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(--comp-textarea-border-color);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:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), 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%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea:focus-visible{box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}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}textarea.resize-vertical-auto{overflow:hidden}.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, #d20a0a)))}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, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, 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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));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:var(--tct-textarea-messages-margin-top, 2px);z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-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))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-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,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 
 const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends HTMLElement {
     constructor() {
@@ -282,7 +282,7 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         ]))));
     }
     render() {
-        return (h("div", { key: 'a9b5fe04a27d30b849855d25b4ab470a6670827a', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '73bb18321f257624ca7563572cee97d4d77a2879', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '1a53c8b1528031f5ccb957f2a2320f7a8a8f4607', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '1de221d01fd339d749b557d408acabdc06c07ecc', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-textarea.js.map

@@ -1 +1 @@
-{"file":"q2-textarea.js","mappings":"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","names":["Q2Textarea","__stencil_proxyCustomElement"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n    font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\nlabel {\n    --comp-label-padding: #{var-list(\n            --tct-textarea-label-padding,\n            unquote(\n                '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n            )\n        )};\n    --comp-label-margin: #{var-list(\n            --tct-textarea-label-margin,\n            unquote(\n                '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    display: block;\n    padding: var(--comp-label-padding);\n    margin: var(--comp-label-margin);\n    color: var-list(var-prefixer(textarea-label-font-color), inherit);\n    font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n    text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n    letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n    transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n    .has-error & {\n        color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-hover-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-hover-label-font-color,\n                --tct-textarea-label-font-color,\n                inherit\n            );\n        }\n    }\n\n    :host(:focus-within) & {\n        color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n    }\n\n    :host(:focus-within) .has-error & {\n        color: var-list(\n            --tct-textarea-error-focus-label-font-color,\n            var-prefixer(textarea-error-label-font-color),\n            --tct-textarea-focus-label-font-color,\n            var-prefixer(textarea-label-font-color),\n            inherit\n        );\n    }\n}\n\n.optional-tag {\n    --comp-label-optional-margin: #{var-list(\n            --tct-textarea-label-optional-margin,\n            unquote(\n                '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    margin: var(--comp-label-optional-margin);\n    color: var-list(\n        var-prefixer(textarea-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    height: 100%;\n    --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n    --comp-textarea-border-top-left-radius: #{var-list(\n            var-prefixer(textarea-border-top-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-top-right-radius: #{var-list(\n            var-prefixer(textarea-border-top-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-right-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-left-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-left-radius),\n            --comp-default-border-radius\n        )};\n    --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);\n    --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n        var-list(var-prefixer(textarea-border-right-width), 1px)\n        var-list(var-prefixer(textarea-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-border-left-width), 1px)};\n    --comp-textarea-icon-clearance: 34px;\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n        opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n    }\n}\n\n.content-container {\n    --comp-textarea-min-height: 46px;\n    --comp-textarea-min-width: 150px;\n    position: relative;\n    display: inline-block;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n    :host(:not([cols])) & {\n        width: 100%;\n    }\n}\n\ntextarea {\n    --comp-textarea-padding: #{var-list(\n            --tct-textarea-padding,\n            unquote(\n                '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n            )\n        )};\n    --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n    --comp-textarea-border-color: #{var-list(\n            var-prefixer(textarea-border-color),\n            var-prefixer(input-border-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-textarea-background: #{var-list(\n            --tct-textarea-background,\n            var-prefixer(textarea-bg),\n            --tct-input-background,\n            var-prefixer(input-bg),\n            --t-gray-14,\n            #fcfcfd\n        )};\n    --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n    --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n        var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n    font-size: var(--tct-textarea-font-size, inherit);\n    resize: none;\n    height: 100%;\n    -webkit-appearance: none;\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    padding: var(--comp-textarea-padding);\n    backdrop-filter: var(--comp-textarea-backdrop-filter);\n    background: var(--comp-textarea-background);\n    color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n    border-width: var(--comp-textarea-border-width);\n    border-style: solid;\n    border-color: var(--comp-textarea-border-color);\n    border-radius: var(--comp-textarea-border-radius);\n    box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n    scrollbar-width: thin;\n    scrollbar-color: var(--t-a11y-gray-color) transparent;\n    --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    transition:\n        background var(--comp-textarea-tween),\n        backdrop-filter var(--comp-textarea-tween),\n        border-width var(--comp-textarea-tween),\n        border-color var(--comp-textarea-tween),\n        box-shadow var(--comp-textarea-tween);\n\n    &::-webkit-scrollbar {\n        width: var(--app-scale-1x);\n        height: var(--app-scale-1x);\n        margin: var(--app-scale-1x);\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--t-a11y-gray-color);\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &:not([cols]) {\n        width: 100%;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n        backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n        border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n    }\n\n    &:hover {\n        border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-hover-border-color,\n                var-prefixer(textarea-error-border-color),\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-hover-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-hover-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-hover-background,\n                --tct-textarea-error-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-hover-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-hover-box-shadow,\n                --comp-textarea-hover-ring\n            );\n        }\n    }\n\n    &:focus {\n        border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-focus-border-color,\n                --tct-textarea-error-border-color,\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-focus-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-focus-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-focus-background,\n                --tct-textarea-error-background,\n                --tct-textarea-focus-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-focus-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-focus-box-shadow,\n                --const-double-focus-ring\n            );\n        }\n    }\n    &:focus-visible {\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n    }\n\n    &::placeholder {\n        color: var-list(\n            var-prefixer(textarea-placeholder-font-color),\n            --t-input-placeholder-font-color,\n            --tct-gray-7,\n            --app-gray-7,\n            --tct-gray-d1,\n            --app-gray-d1,\n            #666666\n        );\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    &.resize-vertical-auto {\n        overflow: hidden;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n\n        &:not(:focus) {\n            border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        }\n    }\n}\n\nq2-icon {\n    margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n    margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n    pointer-events: none;\n    position: absolute;\n    top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n    color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n    right: 0;\n    margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n    --tct-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n    --t-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n}\n\n.icon-error {\n    color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n    height: 0px;\n    overflow: hidden;\n    background: var-list(\n        --tct-message-background,\n        --tct-message-bg,\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    box-shadow: var-list(\n        var-prefixer(textarea-message-box-shadow),\n        --tct-box-shadow-1,\n        --app-shadow-1,\n        unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n    );\n    transition: height\n        var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    margin-top: var(--tct-textarea-messages-margin-top, 2px);\n    z-index: 1;\n    position: absolute;\n    width: 100%;\n    color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n    color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(\n        var-prefixer(textarea-max-length-font-size),\n        --tct-font-size-small,\n        --app-font-size-small,\n        12px\n    );\n    position: absolute;\n    right: 0;\n}\n\n.btn-resize {\n    --tct-textarea-resize-icon-padding: calc(\n        calc(\n                #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n                        var-prefixer(textarea-resize-icon-size),\n                        12px\n                    )}\n            ) / 2\n    );\n    width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n    height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n    background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n    stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n    stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n    border: 0;\n    position: absolute;\n    right: var-list(\n        --tct-textarea-resize-right,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    bottom: var-list(\n        --tct-textarea-resize-bottom,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    display: block;\n    padding: var-list(var-prefixer(textarea-resize-icon-padding));\n    font-size: 0;\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([resize='both']) & {\n        cursor: se-resize;\n    }\n\n    :host([resize='vertical']) &,\n    :host([resize='vertical-auto']) & {\n        cursor: s-resize;\n    }\n\n    :host([resize='horizontal']) & {\n        cursor: e-resize;\n    }\n}\n","import {\n    Component,\n    EventEmitter,\n    Prop,\n    Event,\n    Element,\n    Fragment,\n    State,\n    h,\n    Watch,\n    Listen,\n    Method,\n} from '@stencil/core';\nimport {\n    createGuid,\n    debounce,\n    isEventFromElement,\n    renderLabel,\n    loc,\n    renderMessages,\n    overrideFocus,\n    setMessageHeight,\n} from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Textarea\n * @category Forms\n * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n    // #region Own Properties\n\n    contentContainer?: HTMLDivElement;\n    debouncedScreenReaderCharacterCount = debounce(() => {\n        this.updateScreenReaderCharacterCount();\n    }, 2000);\n    describeByScreenReaderCharacterCount = true;\n    guid = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    textareaField?: HTMLTextAreaElement;\n    valueOnFocus: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    downParams: Record<string, number>;\n\n    @State()\n    hasFocus: boolean;\n\n    @State()\n    screenReaderCharacterCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Defines the number of columns displayed in the field.\n     * If not set, the field will be full-width and respond to the window size.\n     */\n    @Prop({ reflect: true })\n    cols: number;\n\n    /** Indicates the field cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Each item in the `errors` array will appear below the input field when the field is focused.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true })\n    hideLabel: boolean;\n\n    /**\n     * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n     * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n     */\n    @Prop({ reflect: true })\n    hideMessages: boolean;\n\n    /**\n     * Each item in the `hints` array will appear below the input field when the field is focused.\n     * @info\n     * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n     * Once all errors are resolved, the hints display the next time the field is focused.\n     * @localizable\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The label that appears above the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n     * Make sure you account for them when setting the `maxlength` value.\n     * @info\n     * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n     */\n    @Prop({ reflect: true, mutable: true })\n    maxlength: number;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user focuses on the field and provides input.\n     * @info\n     * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Indicates how the field is resizable. */\n    @Prop({ reflect: true })\n    resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n\n    /** Defines the number of rows displayed in the field. */\n    @Prop({ reflect: true })\n    rows: number;\n\n    /** Determines whether the field is subject to spell-checking by the underlying browser or OS. */\n    @Prop({ reflect: true })\n    spellcheck: boolean;\n\n    /** The value of the field. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     * @deprecated Use 'tctInput' instead\n     * @legacyEvent\n     */\n    @Event()\n    input: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     */\n    @Event()\n    tctInput: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('maxlength')\n    maxlengthObserver() {\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value: truncatedValue });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get inputDescribedBy() {\n        let describedBy = undefined;\n\n        if (this.showMessages) {\n            describedBy = `${this.inputId}-description`;\n        }\n\n        // Remove screen reader character count from described by after typing\n        // starts to avoid double announcement. It's needed on focus to announce\n        // the character count when field gains focus.\n        if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n            describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n        }\n\n        return describedBy;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        document.removeEventListener('mouseup', this.onMouseUp);\n        this.downParams = null;\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.describeByScreenReaderCharacterCount = true;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) mirrorEmit(this, ['change', 'tctChange'], { value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value });\n    };\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.describeByScreenReaderCharacterCount = false;\n        this.increaseHeightIfOverflowing();\n        if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n        mirrorEmit(this, ['input', 'tctInput'], { value });\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    updateScreenReaderCharacterCount = () => {\n        this.screenReaderCharacterCount = this.value?.length || 0;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderInput() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderMaxLength() {\n        return (\n            <Fragment>\n                <div\n                    class=\"max-length\"\n                    aria-hidden=\"true\"\n                >\n                    {this.value?.length || 0}/{this.maxlength}\n                </div>\n                <div\n                    aria-live=\"polite\"\n                    class=\"sr\"\n                    id={`${this.inputId}-max-length`}\n                    test-id=\"max-length-sr\"\n                >\n                    {loc('tecton.element.textarea.characterCount.screenReader', [\n                        this.screenReaderCharacterCount,\n                        this.maxlength,\n                    ])}\n                </div>\n            </Fragment>\n        );\n    }\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {renderLabel(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.renderInput()}\n                    {this.maxlength ? this.renderMaxLength() : ''}\n                    {renderMessages(this)}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-textarea.js","mappings":"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","names":["Q2Textarea","__stencil_proxyCustomElement"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n    font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\nlabel {\n    --comp-label-padding: #{var-list(\n            --tct-textarea-label-padding,\n            unquote(\n                '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n            )\n        )};\n    --comp-label-margin: #{var-list(\n            --tct-textarea-label-margin,\n            unquote(\n                '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    display: block;\n    padding: var(--comp-label-padding);\n    margin: var(--comp-label-margin);\n    color: var-list(var-prefixer(textarea-label-font-color), inherit);\n    font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n    text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n    letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n    transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n    .has-error & {\n        color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-hover-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-hover-label-font-color,\n                --tct-textarea-label-font-color,\n                inherit\n            );\n        }\n    }\n\n    :host(:focus-within) & {\n        color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n    }\n\n    :host(:focus-within) .has-error & {\n        color: var-list(\n            --tct-textarea-error-focus-label-font-color,\n            var-prefixer(textarea-error-label-font-color),\n            --tct-textarea-focus-label-font-color,\n            var-prefixer(textarea-label-font-color),\n            inherit\n        );\n    }\n}\n\n.optional-tag {\n    --comp-label-optional-margin: #{var-list(\n            --tct-textarea-label-optional-margin,\n            unquote(\n                '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    margin: var(--comp-label-optional-margin);\n    color: var-list(\n        var-prefixer(textarea-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    height: 100%;\n    --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n    --comp-textarea-border-top-left-radius: #{var-list(\n            var-prefixer(textarea-border-top-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-top-right-radius: #{var-list(\n            var-prefixer(textarea-border-top-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-right-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-left-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-left-radius),\n            --comp-default-border-radius\n        )};\n    --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);\n    --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n        var-list(var-prefixer(textarea-border-right-width), 1px)\n        var-list(var-prefixer(textarea-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-border-left-width), 1px)};\n    --comp-textarea-icon-clearance: 34px;\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n        opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n    }\n}\n\n.content-container {\n    --comp-textarea-min-height: 46px;\n    --comp-textarea-min-width: 150px;\n    position: relative;\n    display: inline-block;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n    :host(:not([cols])) & {\n        width: 100%;\n    }\n}\n\ntextarea {\n    --comp-textarea-padding: #{var-list(\n            --tct-textarea-padding,\n            unquote(\n                '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n            )\n        )};\n    --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n    --comp-textarea-border-color: #{var-list(\n            var-prefixer(textarea-border-color),\n            var-prefixer(input-border-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-textarea-background: #{var-list(\n            --tct-textarea-background,\n            var-prefixer(textarea-bg),\n            --tct-input-background,\n            var-prefixer(input-bg),\n            --t-gray-14,\n            #fcfcfd\n        )};\n    --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n    --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n        var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n    font-size: var(--tct-textarea-font-size, inherit);\n    resize: none;\n    height: 100%;\n    -webkit-appearance: none;\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    padding: var(--comp-textarea-padding);\n    backdrop-filter: var(--comp-textarea-backdrop-filter);\n    background: var(--comp-textarea-background);\n    color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n    border-width: var(--comp-textarea-border-width);\n    border-style: solid;\n    border-color: var(--comp-textarea-border-color);\n    border-radius: var(--comp-textarea-border-radius);\n    box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n    scrollbar-width: thin;\n    scrollbar-color: var(--t-a11y-gray-color) transparent;\n    --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    transition:\n        background var(--comp-textarea-tween),\n        backdrop-filter var(--comp-textarea-tween),\n        border-width var(--comp-textarea-tween),\n        border-color var(--comp-textarea-tween),\n        box-shadow var(--comp-textarea-tween);\n\n    &::-webkit-scrollbar {\n        width: var(--app-scale-1x);\n        height: var(--app-scale-1x);\n        margin: var(--app-scale-1x);\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--t-a11y-gray-color);\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &:not([cols]) {\n        width: 100%;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n        backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n        border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-error-box-shadow, var-prefixer(textarea-box-shadow), none);\n    }\n\n    &:hover {\n        border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-hover-border-color,\n                var-prefixer(textarea-error-border-color),\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-hover-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-hover-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-hover-background,\n                --tct-textarea-error-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-hover-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-hover-box-shadow,\n                --comp-textarea-hover-ring\n            );\n        }\n    }\n\n    &:focus {\n        border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-focus-border-color,\n                --tct-textarea-error-border-color,\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-focus-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-focus-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-focus-background,\n                --tct-textarea-error-background,\n                --tct-textarea-focus-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-focus-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-focus-box-shadow,\n                --const-double-focus-ring\n            );\n        }\n    }\n    &:focus-visible {\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n    }\n\n    &::placeholder {\n        color: var-list(\n            var-prefixer(textarea-placeholder-font-color),\n            --t-input-placeholder-font-color,\n            --tct-gray-7,\n            --app-gray-7,\n            --tct-gray-d1,\n            --app-gray-d1,\n            #666666\n        );\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    &.resize-vertical-auto {\n        overflow: hidden;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n\n        &:not(:focus) {\n            border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        }\n    }\n}\n\nq2-icon {\n    margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n    margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n    pointer-events: none;\n    position: absolute;\n    top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n    color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n    right: 0;\n    margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n    --tct-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n    --t-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n}\n\n.icon-error {\n    color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n    height: 0px;\n    overflow: hidden;\n    background: var-list(\n        --tct-message-background,\n        --tct-message-bg,\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    box-shadow: var-list(\n        var-prefixer(textarea-message-box-shadow),\n        --tct-box-shadow-1,\n        --app-shadow-1,\n        unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n    );\n    transition: height\n        var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    margin-top: var(--tct-textarea-messages-margin-top, 2px);\n    z-index: 1;\n    position: absolute;\n    width: 100%;\n    color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n    color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(\n        var-prefixer(textarea-max-length-font-size),\n        --tct-font-size-small,\n        --app-font-size-small,\n        12px\n    );\n    position: absolute;\n    right: 0;\n}\n\n.btn-resize {\n    --tct-textarea-resize-icon-padding: calc(\n        calc(\n                #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n                        var-prefixer(textarea-resize-icon-size),\n                        12px\n                    )}\n            ) / 2\n    );\n    width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n    height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n    background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n    stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n    stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n    border: 0;\n    position: absolute;\n    right: var-list(\n        --tct-textarea-resize-right,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    bottom: var-list(\n        --tct-textarea-resize-bottom,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    display: block;\n    padding: var-list(var-prefixer(textarea-resize-icon-padding));\n    font-size: 0;\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([resize='both']) & {\n        cursor: se-resize;\n    }\n\n    :host([resize='vertical']) &,\n    :host([resize='vertical-auto']) & {\n        cursor: s-resize;\n    }\n\n    :host([resize='horizontal']) & {\n        cursor: e-resize;\n    }\n}\n","import {\n    Component,\n    EventEmitter,\n    Prop,\n    Event,\n    Element,\n    Fragment,\n    State,\n    h,\n    Watch,\n    Listen,\n    Method,\n} from '@stencil/core';\nimport {\n    createGuid,\n    debounce,\n    isEventFromElement,\n    renderLabel,\n    loc,\n    renderMessages,\n    overrideFocus,\n    setMessageHeight,\n} from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Textarea\n * @category Forms\n * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n    // #region Own Properties\n\n    contentContainer?: HTMLDivElement;\n    debouncedScreenReaderCharacterCount = debounce(() => {\n        this.updateScreenReaderCharacterCount();\n    }, 2000);\n    describeByScreenReaderCharacterCount = true;\n    guid = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    textareaField?: HTMLTextAreaElement;\n    valueOnFocus: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    downParams: Record<string, number>;\n\n    @State()\n    hasFocus: boolean;\n\n    @State()\n    screenReaderCharacterCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Defines the number of columns displayed in the field.\n     * If not set, the field will be full-width and respond to the window size.\n     */\n    @Prop({ reflect: true })\n    cols: number;\n\n    /** Indicates the field cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Each item in the `errors` array will appear below the input field when the field is focused.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true })\n    hideLabel: boolean;\n\n    /**\n     * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n     * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n     */\n    @Prop({ reflect: true })\n    hideMessages: boolean;\n\n    /**\n     * Each item in the `hints` array will appear below the input field when the field is focused.\n     * @info\n     * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n     * Once all errors are resolved, the hints display the next time the field is focused.\n     * @localizable\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The label that appears above the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n     * Make sure you account for them when setting the `maxlength` value.\n     * @info\n     * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n     */\n    @Prop({ reflect: true, mutable: true })\n    maxlength: number;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user focuses on the field and provides input.\n     * @info\n     * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Indicates how the field is resizable. */\n    @Prop({ reflect: true })\n    resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n\n    /** Defines the number of rows displayed in the field. */\n    @Prop({ reflect: true })\n    rows: number;\n\n    /** Determines whether the field is subject to spell-checking by the underlying browser or OS. */\n    @Prop({ reflect: true })\n    spellcheck: boolean;\n\n    /** The value of the field. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     * @deprecated Use 'tctInput' instead\n     * @legacyEvent\n     */\n    @Event()\n    input: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     */\n    @Event()\n    tctInput: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('maxlength')\n    maxlengthObserver() {\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value: truncatedValue });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get inputDescribedBy() {\n        let describedBy = undefined;\n\n        if (this.showMessages) {\n            describedBy = `${this.inputId}-description`;\n        }\n\n        // Remove screen reader character count from described by after typing\n        // starts to avoid double announcement. It's needed on focus to announce\n        // the character count when field gains focus.\n        if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n            describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n        }\n\n        return describedBy;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        document.removeEventListener('mouseup', this.onMouseUp);\n        this.downParams = null;\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.describeByScreenReaderCharacterCount = true;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) mirrorEmit(this, ['change', 'tctChange'], { value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value });\n    };\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.describeByScreenReaderCharacterCount = false;\n        this.increaseHeightIfOverflowing();\n        if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n        mirrorEmit(this, ['input', 'tctInput'], { value });\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    updateScreenReaderCharacterCount = () => {\n        this.screenReaderCharacterCount = this.value?.length || 0;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderInput() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderMaxLength() {\n        return (\n            <Fragment>\n                <div\n                    class=\"max-length\"\n                    aria-hidden=\"true\"\n                >\n                    {this.value?.length || 0}/{this.maxlength}\n                </div>\n                <div\n                    aria-live=\"polite\"\n                    class=\"sr\"\n                    id={`${this.inputId}-max-length`}\n                    test-id=\"max-length-sr\"\n                >\n                    {loc('tecton.element.textarea.characterCount.screenReader', [\n                        this.screenReaderCharacterCount,\n                        this.maxlength,\n                    ])}\n                </div>\n            </Fragment>\n        );\n    }\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {renderLabel(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.renderInput()}\n                    {this.maxlength ? this.renderMaxLength() : ''}\n                    {renderMessages(this)}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}