q2-tecton-elements 1.54.5 → 1.55.1

package/dist/q2-tecton-elements/q2-textarea.entry.js

@@ -1,8 +1,8 @@
 import { r as t, c as r, h as a, F as e, g as o } from "./index-7a5365e2.js";
 
-import { p as i, c as n, s, o as c, i as l, l as h, r as d, f as v } from "./index-504f1a9e.js";
+import { p as i, c as n, s, o as c, i as l, l as h, r as d, f as v } from "./index-f2a66217.js";
 
-const x = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}: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, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}: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))))}.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-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);resize:none;height:100%;-webkit-appearance:none;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);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: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);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));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))));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));background:var(--tct-textarea-focus-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}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: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))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
+const x = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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)))}: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, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}: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))))}.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-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);resize:none;height:100%;-webkit-appearance:none;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);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: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);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));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))));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));background:var(--tct-textarea-focus-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}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: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))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 
 const p = x;
 
@@ -335,10 +335,10 @@ const b = class {
   }
   render() {
     return a("div", {
-      key: "067ef076d53ad1ae2f7fec1bd1a86f7c51b7fd4f",
+      key: "9e15d586cc11ac73ce92f35a0d1a05dc6101e064",
       class: this.wrapperClasses
     }, v(this), a("div", {
-      key: "ae1a0bd1e5595447ddcb049bdf241702558d9074",
+      key: "f0836c51dbeba1895d11a5bd20bfbaf3b5d22ad8",
       class: "content-container",
       ref: t => this.contentContainer = t
     }, this.renderInput(), this.maxlength ? this.renderMaxLength() : "", d(this)));

package/dist/q2-tecton-elements/q2-textarea.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TextareaCss","Q2TextareaStyle0","Q2Textarea","this","debouncedScreenReaderCharacterCount","debounce","updateScreenReaderCharacterCount","describeByScreenReaderCharacterCount","guid","createGuid","scheduledAfterRender","checkCols","contentContainer","cols","textareaField","resize","includes","style","width","offsetWidth","removeAttribute","checkRows","rows","height","offsetHeight","getBorderOffset","computedStyle","window","getComputedStyle","parseInt","borderTopWidth","borderBottomWidth","increaseHeightIfOverflowing","scrollHeight","isOverflowingVertically","newHeight","clientHeight","onMouseDown","event","downParams","x","clientX","y","clientY","document","addEventListener","onMouseMove","onMouseUp","setHeight","setWidth","removeEventListener","onTextareaBlur","valueOnFocus","value","hasFocus","setMessageHeight","change","emit","onTextareaChange","stopPropagation","target","onTextareaFocus","onTextareaInput","maxlength","input","onTouchMove","onTouchStart","touches","length","preventDefault","firstTouch","pageX","pageY","screenReaderCharacterCount","_a","componentWillLoad","isNaN","undefined","componentDidLoad","overrideFocus","hostElement","componentDidRender","push","forEach","fn","onHostElementChange","onchange","detail","onHostElementFocus","isEventFromElement","focus","onHostElementInput","oninput","setValue","dispatchEvent","InputEvent","colsObserver","errorsObserver","hintsObserver","maxlengthObserver","rowsObserver","valueObserver","truncatedValue","substr","hasError","Array","isArray","errors","inputDescribedBy","describedBy","showMessages","inputId","messages","hints","hideMessages","showResize","wrapperClasses","errorClass","valueClass","focusClass","resizeY","eventY","MouseEvent","_b","resizeX","eventX","newWidth","renderInput","textareaClasses","h","class","id","placeholder","loc","maxLength","optional","hideLabel","label","spellcheck","ref","el","readonly","disabled","onInput","onChange","onFocus","onBlur","type","tabIndex","viewBox","xmlns","d","fill","renderMaxLength","Fragment","render","key","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-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px)} 0 #{var-list(\n            var-prefixer(textarea-margin-bottom),\n            --app-scale-6x,\n            30px\n        )};\n    display: block;\n    margin: var-list(--tct-textarea-margin, --comp-default-margin);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\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), normal);\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    }\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-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    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    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        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        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        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            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        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\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            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\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: 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    border: 0;\n    position: absolute;\n    right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n    bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\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 { IDict } from 'src/util';\nimport {\n    createGuid,\n    debounce,\n    isEventFromElement,\n    renderLabel,\n    loc,\n    renderMessages,\n    overrideFocus,\n    setMessageHeight,\n} from 'src/utils';\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: IDict<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     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     * @legacyEvent\n     */\n    @Event()\n    input: 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        this.change.emit({ 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        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) this.change.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    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        this.input.emit({ 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"],"mappings":";;;;AAAA,MAAMA,IAAgB;;AACtB,MAAAC,IAAeD;;MCyBFE,IAAU;;;;;IAInBC,KAAAC,sCAAsCC,GAAS;MAC3CF,KAAKG;AAAkC,QACxC;IACHH,KAAAI,uCAAuC;IACvCJ,KAAAK,OAAOC;IACPN,KAAAO,uBAAuC;IAySvCP,KAAAQ,YAAY;MACR,OAAMC,kBAAEA,GAAgBC,MAAEA,GAAIC,eAAEA,GAAaC,QAAEA,KAAWZ;MAE1D,KAAKU,KAAQ,EAAC,QAAQ,aAAYG,SAASD,IAAS;MACpDH,EAAiBK,MAAMC,QAAQ,GAAGN,EAAiBO;MACnDL,EAAcM,gBAAgB;AAAO;IAGzCjB,KAAAkB,YAAY;MACR,OAAMT,kBAAEA,GAAgBU,MAAEA,GAAIR,eAAEA,GAAaC,QAAEA,KAAWZ;MAE1D,KAAKmB,KAAQ,EAAC,QAAQ,eAAcN,SAASD,IAAS;MACtDH,EAAiBK,MAAMM,SAAS,GAAGX,EAAiBY;MACpDV,EAAcM,gBAAgB;AAAO;IAGzCjB,KAAAsB,kBAAkB;MACd,MAAMC,IAAgBC,OAAOC,iBAAiBzB,KAAKW;MAEnD,OAAOe,SAASH,EAAcI,gBAAgB,MAAMD,SAASH,EAAcK,mBAAmB;AAAG;IAGrG5B,KAAA6B,8BAA8B;MAC1B,OAAMC,cAAEA,KAAiB9B,KAAKW;MAC9B,IAAIX,KAAKY,WAAW,mBAAmBZ,KAAK+B,2BAA2B;;QAEnE,MAAMC,IAAYF,IAAe9B,KAAKsB;QACtCtB,KAAKS,iBAAiBK,MAAMM,SAAS,GAAGY;;;IAIhDhC,KAAA+B,0BAA0B;MACtB,OAAME,cAAEA,GAAYH,cAAEA,KAAiB9B,KAAKW;MAE5C,OAAOmB,IAAeG;AAAY;IAGtCjC,KAAAkC,cAAeC;MACX,OAAM1B,kBAAEA,KAAqBT;MAC7BA,KAAKoC,aAAa;QACdrB,OAAON,EAAiBO;QACxBI,QAAQX,EAAiBY;QACzBgB,GAAGF,EAAMG;QACTC,GAAGJ,EAAMK;;MAEbC,SAASC,iBAAiB,aAAa1C,KAAK2C;MAC5CF,SAASC,iBAAiB,WAAW1C,KAAK4C;AAAU;IAGxD5C,KAAA2C,cAAeR;MACXnC,KAAK6C,UAAUV;MACfnC,KAAK8C,SAASX;AAAM;IAGxBnC,KAAA4C,YAAY;MACRH,SAASM,oBAAoB,aAAa/C,KAAK2C;MAC/C3C,KAAKoC,aAAa;AAAI;IAG1BpC,KAAAgD,iBAAiB;MACb,OAAMC,cACFA,GACAtC,gBAAeuC,OAAEA,MACjBlD;MACJA,KAAKI,uCAAuC;MAC5CJ,KAAKmD,WAAW;MAChBC,EAAiBpD;MACjB,IAAIiD,MAAiBC,GAAOlD,KAAKqD,OAAOC,KAAK;QAAEJ;;AAAQ;IAG3DlD,KAAAuD,mBAAoBpB;MAChBA,EAAMqB;MACN,MAAMN,IAASf,EAAMsB,OAA+BP;MAEpDlD,KAAKqD,OAAOC,KAAK;QAAEJ;;AAAQ;IAG/BlD,KAAA0D,kBAAkB;MACd1D,KAAKmD,WAAW;MAChBnD,KAAKiD,eAAejD,KAAKkD;MACzBE,EAAiBpD;AAAK;IAG1BA,KAAA2D,kBAAmBxB;MACfA,EAAMqB;MACN,MAAMN,IAASf,EAAMsB,OAA+BP;MACpDlD,KAAKI,uCAAuC;MAC5CJ,KAAK6B;MACL,IAAI7B,KAAK4D,WAAW5D,KAAKC;MACzBD,KAAK6D,MAAMP,KAAK;QAAEJ;;AAAQ;IAG9BlD,KAAA8D,cAAe3B;MACXnC,KAAK6C,UAAUV;MACfnC,KAAK8C,SAASX;AAAM;IAGxBnC,KAAA+D,eAAgB5B;MACZ,IAAIA,EAAM6B,QAAQC,WAAW,GAAG;MAEhC9B,EAAM+B;MAEN,OAAMzD,kBAAEA,KAAqBT;MAC7B,MAAMmE,IAAahC,EAAM6B,QAAQ;MAEjChE,KAAKoC,aAAa;QACdrB,OAAON,EAAiBO;QACxBI,QAAQX,EAAiBY;QACzBgB,GAAG8B,EAAWC;QACd7B,GAAG4B,EAAWE;;MAGlB5B,SAASC,iBAAiB,aAAa1C,KAAK8D;MAC5CrB,SAASC,iBAAiB,YAAY1C,KAAK8D;AAAY;IA0C3D9D,KAAAG,mCAAmC;;MAC/BH,KAAKsE,+BAA6BC,IAAAvE,KAAKkD,WAAK,QAAAqB,WAAA,aAAAA,EAAEN,WAAU;AAAC;;;;;;;;;;;;;;;kBA1VW;;;;;;;EAkCxE,iBAAAO;IACI,IAAIC,MAAMzE,KAAK4D,YAAY;MACvB5D,KAAK4D,YAAYc;;IAGrB,IAAI1E,KAAK4D,WAAW;MAChB5D,KAAKG;;;EAIb,gBAAAwE;IACIC,EAAc5E,KAAK6E;;EAGvB,kBAAAC;IACI9E,KAAKO,qBAAqBwE,KAAK/E,KAAKkB,WAAWlB,KAAKQ,WAAWR,KAAK6B;IACpE7B,KAAKO,qBAAqByE,SAAQC,KAAMA;IACxCjF,KAAKO,uBAAuB;;;;EAOhC,mBAAA2E,CAAoB/C;IAChB,IAAIA,EAAMsB,WAAWzD,KAAK6E,gBAAgB7E,KAAK6E,YAAYM,UAAU;MACjEnF,KAAKkD,QAAQf,EAAMiD,OAAOlC;;;EAKlC,kBAAAmC,CAAmBlD;IACf,KAAKmD,EAAmBnD,GAAOnC,KAAK6E,cAAc;IAClD7E,KAAKW,cAAc4E;;EAIvB,kBAAAC,CAAmBrD;IACf,IAAIA,EAAMsB,WAAWzD,KAAK6E,gBAAgB7E,KAAK6E,YAAYY,SAAS;MAChEzF,KAAKkD,QAAQf,EAAMiD,OAAOlC;;;;;;;;;;;;;EAgBlC,QAAAwC,CAASxC;IACL,OAAMvC,eAAEA,KAAkBX;IAC1BW,EAAc4E;IACd5E,EAAcuC,QAAQA;IACtBvC,EAAcgF,cAAc,IAAIC,WAAW;;;;EAO/C,YAAAC;IACI7F,KAAKS,iBAAiBK,MAAMC,QAAQ;;EAIxC,cAAA+E;IACI9F,KAAKmD,YAAYnD,KAAKO,qBAAqBwE,MAAK,MAAM3B,EAAiBpD;;EAI3E,aAAA+F;IACI/F,KAAKmD,YAAYnD,KAAKO,qBAAqBwE,MAAK,MAAM3B,EAAiBpD;;EAI3E,iBAAAgG;IACI,IAAIhG,KAAK4D,WAAW;MAChB5D,KAAKG;;;EAKb,YAAA8F;IACIjG,KAAKS,iBAAiBK,MAAMM,SAAS;;EAIzC,aAAA8E;IACI,OAAMtC,WAAEA,GAASV,OAAEA,IAAQ,MAAOlD;IAClC,KAAK4D,GAAW;IAEhB,MAAMuC,IAAiBjD,EAAMkD,OAAO,GAAGxC;IACvC,IAAIuC,MAAmBjD,GAAO;IAE9BlD,KAAKqD,OAAOC,KAAK;MAAEJ,OAAOiD;;;;;EAM9B,YAAIE;IACA,OAAOC,MAAMC,QAAQvG,KAAKwG,WAAWxG,KAAKwG,OAAOvC,SAAS;;EAG9D,oBAAIwC;IACA,IAAIC,IAAchC;IAElB,IAAI1E,KAAK2G,cAAc;MACnBD,IAAc,GAAG1G,KAAK4G;;;;;QAM1B,IAAI5G,KAAK4D,aAAa5D,KAAKI,sCAAsC;MAC7DsG,IAAcA,IAAc,GAAGA,KAAe1G,KAAK4G,uBAAuB,GAAG5G,KAAK4G;;IAGtF,OAAOF;;EAGX,WAAIE;IACA,OAAO,cAAc5G,KAAKK;;EAG9B,YAAIwG;IACA,OACK7G,KAAKwG,UAAUxG,KAAKwG,OAAOvC,SAAS,KAAKjE,KAAKwG,UAC9CxG,KAAK8G,SAAS9G,KAAK8G,MAAM7C,SAAS,KAAKjE,KAAK8G,SAC7C;;EAIR,gBAAIH;IACA,OAAO3G,KAAK6G,SAAS5C,SAAS,MAAMjE,KAAK+G;;EAG7C,cAAIC;IACA,OAAMpG,QAAEA,KAAWZ;IACnB,OAAOY,KAAUA,MAAW;;EAGhC,kBAAIqG;IACA,MAAMC,IAAalH,KAAKqG,WAAW,eAAe;IAClD,MAAMc,MAAenH,KAAKkD,QAAQ,eAAe;IACjD,MAAMkE,IAAapH,KAAKmD,WAAW,eAAe;IAElD,OAAO,kBAAkB+D,IAAaC,IAAaC;;EAuHvD,SAAAvE,CAAUV;;IACN,OAAM1B,kBACFA,GAAgBG,QAChBA,GACAwB,aAAYhB,QAAEA,GAAMmB,GAAEA,MACtBvC;IACJ,MAAMqH,IAAU,EAAC,QAAQ,YAAY,kBAAiBxG,SAASD;IAE/D,KAAKyG,GAAS;IAEd,MAAMC,IAASnF,aAAiBoF,aAAapF,EAAMK,WAAUgF,KAAAjD,IAAApC,EAAM6B,QAAQ,QAAE,QAAAO,WAAA,aAAAA,EAAEF,WAAK,QAAAmD,WAAA,IAAAA,IAAI;IACxF,MAAMxF,IAAYZ,KAAUmB,IAAI+E;;;;QAIhC,IACI1G,MAAW,mBACXoB,IAAYZ,KACXR,MAAW,oBAAoBZ,KAAK+B,2BACvC;MACEtB,EAAiBK,MAAMM,SAAS,GAAGY;;;EAI3C,QAAAc,CAASX;;IACL,OAAM1B,kBACFA,GAAgBG,QAChBA,GACAwB,aAAYrB,OAAEA,GAAKsB,GAAEA,MACrBrC;IAEJ,MAAMyH,IAAU,EAAC,QAAQ,eAAc5G,SAASD;IAEhD,KAAK6G,GAAS;IACd,MAAMC,IAASvF,aAAiBoF,aAAapF,EAAMG,WAAUkF,KAAAjD,IAAApC,EAAM6B,QAAQ,QAAE,QAAAO,WAAA,aAAAA,EAAEH,WAAK,QAAAoD,WAAA,IAAAA,IAAI;IACxF,MAAMG,IAAW5G,KAASsB,IAAIqF;IAC9BjH,EAAiBK,MAAMC,QAAQ,GAAG4G;;;;EAUtC,WAAAC;IACI,MAAMC,IAAkB7H,KAAKY,WAAW,kBAAkB,yBAAyB;IAEnF,OACIkH,EAAA;MAAKC,OAAM;OACPD,EAAA;MACIE,IAAIhI,KAAK4G;MACTmB,OAAOF;MACPI,aAAcjI,KAAKiI,eAAeC,EAAIlI,KAAKiI,gBAAiBvD;MAAS,WAC7D;MACRyD,WAAWnI,KAAK4D;MAAS,oBACP5D,KAAKyG;MAAgB,gBACzB,GAAGzG,KAAKqG;MAAU,iBACjB,IAAIrG,KAAKoI;MAAU,cACtBpI,KAAKqI,aAAarI,KAAKsI;MACnCC,YAAYvI,KAAKuI;MACjBpH,MAAMnB,KAAKmB,QAAQ;MACnBT,MAAMV,KAAKU;MACXwC,OAAOlD,KAAKkD;MACZsF,KAAKC,KAAOzI,KAAKW,gBAAgB8H;MACjCC,YAAY1I,KAAK0I;MACjBC,YAAY3I,KAAK2I;MACjB/E,WAAW5D,KAAK4D;MAChBgF,SAAS5I,KAAK2D;MACdkF,UAAU7I,KAAKuD;MACfuF,SAAS9I,KAAK0D;MACdqF,QAAQ/I,KAAKgD;QAEhBhD,KAAKqG,WACFyB,EAAA;MACIkB,MAAK;MACLjB,OAAM;SACR,IAIL/H,KAAKgH,cACFc,EAAA;MACI5F,aAAalC,KAAKkC;MAClB6B,cAAc/D,KAAK+D;MACnBgE,OAAM;MAAY,cACNG,EAAI;MAChBe,WAAW;OAEXnB,EAAA;MAAA,eACgB;MACZoB,SAAQ;MACRC,OAAM;OAENrB,EAAA;MACIsB,GAAE;MACFC,MAAK;MAAM,yBACW;;;EASlD,eAAAC;;IACI,OACIxB,EAACyB,GAAQ,MACLzB,EAAA;MACIC,OAAM;MAAY,eACN;SAEXxD,IAAAvE,KAAKkD,WAAK,QAAAqB,WAAA,aAAAA,EAAEN,WAAU,GAAC,KAAGjE,KAAK4D,YAEpCkE,EAAA;MAAA,aACc;MACVC,OAAM;MACNC,IAAI,GAAGhI,KAAK4G;MAAoB,WACxB;OAEPsB,EAAI,uDAAuD,EACxDlI,KAAKsE,4BACLtE,KAAK4D;;EAOzB,MAAA4F;IACI,OACI1B,EAAA;MAAA2B,KAAA;MAAK1B,OAAO/H,KAAKiH;OACZyC,EAAY1J,OACb8H,EAAA;MAAA2B,KAAA;MACI1B,OAAM;MACNS,KAAKC,KAAOzI,KAAKS,mBAAmBgI;OAEnCzI,KAAK4H,eACL5H,KAAK4D,YAAY5D,KAAKsJ,oBAAoB,IAC1CK,EAAe3J"}
+{"version":3,"names":["q2TextareaCss","Q2TextareaStyle0","Q2Textarea","this","debouncedScreenReaderCharacterCount","debounce","updateScreenReaderCharacterCount","describeByScreenReaderCharacterCount","guid","createGuid","scheduledAfterRender","checkCols","contentContainer","cols","textareaField","resize","includes","style","width","offsetWidth","removeAttribute","checkRows","rows","height","offsetHeight","getBorderOffset","computedStyle","window","getComputedStyle","parseInt","borderTopWidth","borderBottomWidth","increaseHeightIfOverflowing","scrollHeight","isOverflowingVertically","newHeight","clientHeight","onMouseDown","event","downParams","x","clientX","y","clientY","document","addEventListener","onMouseMove","onMouseUp","setHeight","setWidth","removeEventListener","onTextareaBlur","valueOnFocus","value","hasFocus","setMessageHeight","change","emit","onTextareaChange","stopPropagation","target","onTextareaFocus","onTextareaInput","maxlength","input","onTouchMove","onTouchStart","touches","length","preventDefault","firstTouch","pageX","pageY","screenReaderCharacterCount","_a","componentWillLoad","isNaN","undefined","componentDidLoad","overrideFocus","hostElement","componentDidRender","push","forEach","fn","onHostElementChange","onchange","detail","onHostElementFocus","isEventFromElement","focus","onHostElementInput","oninput","setValue","dispatchEvent","InputEvent","colsObserver","errorsObserver","hintsObserver","maxlengthObserver","rowsObserver","valueObserver","truncatedValue","substr","hasError","Array","isArray","errors","inputDescribedBy","describedBy","showMessages","inputId","messages","hints","hideMessages","showResize","wrapperClasses","errorClass","valueClass","focusClass","resizeY","eventY","MouseEvent","_b","resizeX","eventX","newWidth","renderInput","textareaClasses","h","class","id","placeholder","loc","maxLength","optional","hideLabel","label","spellcheck","ref","el","readonly","disabled","onInput","onChange","onFocus","onBlur","type","tabIndex","viewBox","xmlns","d","fill","renderMaxLength","Fragment","render","key","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}\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), normal);\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    }\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-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    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    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        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        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        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            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        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\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            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\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: 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    border: 0;\n    position: absolute;\n    right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n    bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\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 { IDict } from 'src/util';\nimport {\n    createGuid,\n    debounce,\n    isEventFromElement,\n    renderLabel,\n    loc,\n    renderMessages,\n    overrideFocus,\n    setMessageHeight,\n} from 'src/utils';\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: IDict<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     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     * @legacyEvent\n     */\n    @Event()\n    input: 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        this.change.emit({ 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        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) this.change.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    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        this.input.emit({ 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"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-tooltip.entry.js

@@ -1,8 +1,8 @@
 import { r as t, h as o, g as i } from "./index-7a5365e2.js";
 
-import { o as e, i as a } from "./index-504f1a9e.js";
+import { o as e, i as a } from "./index-f2a66217.js";
 
-const r = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:before,:host([persistent]:not([persistent=false])) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
+const r = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:before,:host([persistent]:not([persistent=false])) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
 
 const n = r;
 

package/dist/q2-tecton-elements/q2-tooltip.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TooltipCss","Q2TooltipStyle0","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","focusCaptureHandler","checkFocusClass","focusHandler","event","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","shouldBeVisible","focusClass","keyUpHandler","key","hideTooltip","persistent","matches","animationEndHandler","isKeyboardFocus","findFocusVisibleElement","document","activeElement","element","shadowRoot","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n\n        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\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    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAe;;AACrB,MAAAC,IAAeD;;MCGFE,IAAS;;;;QAGlBC,KAAAC,oBAAoB;;;qBA4BC;;;;;oBAoByC;;;;EAK9D,gBAAAC;IACIC,EAAcH,KAAKI;;;;EAOvB,mBAAAC;IACIL,KAAKM;;EAIT,YAAAC,CAAaC;IACT,KAAKC,EAAmBD,GAAOR,KAAKI,cAAc;IAClD,KAAKJ,KAAKU,WAAW;IACrBV,KAAKW,eAAeC;;EAIxB,eAAAC;IACI,IAAIb,KAAKc,iBAAiB;IAC1B,IAAId,KAAKe,eAAe,qBAAqBf,KAAKe,aAAa,8BAC1Df,KAAKe,aAAa;;EAI3B,YAAAC,CAAaR;IACT,QAAQA,EAAMS;KACV,KAAK;KACL,KAAK;MACDjB,KAAKkB;MACL;;;;;EAOZ,mBAAIJ;IACA,IAAId,KAAKmB,YAAY,OAAO;IAC5B,OAAOnB,KAAKI,YAAYgB,QAAQ;;EAGpC,mBAAAC;IACIrB,KAAKC,oBAAoBD,KAAKC,oBAAoB;IAClD,OAAMc,YAAEA,GAAUd,mBAAEA,KAAsBD;;;;QAK1C,IAAIe,MAAe,2BAA4BA,MAAe,uBAAuBd,MAAsB,GAAI;MAC3GD,KAAKe,aAAa;MAClBf,KAAKC,oBAAoB;;;EAIjC,eAAAK;IACI,KAAKN,KAAKc,iBAAiB;IAC3B,MAAMQ,MAAoBtB,KAAKuB,wBAAwBC,SAASC;IAChEzB,KAAKe,aAAaO,IAAkB,uBAAuB;IAC3D,IAAIA,GAAiB;;EAGzB,uBAAAC,CAAwBG;IACpB,KAAKA,GAAS;IACd,IAAIA,EAAQC,YAAYD,IAAU1B,KAAKuB,wBAAwBG,EAAQC,WAAWF;IAClF,QAAOC,MAAO,QAAPA,WAAO,aAAPA,EAASN,QAAQ,qBAAoBM,IAAU;;EAG1D,WAAAR;IACI,IAAIlB,KAAKe,eAAe,qBAAqBf,KAAKe,aAAa,8BAC1Df,KAAKe,aAAa;;;;EAM3B,MAAAa;IACI,OAAMb,YAAEA,KAAef;IACvB,MAAM6B,IAAU,EAAC;IACjB,IAAId,GAAYc,EAAQC,KAAKf;IAE7B,OAAOf,KAAK+B,QACRC,EAAA;MACIC,UAAUjC,KAAKU,YAAY,IAAIwB;MAC/BC,KAAKC,KAAOpC,KAAKW,iBAAiByB;MAClCC,OAAOR,EAAQS,KAAK;MAAI,cACZtC,KAAK+B;MACjBQ,gBAAgB,MAAMvC,KAAKqB;MAC3BmB,MAAK;MAAS,WACN;OAERR,EAAA,iBAGJA,EAAA"}
+{"version":3,"names":["q2TooltipCss","Q2TooltipStyle0","Q2Tooltip","this","animationEndCount","componentDidLoad","overrideFocus","hostElement","focusCaptureHandler","checkFocusClass","focusHandler","event","isEventFromElement","focusable","tooltipElement","focus","focusOutHandler","shouldBeVisible","focusClass","keyUpHandler","key","hideTooltip","persistent","matches","animationEndHandler","isKeyboardFocus","findFocusVisibleElement","document","activeElement","element","shadowRoot","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n\n        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\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    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAe;;AACrB,MAAAC,IAAeD;;MCGFE,IAAS;;;;QAGlBC,KAAAC,oBAAoB;;;qBA4BC;;;;;oBAoByC;;;;EAK9D,gBAAAC;IACIC,EAAcH,KAAKI;;;;EAOvB,mBAAAC;IACIL,KAAKM;;EAIT,YAAAC,CAAaC;IACT,KAAKC,EAAmBD,GAAOR,KAAKI,cAAc;IAClD,KAAKJ,KAAKU,WAAW;IACrBV,KAAKW,eAAeC;;EAIxB,eAAAC;IACI,IAAIb,KAAKc,iBAAiB;IAC1B,IAAId,KAAKe,eAAe,qBAAqBf,KAAKe,aAAa,8BAC1Df,KAAKe,aAAa;;EAI3B,YAAAC,CAAaR;IACT,QAAQA,EAAMS;KACV,KAAK;KACL,KAAK;MACDjB,KAAKkB;MACL;;;;;EAOZ,mBAAIJ;IACA,IAAId,KAAKmB,YAAY,OAAO;IAC5B,OAAOnB,KAAKI,YAAYgB,QAAQ;;EAGpC,mBAAAC;IACIrB,KAAKC,oBAAoBD,KAAKC,oBAAoB;IAClD,OAAMc,YAAEA,GAAUd,mBAAEA,KAAsBD;;;;QAK1C,IAAIe,MAAe,2BAA4BA,MAAe,uBAAuBd,MAAsB,GAAI;MAC3GD,KAAKe,aAAa;MAClBf,KAAKC,oBAAoB;;;EAIjC,eAAAK;IACI,KAAKN,KAAKc,iBAAiB;IAC3B,MAAMQ,MAAoBtB,KAAKuB,wBAAwBC,SAASC;IAChEzB,KAAKe,aAAaO,IAAkB,uBAAuB;IAC3D,IAAIA,GAAiB;;EAGzB,uBAAAC,CAAwBG;IACpB,KAAKA,GAAS;IACd,IAAIA,EAAQC,YAAYD,IAAU1B,KAAKuB,wBAAwBG,EAAQC,WAAWF;IAClF,QAAOC,MAAO,QAAPA,WAAO,aAAPA,EAASN,QAAQ,qBAAoBM,IAAU;;EAG1D,WAAAR;IACI,IAAIlB,KAAKe,eAAe,qBAAqBf,KAAKe,aAAa,8BAC1Df,KAAKe,aAAa;;;;EAM3B,MAAAa;IACI,OAAMb,YAAEA,KAAef;IACvB,MAAM6B,IAAU,EAAC;IACjB,IAAId,GAAYc,EAAQC,KAAKf;IAE7B,OAAOf,KAAK+B,QACRC,EAAA;MACIC,UAAUjC,KAAKU,YAAY,IAAIwB;MAC/BC,KAAKC,KAAOpC,KAAKW,iBAAiByB;MAClCC,OAAOR,EAAQS,KAAK;MAAI,cACZtC,KAAK+B;MACjBQ,gBAAgB,MAAMvC,KAAKqB;MAC3BmB,MAAK;MAAS,WACN;OAERR,EAAA,iBAGJA,EAAA"}