q2-tecton-elements 1.38.2 → 1.39.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-09c712ea.js');
+const index$1 = require('./index-9113a9da.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;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)));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)));font-size:var(--tct-textarea-error-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));font-weight:var(--tct-textarea-error-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));text-transform:var(--tct-textarea-error-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));letter-spacing:var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));font-size:var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));font-weight:var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));text-transform:var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));letter-spacing:var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))));font-size:var(--tct-textarea-error-hover-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));font-weight:var(--tct-textarea-error-hover-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));text-transform:var(--tct-textarea-error-hover-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));letter-spacing:var(--tct-textarea-error-hover-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))))}:focus-within label{color:var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));font-size:var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));font-weight:var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));text-transform:var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));letter-spacing:var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))}.has-error :focus-within label{color:var(--tct-textarea-error-focused-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))));font-size:var(--tct-textarea-error-focused-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));font-weight:var(--tct-textarea-error-focused-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));text-transform:var(--tct-textarea-error-focused-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));letter-spacing:var(--tct-textarea-error-focused-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));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, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--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, #c30000)));background:var(--tct-textarea-error-background, var(--comp-textarea-background))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-focus-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000)));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}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, #c30000)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background: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, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.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}";
 

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

@@ -1 +1 @@
-{"file":"q2-textarea.entry.cjs.js","mappings":"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","names":["createGuid","setMessageHeight","overrideFocus","isEventFromElement","h","labelDOM","messagesDOM","loc"],"sources":["./src/components/q2-textarea/styles.scss?tag=q2-textarea&encapsulation=shadow","./src/components/q2-textarea/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    margin: var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-6x, 30px);\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        font-size: var-list(--tct-textarea-error-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-error-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-error-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-error-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        font-size: var-list(--tct-textarea-hover-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-hover-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-hover-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-hover-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n\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            font-size: var-list(\n                --tct-textarea-error-hover-label-font-size,\n                --tct-textarea-error-label-font-size,\n                --tct-textarea-hover-label-font-size,\n                var-prefixer(textarea-label-font-size),\n                inherit\n            );\n            font-weight: var-list(\n                --tct-textarea-error-hover-label-font-weight,\n                --tct-textarea-error-label-font-weight,\n                --tct-textarea-hover-label-font-weight,\n                var-prefixer(textarea-label-font-weight),\n                600\n            );\n            text-transform: var-list(\n                --tct-textarea-error-hover-label-text-transform,\n                --tct-textarea-error-label-text-transform,\n                --tct-textarea-hover-label-text-transform,\n                var-prefixer(textarea-label-text-transform),\n                none\n            );\n            letter-spacing: var-list(\n                --tct-textarea-error-hover-label-letter-spacing,\n                --tct-textarea-error-label-letter-spacing,\n                --tct-textarea-hover-label-letter-spacing,\n                var-prefixer(textarea-label-letter-spacing),\n                normal\n            );\n        }\n    }\n\n    :focus-within & {\n        color: var-list(--tct-textarea-focused-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        font-size: var-list(--tct-textarea-focused-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-focused-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-focused-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-focused-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-focused-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-focused-label-font-color,\n                var-prefixer(textarea-label-font-color),\n                inherit\n            );\n            font-size: var-list(\n                --tct-textarea-error-focused-label-font-size,\n                --tct-textarea-error-label-font-size,\n                --tct-textarea-focused-label-font-size,\n                var-prefixer(textarea-label-font-size),\n                inherit\n            );\n            font-weight: var-list(\n                --tct-textarea-error-focused-label-font-weight,\n                --tct-textarea-error-label-font-weight,\n                --tct-textarea-focused-label-font-weight,\n                var-prefixer(textarea-label-font-weight),\n                600\n            );\n            text-transform: var-list(\n                --tct-textarea-error-focused-label-text-transform,\n                --tct-textarea-error-label-text-transform,\n                --tct-textarea-focused-label-text-transform,\n                var-prefixer(textarea-label-text-transform),\n                none\n            );\n            letter-spacing: var-list(\n                --tct-textarea-error-focused-label-letter-spacing,\n                --tct-textarea-error-label-letter-spacing,\n                --tct-textarea-focused-label-letter-spacing,\n                var-prefixer(textarea-label-letter-spacing),\n                normal\n            );\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, 3px)};\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-focus-border-width: #{var-list(var-prefixer(textarea-focus-border-top-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-right-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-focus-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: 44px;\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: border-width var(--comp-textarea-tween), 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, #c30000);\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                #c30000\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                #c30000\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, #c30000);\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, #c30000);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\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('0 2px 4px rgba(0, 0, 0, 0.3)')\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 { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n    tag: 'q2-textarea',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) hideMessages: boolean;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) spellcheck: boolean;\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n    @Prop({ reflect: true }) rows: number;\n    @Prop({ reflect: true }) cols: number;\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    @Event() input: EventEmitter<any>;\n    @Event() change: EventEmitter<any>;\n\n    /// Methods ///\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.increaseHeightIfOverflowing();\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-textarea.entry.cjs.js","mappings":"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","names":["createGuid","setMessageHeight","overrideFocus","isEventFromElement","h","labelDOM","messagesDOM","loc"],"sources":["./src/components/q2-textarea/styles.scss?tag=q2-textarea&encapsulation=shadow","./src/components/q2-textarea/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    margin: var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-6x, 30px);\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        font-size: var-list(--tct-textarea-error-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-error-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-error-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-error-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        font-size: var-list(--tct-textarea-hover-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-hover-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-hover-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-hover-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n\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            font-size: var-list(\n                --tct-textarea-error-hover-label-font-size,\n                --tct-textarea-error-label-font-size,\n                --tct-textarea-hover-label-font-size,\n                var-prefixer(textarea-label-font-size),\n                inherit\n            );\n            font-weight: var-list(\n                --tct-textarea-error-hover-label-font-weight,\n                --tct-textarea-error-label-font-weight,\n                --tct-textarea-hover-label-font-weight,\n                var-prefixer(textarea-label-font-weight),\n                600\n            );\n            text-transform: var-list(\n                --tct-textarea-error-hover-label-text-transform,\n                --tct-textarea-error-label-text-transform,\n                --tct-textarea-hover-label-text-transform,\n                var-prefixer(textarea-label-text-transform),\n                none\n            );\n            letter-spacing: var-list(\n                --tct-textarea-error-hover-label-letter-spacing,\n                --tct-textarea-error-label-letter-spacing,\n                --tct-textarea-hover-label-letter-spacing,\n                var-prefixer(textarea-label-letter-spacing),\n                normal\n            );\n        }\n    }\n\n    :focus-within & {\n        color: var-list(--tct-textarea-focused-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        font-size: var-list(--tct-textarea-focused-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n        font-weight: var-list(--tct-textarea-focused-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n        text-transform: var-list(\n            --tct-textarea-focused-label-text-transform,\n            var-prefixer(textarea-label-text-transform),\n            none\n        );\n        letter-spacing: var-list(\n            --tct-textarea-focused-label-letter-spacing,\n            var-prefixer(textarea-label-letter-spacing),\n            normal\n        );\n\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-focused-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-focused-label-font-color,\n                var-prefixer(textarea-label-font-color),\n                inherit\n            );\n            font-size: var-list(\n                --tct-textarea-error-focused-label-font-size,\n                --tct-textarea-error-label-font-size,\n                --tct-textarea-focused-label-font-size,\n                var-prefixer(textarea-label-font-size),\n                inherit\n            );\n            font-weight: var-list(\n                --tct-textarea-error-focused-label-font-weight,\n                --tct-textarea-error-label-font-weight,\n                --tct-textarea-focused-label-font-weight,\n                var-prefixer(textarea-label-font-weight),\n                600\n            );\n            text-transform: var-list(\n                --tct-textarea-error-focused-label-text-transform,\n                --tct-textarea-error-label-text-transform,\n                --tct-textarea-focused-label-text-transform,\n                var-prefixer(textarea-label-text-transform),\n                none\n            );\n            letter-spacing: var-list(\n                --tct-textarea-error-focused-label-letter-spacing,\n                --tct-textarea-error-label-letter-spacing,\n                --tct-textarea-focused-label-letter-spacing,\n                var-prefixer(textarea-label-letter-spacing),\n                normal\n            );\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, 3px)};\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-focus-border-width: #{var-list(var-prefixer(textarea-focus-border-top-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-right-width), 1px)\n        var-list(var-prefixer(textarea-focus-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-focus-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: 44px;\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: border-width var(--comp-textarea-tween), 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, #c30000);\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                #c30000\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                #c30000\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, #c30000);\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, #c30000);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\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('0 2px 4px rgba(0, 0, 0, 0.3)')\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 { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n    tag: 'q2-textarea',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) hideMessages: boolean;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) spellcheck: boolean;\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n    @Prop({ reflect: true }) rows: number;\n    @Prop({ reflect: true }) cols: number;\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    /**\n     * Emitted when the field value is updated.\n     * @legacyEvent\n     */\n    @Event() input: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string }>;\n\n    /// Methods ///\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.increaseHeightIfOverflowing();\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/q2-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-09c712ea.js');
+const index$1 = require('./index-9113a9da.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";
 

package/dist/cjs/tecton-tab-pane.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"tecton-tab-pane.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n    height: 44px;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n    display: flex;\n}\niframe {\n    width: 100%;\n    height: auto;\n    overflow-y: hidden;\n    border: none;\n}\niframe:not([hidden]) {\n    display: inline-block;\n}\n\n.slot-wrapper:focus {\n    outline: none;\n    box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n    tag: 'tecton-tab-pane',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) selected: boolean;\n    @Prop() index: number;\n    @Prop() guid: number;\n    // above props duplicated from q2-tab-pane.\n    // Unable to extend due to Stencil decorator limitation\n    @Prop({ reflect: true }) provided: boolean;\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) moduleId: string;\n    @Prop({ reflect: true }) minHeight: string;\n    @Prop({ reflect: true }) badgeCount: number;\n    @Prop({ reflect: true }) badgeDescription: string;\n    @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n    @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n    @Prop() authPayload: { key: string; value: string }[];\n    @Prop() showForm: boolean;\n    @State() _showForm: boolean;\n    @Element() hostElement: HTMLElement;\n\n    @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    get iframeTitle() {\n        return this.moduleId.split('.').slice(-2).join('-');\n    }\n    componentWillRender(): void | Promise<void> {\n        const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n        if (loadingWrapper) {\n            loadingWrapper.style.minHeight = this.minHeight;\n            loadingWrapper.hidden = !this.selected;\n        }\n    }\n\n    componentWillLoad() {\n        this._showForm = this.showForm;\n    }\n\n    componentDidRender() {\n        const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n        if (!!formElement && !!formElement.parentElement) {\n            formElement.submit();\n            this._showForm = false;\n        }\n    }\n\n    ///////// Observers /////////\n    @Watch('selected')\n    selectedObserver() {\n        const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n        this._showForm = this.showForm; // reset state\n\n        if (loader) {\n            loader.hidden = !this.selected;\n        }\n    }\n\n    ///////// Actions /////////\n    onIFrameLoad = (event: Event) => {\n        const iframe = event.target as HTMLIFrameElement;\n\n        iframe.contentWindow &&\n            iframe.contentWindow.postMessage(\n                `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n                '*'\n            );\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                {this.selected && this.provided !== undefined && !this.provided && (\n                    <div>\n                        <slot name=\"loading-wrapper\" />\n                        <iframe\n                            hidden\n                            name={this.moduleId}\n                            scrolling=\"no\"\n                            src={this.showForm && this.authPayload.length ? '' : this.url || ''}\n                            data-module-id={this.moduleId}\n                            style={this.minHeight ? { minHeight: this.minHeight } : null}\n                            onLoad={this.onIFrameLoad}\n                            title={this.iframeTitle}\n                            allow=\"geolocation; camera\"\n                        />\n                        {this._showForm && this.authPayload ? (\n                            <form\n                                hidden\n                                method=\"post\"\n                                action={this.url}\n                                target={this.moduleId}\n                                encType=\"multipart/form-data\"\n                            >\n                                {this.authPayload.map(element => {\n                                    return (\n                                        <input\n                                            type=\"hidden\"\n                                            value={element.value}\n                                            name={element.key}\n                                        />\n                                    );\n                                })}\n                            </form>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                )}\n                <div\n                    class=\"slot-wrapper\"\n                    hidden={this.selected && this.provided !== undefined && !this.provided}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"tecton-tab-pane.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n    height: 44px;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n    display: flex;\n}\niframe {\n    width: 100%;\n    height: auto;\n    overflow-y: hidden;\n    border: none;\n}\niframe:not([hidden]) {\n    display: inline-block;\n}\n\n.slot-wrapper:focus {\n    outline: none;\n    box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n    tag: 'tecton-tab-pane',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) selected: boolean;\n    @Prop() index: number;\n    @Prop() guid: number;\n    // above props duplicated from q2-tab-pane.\n    // Unable to extend due to Stencil decorator limitation\n    @Prop({ reflect: true }) provided: boolean;\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) moduleId: string;\n    @Prop({ reflect: true }) minHeight: string;\n    @Prop({ reflect: true }) badgeCount: number;\n    @Prop({ reflect: true }) badgeDescription: string;\n    @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n    @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n    @Prop() authPayload: { key: string; value: string }[];\n    @Prop() showForm: boolean;\n    @State() _showForm: boolean;\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    get iframeTitle() {\n        return this.moduleId.split('.').slice(-2).join('-');\n    }\n    componentWillRender(): void | Promise<void> {\n        const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n        if (loadingWrapper) {\n            loadingWrapper.style.minHeight = this.minHeight;\n            loadingWrapper.hidden = !this.selected;\n        }\n    }\n\n    componentWillLoad() {\n        this._showForm = this.showForm;\n    }\n\n    componentDidRender() {\n        const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n        if (!!formElement && !!formElement.parentElement) {\n            formElement.submit();\n            this._showForm = false;\n        }\n    }\n\n    ///////// Observers /////////\n    @Watch('selected')\n    selectedObserver() {\n        const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n        this._showForm = this.showForm; // reset state\n\n        if (loader) {\n            loader.hidden = !this.selected;\n        }\n    }\n\n    ///////// Actions /////////\n    onIFrameLoad = (event: Event) => {\n        const iframe = event.target as HTMLIFrameElement;\n\n        iframe.contentWindow &&\n            iframe.contentWindow.postMessage(\n                `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n                '*'\n            );\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                {this.selected && this.provided !== undefined && !this.provided && (\n                    <div>\n                        <slot name=\"loading-wrapper\" />\n                        <iframe\n                            hidden\n                            name={this.moduleId}\n                            scrolling=\"no\"\n                            src={this.showForm && this.authPayload.length ? '' : this.url || ''}\n                            data-module-id={this.moduleId}\n                            style={this.minHeight ? { minHeight: this.minHeight } : null}\n                            onLoad={this.onIFrameLoad}\n                            title={this.iframeTitle}\n                            allow=\"geolocation; camera\"\n                        />\n                        {this._showForm && this.authPayload ? (\n                            <form\n                                hidden\n                                method=\"post\"\n                                action={this.url}\n                                target={this.moduleId}\n                                encType=\"multipart/form-data\"\n                            >\n                                {this.authPayload.map(element => {\n                                    return (\n                                        <input\n                                            type=\"hidden\"\n                                            value={element.value}\n                                            name={element.key}\n                                        />\n                                    );\n                                })}\n                            </form>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                )}\n                <div\n                    class=\"slot-wrapper\"\n                    hidden={this.selected && this.provided !== undefined && !this.provided}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/collection/components/click-elsewhere/index.js

@@ -91,7 +91,7 @@ export class ClickElsewhere {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the user clicks outside the element"
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/click-elsewhere/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/click-elsewhere/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n    isCurrentlyFocused: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter;\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n\n            child = child.parentNode || child.host;\n        }\n    }\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    windowBlurHandler = (): void => {\n        const activeElement = this.findActiveElement();\n        if (\n            (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n            (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n        ) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n    };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/click-elsewhere/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n    isCurrentlyFocused: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the user clicks outside the element\n     */\n    @Event() change: EventEmitter;\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n\n            child = child.parentNode || child.host;\n        }\n    }\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    windowBlurHandler = (): void => {\n        const activeElement = this.findActiveElement();\n        if (\n            (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n            (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n        ) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n    };\n}\n"]}

package/dist/collection/components/q2-action-sheet/index.js

@@ -291,7 +291,7 @@ export class Q2ActionSheet {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the action sheet is closed."
         },
         "complexType": {
           "original": "ActionSheetListCloseData",
@@ -310,8 +310,11 @@ export class Q2ActionSheet {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "private",
+              "text": undefined
+            }],
+          "text": "Emitted when the component has finished rendering."
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/q2-action-sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-action-sheet/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\n\n@Component({\n    tag: 'q2-action-sheet',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ActionSheet implements ComponentInterface {\n    @Prop({ mutable: true }) data: ActionSheetData;\n    @Prop() title: string;\n    @Prop() hideClose: boolean;\n\n    @State() isScrollable: boolean = false;\n    @State() renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n    dialogElement: HTMLDialogElement;\n    contentElement: HTMLDivElement;\n    optionListElement: HTMLQ2OptionListElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n    minHeight: number = 0.2;\n    maxHeight: number = 0.75;\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    /// Helpers ///\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (option.innerHTML) optionElement.innerHTML = option.innerHTML;\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    /// Event Handlers ///\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    /// Events ///\n    @Event() close: EventEmitter<ActionSheetListCloseData>;\n    @Event({ bubbles: false }) ready: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    /// DOM ///\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-action-sheet/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\n\n@Component({\n    tag: 'q2-action-sheet',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ActionSheet implements ComponentInterface {\n    @Prop({ mutable: true }) data: ActionSheetData;\n    @Prop() title: string;\n    @Prop() hideClose: boolean;\n\n    @State() isScrollable: boolean = false;\n    @State() renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n    dialogElement: HTMLDialogElement;\n    contentElement: HTMLDivElement;\n    optionListElement: HTMLQ2OptionListElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n    minHeight: number = 0.2;\n    maxHeight: number = 0.75;\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    /// Helpers ///\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (option.innerHTML) optionElement.innerHTML = option.innerHTML;\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    /// Event Handlers ///\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    /// Events ///\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event() close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false }) ready: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    /// DOM ///\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n}\n"]}

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

@@ -186,12 +186,12 @@ button:disabled {
   opacity: var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
   cursor: not-allowed;
 }
-:host([size="1"]) button {
-  padding: var(--tct-scale-1, var(--app-scale-1x, 5px));
-}
 :host([color]:not([size])) button, :host([intent]:not([size])) button {
   padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
 }
+:host([size="1"]) button {
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px));
+}
 :host([size="2"]) button {
   padding: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
@@ -204,20 +204,20 @@ button:disabled {
 :host([size="4"]) button {
   padding: var(--tct-scale-6x, var(--app-scale-6x, 30px));
 }
+:host([color]) button, :host([intent]) button {
+  font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
+}
 :host([size=small]) button {
   padding: var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));
-  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 12px));
+  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px));
 }
 :host([size=medium]) button {
   padding: var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));
-  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 16px));
+  font-size: var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px));
 }
 :host([size=large]) button {
   padding: var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));
-  font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 32px));
-}
-:host([color]) button, :host([intent]) button {
-  font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
+  font-size: var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px));
 }
 :host([color=primary]) button, :host([intent=workflow-primary]) button {
   --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));
@@ -968,12 +968,12 @@ button:disabled {
 :host([intent=workflow-escape][loading]) button {
   --comp-background: var(--tct-btn-escape-loading-background, var(--comp-background-alternative));
 }
-:host button.icon-only {
+:host(:not([size])) button.icon-only {
   width: var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));
   height: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
   border-radius: var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));
 }
-:host button.icon-only:hover, :host button.icon-only:focus {
+:host(:not([size])) button.icon-only:hover, :host(:not([size])) button.icon-only:focus {
   background: var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
 }
 :host(:not([intent])[active]) button.icon-only {