npm - q2-tecton-elements - Versions diffs - 1.66.2 → 1.67.1 - Mend

q2-tecton-elements 1.66.2 → 1.67.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (694) hide show

package/dist/cjs/q2-textarea.cjs.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-const q2TextareaCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, inherit));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 4px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.content-container{--comp-textarea-min-height:46px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));--comp-textarea-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);font-size:var(--tct-textarea-font-size, inherit);resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);backdrop-filter:var(--comp-textarea-backdrop-filter);background:var(--comp-textarea-background);color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--comp-textarea-border-color);border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea:focus-visible{box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}textarea.resize-vertical-auto{overflow:hidden}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-textarea-messages-margin-top, 2px);z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-bottom, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
+const q2TextareaCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, inherit));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 4px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.content-container{--comp-textarea-min-height:46px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));--comp-textarea-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);font-size:var(--tct-textarea-font-size, inherit);resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);backdrop-filter:var(--comp-textarea-backdrop-filter);background:var(--comp-textarea-background);color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--comp-textarea-border-color);border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea:focus-visible{box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}textarea.resize-vertical-auto{overflow:hidden}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-textarea-messages-margin-top, 2px);z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-bottom, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 const Q2Textarea = class {
     constructor(hostRef) {
@@ -281,7 +281,7 @@ const Q2Textarea = class {
         ]))));
     }
     render() {
-        return (index.h("div", { key: 'a9b5fe04a27d30b849855d25b4ab470a6670827a', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '73bb18321f257624ca7563572cee97d4d77a2879', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
+        return (index.h("div", { key: '1a53c8b1528031f5ccb957f2a2320f7a8a8f4607', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '1de221d01fd339d749b557d408acabdc06c07ecc', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-textarea.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-textarea.entry.cjs.js","mappings":"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","names":["debounce","createGuid","setMessageHeight","mirrorEmit","overrideFocus","isEventFromElement","h","loc","Fragment","renderLabel","renderMessages"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n --comp-label-padding: #{var-list(\n --tct-textarea-label-padding,\n unquote(\n '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n )\n )};\n --comp-label-margin: #{var-list(\n --tct-textarea-label-margin,\n unquote(\n '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n display: block;\n padding: var(--comp-label-padding);\n margin: var(--comp-label-margin);\n color: var-list(var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n .has-error & {\n color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n }\n\n :hover & {\n color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n .has-error & {\n color: var-list(\n --tct-textarea-error-hover-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-hover-label-font-color,\n --tct-textarea-label-font-color,\n inherit\n );\n }\n }\n\n :host(:focus-within) & {\n color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n }\n\n :host(:focus-within) .has-error & {\n color: var-list(\n --tct-textarea-error-focus-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-focus-label-font-color,\n var-prefixer(textarea-label-font-color),\n inherit\n );\n }\n}\n\n.optional-tag {\n --comp-label-optional-margin: #{var-list(\n --tct-textarea-label-optional-margin,\n unquote(\n '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n margin: var(--comp-label-optional-margin);\n color: var-list(\n var-prefixer(textarea-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n height: 100%;\n --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n --comp-textarea-border-top-left-radius: #{var-list(\n var-prefixer(textarea-border-top-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-top-right-radius: #{var-list(\n var-prefixer(textarea-border-top-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-right-radius: #{var-list(\n var-prefixer(textarea-border-bottom-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-left-radius: #{var-list(\n var-prefixer(textarea-border-bottom-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);\n --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n var-list(var-prefixer(textarea-border-right-width), 1px)\n var-list(var-prefixer(textarea-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-border-left-width), 1px)};\n --comp-textarea-icon-clearance: 34px;\n\n :host([disabled]) & {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n }\n}\n\n.content-container {\n --comp-textarea-min-height: 46px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n font-size: var(--tct-textarea-font-size, inherit);\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n backdrop-filter: var(--comp-textarea-backdrop-filter);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition:\n background var(--comp-textarea-tween),\n backdrop-filter var(--comp-textarea-tween),\n border-width var(--comp-textarea-tween),\n border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-hover-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-hover-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-focus-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-focus-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n &:focus-visible {\n box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n }\n\n &::placeholder {\n color: var-list(\n var-prefixer(textarea-placeholder-font-color),\n --t-input-placeholder-font-color,\n --tct-gray-7,\n --app-gray-7,\n --tct-gray-d1,\n --app-gray-d1,\n #666666\n );\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n &.resize-vertical-auto {\n overflow: hidden;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n\n &:not(:focus) {\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n }\n }\n}\n\nq2-icon {\n margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n pointer-events: none;\n position: absolute;\n top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n right: 0;\n margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n --tct-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n --t-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n}\n\n.icon-error {\n color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n height: 0px;\n overflow: hidden;\n background: var-list(\n --tct-message-background,\n --tct-message-bg,\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n box-shadow: var-list(\n var-prefixer(textarea-message-box-shadow),\n --tct-box-shadow-1,\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n transition: height\n var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n margin-top: var(--tct-textarea-messages-margin-top, 2px);\n z-index: 1;\n position: absolute;\n width: 100%;\n color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(\n var-prefixer(textarea-max-length-font-size),\n --tct-font-size-small,\n --app-font-size-small,\n 12px\n );\n position: absolute;\n right: 0;\n}\n\n.btn-resize {\n --tct-textarea-resize-icon-padding: calc(\n calc(\n #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n var-prefixer(textarea-resize-icon-size),\n 12px\n )}\n ) / 2\n );\n width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n border: 0;\n position: absolute;\n right: var-list(\n --tct-textarea-resize-right,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n bottom: var-list(\n --tct-textarea-resize-bottom,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import {\n Component,\n EventEmitter,\n Prop,\n Event,\n Element,\n Fragment,\n State,\n h,\n Watch,\n Listen,\n Method,\n} from '@stencil/core';\nimport {\n createGuid,\n debounce,\n isEventFromElement,\n renderLabel,\n loc,\n renderMessages,\n overrideFocus,\n setMessageHeight,\n} from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Textarea\n * @category Forms\n * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n // #region Own Properties\n\n contentContainer?: HTMLDivElement;\n debouncedScreenReaderCharacterCount = debounce(() => {\n this.updateScreenReaderCharacterCount();\n }, 2000);\n describeByScreenReaderCharacterCount = true;\n guid = createGuid();\n scheduledAfterRender: (() => void)[] = [];\n textareaField?: HTMLTextAreaElement;\n valueOnFocus: string;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n downParams: Record<string, number>;\n\n @State()\n hasFocus: boolean;\n\n @State()\n screenReaderCharacterCount: number;\n\n // #endregion\n // #region Public Property API\n\n /\n Defines the number of columns displayed in the field.\n * If not set, the field will be full-width and respond to the window size.\n /\n @Prop({ reflect: true })\n cols: number;\n\n /* Indicates the field cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Each item in the `errors` array will appear below the input field when the field is focused.\n * @localizable\n /\n @Prop()\n errors: string[];\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true })\n hideLabel: boolean;\n\n /\n When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n /\n @Prop({ reflect: true })\n hideMessages: boolean;\n\n /\n Each item in the `hints` array will appear below the input field when the field is focused.\n * @info\n * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n * Once all errors are resolved, the hints display the next time the field is focused.\n * @localizable\n /\n @Prop()\n hints: string[];\n\n /\n The label that appears above the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n * Make sure you account for them when setting the `maxlength` value.\n * @info\n * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n /\n @Prop({ reflect: true, mutable: true })\n maxlength: number;\n\n /* Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /\n Text that appears within the field when it is blurred and empty.\n * Placeholder text disappears when the user focuses on the field and provides input.\n * @info\n * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n * @localizable\n /\n @Prop({ reflect: true })\n placeholder: string;\n\n /\n Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n * Takes priority over `optional` if both are `true`.\n /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Indicates how the field is resizable. /\n @Prop({ reflect: true })\n resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'vertical-auto' = 'vertical';\n\n /* Defines the number of rows displayed in the field. /\n @Prop({ reflect: true })\n rows: number;\n\n /* Determines whether the field is subject to spell-checking by the underlying browser or OS. /\n @Prop({ reflect: true })\n spellcheck: boolean;\n\n /* The value of the field. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the field loses focus after the value has been changed.\n * @deprecated Use 'tctChange' instead\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field value is updated.\n * @deprecated Use 'tctInput' instead\n * @legacyEvent\n /\n @Event()\n input: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field loses focus after the value has been changed.\n /\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field value is updated.\n /\n @Event()\n tctInput: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n if (isNaN(this.maxlength)) {\n this.maxlength = undefined;\n }\n\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n\n @Listen('focus')\n onHostElementFocus(event: Event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.textareaField.focus();\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.oninput) {\n this.value = event.detail.value;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n \n This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n * to trigger the `change` event, move the focus to another element after calling this method.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n const { textareaField } = this;\n textareaField.focus();\n textareaField.value = value;\n textareaField.dispatchEvent(new InputEvent('input'));\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('cols')\n colsObserver() {\n this.contentContainer.style.width = null;\n }\n\n @Watch('errors')\n errorsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('hints')\n hintsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('maxlength')\n maxlengthObserver() {\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n @Watch('rows')\n rowsObserver() {\n this.contentContainer.style.height = null;\n }\n\n @Watch('value')\n valueObserver() {\n const { maxlength, value = '' } = this;\n if (!maxlength) return;\n\n const truncatedValue = value.substr(0, maxlength);\n if (truncatedValue === value) return;\n\n mirrorEmit(this, ['change', 'tctChange'], { value: truncatedValue });\n }\n\n // #endregion\n // #region Local Methods\n\n get hasError() {\n return Array.isArray(this.errors) && this.errors.length > 0;\n }\n\n get inputDescribedBy() {\n let describedBy = undefined;\n\n if (this.showMessages) {\n describedBy = `${this.inputId}-description`;\n }\n\n // Remove screen reader character count from described by after typing\n // starts to avoid double announcement. It's needed on focus to announce\n // the character count when field gains focus.\n if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n }\n\n return describedBy;\n }\n\n get inputId() {\n return `input-guid-${this.guid}`;\n }\n\n get messages(): string[] {\n return (\n (this.errors && this.errors.length > 0 && this.errors) \|\|\n (this.hints && this.hints.length > 0 && this.hints) \|\|\n []\n );\n }\n\n get showMessages() {\n return this.messages.length > 0 && !this.hideMessages;\n }\n\n get showResize() {\n const { resize } = this;\n return resize && resize !== 'none';\n }\n\n get wrapperClasses() {\n const errorClass = this.hasError ? ' has-error' : '';\n const valueClass = !!this.value ? ' has-value' : '';\n const focusClass = this.hasFocus ? ' has-focus' : '';\n\n return `field-container${errorClass}${valueClass}${focusClass}`;\n }\n\n checkCols = () => {\n const { contentContainer, cols, textareaField, resize } = this;\n\n if (!cols \|\| ['none', 'vertical'].includes(resize)) return;\n contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n textareaField.removeAttribute('cols');\n };\n\n checkRows = () => {\n const { contentContainer, rows, textareaField, resize } = this;\n\n if (!rows \|\| ['none', 'horizontal'].includes(resize)) return;\n contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n textareaField.removeAttribute('rows');\n };\n\n getBorderOffset = () => {\n const computedStyle = window.getComputedStyle(this.textareaField);\n\n return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n };\n\n increaseHeightIfOverflowing = () => {\n const { scrollHeight } = this.textareaField;\n if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n // need to account for border width because scrollHeight does not include it\n const newHeight = scrollHeight + this.getBorderOffset();\n this.contentContainer.style.height = `${newHeight}px`;\n }\n };\n\n isOverflowingVertically = () => {\n const { clientHeight, scrollHeight } = this.textareaField;\n\n return scrollHeight > clientHeight;\n };\n\n onMouseDown = (event: MouseEvent) => {\n const { contentContainer } = this;\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: event.clientX,\n y: event.clientY,\n };\n document.addEventListener('mousemove', this.onMouseMove);\n document.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseMove = (event: MouseEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onMouseUp = () => {\n document.removeEventListener('mousemove', this.onMouseMove);\n document.removeEventListener('mouseup', this.onMouseUp);\n this.downParams = null;\n };\n\n onTextareaBlur = () => {\n const {\n valueOnFocus,\n textareaField: { value },\n } = this;\n this.describeByScreenReaderCharacterCount = true;\n this.hasFocus = false;\n setMessageHeight(this);\n if (valueOnFocus !== value) mirrorEmit(this, ['change', 'tctChange'], { value });\n };\n\n onTextareaChange = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n\n mirrorEmit(this, ['change', 'tctChange'], { value });\n };\n\n onTextareaFocus = () => {\n this.hasFocus = true;\n this.valueOnFocus = this.value;\n setMessageHeight(this);\n };\n\n onTextareaInput = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n this.describeByScreenReaderCharacterCount = false;\n this.increaseHeightIfOverflowing();\n if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n mirrorEmit(this, ['input', 'tctInput'], { value });\n };\n\n onTouchMove = (event: TouchEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onTouchStart = (event: TouchEvent) => {\n if (event.touches.length !== 1) return;\n\n event.preventDefault();\n\n const { contentContainer } = this;\n const firstTouch = event.touches[0];\n\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: firstTouch.pageX,\n y: firstTouch.pageY,\n };\n\n document.addEventListener('touchmove', this.onTouchMove);\n document.addEventListener('touchend', this.onTouchMove);\n };\n\n setHeight(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { height, y },\n } = this;\n const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n if (!resizeY) return;\n\n const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n const newHeight = height - (y - eventY);\n // If 'vertical-auto', change height if the new height is greater\n // than the current height or the textarea is not overflowing.\n // Otherwise, change height regardless of the new height.\n if (\n resize !== 'vertical-auto' \|\|\n newHeight > height \|\|\n (resize === 'vertical-auto' && !this.isOverflowingVertically())\n ) {\n contentContainer.style.height = `${newHeight}px`;\n }\n }\n\n setWidth(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { width, x },\n } = this;\n\n const resizeX = ['both', 'horizontal'].includes(resize);\n\n if (!resizeX) return;\n const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n const newWidth = width - (x - eventX);\n contentContainer.style.width = `${newWidth}px`;\n }\n\n updateScreenReaderCharacterCount = () => {\n this.screenReaderCharacterCount = this.value?.length \|\| 0;\n };\n\n // #endregion\n // #region Render Methods\n\n renderInput() {\n const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n return (\n <div class=\"input-container\">\n <textarea\n id={this.inputId}\n class={textareaClasses}\n placeholder={(this.placeholder && loc(this.placeholder)) \|\| undefined}\n test-id=\"inputField\"\n maxLength={this.maxlength}\n aria-describedby={this.inputDescribedBy}\n aria-invalid={`${this.hasError}`}\n aria-required={`${!this.optional}`}\n aria-label={this.hideLabel && this.label}\n spellcheck={this.spellcheck}\n rows={this.rows \|\| 3}\n cols={this.cols}\n value={this.value}\n ref={el => (this.textareaField = el)}\n readonly={!!this.readonly}\n disabled={!!this.disabled}\n maxlength={this.maxlength}\n onInput={this.onTextareaInput}\n onChange={this.onTextareaChange}\n onFocus={this.onTextareaFocus}\n onBlur={this.onTextareaBlur}\n ></textarea>\n {this.hasError ? (\n <q2-icon\n type=\"error\"\n class=\"icon-error\"\n />\n ) : (\n ''\n )}\n {this.showResize && (\n <button\n onMouseDown={this.onMouseDown}\n onTouchStart={this.onTouchStart}\n class=\"btn-resize\"\n aria-label={loc('tecton.element.input.resize')}\n tabIndex={-1}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n fill=\"none\"\n stroke-stroke-linecap=\"square\"\n />\n </svg>\n </button>\n )}\n </div>\n );\n }\n\n renderMaxLength() {\n return (\n <Fragment>\n <div\n class=\"max-length\"\n aria-hidden=\"true\"\n >\n {this.value?.length \|\| 0}/{this.maxlength}\n </div>\n <div\n aria-live=\"polite\"\n class=\"sr\"\n id={`${this.inputId}-max-length`}\n test-id=\"max-length-sr\"\n >\n {loc('tecton.element.textarea.characterCount.screenReader', [\n this.screenReaderCharacterCount,\n this.maxlength,\n ])}\n </div>\n </Fragment>\n );\n }\n\n render() {\n return (\n <div class={this.wrapperClasses}>\n {renderLabel(this)}\n <div\n class=\"content-container\"\n ref={el => (this.contentContainer = el)}\n >\n {this.renderInput()}\n {this.maxlength ? this.renderMaxLength() : ''}\n {renderMessages(this)}\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,0peAA0pe;;MCgCnqe,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AAKI,QAAA,IAAA,CAAA,mCAAmC,GAAGA,gBAAQ,CAAC,MAAK;YAChD,IAAI,CAAC,gCAAgC,EAAE;SAC1C,EAAE,IAAI,CAAC;AACR,QAAA,IAAoC,CAAA,oCAAA,GAAG,IAAI;AAC3C,QAAA,IAAI,CAAA,IAAA,GAAGC,kBAAU,EAAE;AACnB,QAAA,IAAoB,CAAA,oBAAA,GAAmB,EAAE;;AA2GzC,QAAA,IAAM,CAAA,MAAA,GAAkE,UAAU;AA4MlF,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI;AAE9D,YAAA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAAE;YACpD,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,gBAAgB,CAAC,WAAW,CAAA,EAAA,CAAI;AAClE,YAAA,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC;AACzC,SAAC;AAED,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI;AAE9D,YAAA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAAE;YACtD,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gBAAgB,CAAC,YAAY,CAAA,EAAA,CAAI;AACpE,YAAA,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC;AACzC,SAAC;AAED,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;YACnB,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC;AAEjE,YAAA,OAAO,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,EAAE,EAAE,CAAC;AACrG,SAAC;AAED,QAAA,IAA2B,CAAA,2BAAA,GAAG,MAAK;AAC/B,YAAA,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa;YAC3C,IAAI,IAAI,CAAC,MAAM,KAAK,eAAe,IAAI,IAAI,CAAC,uBAAuB,EAAE,EAAE;;gBAEnE,MAAM,SAAS,GAAG,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;gBACvD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI;;AAE7D,SAAC;AAED,QAAA,IAAuB,CAAA,uBAAA,GAAG,MAAK;YAC3B,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa;YAEzD,OAAO,YAAY,GAAG,YAAY;AACtC,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAChC,YAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI;YACjC,IAAI,CAAC,UAAU,GAAG;gBACd,KAAK,EAAE,gBAAgB,CAAC,WAAW;gBACnC,MAAM,EAAE,gBAAgB,CAAC,YAAY;gBACrC,CAAC,EAAE,KAAK,CAAC,OAAO;gBAChB,CAAC,EAAE,KAAK,CAAC,OAAO;aACnB;YACD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;YACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;AACxD,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAChC,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AACrB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACxB,SAAC;AAED,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;AACvD,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AAC1B,SAAC;AAED,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;YAClB,MAAM,EACF,YAAY,EACZ,aAAa,EAAE,EAAE,KAAK,EAAE,GAC3B,GAAG,IAAI;AACR,YAAA,IAAI,CAAC,oCAAoC,GAAG,IAAI;AAChD,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrBC,wBAAgB,CAAC,IAAI,CAAC;YACtB,IAAI,YAAY,KAAK,KAAK;AAAE,gBAAAC,qBAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;AACpF,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK;AAEzD,YAAAA,qBAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;AACxD,SAAC;AAED,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;YAC9BD,wBAAgB,CAAC,IAAI,CAAC;AAC1B,SAAC;AAED,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YACpC,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK;AACzD,YAAA,IAAI,CAAC,oCAAoC,GAAG,KAAK;YACjD,IAAI,CAAC,2BAA2B,EAAE;YAClC,IAAI,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,mCAAmC,EAAE;AAC9D,YAAAC,qBAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;AACtD,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAChC,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AACrB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACxB,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAiB,KAAI;AACjC,YAAA,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE;YAEhC,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI;YACjC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YAEnC,IAAI,CAAC,UAAU,GAAG;gBACd,KAAK,EAAE,gBAAgB,CAAC,WAAW;gBACnC,MAAM,EAAE,gBAAgB,CAAC,YAAY;gBACrC,CAAC,EAAE,UAAU,CAAC,KAAK;gBACnB,CAAC,EAAE,UAAU,CAAC,KAAK;aACtB;YAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;YACxD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC;AAC3D,SAAC;AAyCD,QAAA,IAAgC,CAAA,gCAAA,GAAG,MAAK;;AACpC,YAAA,IAAI,CAAC,0BAA0B,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,KAAI,CAAC;AAC7D,SAAC;AA2GJ;;;IAraG,iBAAiB,GAAA;AACb,QAAA,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AACvB,YAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;AAG9B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,gCAAgC,EAAE;;;IAI/C,gBAAgB,GAAA;AACZ,QAAAC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGnC,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,2BAA2B,CAAC;AAChG,QAAA,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;AAC7C,QAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;;;;AAOlC,IAAA,mBAAmB,CAAC,KAAkB,EAAA;AAClC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;;;AAKvC,IAAA,kBAAkB,CAAC,KAAY,EAAA;QAC3B,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;;AAI9B,IAAA,kBAAkB,CAAC,KAAkB,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YAChE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;AAOvC;;;;;;;AAOG;AAEH,IAAA,QAAQ,CAAC,KAAa,EAAA;AAClB,QAAA,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI;QAC9B,aAAa,CAAC,KAAK,EAAE;AACrB,QAAA,aAAa,CAAC,KAAK,GAAG,KAAK;QAC3B,aAAa,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;;;IAOxD,YAAY,GAAA;QACR,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI;;IAI5C,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAMH,wBAAgB,CAAC,IAAI,CAAC,CAAC;;IAIjF,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAMA,wBAAgB,CAAC,IAAI,CAAC,CAAC;;IAIjF,iBAAiB,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,gCAAgC,EAAE;;;IAK/C,YAAY,GAAA;QACR,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI;;IAI7C,aAAa,GAAA;QACT,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC;QACjD,IAAI,cAAc,KAAK,KAAK;YAAE;AAE9B,QAAAC,qBAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC;;;;AAMxE,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;;AAG/D,IAAA,IAAI,gBAAgB,GAAA;QAChB,IAAI,WAAW,GAAG,SAAS;AAE3B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,WAAW,GAAG,CAAG,EAAA,IAAI,CAAC,OAAO,cAAc;;;;;QAM/C,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oCAAoC,EAAE;YAC7D,WAAW,GAAG,WAAW,GAAG,CAAG,EAAA,WAAW,IAAI,IAAI,CAAC,OAAO,CAAa,WAAA,CAAA,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,aAAa;;AAG1G,QAAA,OAAO,WAAW;;AAGtB,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,CAAc,WAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAGpC,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,QACI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM;AACrD,aAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;AACnD,YAAA,EAAE;;AAIV,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY;;AAGzD,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI;AACvB,QAAA,OAAO,MAAM,IAAI,MAAM,KAAK,MAAM;;AAGtC,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE;AACpD,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE;AACnD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE;AAEpD,QAAA,OAAO,kBAAkB,UAAU,CAAA,EAAG,UAAU,CAAG,EAAA,UAAU,EAAE;;AAwHnE,IAAA,SAAS,CAAC,KAA8B,EAAA;;AACpC,QAAA,MAAM,EACF,gBAAgB,EAChB,MAAM,EACN,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAC5B,GAAG,IAAI;AACR,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;AAEtE,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,MAAM,MAAM,GAAG,KAAK,YAAY,UAAU,GAAG,KAAK,CAAC,OAAO,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;QACzF,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,CAAC;;;;QAIvC,IACI,MAAM,KAAK,eAAe;AAC1B,YAAA,SAAS,GAAG,MAAM;aACjB,MAAM,KAAK,eAAe,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,EACjE;YACE,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,SAAS,IAAI;;;AAIxD,IAAA,QAAQ,CAAC,KAA8B,EAAA;;AACnC,QAAA,MAAM,EACF,gBAAgB,EAChB,MAAM,EACN,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAC3B,GAAG,IAAI;AAER,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;AAEvD,QAAA,IAAI,CAAC,OAAO;YAAE;AACd,QAAA,MAAM,MAAM,GAAG,KAAK,YAAY,UAAU,GAAG,KAAK,CAAC,OAAO,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;QACzF,MAAM,QAAQ,GAAG,KAAK,IAAI,CAAC,GAAG,MAAM,CAAC;QACrC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,QAAQ,IAAI;;;;IAUlD,WAAW,GAAA;AACP,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,eAAe,GAAG,sBAAsB,GAAG,EAAE;AAErF,QAAA,QACIG,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACxBA,OAAA,CAAA,UAAA,EAAA,EACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,CAAC,IAAI,CAAC,WAAW,IAAIC,WAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS,EAAA,SAAA,EAC7D,YAAY,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,kBAAA,EACP,IAAI,CAAC,gBAAgB,EAAA,cAAA,EACzB,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,CAAE,EACjB,eAAA,EAAA,CAAG,EAAA,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAE,EACtB,YAAA,EAAA,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,KAAK,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,EACnB,CAAA,EACX,IAAI,CAAC,QAAQ,IACVD,OAAA,CAAA,SAAA,EAAA,EACI,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EACpB,CAAA,KAEF,EAAE,CACL,EACA,IAAI,CAAC,UAAU,KACZA,OACI,CAAA,QAAA,EAAA,EAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAC,YAAY,EACN,YAAA,EAAAC,WAAG,CAAC,6BAA6B,CAAC,EAC9C,QAAQ,EAAE,EAAE,EAAA,EAEZD,OACgB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,EAAA,EAElCA,OAAA,CAAA,MAAA,EAAA,EACI,CAAC,EAAC,oCAAoC,EACtC,IAAI,EAAC,MAAM,EACW,uBAAA,EAAA,QAAQ,GAChC,CACA,CACD,CACZ,CACC;;IAId,eAAe,GAAA;;AACX,QAAA,QACIA,QAACE,cAAQ,EAAA,IAAA,EACLF,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,YAAY,EAAA,aAAA,EACN,MAAM,EAAA,EAEjB,CAAA,MAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,KAAI,CAAC,OAAG,IAAI,CAAC,SAAS,CACvC,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EACc,QAAQ,EAClB,KAAK,EAAC,IAAI,EACV,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,aAAa,EACxB,SAAA,EAAA,eAAe,IAEtBC,WAAG,CAAC,qDAAqD,EAAE;AACxD,YAAA,IAAI,CAAC,0BAA0B;AAC/B,YAAA,IAAI,CAAC,SAAS;SACjB,CAAC,CACA,CACC;;IAInB,MAAM,GAAA;AACF,QAAA,QACID,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,EAC1BG,mBAAW,CAAC,IAAI,CAAC,EAClBH,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EAAA,EAEtC,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,EAC5CI,sBAAc,CAAC,IAAI,CAAC,CACnB,CACJ;;;;;;;;;;;;;;;;","names":["debounce","createGuid","setMessageHeight","mirrorEmit","overrideFocus","isEventFromElement","h","loc","Fragment","renderLabel","renderMessages"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n --comp-label-padding: #{var-list(\n --tct-textarea-label-padding,\n unquote(\n '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n )\n )};\n --comp-label-margin: #{var-list(\n --tct-textarea-label-margin,\n unquote(\n '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n display: block;\n padding: var(--comp-label-padding);\n margin: var(--comp-label-margin);\n color: var-list(var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n .has-error & {\n color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n }\n\n :hover & {\n color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n .has-error & {\n color: var-list(\n --tct-textarea-error-hover-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-hover-label-font-color,\n --tct-textarea-label-font-color,\n inherit\n );\n }\n }\n\n :host(:focus-within) & {\n color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n }\n\n :host(:focus-within) .has-error & {\n color: var-list(\n --tct-textarea-error-focus-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-focus-label-font-color,\n var-prefixer(textarea-label-font-color),\n inherit\n );\n }\n}\n\n.optional-tag {\n --comp-label-optional-margin: #{var-list(\n --tct-textarea-label-optional-margin,\n unquote(\n '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n margin: var(--comp-label-optional-margin);\n color: var-list(\n var-prefixer(textarea-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n height: 100%;\n --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n --comp-textarea-border-top-left-radius: #{var-list(\n var-prefixer(textarea-border-top-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-top-right-radius: #{var-list(\n var-prefixer(textarea-border-top-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-right-radius: #{var-list(\n var-prefixer(textarea-border-bottom-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-left-radius: #{var-list(\n var-prefixer(textarea-border-bottom-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);\n --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n var-list(var-prefixer(textarea-border-right-width), 1px)\n var-list(var-prefixer(textarea-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-border-left-width), 1px)};\n --comp-textarea-icon-clearance: 34px;\n\n :host([disabled]) & {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n }\n}\n\n.content-container {\n --comp-textarea-min-height: 46px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n font-size: var(--tct-textarea-font-size, inherit);\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n backdrop-filter: var(--comp-textarea-backdrop-filter);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition:\n background var(--comp-textarea-tween),\n backdrop-filter var(--comp-textarea-tween),\n border-width var(--comp-textarea-tween),\n border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-error-box-shadow, var-prefixer(textarea-box-shadow), none);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-hover-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-hover-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-focus-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-focus-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n &:focus-visible {\n box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n }\n\n &::placeholder {\n color: var-list(\n var-prefixer(textarea-placeholder-font-color),\n --t-input-placeholder-font-color,\n --tct-gray-7,\n --app-gray-7,\n --tct-gray-d1,\n --app-gray-d1,\n #666666\n );\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n &.resize-vertical-auto {\n overflow: hidden;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n\n &:not(:focus) {\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n }\n }\n}\n\nq2-icon {\n margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n pointer-events: none;\n position: absolute;\n top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n right: 0;\n margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n --tct-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n --t-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n}\n\n.icon-error {\n color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n height: 0px;\n overflow: hidden;\n background: var-list(\n --tct-message-background,\n --tct-message-bg,\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n box-shadow: var-list(\n var-prefixer(textarea-message-box-shadow),\n --tct-box-shadow-1,\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n transition: height\n var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n margin-top: var(--tct-textarea-messages-margin-top, 2px);\n z-index: 1;\n position: absolute;\n width: 100%;\n color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(\n var-prefixer(textarea-max-length-font-size),\n --tct-font-size-small,\n --app-font-size-small,\n 12px\n );\n position: absolute;\n right: 0;\n}\n\n.btn-resize {\n --tct-textarea-resize-icon-padding: calc(\n calc(\n #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n var-prefixer(textarea-resize-icon-size),\n 12px\n )}\n ) / 2\n );\n width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n border: 0;\n position: absolute;\n right: var-list(\n --tct-textarea-resize-right,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n bottom: var-list(\n --tct-textarea-resize-bottom,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import {\n Component,\n EventEmitter,\n Prop,\n Event,\n Element,\n Fragment,\n State,\n h,\n Watch,\n Listen,\n Method,\n} from '@stencil/core';\nimport {\n createGuid,\n debounce,\n isEventFromElement,\n renderLabel,\n loc,\n renderMessages,\n overrideFocus,\n setMessageHeight,\n} from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Textarea\n * @category Forms\n * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n // #region Own Properties\n\n contentContainer?: HTMLDivElement;\n debouncedScreenReaderCharacterCount = debounce(() => {\n this.updateScreenReaderCharacterCount();\n }, 2000);\n describeByScreenReaderCharacterCount = true;\n guid = createGuid();\n scheduledAfterRender: (() => void)[] = [];\n textareaField?: HTMLTextAreaElement;\n valueOnFocus: string;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n downParams: Record<string, number>;\n\n @State()\n hasFocus: boolean;\n\n @State()\n screenReaderCharacterCount: number;\n\n // #endregion\n // #region Public Property API\n\n /\n Defines the number of columns displayed in the field.\n * If not set, the field will be full-width and respond to the window size.\n /\n @Prop({ reflect: true })\n cols: number;\n\n /* Indicates the field cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Each item in the `errors` array will appear below the input field when the field is focused.\n * @localizable\n /\n @Prop()\n errors: string[];\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true })\n hideLabel: boolean;\n\n /\n When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n /\n @Prop({ reflect: true })\n hideMessages: boolean;\n\n /\n Each item in the `hints` array will appear below the input field when the field is focused.\n * @info\n * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n * Once all errors are resolved, the hints display the next time the field is focused.\n * @localizable\n /\n @Prop()\n hints: string[];\n\n /\n The label that appears above the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n * Make sure you account for them when setting the `maxlength` value.\n * @info\n * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n /\n @Prop({ reflect: true, mutable: true })\n maxlength: number;\n\n /* Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /\n Text that appears within the field when it is blurred and empty.\n * Placeholder text disappears when the user focuses on the field and provides input.\n * @info\n * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n * @localizable\n /\n @Prop({ reflect: true })\n placeholder: string;\n\n /\n Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n * Takes priority over `optional` if both are `true`.\n /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Indicates how the field is resizable. /\n @Prop({ reflect: true })\n resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'vertical-auto' = 'vertical';\n\n /* Defines the number of rows displayed in the field. /\n @Prop({ reflect: true })\n rows: number;\n\n /* Determines whether the field is subject to spell-checking by the underlying browser or OS. /\n @Prop({ reflect: true })\n spellcheck: boolean;\n\n /* The value of the field. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the field loses focus after the value has been changed.\n * @deprecated Use 'tctChange' instead\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field value is updated.\n * @deprecated Use 'tctInput' instead\n * @legacyEvent\n /\n @Event()\n input: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field loses focus after the value has been changed.\n /\n @Event()\n tctChange: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field value is updated.\n /\n @Event()\n tctInput: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n if (isNaN(this.maxlength)) {\n this.maxlength = undefined;\n }\n\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n\n @Listen('focus')\n onHostElementFocus(event: Event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.textareaField.focus();\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.oninput) {\n this.value = event.detail.value;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n \n This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n * to trigger the `change` event, move the focus to another element after calling this method.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n const { textareaField } = this;\n textareaField.focus();\n textareaField.value = value;\n textareaField.dispatchEvent(new InputEvent('input'));\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('cols')\n colsObserver() {\n this.contentContainer.style.width = null;\n }\n\n @Watch('errors')\n errorsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('hints')\n hintsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('maxlength')\n maxlengthObserver() {\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n @Watch('rows')\n rowsObserver() {\n this.contentContainer.style.height = null;\n }\n\n @Watch('value')\n valueObserver() {\n const { maxlength, value = '' } = this;\n if (!maxlength) return;\n\n const truncatedValue = value.substr(0, maxlength);\n if (truncatedValue === value) return;\n\n mirrorEmit(this, ['change', 'tctChange'], { value: truncatedValue });\n }\n\n // #endregion\n // #region Local Methods\n\n get hasError() {\n return Array.isArray(this.errors) && this.errors.length > 0;\n }\n\n get inputDescribedBy() {\n let describedBy = undefined;\n\n if (this.showMessages) {\n describedBy = `${this.inputId}-description`;\n }\n\n // Remove screen reader character count from described by after typing\n // starts to avoid double announcement. It's needed on focus to announce\n // the character count when field gains focus.\n if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n }\n\n return describedBy;\n }\n\n get inputId() {\n return `input-guid-${this.guid}`;\n }\n\n get messages(): string[] {\n return (\n (this.errors && this.errors.length > 0 && this.errors) \|\|\n (this.hints && this.hints.length > 0 && this.hints) \|\|\n []\n );\n }\n\n get showMessages() {\n return this.messages.length > 0 && !this.hideMessages;\n }\n\n get showResize() {\n const { resize } = this;\n return resize && resize !== 'none';\n }\n\n get wrapperClasses() {\n const errorClass = this.hasError ? ' has-error' : '';\n const valueClass = !!this.value ? ' has-value' : '';\n const focusClass = this.hasFocus ? ' has-focus' : '';\n\n return `field-container${errorClass}${valueClass}${focusClass}`;\n }\n\n checkCols = () => {\n const { contentContainer, cols, textareaField, resize } = this;\n\n if (!cols \|\| ['none', 'vertical'].includes(resize)) return;\n contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n textareaField.removeAttribute('cols');\n };\n\n checkRows = () => {\n const { contentContainer, rows, textareaField, resize } = this;\n\n if (!rows \|\| ['none', 'horizontal'].includes(resize)) return;\n contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n textareaField.removeAttribute('rows');\n };\n\n getBorderOffset = () => {\n const computedStyle = window.getComputedStyle(this.textareaField);\n\n return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n };\n\n increaseHeightIfOverflowing = () => {\n const { scrollHeight } = this.textareaField;\n if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n // need to account for border width because scrollHeight does not include it\n const newHeight = scrollHeight + this.getBorderOffset();\n this.contentContainer.style.height = `${newHeight}px`;\n }\n };\n\n isOverflowingVertically = () => {\n const { clientHeight, scrollHeight } = this.textareaField;\n\n return scrollHeight > clientHeight;\n };\n\n onMouseDown = (event: MouseEvent) => {\n const { contentContainer } = this;\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: event.clientX,\n y: event.clientY,\n };\n document.addEventListener('mousemove', this.onMouseMove);\n document.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseMove = (event: MouseEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onMouseUp = () => {\n document.removeEventListener('mousemove', this.onMouseMove);\n document.removeEventListener('mouseup', this.onMouseUp);\n this.downParams = null;\n };\n\n onTextareaBlur = () => {\n const {\n valueOnFocus,\n textareaField: { value },\n } = this;\n this.describeByScreenReaderCharacterCount = true;\n this.hasFocus = false;\n setMessageHeight(this);\n if (valueOnFocus !== value) mirrorEmit(this, ['change', 'tctChange'], { value });\n };\n\n onTextareaChange = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n\n mirrorEmit(this, ['change', 'tctChange'], { value });\n };\n\n onTextareaFocus = () => {\n this.hasFocus = true;\n this.valueOnFocus = this.value;\n setMessageHeight(this);\n };\n\n onTextareaInput = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n this.describeByScreenReaderCharacterCount = false;\n this.increaseHeightIfOverflowing();\n if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n mirrorEmit(this, ['input', 'tctInput'], { value });\n };\n\n onTouchMove = (event: TouchEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onTouchStart = (event: TouchEvent) => {\n if (event.touches.length !== 1) return;\n\n event.preventDefault();\n\n const { contentContainer } = this;\n const firstTouch = event.touches[0];\n\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: firstTouch.pageX,\n y: firstTouch.pageY,\n };\n\n document.addEventListener('touchmove', this.onTouchMove);\n document.addEventListener('touchend', this.onTouchMove);\n };\n\n setHeight(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { height, y },\n } = this;\n const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n if (!resizeY) return;\n\n const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n const newHeight = height - (y - eventY);\n // If 'vertical-auto', change height if the new height is greater\n // than the current height or the textarea is not overflowing.\n // Otherwise, change height regardless of the new height.\n if (\n resize !== 'vertical-auto' \|\|\n newHeight > height \|\|\n (resize === 'vertical-auto' && !this.isOverflowingVertically())\n ) {\n contentContainer.style.height = `${newHeight}px`;\n }\n }\n\n setWidth(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { width, x },\n } = this;\n\n const resizeX = ['both', 'horizontal'].includes(resize);\n\n if (!resizeX) return;\n const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n const newWidth = width - (x - eventX);\n contentContainer.style.width = `${newWidth}px`;\n }\n\n updateScreenReaderCharacterCount = () => {\n this.screenReaderCharacterCount = this.value?.length \|\| 0;\n };\n\n // #endregion\n // #region Render Methods\n\n renderInput() {\n const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n return (\n <div class=\"input-container\">\n <textarea\n id={this.inputId}\n class={textareaClasses}\n placeholder={(this.placeholder && loc(this.placeholder)) \|\| undefined}\n test-id=\"inputField\"\n maxLength={this.maxlength}\n aria-describedby={this.inputDescribedBy}\n aria-invalid={`${this.hasError}`}\n aria-required={`${!this.optional}`}\n aria-label={this.hideLabel && this.label}\n spellcheck={this.spellcheck}\n rows={this.rows \|\| 3}\n cols={this.cols}\n value={this.value}\n ref={el => (this.textareaField = el)}\n readonly={!!this.readonly}\n disabled={!!this.disabled}\n maxlength={this.maxlength}\n onInput={this.onTextareaInput}\n onChange={this.onTextareaChange}\n onFocus={this.onTextareaFocus}\n onBlur={this.onTextareaBlur}\n ></textarea>\n {this.hasError ? (\n <q2-icon\n type=\"error\"\n class=\"icon-error\"\n />\n ) : (\n ''\n )}\n {this.showResize && (\n <button\n onMouseDown={this.onMouseDown}\n onTouchStart={this.onTouchStart}\n class=\"btn-resize\"\n aria-label={loc('tecton.element.input.resize')}\n tabIndex={-1}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n fill=\"none\"\n stroke-stroke-linecap=\"square\"\n />\n </svg>\n </button>\n )}\n </div>\n );\n }\n\n renderMaxLength() {\n return (\n <Fragment>\n <div\n class=\"max-length\"\n aria-hidden=\"true\"\n >\n {this.value?.length \|\| 0}/{this.maxlength}\n </div>\n <div\n aria-live=\"polite\"\n class=\"sr\"\n id={`${this.inputId}-max-length`}\n test-id=\"max-length-sr\"\n >\n {loc('tecton.element.textarea.characterCount.screenReader', [\n this.screenReaderCharacterCount,\n this.maxlength,\n ])}\n </div>\n </Fragment>\n );\n }\n\n render() {\n return (\n <div class={this.wrapperClasses}>\n {renderLabel(this)}\n <div\n class=\"content-container\"\n ref={el => (this.contentContainer = el)}\n >\n {this.renderInput()}\n {this.maxlength ? this.renderMaxLength() : ''}\n {renderMessages(this)}\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-textarea.entry.cjs.js.map CHANGED Viewed

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

package/dist/cjs/q2-toast.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 const q2ToastCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.toast{--comp-accent-width:1px;--comp-icon-size:32px;--comp-icon-bg:transparent;--comp-text-color:var(--tct-toast-text, var(--tct-gray-2, var(--app-gray-2, #333333)));--comp-subtle-color:var(--tct-toast-subtle, var(--tct-gray-5, var(--app-gray-5, #6b6b6b)));--comp-color-success:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--comp-color-info:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--comp-color-warning:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--comp-color-alert:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a));--comp-color-default:white;display:flex;flex-direction:column;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));padding-left:3px;border-radius:5px;border:1px solid transparent;background:var(--tct-toast-background, var(--tct-gray-14, var(--app-gray-l3, #ffffff)));color:var(--comp-text-color);box-shadow:var(--tct-toast-shadow, var(--app-shadow-2, 0 12px 24px rgb(0 0 0 / 0.12)));overflow:hidden}.toast.success{border-color:var(--comp-color-success);background-color:var(--comp-color-success);--comp-icon-bg:#e7f5e3}.toast.info{border-color:var(--comp-color-info);background-color:var(--comp-color-info);--comp-icon-bg:#e6f1fb}.toast.warning{border-color:var(--comp-color-warning);background-color:var(--comp-color-warning);--comp-icon-bg:#fff0df}.toast.alert{border-color:var(--comp-color-alert);background-color:var(--comp-color-alert);--comp-icon-bg:#fde6e6}.toast.is-closing{animation-name:shrink;animation-duration:500ms;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:top;overflow:hidden}.toast.small .container{padding:var(--tct-toast-padding-small, var(--app-scale-2x, 10px))}.toast.default{--comp-border-color:var(--tct-toast-border, var(--tct-gray-9, var(--app-gray-4, #d1d1d1)));--comp-icon-bg:var(--tct-toast-icon-bg, var(--tct-gray-12, var(--app-gray-l2, #f3f3f3)));border-color:var(--comp-border-color)}.header{display:grid;grid-template-columns:var(--comp-icon-size) 1fr auto;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));align-items:center}.toast.no-icon .header{grid-template-columns:1fr auto}.icon{width:var(--comp-icon-size);height:var(--comp-icon-size);border-radius:50%;display:grid;place-items:center;background:var(--comp-icon-bg)}.icon q2-icon{--tct-icon-size:calc(var(--comp-icon-size) - 6px);--tct-icon-stroke-primary:var(--comp-border-color);--tct-icon-stroke-secondary:var(--comp-border-color);--tct-icon-fill:var(--comp-border-color)}.title{font-weight:600;display:flex;align-items:center}.title-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{color:var(--comp-subtle-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{margin-top:var(--tct-toast-footer-gap, var(--app-scale-2x, 10px));display:flex;align-items:center;justify-content:space-between;gap:var(--tct-toast-footer-spacing, var(--app-scale-2x, 10px));color:var(--comp-subtle-color);font-size:0.875rem}.time{white-space:nowrap}.actions{display:inline-flex;align-items:center;gap:var(--tct-toast-actions-gap, var(--app-scale-2x, 10px))}.close{border:none;background:transparent;padding:2px;margin-left:var(--tct-toast-close-offset, var(--app-scale-1x, 5px));color:var(--comp-subtle-color);cursor:pointer}.close q2-icon{--tct-icon-size:18px}.container{padding:var(--tct-toast-padding, var(--app-scale-3x, 15px));background-color:white}@keyframes shrink{from{transform:scale(1);height:var(--toast-close-height, 0px);opacity:1}to{transform:scale(0);height:0;opacity:0}}";