q2-tecton-elements 1.37.0 → 1.38.0

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -198,19 +198,9 @@ li {
 }
 [aria-selected] .step-icon,
 [aria-selected] .step-bubble {
+  box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
   font-weight: var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600));
 }
-[aria-selected] .step-icon:before,
-[aria-selected] .step-bubble:before {
-  content: "";
-  position: absolute;
-  inset: calc(var(--comp-bullet-border-offset) * -1);
-  width: calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));
-  height: calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));
-  border-radius: 50%;
-  border: var(--comp-bullet-border);
-  border-color: var(--comp-active-color);
-}
 
 .step-bubble {
   background: var(--comp-bullet-background);

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

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

@@ -101,15 +101,20 @@ export class Q2TabContainer {
         return;
       const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
       this.scrollEnabled = scrollWidth > clientWidth;
-      this.showScrollLeft = !!scrollLeft;
-      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
+      this.showScrollLeft = scrollLeft > 0;
+      this.showScrollRight = scrollWidth > scrollLeft + clientWidth;
     };
     this.onScrollBtnClick = (direction) => {
-      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
-      this.listElement.scrollBy({
-        left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth',
-      });
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      const halfWidth = Math.floor(clientWidth / 2);
+      let scrollAmount = 0;
+      if (direction === 'left') {
+        scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));
+      }
+      else {
+        scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));
+      }
+      this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });
     };
     this.onSlotChange = () => {
       this.checkScrollState();
@@ -175,7 +180,8 @@ export class Q2TabContainer {
     this.settled.emit();
   }
   componentDidLoad() {
-    this.resizeObserver.observe(this.listElement);
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.listElement);
     this.checkScrollState();
     overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-tab-container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,EACL,MAAM,EACN,KAAK,EACL,CAAC,EACD,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,uBAAuB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAIxG,uBAAuB,EAAE,CAAC;AAgB1B,MAAM,OAAO,cAAc;;IAYvB,SAAI,GAAW,UAAU,EAAE,CAAC;IAC5B,yBAAoB,GAAmB,EAAE,CAAC;IAI1C,iBAAY,GAAW,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,CAAC;IA6GhD,2BAA2B;IAC3B,kBAAa,GAAG,GAAG,EAAE;MACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;MAC1B,IAAI,CAAC,OAAO,EAAE,CAAC;IACnB,CAAC,CAAC;IAEF,uBAAkB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACjC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC;QACnD,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;MACtB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,YAAO,GAAG,GAAG,EAAE;MACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;QACxG,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;QAClC,KAAK;QACL,UAAU;QACV,gBAAgB;QAChB,UAAU;QACV,WAAW;OACd,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC/B,MAAM,WAAW,GAAK,KAAK,CAAC,MAA4B,CAAC,OAAO,CAAC,oBAAoB,CAAuB;SACvG,OAAO,CAAC,KAAK,CAAC;MACnB,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC;MACrD,IAAI,iBAAiB;QAAE,OAAO;MAE9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACb,KAAK,EAAE,WAAW;OACrB,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,iBAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;MACpC,MAAM,KAAK,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK,CAAC;MAC1D,QAAQ,KAAK,CAAC,GAAG,EAAE;QACf,KAAK,YAAY;UACb,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;UACtC,MAAM;QAEV,KAAK,WAAW;UACZ,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;UACtC,MAAM;QAEV,KAAK,MAAM;UACP,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;UACvC,MAAM;QAEV,KAAK,KAAK;UACN,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;UACtC,MAAM;QAEV,KAAK,OAAO,CAAC;QACb,KAAK,OAAO;UACR,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;UAC5B,MAAM;OACb;IACL,CAAC,CAAC;IAEF,sBAAiB,GAAG,CAAC,KAAa,EAAE,SAA6C,EAAE,EAAE;MACjF,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;MAEjE,IAAI,QAAQ,CAAC;MACb,QAAQ,SAAS,EAAE;QACf,KAAK,MAAM;UACP,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;UACrD,MAAM;QAEV,KAAK,MAAM;UACP,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;UAClC,MAAM;QAEV,KAAK,OAAO;UACR,QAAQ,GAAG,CAAC,CAAC;UACb,MAAM;QAEV,KAAK,MAAM;UACP,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;UAChC,MAAM;OACb;MAED,IAAI,KAAK,KAAK,QAAQ;QAAE,OAAO;MAE/B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,cAAS,GAAG,CAAC,KAAa,EAAE,gBAAyB,IAAI,EAAE,EAAE;MACzD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;MAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAoB,gBAAgB,YAAY,IAAI,CAAC,CAAC;MACvG,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC;MAEpC,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC;MACtE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACtB,IAAI;QACJ,QAAQ,EAAE,QAAQ;OACrB,CAAC,CAAC;MAEH,OAAO,UAAU,CAAC;IACtB,CAAC,CAAC;IAEF,qBAAgB,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,IAAI,CAAC,WAAW;QAAE,OAAO;MAC9B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MAClE,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;MAC/C,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,UAAU,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,WAAW,KAAK,UAAU,GAAG,WAAW,CAAC;IACpE,CAAC,CAAC;IAEF,qBAAgB,GAAG,CAAC,SAA4B,EAAE,EAAE;MAChD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;MAElE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;QACtB,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;QACzD,QAAQ,EAAE,QAAQ;OACrB,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,iBAAY,GAAG,GAAG,EAAE;MAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC,CAAC;;;;;mBAxP0C,KAAK;mBAarB,KAAK;oBACJ,KAAK;yBACA,KAAK;0BACJ,KAAK;2BACJ,KAAK;;;EAGzC,YAAY;;IACR,OAAO,MAAA,MAAA,MAAM,CAAC,cAAc,0CAAE,YAAY,kDAAI,CAAC;EACnD,CAAC;EAED,IAAI,QAAQ;IACR,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9C,8BAA8B,CACjC,CAAC;IAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;MACvB,OAAO,EAAE,CAAC;KACb;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;EACxE,CAAC;EAED,IAAI,gBAAgB;IAChB,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;EACtD,CAAC;EAED,IAAI,OAAO;IACP,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;EAClE,CAAC;EAED,mCAAmC;EAEnC,oBAAoB,CAAC,KAAkB;IACnC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;MACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;EACL,CAAC;EAGD,QAAQ;IACJ,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC5B,CAAC;EAGD,OAAO,CAAC,KAAiB;IACrB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC5E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;EAC1B,CAAC;EAGD,OAAO;IACH,IAAI,CAAC,OAAO,EAAE,CAAC;EACnB,CAAC;EAED,mCAAmC;EACnC,iBAAiB;IACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACjC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACxE,IAAI,CAAC,aAAa,EAAE,CAAC;EACzB,CAAC;EAED,kBAAkB;IACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;IAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9C,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IACjE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,EAAE;MAChC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;MACrC,IAAI,CAAC,OAAO;QAAE,OAAO;MACrB,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;MAC/C,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;MAC/B,GAAG,CAAC,IAAI,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;EACP,CAAC;EAED,oBAAoB;IAChB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACjC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IACnC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;EACjC,CAAC;EAED,6BAA6B;EAE7B,aAAa;IACT,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IACjE,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;MACZ,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;KACtE;EACL,CAAC;EAGD,YAAY;IACR,IAAI,CAAC,aAAa,EAAE,CAAC;EACzB,CAAC;EAmID,gCAAgC;EAChC,MAAM;IACF,OAAO,CACH,EAAC,QAAQ;MACL,WAAK,KAAK,EAAC,eAAe;QACrB,IAAI,CAAC,aAAa,IAAI,CACnB,EAAC,QAAQ;UACL,WACI,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,GACzB;UACP,WACI,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,GAC1B;UAEP,cACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAE5C,eACI,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,aAAa,GACZ,CACN;UAET,cACI,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;YAE7C,eACI,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,cAAc,GACb,CACN,CACF,CACd;QAED,UACI,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EACvC,IAAI,EAAC,SAAS,IAEb,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAC3D,CACH;MACN,WAAK,KAAK,EAAC,aAAa;QACpB,YAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAI,CAC/C,CACC,CACd,CAAC;EACN,CAAC;EAED,WAAW,CAAC,GAAY,EAAE,KAAa;IACnC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC;IAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,KAAK,CAAC;IACnD,OAAO,CACH,UAAI,IAAI,EAAC,cAAc;MACnB,cACI,EAAE,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,gBACnB,KAAK,aACT,SAAS,EACjB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC7B,IAAI,EAAC,KAAK,mBACK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC7B,YAAY,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,EAC/C,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAE,IAAI,CAAC,YAAY,IAE3B,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,EAAE,UAAU,CAAC,CAC7E,CACR,CACR,CAAC;EACN,CAAC;EAED,oBAAoB,CAAC,GAAY,EAAE,UAAmB;IAClD,IAAI,KAAK,CAAC;IACV,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,UAAU;MAAE,KAAK,GAAG,GAAG,CAAC,UAAU,IAAI,SAAS,CAAC;IACxE,IAAI,WAAW,CAAC;IAChB,IAAI,GAAG,CAAC,gBAAgB;MAAE,WAAW,GAAG,GAAG,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SAC7D,IAAI,GAAG,CAAC,WAAW;MAAE,WAAW,GAAG,GAAG,CAAC,2BAA2B,GAAG,CAAC,WAAW,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC;;MACvG,WAAW,GAAG,GAAG,CAAC,6BAA6B,CAAC,CAAC;IAEtD,OAAO,CACH,WACI,KAAK,EAAC,gBAAgB,gBACV,GAAG,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,UAAU,IAAI,WAAW,EAAE;MAE3D,GAAG,CAAC,KAAK;MACV,gBACI,KAAK,EAAE,GAAG,CAAC,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,GAAG,CAAC,WAAW,GACzB,CACA,CACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge';\n\naddSmoothScrollPolyfill();\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({\n    tag: 'q2-tab-container',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class Q2TabContainer implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) type: 'main' | 'section';\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) color: 'alt' | undefined;\n    @Prop({ reflect: true }) noPrint: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @Event() change: EventEmitter;\n    @Event() settled: EventEmitter;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-controls={`tab-pane-${this.guid}-${index}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-tab-container/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge';\n\naddSmoothScrollPolyfill();\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({\n    tag: 'q2-tab-container',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class Q2TabContainer implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) type: 'main' | 'section';\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) color: 'alt' | undefined;\n    @Prop({ reflect: true }) noPrint: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @Event() change: EventEmitter;\n    @Event() settled: EventEmitter;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > scrollLeft + clientWidth;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-controls={`tab-pane-${this.guid}-${index}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-tab-container/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

package/dist/collection/components/q2-tab-pane/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -85,15 +85,15 @@ button {
   position: relative;
 }
 :host([theme=primary]) .tag-wrapper {
-  --comp-tag-background: var(--tct-tag-primary-background, var(--t-primary-l5, #61c4ff));
+  --comp-tag-background: var(--tct-tag-primary-background, var(--t-primary, #61c4ff));
   --comp-tag-color: var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));
 }
 :host([theme=secondary]) .tag-wrapper {
-  --comp-tag-background: var(--tct-tag-secondary-background, var(--t-secondary-l5, #d9e1e6));
+  --comp-tag-background: var(--tct-tag-secondary-background, var(--t-secondary, #d9e1e6));
   --comp-tag-color: var(--tct-tag-secondary-font-color, var(--t-secondary-text, #000000));
 }
 :host([theme=tertiary]) .tag-wrapper {
-  --comp-tag-background: var(--tct-tag-tertiary-background, var(--t-tertiary-l5, #f4fafe));
+  --comp-tag-background: var(--tct-tag-tertiary-background, var(--t-tertiary, #f4fafe));
   --comp-tag-color: var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #000000));
 }
 

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

@@ -34,6 +34,7 @@ export class Q2Textarea {
     this.onTextareaInput = (event) => {
       event.stopPropagation();
       const value = event.target.value;
+      this.increaseHeightIfOverflowing();
       this.input.emit({ value });
     };
     this.onTextareaChange = (event) => {
@@ -75,6 +76,22 @@ export class Q2Textarea {
       this.setHeight(event);
       this.setWidth(event);
     };
+    this.increaseHeightIfOverflowing = () => {
+      const { scrollHeight } = this.textareaField;
+      if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {
+        // need to account for border width because scrollHeight does not include it
+        const newHeight = scrollHeight + this.getBorderOffset();
+        this.contentContainer.style.height = `${newHeight}px`;
+      }
+    };
+    this.isOverflowingVertically = () => {
+      const { clientHeight, scrollHeight } = this.textareaField;
+      return scrollHeight > clientHeight;
+    };
+    this.getBorderOffset = () => {
+      const computedStyle = window.getComputedStyle(this.textareaField);
+      return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);
+    };
     this.onMouseUp = () => {
       document.removeEventListener('mousemove', this.onMouseMove);
       this.downParams = null;
@@ -104,7 +121,7 @@ export class Q2Textarea {
     }
   }
   componentDidRender() {
-    this.scheduledAfterRender.push(this.checkRows, this.checkCols);
+    this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
   }
@@ -177,6 +194,14 @@ export class Q2Textarea {
     }
   }
   /// Methods ///
+  /**
+   * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.
+   *
+   * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want
+   * to trigger the `change` event, move the focus to another element after calling this method.
+   *
+   * @testOnly
+   */
   setValue(value) {
     const { textareaField } = this;
     textareaField.focus();
@@ -196,12 +221,19 @@ export class Q2Textarea {
   setHeight(event) {
     var _a, _b;
     const { contentContainer, resize, downParams: { height, y }, } = this;
-    const resizeY = ['both', 'vertical'].includes(resize);
+    const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);
     if (!resizeY)
       return;
     const eventY = event instanceof MouseEvent ? event.clientY : (_b = (_a = event.touches[0]) === null || _a === void 0 ? void 0 : _a.pageY) !== null && _b !== void 0 ? _b : 0;
     const newHeight = height - (y - eventY);
-    contentContainer.style.height = `${newHeight}px`;
+    // If 'vertical-auto', change height if the new height is greater
+    // than the current height or the textarea is not overflowing.
+    // Otherwise, change height regardless of the new height.
+    if (resize !== 'vertical-auto' ||
+      newHeight > height ||
+      (resize === 'vertical-auto' && !this.isOverflowingVertically())) {
+      contentContainer.style.height = `${newHeight}px`;
+    }
   }
   /////// VIEW METHODS ///////
   render() {
@@ -212,7 +244,8 @@ export class Q2Textarea {
     return (h("div", { class: "max-length", "aria-hidden": "true" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, "/", this.maxlength));
   }
   inputDOM() {
-    return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
+    const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';
+    return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
   }
   static get is() { return "q2-textarea"; }
   static get encapsulation() { return "shadow"; }
@@ -436,8 +469,8 @@ export class Q2Textarea {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'none' | 'vertical' | 'horizontal' | 'both'",
-          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+          "original": "'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto'",
+          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\" | \"vertical-auto\"",
           "references": {}
         },
         "required": false,
@@ -534,8 +567,11 @@ export class Q2Textarea {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n\nThis method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\nto trigger the `change` event, move the focus to another element after calling this method.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/G,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAOxH,MAAM,OAAO,UAAU;;IAIX,yBAAoB,GAAmB,EAAE,CAAC;IAC1C,SAAI,GAAG,UAAU,EAAE,CAAC;IAuC5B,cAAS,GAAG,GAAG,EAAE;MACb,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;MAE/D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO;MAC7D,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gBAAgB,CAAC,YAAY,IAAI,CAAC;MACrE,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,cAAS,GAAG,GAAG,EAAE;MACb,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;MAE/D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO;MAC3D,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,gBAAgB,CAAC,WAAW,IAAI,CAAC;MACnE,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC,CAAC;IA6GF,sBAAsB;IAEtB,oBAAe,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;MAC/B,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,mBAAc,GAAG,GAAG,EAAE;MAClB,MAAM,EACF,YAAY,EACZ,aAAa,EAAE,EAAE,KAAK,EAAE,GAC3B,GAAG,IAAI,CAAC;MACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;MACvB,IAAI,YAAY,KAAK,KAAK;QAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK,CAAC;MAE1D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;MACrC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK,CAAC;MAE1D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAChC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;MAClC,IAAI,CAAC,UAAU,GAAG;QACd,KAAK,EAAE,gBAAgB,CAAC,WAAW;QACnC,MAAM,EAAE,gBAAgB,CAAC,YAAY;QACrC,CAAC,EAAE,KAAK,CAAC,OAAO;QAChB,CAAC,EAAE,KAAK,CAAC,OAAO;OACnB,CAAC;MACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAChC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;MACjC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;MAEvC,KAAK,CAAC,cAAc,EAAE,CAAC;MAEvB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;MAClC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;MAEpC,IAAI,CAAC,UAAU,GAAG;QACd,KAAK,EAAE,gBAAgB,CAAC,WAAW;QACnC,MAAM,EAAE,gBAAgB,CAAC,YAAY;QACrC,CAAC,EAAE,UAAU,CAAC,KAAK;QACnB,CAAC,EAAE,UAAU,CAAC,KAAK;OACtB,CAAC;MAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACzD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAChC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IA+BF,cAAS,GAAG,GAAG,EAAE;MACb,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IAC3B,CAAC,CAAC;;;;;;;;;;;;;kBA7P6E,UAAU;;;;;;EAOzF,gCAAgC;EAEhC,iBAAiB;IACb,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;MACvB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC9B;EACL,CAAC;EAED,kBAAkB;IACd,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/D,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;EACnC,CAAC;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACpC,CAAC;EAoBD,IAAI,QAAQ;IACR,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;EAChE,CAAC;EAED,IAAI,QAAQ;IACR,OAAO,CACH,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;MACtD,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;MACnD,EAAE,CACL,CAAC;EACN,CAAC;EAED,IAAI,YAAY;IACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;EAC1D,CAAC;EAED,IAAI,OAAO;IACP,OAAO,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC;EACrC,CAAC;EAED,IAAI,gBAAgB;IAChB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;EACzE,CAAC;EAED,IAAI,cAAc;IACd,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACrD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAErD,OAAO,kBAAkB,UAAU,GAAG,UAAU,GAAG,UAAU,EAAE,CAAC;EACpE,CAAC;EAED,IAAI,UAAU;IACV,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB,OAAO,MAAM,IAAI,MAAM,KAAK,MAAM,CAAC;EACvC,CAAC;EAED,6BAA6B;EAG7B,aAAa;IACT,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;IACvC,IAAI,CAAC,SAAS;MAAE,OAAO;IAEvB,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;IAClD,IAAI,cAAc,KAAK,KAAK;MAAE,OAAO;IAErC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,YAAY;IACR,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;EAC9C,CAAC;EAGD,YAAY;IACR,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;EAC7C,CAAC;EAGD,aAAa;IACT,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;EAClF,CAAC;EAGD,cAAc;IACV,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;EAClF,CAAC;EAED,oCAAoC;EAEpC,kBAAkB,CAAC,KAAY;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;EAC/B,CAAC;EAGD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;MACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;EACL,CAAC;EAGD,kBAAkB,CAAC,KAAkB;IACjC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;EACL,CAAC;EAOD,eAAe;EAEf,QAAQ,CAAC,KAAa;IAClB,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,KAAK,EAAE,CAAC;IACtB,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;IAC5B,aAAa,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;EACzD,CAAC;EA2ED,QAAQ,CAAC,KAA8B;;IACnC,MAAM,EACF,gBAAgB,EAChB,MAAM,EACN,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAC3B,GAAG,IAAI,CAAC;IAET,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAExD,IAAI,CAAC,OAAO;MAAE,OAAO;IACrB,MAAM,MAAM,GAAG,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC;IAC1F,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;EACnD,CAAC;EAED,SAAS,CAAC,KAA8B;;IACpC,MAAM,EACF,gBAAgB,EAChB,MAAM,EACN,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAC5B,GAAG,IAAI,CAAC;IAET,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACtD,IAAI,CAAC,OAAO;MAAE,OAAO;IACrB,MAAM,MAAM,GAAG,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC;IAC1F,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IACxC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;EACrD,CAAC;EAOD,4BAA4B;EAE5B,MAAM;IACF,OAAO,CACH,WAAK,KAAK,EAAE,IAAI,CAAC,cAAc;MAC1B,QAAQ,CAAC,IAAI,CAAC;MACf,WACI,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;QAEtC,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE;QACzC,WAAW,CAAC,IAAI,CAAC,CAChB,CACJ,CACT,CAAC;EACN,CAAC;EAED,YAAY;;IACR,OAAO,CACH,WACI,KAAK,EAAC,YAAY,iBACN,MAAM;MAEjB,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,KAAI,CAAC;;MAAG,IAAI,CAAC,SAAS,CACvC,CACT,CAAC;EACN,CAAC;EAED,QAAQ;IACJ,OAAO,CACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,gBACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,WAAW,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,SAAS,aAC7D,YAAY,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,gBAAgB,kBACzB,GAAG,IAAI,CAAC,QAAQ,EAAE,mBACjB,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,gBACtB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EACxC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,MAAM,EAAE,IAAI,CAAC,cAAc,GACnB;MACX,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,eACI,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,GACpB,CACL,CAAC,CAAC,CAAC,CACA,EAAE,CACL;MACA,IAAI,CAAC,UAAU,IAAI,CAChB,cACI,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAC,YAAY,gBACN,GAAG,CAAC,6BAA6B,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC;QAEZ,0BACgB,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;UAElC,YACI,CAAC,EAAC,oCAAoC,EACtC,IAAI,EAAC,MAAM,2BACW,QAAQ,GAChC,CACA,CACD,CACZ,CACC,CACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n    tag: 'q2-textarea',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) hideMessages: boolean;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) spellcheck: boolean;\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n    @Prop({ reflect: true }) rows: number;\n    @Prop({ reflect: true }) cols: number;\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\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    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    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\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 inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\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    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\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        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\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('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    @Event() input: EventEmitter<any>;\n    @Event() change: EventEmitter<any>;\n\n    /// Methods ///\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    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\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    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    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\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    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n\n        const resizeY = ['both', 'vertical'].includes(resize);\n        if (!resizeY) return;\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        contentContainer.style.height = `${newHeight}px`;\n    }\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-textarea/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n    tag: 'q2-textarea',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) hideMessages: boolean;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) spellcheck: boolean;\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n    @Prop({ reflect: true }) rows: number;\n    @Prop({ reflect: true }) cols: number;\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\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    componentDidLoad() {\n        overrideFocus(this.hostElement);\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    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    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\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 inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\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    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\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        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\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('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    @Event() input: EventEmitter<any>;\n    @Event() change: EventEmitter<any>;\n\n    /// Methods ///\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    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.increaseHeightIfOverflowing();\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\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    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    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\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    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    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    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\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"]}

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -88,6 +88,41 @@ label {
   letter-spacing: var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));
   transition: color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
 }
+.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)));
+  font-size: var(--tct-textarea-error-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));
+  font-weight: var(--tct-textarea-error-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));
+  text-transform: var(--tct-textarea-error-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));
+  letter-spacing: var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)));
+}
+:hover label {
+  color: var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
+  font-size: var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));
+  font-weight: var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));
+  text-transform: var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));
+  letter-spacing: var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)));
+}
+.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)))));
+  font-size: var(--tct-textarea-error-hover-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));
+  font-weight: var(--tct-textarea-error-hover-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));
+  text-transform: var(--tct-textarea-error-hover-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));
+  letter-spacing: var(--tct-textarea-error-hover-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))));
+}
+:focus-within label {
+  color: var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
+  font-size: var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));
+  font-weight: var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));
+  text-transform: var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));
+  letter-spacing: var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)));
+}
+.has-error :focus-within label {
+  color: var(--tct-textarea-error-focused-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))));
+  font-size: var(--tct-textarea-error-focused-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));
+  font-weight: var(--tct-textarea-error-focused-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));
+  text-transform: var(--tct-textarea-error-focused-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));
+  letter-spacing: var(--tct-textarea-error-focused-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))));
+}
 
 .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)))));
@@ -131,6 +166,10 @@ label {
 
 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-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);
   resize: none;
   height: 100%;
   -webkit-appearance: none;
@@ -139,11 +178,11 @@ textarea {
   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);
-  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)))))));
+  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(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));
+  border-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;
@@ -166,10 +205,30 @@ textarea::-webkit-scrollbar-track {
 textarea:not([cols]) {
   width: 100%;
 }
+.has-error textarea {
+  padding-right: var(--comp-textarea-icon-clearance);
+  border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)));
+  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));
+  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, #c30000))));
+  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-width: var(--comp-textarea-focus-border-width, 1px);
-  border-color: var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));
-  box-shadow: var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent));
+  border-color: var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));
+  background: var(--tct-textarea-focus-background, var(--comp-textarea-background));
+  box-shadow: var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring));
+}
+.has-error textarea:focus {
+  border-color: var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000)));
+  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::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)))))));
@@ -177,6 +236,9 @@ textarea::placeholder {
 textarea[disabled] {
   cursor: not-allowed;
 }
+textarea.resize-vertical-auto {
+  overflow: hidden;
+}
 .has-error textarea {
   padding-right: var(--comp-textarea-icon-clearance);
 }
@@ -216,10 +278,6 @@ q2-icon {
   color: var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit));
 }
 
-.has-error label {
-  color: var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)));
-}
-
 .max-length {
   color: var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
   font-size: var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
@@ -252,7 +310,7 @@ q2-icon {
 :host([resize=both]) .btn-resize {
   cursor: se-resize;
 }
-:host([resize=vertical]) .btn-resize {
+:host([resize=vertical]) .btn-resize, :host([resize=vertical-auto]) .btn-resize {
   cursor: s-resize;
 }
 :host([resize=horizontal]) .btn-resize {