q2-tecton-elements 1.36.0 → 1.37.0

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { c as createGuid, s as setMessageHeight, o as overrideFocus, i as isEventFromElement, m as messagesDOM, g as labelDOM, l as loc } from './index-35ff2881.js';
+import { c as createGuid, s as setMessageHeight, o as overrideFocus, i as isEventFromElement, m as messagesDOM, g as labelDOM, l as loc } from './index-74a659a5.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 #33b4ff #06C)}: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))))}.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)))));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(--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)))))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));border-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%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));box-shadow:var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}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}.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))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));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{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 
@@ -177,6 +177,18 @@ const Q2Textarea = class {
       this.value = event.detail.value;
     }
   }
+  onHostElementInput(event) {
+    if (event.target === this.hostElement && !this.hostElement.oninput) {
+      this.value = event.detail.value;
+    }
+  }
+  /// Methods ///
+  setValue(value) {
+    const { textareaField } = this;
+    textareaField.focus();
+    textareaField.value = value;
+    textareaField.dispatchEvent(new InputEvent('input'));
+  }
   setWidth(event) {
     var _a, _b;
     const { contentContainer, resize, downParams: { width, x }, } = this;

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

@@ -1 +1 @@
-{"file":"q2-textarea.entry.js","mappings":"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","names":[],"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\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    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-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    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-list(\n        var-prefixer(textarea-border-color),\n        var-prefixer(input-border-color),\n        --t-a11y-gray-color-AA,\n        #949494\n    );\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    &:focus {\n        border-width: var(--comp-textarea-focus-border-width, 1px);\n        border-color: var-list(\n            var-prefixer(textarea-focus-border-color),\n            var-prefixer(input-focus-border-color),\n            --t-a11y-active-gray-color-AA,\n            #404040\n        );\n        box-shadow: var(--const-double-focus-ring),\n            var-list(var-prefixer(textarea-focus-box-shadow), unquote('0 0 transparent'));\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    .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.has-error label {\n    color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-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        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 } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n    tag: 'q2-textarea',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n    private textareaField?: HTMLTextAreaElement;\n    private contentContainer?: HTMLDivElement;\n    private valueOnFocus: string;\n    private scheduledAfterRender: (() => void)[] = [];\n    private guid = createGuid();\n\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) hideMessages: boolean;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) spellcheck: boolean;\n    @Prop({ reflect: true, mutable: true }) maxlength: number;\n    @Prop({ reflect: true }) rows: number;\n    @Prop({ reflect: true }) cols: number;\n    @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    @Event() input: EventEmitter<any>;\n    @Event() change: EventEmitter<any>;\n\n    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n\n        const resizeY = ['both', 'vertical'].includes(resize);\n        if (!resizeY) return;\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        contentContainer.style.height = `${newHeight}px`;\n    }\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-textarea.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,u5WAAu5W;;MCS55W,UAAU;;;;;IAIX,yBAAoB,GAAmB,EAAE,CAAC;IAC1C,SAAI,GAAG,UAAU,EAAE,CAAC;IAuC5B,cAAS,GAAG;MACR,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;MAE/D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO;MAC7D,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gBAAgB,CAAC,YAAY,IAAI,CAAC;MACrE,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;KACzC,CAAC;IAEF,cAAS,GAAG;MACR,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;MAE/D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,OAAO;MAC3D,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,gBAAgB,CAAC,WAAW,IAAI,CAAC;MACnE,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;KACzC,CAAC;;IA+GF,oBAAe,GAAG;MACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;MAC/B,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC1B,CAAC;IAEF,mBAAc,GAAG;MACb,MAAM,EACF,YAAY,EACZ,aAAa,EAAE,EAAE,KAAK,EAAE,GAC3B,GAAG,IAAI,CAAC;MACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;MACvB,IAAI,YAAY,KAAK,KAAK;QAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;KAC3D,CAAC;IAEF,oBAAe,GAAG,CAAC,KAAiB;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK,CAAC;MAE1D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;KAC9B,CAAC;IAEF,qBAAgB,GAAG,CAAC,KAAiB;MACjC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK,CAAC;MAE1D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;KAC/B,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAiB;MAC5B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;MAClC,IAAI,CAAC,UAAU,GAAG;QACd,KAAK,EAAE,gBAAgB,CAAC,WAAW;QACnC,MAAM,EAAE,gBAAgB,CAAC,YAAY;QACrC,CAAC,EAAE,KAAK,CAAC,OAAO;QAChB,CAAC,EAAE,KAAK,CAAC,OAAO;OACnB,CAAC;MACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACxD,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAiB;MAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACxB,CAAC;IAEF,iBAAY,GAAG,CAAC,KAAiB;MAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;MAEvC,KAAK,CAAC,cAAc,EAAE,CAAC;MAEvB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;MAClC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;MAEpC,IAAI,CAAC,UAAU,GAAG;QACd,KAAK,EAAE,gBAAgB,CAAC,WAAW;QACnC,MAAM,EAAE,gBAAgB,CAAC,YAAY;QACrC,CAAC,EAAE,UAAU,CAAC,KAAK;QACnB,CAAC,EAAE,UAAU,CAAC,KAAK;OACtB,CAAC;MAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACzD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3D,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAiB;MAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACxB,CAAC;IA+BF,cAAS,GAAG;MACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B,CAAC;;;;;;;;;;;;;kBA7P6E,UAAU;;;;;;;EASzF,iBAAiB;IACb,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;MACvB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC9B;GACJ;EAED,kBAAkB;IACd,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/D,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;GAClC;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAoBD,IAAI,QAAQ;IACR,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;GAC/D;EAED,IAAI,QAAQ;IACR,QACI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM;OACpD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;MACnD,EAAE,EACJ;GACL;EAED,IAAI,YAAY;IACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;GACzD;EAED,IAAI,OAAO;IACP,OAAO,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC;GACpC;EAED,IAAI,gBAAgB;IAChB,OAAO,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,cAAc,GAAG,SAAS,CAAC;GACxE;EAED,IAAI,cAAc;IACd,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IACrD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,CAAC;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAErD,OAAO,kBAAkB,UAAU,GAAG,UAAU,GAAG,UAAU,EAAE,CAAC;GACnE;EAED,IAAI,UAAU;IACV,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB,OAAO,MAAM,IAAI,MAAM,KAAK,MAAM,CAAC;GACtC;;EAKD,aAAa;IACT,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;IACvC,IAAI,CAAC,SAAS;MAAE,OAAO;IAEvB,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;IAClD,IAAI,cAAc,KAAK,KAAK;MAAE,OAAO;IAErC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC;GAC/C;EAGD,YAAY;IACR,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;GAC7C;EAGD,YAAY;IACR,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;GAC5C;EAGD,aAAa;IACT,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;GACjF;EAGD,cAAc;IACV,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;GACjF;;EAID,kBAAkB,CAAC,KAAY;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;GAC9B;EAGD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;MACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;GACJ;EAGD,kBAAkB,CAAC,KAAkB;IACjC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;GACJ;;EASD,QAAQ,CAAC,KAAa;IAClB,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,KAAK,EAAE,CAAC;IACtB,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;IAC5B,aAAa,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;GACxD;EA2ED,QAAQ,CAAC,KAA8B;;IACnC,MAAM,EACF,gBAAgB,EAChB,MAAM,EACN,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAC3B,GAAG,IAAI,CAAC;IAET,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAExD,IAAI,CAAC,OAAO;MAAE,OAAO;IACrB,MAAM,MAAM,GAAG,KAAK,YAAY,UAAU,GAAG,KAAK,CAAC,OAAO,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC;IAC1F,MAAM,QAAQ,GAAG,KAAK,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;GAClD;EAED,SAAS,CAAC,KAA8B;;IACpC,MAAM,EACF,gBAAgB,EAChB,MAAM,EACN,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAC5B,GAAG,IAAI,CAAC;IAET,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACtD,IAAI,CAAC,OAAO;MAAE,OAAO;IACrB,MAAM,MAAM,GAAG,KAAK,YAAY,UAAU,GAAG,KAAK,CAAC,OAAO,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC;IAC1F,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;IACxC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;GACpD;;EASD,MAAM;IACF,QACI,WAAK,KAAK,EAAE,IAAI,CAAC,cAAc,IAC1B,QAAQ,CAAC,IAAI,CAAC,EACf,WACI,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,IAEtC,IAAI,CAAC,QAAQ,EAAE,EACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,EACzC,WAAW,CAAC,IAAI,CAAC,CAChB,CACJ,EACR;GACL;EAED,YAAY;;IACR,QACI,WACI,KAAK,EAAC,YAAY,iBACN,MAAM,IAEjB,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,KAAI,CAAC,OAAG,IAAI,CAAC,SAAS,CACvC,EACR;GACL;EAED,QAAQ;IACJ,QACI,WAAK,KAAK,EAAC,iBAAiB,IACxB,gBACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,WAAW,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS,aAC7D,YAAY,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,gBAAgB,kBACzB,GAAG,IAAI,CAAC,QAAQ,EAAE,mBACjB,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,gBACtB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EACxC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,MAAM,EAAE,IAAI,CAAC,cAAc,GACnB,EACX,IAAI,CAAC,QAAQ,IACV,eACI,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,GACpB,KAEF,EAAE,CACL,EACA,IAAI,CAAC,UAAU,KACZ,cACI,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAC,YAAY,gBACN,GAAG,CAAC,6BAA6B,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,IAEZ,0BACgB,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,IAElC,YACI,CAAC,EAAC,oCAAoC,EACtC,IAAI,EAAC,MAAM,2BACW,QAAQ,GAChC,CACA,CACD,CACZ,CACC,EACR;GACL;;;;;;;;;;;;;;","names":[],"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\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    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-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    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-list(\n        var-prefixer(textarea-border-color),\n        var-prefixer(input-border-color),\n        --t-a11y-gray-color-AA,\n        #949494\n    );\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    &:focus {\n        border-width: var(--comp-textarea-focus-border-width, 1px);\n        border-color: var-list(\n            var-prefixer(textarea-focus-border-color),\n            var-prefixer(input-focus-border-color),\n            --t-a11y-active-gray-color-AA,\n            #404040\n        );\n        box-shadow: var(--const-double-focus-ring),\n            var-list(var-prefixer(textarea-focus-box-shadow), unquote('0 0 transparent'));\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    .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.has-error label {\n    color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-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        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';\n    @Prop() errors: string[];\n    @Prop() hints: string[];\n\n    @State() hasFocus: boolean;\n    @State() downParams: IDict<number>;\n\n    /////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    @Element() hostElement: HTMLElement;\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get inputDescribedBy() {\n        return this.showMessages ? `${this.inputId}-description` : undefined;\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    ///////// Events /////////\n\n    @Event() input: EventEmitter<any>;\n    @Event() change: EventEmitter<any>;\n\n    /// Methods ///\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    ///// ACTIONS ////////\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.input.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n\n        const resizeY = ['both', 'vertical'].includes(resize);\n        if (!resizeY) return;\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        contentContainer.style.height = `${newHeight}px`;\n    }\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        this.downParams = null;\n    };\n\n    /////// VIEW METHODS ///////\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {labelDOM(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.inputDOM()}\n                    {this.maxlength ? this.maxLengthDOM() : ''}\n                    {messagesDOM(this)}\n                </div>\n            </div>\n        );\n    }\n\n    maxLengthDOM() {\n        return (\n            <div\n                class=\"max-length\"\n                aria-hidden=\"true\"\n            >\n                {this.value?.length || 0}/{this.maxlength}\n            </div>\n        );\n    }\n\n    inputDOM() {\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-ebc7f269.js';
-import { o as overrideFocus, i as isEventFromElement } from './index-35ff2881.js';
+import { o as overrideFocus, i as isEventFromElement } from './index-74a659a5.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 #33b4ff #06C)}: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/q2-tecton-elements/{p-2b91b34e.entry.js → p-077107c1.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as a,h as r,F as i,g as e}from"./p-277dc8cd.js";import{b as o,o as s,i as c}from"./p-99ab3236.js";const n="*{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 #33b4ff #06C)}: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}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";const d=["primary","secondary","tertiary","accent-1","accent-2","accent-3","accent-4","accent-5","accent-6","accent-7","accent-8","accent-9","accent-10","accent-11","accent-12"];const h=["info","success","warning","alert"];const l=class{constructor(r){t(this,r);this.click=a(this,"click",7);this.handleClick=t=>{if(this.url)return true;t.preventDefault();t.stopPropagation();this.click.emit()};this.title=undefined;this.description=undefined;this.avatarName=undefined;this.avatarInitials=undefined;this.avatarIcon=undefined;this.avatarSrc=undefined;this.isSmall=undefined;this.bar=undefined;this.isStatic=undefined;this.isTouch=o();this.url=undefined;this.target=undefined;this.type="clickable";this.isAutoTouch=false;this.isAutoSmall=false}componentWillLoad(){this.checkBar()}componentDidLoad(){const{hostElement:t,clickableElement:a}=this;t.click=()=>a.click();s(this.hostElement);this.resizeObserver=new ResizeObserver((()=>this.determineAutoSmall()));this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.resizeObserver=null}onHostElementFocus(t){if(!c(t,this.hostElement))return;this.clickableElement.focus()}checkBar(){const{bar:t}=this;if(!t)return;if(d.includes(t)){this.barColor=`var(--t-${t})`}else if(h.includes(t)){this.barColor=`var(--const-stoplight-${t})`}else{this.barColor=t}}determineAutoTouch(){if(this.hostElement.hasAttribute("is-touch"))return;this.isAutoTouch=o()}determineAutoSmall(){var t,a;if(this.isStatic)return;if(this.hostElement.hasAttribute("is-small"))return;const{containerElement:r,avatarElement:i}=this;const e=(t=i===null||i===void 0?void 0:i.offsetWidth)!==null&&t!==void 0?t:0;const o=(a=r===null||r===void 0?void 0:r.offsetWidth)!==null&&a!==void 0?a:0;const s=e+o;this.isAutoSmall=s<350}generateAvatar(){const{avatarName:t,avatarInitials:a,avatarSrc:i,avatarIcon:e}=this;if(e){return r("q2-icon",{type:e,ref:t=>this.avatarElement=t,"test-id":"avatar"})}else if(t||a||i){return r("q2-avatar",{name:t,initials:a,src:i,ref:t=>this.avatarElement=t,"test-id":"avatar"})}}generateContent(){return r(i,null,this.bar&&r("div",{class:"bar","test-id":"bar",style:{"--comp-bar-color":this.barColor}}),this.generateAvatar(),r("div",{class:"content","test-id":"contentContainer",ref:t=>this.containerElement=t},this.title&&r("h3",{"test-id":"title"},this.title),this.description&&r("p",{"test-id":"description"},this.description),r("slot",null)),this.isTouch&&!this.isStatic&&r("q2-icon",{"test-id":"touchIndicator",type:"chevron-right",class:"touch-indicator"}))}generateContainerClasses(){const{isSmall:t,isAutoSmall:a,avatarName:r,avatarInitials:i,avatarSrc:e,avatarIcon:o,isTouch:s,isAutoTouch:c,isStatic:n,type:d}=this;const h=["container",d];const l=t||a;const v=s||c;const p=r||i||e||o;if(l)h.push("is-small");if(v&&!n)h.push("is-touch");if(p)h.push("has-avatar");if(n)h.push("is-static");return h.join(" ")}render(){const{url:t,isStatic:a,type:i}=this;if(a||i==="non-clickable")return r("div",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement"},this.generateContent());else if(!!t)return r("a",{ref:t=>this.clickableElement=t,href:this.url,class:this.generateContainerClasses(),target:this.target,rel:"noopener noreferrer","test-id":"clickableElement",onClick:this.handleClick},this.generateContent());else return r("button",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement",type:"button",onClick:this.handleClick},this.generateContent())}get hostElement(){return e(this)}static get watchers(){return{bar:["checkBar"]}}};l.style=n;export{l as q2_card};
-//# sourceMappingURL=p-2b91b34e.entry.js.map
+import{r as t,c as a,h as r,F as i,g as e}from"./p-277dc8cd.js";import{b as o,o as s,i as c}from"./p-ef856249.js";const n="*{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 #33b4ff #06C)}: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}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";const d=["primary","secondary","tertiary","accent-1","accent-2","accent-3","accent-4","accent-5","accent-6","accent-7","accent-8","accent-9","accent-10","accent-11","accent-12"];const h=["info","success","warning","alert"];const l=class{constructor(r){t(this,r);this.click=a(this,"click",7);this.handleClick=t=>{if(this.url)return true;t.preventDefault();t.stopPropagation();this.click.emit()};this.title=undefined;this.description=undefined;this.avatarName=undefined;this.avatarInitials=undefined;this.avatarIcon=undefined;this.avatarSrc=undefined;this.isSmall=undefined;this.bar=undefined;this.isStatic=undefined;this.isTouch=o();this.url=undefined;this.target=undefined;this.type="clickable";this.isAutoTouch=false;this.isAutoSmall=false}componentWillLoad(){this.checkBar()}componentDidLoad(){const{hostElement:t,clickableElement:a}=this;t.click=()=>a.click();s(this.hostElement);this.resizeObserver=new ResizeObserver((()=>this.determineAutoSmall()));this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.resizeObserver=null}onHostElementFocus(t){if(!c(t,this.hostElement))return;this.clickableElement.focus()}checkBar(){const{bar:t}=this;if(!t)return;if(d.includes(t)){this.barColor=`var(--t-${t})`}else if(h.includes(t)){this.barColor=`var(--const-stoplight-${t})`}else{this.barColor=t}}determineAutoTouch(){if(this.hostElement.hasAttribute("is-touch"))return;this.isAutoTouch=o()}determineAutoSmall(){var t,a;if(this.isStatic)return;if(this.hostElement.hasAttribute("is-small"))return;const{containerElement:r,avatarElement:i}=this;const e=(t=i===null||i===void 0?void 0:i.offsetWidth)!==null&&t!==void 0?t:0;const o=(a=r===null||r===void 0?void 0:r.offsetWidth)!==null&&a!==void 0?a:0;const s=e+o;this.isAutoSmall=s<350}generateAvatar(){const{avatarName:t,avatarInitials:a,avatarSrc:i,avatarIcon:e}=this;if(e){return r("q2-icon",{type:e,ref:t=>this.avatarElement=t,"test-id":"avatar"})}else if(t||a||i){return r("q2-avatar",{name:t,initials:a,src:i,ref:t=>this.avatarElement=t,"test-id":"avatar"})}}generateContent(){return r(i,null,this.bar&&r("div",{class:"bar","test-id":"bar",style:{"--comp-bar-color":this.barColor}}),this.generateAvatar(),r("div",{class:"content","test-id":"contentContainer",ref:t=>this.containerElement=t},this.title&&r("h3",{"test-id":"title"},this.title),this.description&&r("p",{"test-id":"description"},this.description),r("slot",null)),this.isTouch&&!this.isStatic&&r("q2-icon",{"test-id":"touchIndicator",type:"chevron-right",class:"touch-indicator"}))}generateContainerClasses(){const{isSmall:t,isAutoSmall:a,avatarName:r,avatarInitials:i,avatarSrc:e,avatarIcon:o,isTouch:s,isAutoTouch:c,isStatic:n,type:d}=this;const h=["container",d];const l=t||a;const v=s||c;const p=r||i||e||o;if(l)h.push("is-small");if(v&&!n)h.push("is-touch");if(p)h.push("has-avatar");if(n)h.push("is-static");return h.join(" ")}render(){const{url:t,isStatic:a,type:i}=this;if(a||i==="non-clickable")return r("div",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement"},this.generateContent());else if(!!t)return r("a",{ref:t=>this.clickableElement=t,href:this.url,class:this.generateContainerClasses(),target:this.target,rel:"noopener noreferrer","test-id":"clickableElement",onClick:this.handleClick},this.generateContent());else return r("button",{ref:t=>this.clickableElement=t,class:this.generateContainerClasses(),"test-id":"clickableElement",type:"button",onClick:this.handleClick},this.generateContent())}get hostElement(){return e(this)}static get watchers(){return{bar:["checkBar"]}}};l.style=n;export{l as q2_card};
+//# sourceMappingURL=p-077107c1.entry.js.map

package/dist/q2-tecton-elements/p-09d4b3d3.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,F as o,g as a}from"./p-277dc8cd.js";import{l as s,w as r}from"./p-ef856249.js";const n='*{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 #33b4ff #06C)}: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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';var c=undefined&&undefined.__rest||function(t,i){var e={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&i.indexOf(o)<0)e[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(i.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))e[o[a]]=t[o[a]]}return e};const l=class{constructor(a){t(this,a);this.close=i(this,"close",7);this.ready=i(this,"ready",3);this.initialSelectedOptions=[];this.selectedOptions={values:[],value:""};this.minHeight=.2;this.maxHeight=.75;this.generateOption=t=>{const i=document.createElement("q2-option");const e=c(t,["innerHTML"]);if(t.innerHTML)i.innerHTML=t.innerHTML;Object.entries(e).forEach((([t,e])=>{if(e===undefined)return;if(typeof e==="boolean"){if(e)i.setAttribute(t,"")}else{i.setAttribute(t,e)}}));return i};this.generateOptgroup=t=>{const i=document.createElement("q2-optgroup");if(t.label)i.setAttribute("label",t.label);if(t.disabled)i.setAttribute("disabled","");if(!!t.options.length)t.options.forEach((t=>i.appendChild(this.generateOption(t))));return i};this.onClick=t=>{const i=t.target;if(!(i instanceof HTMLElement))return;const e=!!i.closest(".interior, q2-action-sheet");if(e)return;this.onCancel(t)};this.onCancel=t=>{var i,e;t.preventDefault();const{initialSelectedOptions:o}=this;this.hide({value:(e=(i=o===null||o===void 0?void 0:o[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:"",values:o,type:"cancel"})};this.onListChange=t=>{this.selectedOptions=t.detail};this.onListPopoverStateChange=t=>{if(t.detail.open)return;if(t.detail.action==="close"){this.onCancel(t)}else{this.onListDone()}};this.onListDone=()=>{this.hide(Object.assign(Object.assign({},this.selectedOptions),{type:"confirm"}))};this.renderSlot=()=>e("div",{class:"content",ref:t=>this.contentElement=t},e("slot",null));this.renderMessage=({data:t})=>e("q2-message",{type:t.type},t.title&&e("h2",null,t.title),t.description&&e("p",null,t.description));this.renderList=({data:t})=>{const{listProps:i}=t;return e(o,null,e("div",{class:"content",ref:t=>this.contentElement=t},e("q2-option-list",{ref:t=>this.optionListElement=t,multiple:i.multiple,noSelect:i.noSelect,onChange:this.onListChange,onPopoverState:this.onListPopoverStateChange,selectedOptions:i.selectedOptions},e("slot",null))),e("footer",null,i.multiple&&e("q2-btn",{"test-id":"btnDone",intent:"workflow-primary",onClick:this.onListDone},s("tecton.element.actionSheet.done"))))};this.data=undefined;this.title=undefined;this.hideClose=undefined;this.isScrollable=false;this.renderStatus="is-closing"}componentDidLoad(){this.dialogElement.addEventListener("cancel",this.onCancel);this.ready.emit()}disconnectedCallback(){this.dialogElement.removeEventListener("cancel",this.onCancel)}storeInitialValues(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.initialSelectedOptions=t.listProps.selectedOptions}}focusContent(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){const{event:i}=t;if(i instanceof KeyboardEvent){this.optionListElement.handleExternalKeydown(i)}else{this.optionListElement.focus()}}}hidePostHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null}}showPreHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null;t.options.forEach((t=>{this.hostElement.appendChild("options"in t?this.generateOptgroup(t):this.generateOption(t))}))}}updateDialogMinMaxHeight(){const t=window.innerHeight;this.dialogElement.style.setProperty("--comp-action-sheet-computed-min-height",`${Math.floor(t*this.minHeight)}px`);this.dialogElement.style.setProperty("--comp-action-sheet-computed-max-height",`${Math.floor(t*this.maxHeight)}px`)}async hide(t={value:"",values:[],type:"confirm"}){this.close.emit(t);this.renderStatus="is-closing";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-closing")return;this.dialogElement.close();this.renderStatus=null;this.data=undefined;this.initialSelectedOptions=[];this.selectedOptions={values:[],value:""};this.hidePostHook()}),{once:true})}async show(){this.showPreHook();await r();this.updateDialogMinMaxHeight();this.storeInitialValues();if(this.dialogElement.open)return;this.dialogElement.showModal();this.renderStatus="is-opening";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-opening")return;this.renderStatus="is-open";this.focusContent()}),{once:true})}render(){var t;const{data:i}=this;const o=(i===null||i===void 0?void 0:i.title)||this.title||!this.hideClose;const a=this.renderStatus||"";let s=null;switch(i===null||i===void 0?void 0:i.appearance){case"message":s=this.renderMessage;break;case"list":s=this.renderList;break;default:s=this.renderSlot;break}const r=(i===null||i===void 0?void 0:i.appearance)||"slot";const n=`interior is-${r}`;return e("dialog",{ref:t=>this.dialogElement=t,class:a,onClick:this.onClick},e("div",{class:n},o&&e("header",null,e("div",{class:"title"},(i===null||i===void 0?void 0:i.title)||this.title),!this.hideClose&&e("q2-btn",{class:"btn-close","test-id":"btnClose",onClick:this.onCancel,label:"tecton.element.actionSheet.close","hide-label":true},e("q2-icon",{type:"close"}))),((t=this.data)===null||t===void 0?void 0:t.description)&&e("p",null,i.description),s&&e(s,{data:this.data})))}get hostElement(){return a(this)}};l.style=n;export{l as q2_action_sheet};
+//# sourceMappingURL=p-09d4b3d3.entry.js.map

package/dist/q2-tecton-elements/p-09d4b3d3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2ActionSheet","this","initialSelectedOptions","selectedOptions","values","value","minHeight","maxHeight","generateOption","option","optionElement","document","createElement","attributes","__rest","innerHTML","Object","entries","forEach","key","undefined","setAttribute","generateOptgroup","optgroupElement","label","disabled","options","length","opt","appendChild","onClick","event","eventTarget","target","HTMLElement","isInContent","closest","onCancel","preventDefault","hide","_b","_a","type","onListChange","detail","onListPopoverStateChange","open","action","onListDone","assign","renderSlot","h","class","ref","el","contentElement","renderMessage","data","title","description","renderList","listProps","Fragment","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","componentDidLoad","dialogElement","addEventListener","ready","emit","disconnectedCallback","removeEventListener","storeInitialValues","appearance","focusContent","KeyboardEvent","handleExternalKeydown","focus","hidePostHook","hostElement","showPreHook","updateDialogMinMaxHeight","windowHeight","window","innerHeight","style","setProperty","Math","floor","async","close","renderStatus","once","waitForNextPaint","showModal","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["./src/components/q2-action-sheet/styles.scss?tag=q2-action-sheet&encapsulation=shadow","./src/components/q2-action-sheet/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote('0 3px 6px rgba(0, 0, 0, 0.3)')\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","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"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-b73e7870.entry.js → p-0d4aec6e.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as t,g as c}from"./p-277dc8cd.js";import{c as r,h as i,o as a,i as h,l}from"./p-99ab3236.js";const s='*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{color:var(--tct-checkbox-label-color);cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]) .checkbox-icon{stroke:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';const n=class{constructor(t){e(this,t);this.change=o(this,"change",7);this._id=`checkbox-${r()}`;this.onInputClick=e=>{e.stopPropagation();e.preventDefault();const o=this.disabled||this.readonly;if(o)return;if(!(e.target instanceof HTMLInputElement))return;const{value:t,checked:c}=e.target;this.change.emit({value:t,checked:c});this.inputElement.focus()};this.checked=false;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.alignment=undefined;this.description=undefined;this.ariaLabel=undefined}componentWillLoad(){i(this)}componentDidLoad(){a(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(e){setTimeout((()=>this.handleChangeEvent(e)),0)}delegateFocus(e){if(!h(e,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){i(this)}handleChangeEvent(e){if(this.readonly||this.disabled||this.hostElement.onchange||e.defaultPrevented||e.target!==this.hostElement||!e.detail){return}this.checked=e.detail.checked}render(){const e=["label-text"];if(this.hideLabel)e.push("sr");return t("div",{class:"container"},t("input",{ref:e=>this.inputElement=e,"aria-describedby":this.description?"description":undefined,"aria-invalid":`${this.hasError}`,checked:this.indeterminate||this.checked||false,class:"sr",disabled:!!this.disabled||!!this.groupDisabled,id:this._id,name:this.name||this._id,onClick:this.onInputClick,"test-id":"q2CheckboxInnerCheckBox",type:"checkbox",value:this.value}),t("label",{htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),t("div",{class:e.join(" ")},t("label",{"test-id":"checkboxLabel",htmlFor:this._id},l(this.label),t("slot",null))),this.description&&t("div",{class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){if(this.type==="favorite"){return t("q2-icon",{type:"star",class:"checkbox-icon"})}if(this.type==="toggle"){return this.generateToggleSVG()}return t("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},t("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){if(this.indeterminate){return t("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"})}return t("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return t("div",{class:"toggle-svg"},t("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track","test-id":"toggleTrack"},t("rect",{width:"36",height:"14",rx:"7",x:"5"})),t("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator","test-id":"toggleIndicator"},t("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),t("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),t("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),t("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return c(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};n.style=s;export{n as q2_checkbox};
-//# sourceMappingURL=p-b73e7870.entry.js.map
+import{r as e,c as o,h as t,g as c}from"./p-277dc8cd.js";import{c as r,h as i,o as a,i as h,l}from"./p-ef856249.js";const s='*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{color:var(--tct-checkbox-label-color);cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]) .checkbox-icon{stroke:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}';const n=class{constructor(t){e(this,t);this.change=o(this,"change",7);this._id=`checkbox-${r()}`;this.onInputClick=e=>{e.stopPropagation();e.preventDefault();const o=this.disabled||this.readonly;if(o)return;if(!(e.target instanceof HTMLInputElement))return;const{value:t,checked:c}=e.target;this.change.emit({value:t,checked:c});this.inputElement.focus()};this.checked=false;this.disabled=undefined;this.hasError=false;this.hideLabel=undefined;this.indeterminate=undefined;this.label=undefined;this.name=undefined;this.readonly=undefined;this.type=undefined;this.value=undefined;this.groupDisabled=undefined;this.alignment=undefined;this.description=undefined;this.ariaLabel=undefined}componentWillLoad(){i(this)}componentDidLoad(){a(this.hostElement);this.hostElement.click=()=>this.inputElement.click()}defaultChangeHandler(e){setTimeout((()=>this.handleChangeEvent(e)),0)}delegateFocus(e){if(!h(e,this.hostElement))return;this.hostElement.shadowRoot.querySelector("input").focus()}ariaLabelObserver(){i(this)}handleChangeEvent(e){if(this.readonly||this.disabled||this.hostElement.onchange||e.defaultPrevented||e.target!==this.hostElement||!e.detail){return}this.checked=e.detail.checked}render(){const e=["label-text"];if(this.hideLabel)e.push("sr");return t("div",{class:"container"},t("input",{ref:e=>this.inputElement=e,"aria-describedby":this.description?"description":undefined,"aria-invalid":`${this.hasError}`,checked:this.indeterminate||this.checked||false,class:"sr",disabled:!!this.disabled||!!this.groupDisabled,id:this._id,name:this.name||this._id,onClick:this.onInputClick,"test-id":"q2CheckboxInnerCheckBox",type:"checkbox",value:this.value}),t("label",{htmlFor:this._id,class:"label-control","test-id":"checkboxButton"},this.generateCheckboxSVG()),t("div",{class:e.join(" ")},t("label",{"test-id":"checkboxLabel",htmlFor:this._id},l(this.label),t("slot",null))),this.description&&t("div",{class:"description-text","test-id":"checkboxDescription",id:"description"},l(this.description)))}generateCheckboxSVG(){if(this.type==="favorite"){return t("q2-icon",{type:"star",class:"checkbox-icon"})}if(this.type==="toggle"){return this.generateToggleSVG()}return t("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",class:"checkbox-icon",focusable:"false"},t("rect",{x:"1",y:"1",width:"18",height:"18",rx:"3"}),(this.checked||this.indeterminate)&&this.generateCheckBoxSVGFill())}generateCheckBoxSVGFill(){if(this.indeterminate){return t("line",{class:"checkbox-fill indeterminate-fill",x1:"4",y1:"10",x2:"16",y2:"10"})}return t("polyline",{class:"checkbox-fill checked-fill",points:"5 11 8.5 14.5 15 6"})}generateToggleSVG(){return t("div",{class:"toggle-svg"},t("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 46 14",class:"toggle-track","test-id":"toggleTrack"},t("rect",{width:"36",height:"14",rx:"7",x:"5"})),t("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 30 30",class:"toggle-indicator","test-id":"toggleIndicator"},t("circle",{class:"toggle-circle",width:"20",height:"20",cx:"15",cy:"15",r:"10"}),t("line",{class:"off checked-fill",x1:"12",y1:"18",x2:"18",y2:"12"}),t("line",{class:"off checked-fill",x1:"12",y1:"12",x2:"18",y2:"18"}),t("polyline",{class:"on checked-fill",points:"11,16 14,19 18,12 14,19"})))}get hostElement(){return c(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};n.style=s;export{n as q2_checkbox};
+//# sourceMappingURL=p-0d4aec6e.entry.js.map

package/dist/q2-tecton-elements/p-1c993698.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,g as e}from"./p-277dc8cd.js";import{j as a,o,n as r,i,l as n}from"./p-ef856249.js";const c="*{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 #33b4ff #06C)}: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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";const p=class{constructor(s){t(this,s);this.type="info";this.appearance="standard";this.description=false;this.presentToggle=undefined}get isFirefox(){return a()}componentDidLoad(){o(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle;if(!t)return;r((()=>{this.presentToggle=false}))}delegateFocus(t){if(!i(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this;const e=t&&this.presentToggle;const a=!t&&this.presentToggle;const{description:o}=this;const r=n(`tecton.element.message.type.${this.type?this.type:"info"}`);return s("div",{tabindex:"-1",class:"message",role:o?undefined:"alert","aria-live":o?undefined:"assertive","aria-atomic":o?undefined:"true","aria-relevant":o?undefined:"all","test-id":"messageContainer"},this.appearance==="standard"?this.messageIcon(this.type):"",a&&s("div",{class:"sr"}),s("div",{class:"sr message-label"},r),s("div",{class:"message-content","aria-hidden":e?"true":undefined},s("slot",null)))}messageIcon(t){const e={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};const a=e[t]||e.info;return s("q2-icon",{type:a,class:"message-icon"})}get hostElement(){return e(this)}};p.style=c;export{p as q2_message};
+//# sourceMappingURL=p-1c993698.entry.js.map

package/dist/q2-tecton-elements/p-1c993698.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Message","isFirefox","checkIfFirefox","componentDidLoad","overrideFocus","this","hostElement","async","presentToggle","nextPaint","delegateFocus","event","isEventFromElement","shadowRoot","querySelector","focus","render","addAriaHiddenForAriaLive","addDivForAriaLive","description","messageLabel","loc","type","h","tabindex","class","role","undefined","appearance","messageIcon","iconMap","success","warning","danger","error","info","iconType"],"sources":["./src/components/q2-message/styles.scss?tag=q2-message&encapsulation=shadow","./src/components/q2-message/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    padding-left: var-list(--tct-scale-l3, --app-scale-3x, 15px);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-message',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Message {\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n    @Prop({ reflect: true }) description: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n}\n"],"mappings":"wGAAA,MAAMA,EAAY,+yI,MCQLC,EAAS,M,mCACmE,O,gBACvB,W,iBACd,M,6BAM5CC,gBACA,OAAOC,G,CAGXC,mBACIC,EAAcC,KAAKC,Y,CAIvBC,gBACI,MAAMN,UAAEA,GAAcI,KACtBA,KAAKG,eAAiBH,KAAKG,cAC3B,IAAKP,EAAW,OAChBQ,GAAU,KACNJ,KAAKG,cAAgB,KAAK,G,CAKlCE,cAAcC,GACV,IAAKC,EAAmBD,EAAON,KAAKC,aAAc,OAClDD,KAAKC,YAAYO,WAAWC,cAA2B,YAAYC,O,CAGvEC,SACI,MAAMf,UAAEA,GAAcI,KACtB,MAAMY,EAA2BhB,GAAaI,KAAKG,cACnD,MAAMU,GAAqBjB,GAAaI,KAAKG,cAC7C,MAAMW,YAAEA,GAAgBd,KACxB,MAAMe,EAAuBC,EAAI,+BAA+BhB,KAAKiB,KAAOjB,KAAKiB,KAAO,UAExF,OACIC,EAAA,OACIC,SAAS,KACTC,MAAM,UACNC,KAAMP,EAAcQ,UAAY,QAAO,YAC5BR,EAAcQ,UAAY,YAAW,cACnCR,EAAcQ,UAAY,OAAM,gBAC9BR,EAAcQ,UAAY,MAAK,UACtC,oBAEPtB,KAAKuB,aAAe,WAAavB,KAAKwB,YAAYxB,KAAKiB,MAAQ,GAC/DJ,GAAqBK,EAAA,OAAKE,MAAM,OACjCF,EAAA,OAAKE,MAAM,oBAAoBL,GAC/BG,EAAA,OACIE,MAAM,kBAAiB,cACVR,EAA2B,OAASU,WAEjDJ,EAAA,c,CAMhBM,YAAYP,GACR,MAAMQ,EAAU,CACZC,QAAS,UACTC,QAAS,UACTC,OAAQ,QACRC,MAAO,QACPC,KAAM,QAGV,MAAMC,EAAmBN,EAAQR,IAASQ,EAAQK,KAElD,OACIZ,EAAA,WACID,KAAMc,EACNX,MAAM,gB"}

package/dist/q2-tecton-elements/{p-0c1b74e9.entry.js → p-252889b7.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as a,h as r,g as e}from"./p-277dc8cd.js";import{c as o,s as i,o as n,i as s,m as c,g as d,l as h}from"./p-99ab3236.js";const l="*{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 #33b4ff #06C)}: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))))}.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)))));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(--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)))))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));border-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%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));box-shadow:var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}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}.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))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));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{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";const v=class{constructor(r){t(this,r);this.input=a(this,"input",7);this.change=a(this,"change",7);this.scheduledAfterRender=[];this.guid=o();this.checkRows=()=>{const{contentContainer:t,rows:a,textareaField:r,resize:e}=this;if(!a||["none","horizontal"].includes(e))return;t.style.height=`${t.offsetHeight}px`;r.removeAttribute("rows")};this.checkCols=()=>{const{contentContainer:t,cols:a,textareaField:r,resize:e}=this;if(!a||["none","vertical"].includes(e))return;t.style.width=`${t.offsetWidth}px`;r.removeAttribute("cols")};this.onTextareaFocus=()=>{this.hasFocus=true;this.valueOnFocus=this.value;i(this)};this.onTextareaBlur=()=>{const{valueOnFocus:t,textareaField:{value:a}}=this;this.hasFocus=false;i(this);if(t!==a)this.change.emit({value:a})};this.onTextareaInput=t=>{t.stopPropagation();const a=t.target.value;this.input.emit({value:a})};this.onTextareaChange=t=>{t.stopPropagation();const a=t.target.value;this.change.emit({value:a})};this.onMouseDown=t=>{const{contentContainer:a}=this;this.downParams={width:a.offsetWidth,height:a.offsetHeight,x:t.clientX,y:t.clientY};document.addEventListener("mousemove",this.onMouseMove);document.addEventListener("mouseup",this.onMouseUp)};this.onMouseMove=t=>{this.setHeight(t);this.setWidth(t)};this.onTouchStart=t=>{if(t.touches.length!==1)return;t.preventDefault();const{contentContainer:a}=this;const r=t.touches[0];this.downParams={width:a.offsetWidth,height:a.offsetHeight,x:r.pageX,y:r.pageY};document.addEventListener("touchmove",this.onTouchMove);document.addEventListener("touchend",this.onTouchMove)};this.onTouchMove=t=>{this.setHeight(t);this.setWidth(t)};this.onMouseUp=()=>{document.removeEventListener("mousemove",this.onMouseMove);this.downParams=null};this.value=undefined;this.label=undefined;this.hideLabel=undefined;this.hideMessages=undefined;this.optional=undefined;this.placeholder=undefined;this.disabled=undefined;this.readonly=undefined;this.spellcheck=undefined;this.maxlength=undefined;this.rows=undefined;this.cols=undefined;this.resize="vertical";this.errors=undefined;this.hints=undefined;this.hasFocus=undefined;this.downParams=undefined}componentWillLoad(){if(isNaN(this.maxlength)){this.maxlength=undefined}}componentDidRender(){this.scheduledAfterRender.push(this.checkRows,this.checkCols);this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}componentDidLoad(){n(this.hostElement)}get hasError(){return Array.isArray(this.errors)&&this.errors.length>0}get messages(){return this.errors&&this.errors.length>0&&this.errors||this.hints&&this.hints.length>0&&this.hints||[]}get showMessages(){return this.messages.length>0&&!this.hideMessages}get inputId(){return`input-guid-${this.guid}`}get inputDescribedBy(){return this.showMessages?`${this.inputId}-description`:undefined}get wrapperClasses(){const t=this.hasError?" has-error":"";const a=!!this.value?" has-value":"";const r=this.hasFocus?" has-focus":"";return`field-container${t}${a}${r}`}get showResize(){const{resize:t}=this;return t&&t!=="none"}valueObserver(){const{maxlength:t,value:a=""}=this;if(!t)return;const r=a.substr(0,t);if(r===a)return;this.change.emit({value:r})}rowsObserver(){this.contentContainer.style.height=null}colsObserver(){this.contentContainer.style.width=null}hintsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}errorsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}onHostElementFocus(t){if(!s(t,this.hostElement))return;this.textareaField.focus()}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}setWidth(t){var a,r;const{contentContainer:e,resize:o,downParams:{width:i,x:n}}=this;const s=["both","horizontal"].includes(o);if(!s)return;const c=t instanceof MouseEvent?t.clientX:(r=(a=t.touches[0])===null||a===void 0?void 0:a.pageX)!==null&&r!==void 0?r:0;const d=i-(n-c);e.style.width=`${d}px`}setHeight(t){var a,r;const{contentContainer:e,resize:o,downParams:{height:i,y:n}}=this;const s=["both","vertical"].includes(o);if(!s)return;const c=t instanceof MouseEvent?t.clientY:(r=(a=t.touches[0])===null||a===void 0?void 0:a.pageY)!==null&&r!==void 0?r:0;const d=i-(n-c);e.style.height=`${d}px`}render(){return r("div",{class:this.wrapperClasses},d(this),r("div",{class:"content-container",ref:t=>this.contentContainer=t},this.inputDOM(),this.maxlength?this.maxLengthDOM():"",c(this)))}maxLengthDOM(){var t;return r("div",{class:"max-length","aria-hidden":"true"},((t=this.value)===null||t===void 0?void 0:t.length)||0,"/",this.maxlength)}inputDOM(){return r("div",{class:"input-container"},r("textarea",{id:this.inputId,placeholder:this.placeholder&&h(this.placeholder)||undefined,"test-id":"inputField",maxLength:this.maxlength,"aria-describedby":this.inputDescribedBy,"aria-invalid":`${this.hasError}`,"aria-required":`${!this.optional}`,"aria-label":this.hideLabel&&this.label,spellcheck:this.spellcheck,rows:this.rows||3,cols:this.cols,value:this.value,ref:t=>this.textareaField=t,readonly:!!this.readonly,disabled:!!this.disabled,maxlength:this.maxlength,onInput:this.onTextareaInput,onChange:this.onTextareaChange,onFocus:this.onTextareaFocus,onBlur:this.onTextareaBlur}),this.hasError?r("q2-icon",{type:"error",class:"icon-error"}):"",this.showResize&&r("button",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,class:"btn-resize","aria-label":h("tecton.element.input.resize"),tabIndex:-1},r("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},r("path",{d:"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11",fill:"none","stroke-stroke-linecap":"square"}))))}get hostElement(){return e(this)}static get watchers(){return{value:["valueObserver"],rows:["rowsObserver"],cols:["colsObserver"],hints:["hintsObserver"],errors:["errorsObserver"]}}};v.style=l;export{v as q2_textarea};
-//# sourceMappingURL=p-0c1b74e9.entry.js.map
+import{r as t,c as e,h as a,g as r}from"./p-277dc8cd.js";import{c as o,s as i,o as n,i as s,m as c,g as d,l as h}from"./p-ef856249.js";const l="*{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 #33b4ff #06C)}: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))))}.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)))));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(--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)))))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));border-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%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));box-shadow:var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}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}.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))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));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{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";const v=class{constructor(a){t(this,a);this.input=e(this,"input",7);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.guid=o();this.checkRows=()=>{const{contentContainer:t,rows:e,textareaField:a,resize:r}=this;if(!e||["none","horizontal"].includes(r))return;t.style.height=`${t.offsetHeight}px`;a.removeAttribute("rows")};this.checkCols=()=>{const{contentContainer:t,cols:e,textareaField:a,resize:r}=this;if(!e||["none","vertical"].includes(r))return;t.style.width=`${t.offsetWidth}px`;a.removeAttribute("cols")};this.onTextareaFocus=()=>{this.hasFocus=true;this.valueOnFocus=this.value;i(this)};this.onTextareaBlur=()=>{const{valueOnFocus:t,textareaField:{value:e}}=this;this.hasFocus=false;i(this);if(t!==e)this.change.emit({value:e})};this.onTextareaInput=t=>{t.stopPropagation();const e=t.target.value;this.input.emit({value:e})};this.onTextareaChange=t=>{t.stopPropagation();const e=t.target.value;this.change.emit({value:e})};this.onMouseDown=t=>{const{contentContainer:e}=this;this.downParams={width:e.offsetWidth,height:e.offsetHeight,x:t.clientX,y:t.clientY};document.addEventListener("mousemove",this.onMouseMove);document.addEventListener("mouseup",this.onMouseUp)};this.onMouseMove=t=>{this.setHeight(t);this.setWidth(t)};this.onTouchStart=t=>{if(t.touches.length!==1)return;t.preventDefault();const{contentContainer:e}=this;const a=t.touches[0];this.downParams={width:e.offsetWidth,height:e.offsetHeight,x:a.pageX,y:a.pageY};document.addEventListener("touchmove",this.onTouchMove);document.addEventListener("touchend",this.onTouchMove)};this.onTouchMove=t=>{this.setHeight(t);this.setWidth(t)};this.onMouseUp=()=>{document.removeEventListener("mousemove",this.onMouseMove);this.downParams=null};this.value=undefined;this.label=undefined;this.hideLabel=undefined;this.hideMessages=undefined;this.optional=undefined;this.placeholder=undefined;this.disabled=undefined;this.readonly=undefined;this.spellcheck=undefined;this.maxlength=undefined;this.rows=undefined;this.cols=undefined;this.resize="vertical";this.errors=undefined;this.hints=undefined;this.hasFocus=undefined;this.downParams=undefined}componentWillLoad(){if(isNaN(this.maxlength)){this.maxlength=undefined}}componentDidRender(){this.scheduledAfterRender.push(this.checkRows,this.checkCols);this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}componentDidLoad(){n(this.hostElement)}get hasError(){return Array.isArray(this.errors)&&this.errors.length>0}get messages(){return this.errors&&this.errors.length>0&&this.errors||this.hints&&this.hints.length>0&&this.hints||[]}get showMessages(){return this.messages.length>0&&!this.hideMessages}get inputId(){return`input-guid-${this.guid}`}get inputDescribedBy(){return this.showMessages?`${this.inputId}-description`:undefined}get wrapperClasses(){const t=this.hasError?" has-error":"";const e=!!this.value?" has-value":"";const a=this.hasFocus?" has-focus":"";return`field-container${t}${e}${a}`}get showResize(){const{resize:t}=this;return t&&t!=="none"}valueObserver(){const{maxlength:t,value:e=""}=this;if(!t)return;const a=e.substr(0,t);if(a===e)return;this.change.emit({value:a})}rowsObserver(){this.contentContainer.style.height=null}colsObserver(){this.contentContainer.style.width=null}hintsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}errorsObserver(){this.hasFocus&&this.scheduledAfterRender.push((()=>i(this)))}onHostElementFocus(t){if(!s(t,this.hostElement))return;this.textareaField.focus()}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail.value}}onHostElementInput(t){if(t.target===this.hostElement&&!this.hostElement.oninput){this.value=t.detail.value}}setValue(t){const{textareaField:e}=this;e.focus();e.value=t;e.dispatchEvent(new InputEvent("input"))}setWidth(t){var e,a;const{contentContainer:r,resize:o,downParams:{width:i,x:n}}=this;const s=["both","horizontal"].includes(o);if(!s)return;const c=t instanceof MouseEvent?t.clientX:(a=(e=t.touches[0])===null||e===void 0?void 0:e.pageX)!==null&&a!==void 0?a:0;const d=i-(n-c);r.style.width=`${d}px`}setHeight(t){var e,a;const{contentContainer:r,resize:o,downParams:{height:i,y:n}}=this;const s=["both","vertical"].includes(o);if(!s)return;const c=t instanceof MouseEvent?t.clientY:(a=(e=t.touches[0])===null||e===void 0?void 0:e.pageY)!==null&&a!==void 0?a:0;const d=i-(n-c);r.style.height=`${d}px`}render(){return a("div",{class:this.wrapperClasses},d(this),a("div",{class:"content-container",ref:t=>this.contentContainer=t},this.inputDOM(),this.maxlength?this.maxLengthDOM():"",c(this)))}maxLengthDOM(){var t;return a("div",{class:"max-length","aria-hidden":"true"},((t=this.value)===null||t===void 0?void 0:t.length)||0,"/",this.maxlength)}inputDOM(){return a("div",{class:"input-container"},a("textarea",{id:this.inputId,placeholder:this.placeholder&&h(this.placeholder)||undefined,"test-id":"inputField",maxLength:this.maxlength,"aria-describedby":this.inputDescribedBy,"aria-invalid":`${this.hasError}`,"aria-required":`${!this.optional}`,"aria-label":this.hideLabel&&this.label,spellcheck:this.spellcheck,rows:this.rows||3,cols:this.cols,value:this.value,ref:t=>this.textareaField=t,readonly:!!this.readonly,disabled:!!this.disabled,maxlength:this.maxlength,onInput:this.onTextareaInput,onChange:this.onTextareaChange,onFocus:this.onTextareaFocus,onBlur:this.onTextareaBlur}),this.hasError?a("q2-icon",{type:"error",class:"icon-error"}):"",this.showResize&&a("button",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,class:"btn-resize","aria-label":h("tecton.element.input.resize"),tabIndex:-1},a("svg",{"aria-hidden":"true",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11",fill:"none","stroke-stroke-linecap":"square"}))))}get hostElement(){return r(this)}static get watchers(){return{value:["valueObserver"],rows:["rowsObserver"],cols:["colsObserver"],hints:["hintsObserver"],errors:["errorsObserver"]}}};v.style=l;export{v as q2_textarea};
+//# sourceMappingURL=p-252889b7.entry.js.map