npm - q2-tecton-elements - Versions diffs - 1.63.2 → 1.64.1 - Mend

q2-tecton-elements 1.63.2 → 1.64.1

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

Files changed (383) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2TextareaCss","Q2Textarea","constructor","hostRef","this","debouncedScreenReaderCharacterCount","debounce","updateScreenReaderCharacterCount","describeByScreenReaderCharacterCount","guid","createGuid","scheduledAfterRender","resize","checkCols","contentContainer","cols","textareaField","includes","style","width","offsetWidth","removeAttribute","checkRows","rows","height","offsetHeight","getBorderOffset","computedStyle","window","getComputedStyle","parseInt","borderTopWidth","borderBottomWidth","increaseHeightIfOverflowing","scrollHeight","isOverflowingVertically","newHeight","clientHeight","onMouseDown","event","downParams","x","clientX","y","clientY","document","addEventListener","onMouseMove","onMouseUp","setHeight","setWidth","removeEventListener","onTextareaBlur","valueOnFocus","value","hasFocus","setMessageHeight","change","emit","onTextareaChange","stopPropagation","target","onTextareaFocus","onTextareaInput","maxlength","input","onTouchMove","onTouchStart","touches","length","preventDefault","firstTouch","pageX","pageY","screenReaderCharacterCount","_a","componentWillLoad","isNaN","undefined","componentDidLoad","overrideFocus","hostElement","componentDidRender","push","forEach","fn","onHostElementChange","onchange","detail","onHostElementFocus","isEventFromElement","focus","onHostElementInput","oninput","setValue","dispatchEvent","InputEvent","colsObserver","errorsObserver","hintsObserver","maxlengthObserver","rowsObserver","valueObserver","truncatedValue","substr","hasError","Array","isArray","errors","inputDescribedBy","describedBy","showMessages","inputId","messages","hints","hideMessages","showResize","wrapperClasses","errorClass","valueClass","focusClass","resizeY","eventY","MouseEvent","_b","resizeX","eventX","newWidth","renderInput","textareaClasses","h","class","id","placeholder","loc","maxLength","optional","hideLabel","label","spellcheck","ref","el","readonly","disabled","onInput","onChange","onFocus","onBlur","type","tabIndex","viewBox","xmlns","d","fill","renderMaxLength","Fragment","render","key","renderLabel","renderMessages"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n --comp-label-padding: #{var-list(\n --tct-textarea-label-padding,\n unquote(\n '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n )\n )};\n --comp-label-margin: #{var-list(\n --tct-textarea-label-margin,\n unquote(\n '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n display: block;\n padding: var(--comp-label-padding);\n margin: var(--comp-label-margin);\n color: var-list(var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n .has-error & {\n color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n }\n\n :hover & {\n color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n .has-error & {\n color: var-list(\n --tct-textarea-error-hover-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-hover-label-font-color,\n --tct-textarea-label-font-color,\n inherit\n );\n }\n }\n\n :host(:focus-within) & {\n color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n }\n\n :host(:focus-within) .has-error & {\n color: var-list(\n --tct-textarea-error-focus-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-focus-label-font-color,\n var-prefixer(textarea-label-font-color),\n inherit\n );\n }\n}\n\n.optional-tag {\n --comp-label-optional-margin: #{var-list(\n --tct-textarea-label-optional-margin,\n unquote(\n '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n margin: var(--comp-label-optional-margin);\n color: var-list(\n var-prefixer(textarea-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n height: 100%;\n --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n --comp-textarea-border-top-left-radius: #{var-list(\n var-prefixer(textarea-border-top-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-top-right-radius: #{var-list(\n var-prefixer(textarea-border-top-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-right-radius: #{var-list(\n var-prefixer(textarea-border-bottom-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-left-radius: #{var-list(\n var-prefixer(textarea-border-bottom-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);\n --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n var-list(var-prefixer(textarea-border-right-width), 1px)\n var-list(var-prefixer(textarea-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-border-left-width), 1px)};\n --comp-textarea-icon-clearance: 34px;\n\n :host([disabled]) & {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n }\n}\n\n.content-container {\n --comp-textarea-min-height: 46px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n backdrop-filter: var(--comp-textarea-backdrop-filter);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition:\n background var(--comp-textarea-tween),\n backdrop-filter var(--comp-textarea-tween),\n border-width var(--comp-textarea-tween),\n border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-hover-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-hover-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-focus-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-focus-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n &:focus-visible {\n box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n }\n\n &::placeholder {\n color: var-list(\n var-prefixer(textarea-placeholder-font-color),\n --t-input-placeholder-font-color,\n --tct-gray-7,\n --app-gray-7,\n --tct-gray-d1,\n --app-gray-d1,\n #666666\n );\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n &.resize-vertical-auto {\n overflow: hidden;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n\n &:not(:focus) {\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n }\n }\n}\n\nq2-icon {\n margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n pointer-events: none;\n position: absolute;\n top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n right: 0;\n margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n --tct-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n --t-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n}\n\n.icon-error {\n color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n height: 0px;\n overflow: hidden;\n background: var-list(\n --tct-message-background,\n --tct-message-bg,\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n box-shadow: var-list(\n var-prefixer(textarea-message-box-shadow),\n --tct-box-shadow-1,\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n transition: height\n var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n margin-top: 2px;\n z-index: 1;\n position: absolute;\n width: 100%;\n color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(\n var-prefixer(textarea-max-length-font-size),\n --tct-font-size-small,\n --app-font-size-small,\n 12px\n );\n position: absolute;\n right: 0;\n}\n\n.btn-resize {\n --tct-textarea-resize-icon-padding: calc(\n calc(\n #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n var-prefixer(textarea-resize-icon-size),\n 12px\n )}\n ) / 2\n );\n width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n border: 0;\n position: absolute;\n right: var-list(\n --tct-textarea-resize-right,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n bottom: var-list(\n --tct-textarea-resize-bottom,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import {\n Component,\n EventEmitter,\n Prop,\n Event,\n Element,\n Fragment,\n State,\n h,\n Watch,\n Listen,\n Method,\n} from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n createGuid,\n debounce,\n isEventFromElement,\n renderLabel,\n loc,\n renderMessages,\n overrideFocus,\n setMessageHeight,\n} from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. /\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n // #region Own Properties\n\n contentContainer?: HTMLDivElement;\n debouncedScreenReaderCharacterCount = debounce(() => {\n this.updateScreenReaderCharacterCount();\n }, 2000);\n describeByScreenReaderCharacterCount = true;\n guid = createGuid();\n scheduledAfterRender: (() => void)[] = [];\n textareaField?: HTMLTextAreaElement;\n valueOnFocus: string;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n downParams: IDict<number>;\n\n @State()\n hasFocus: boolean;\n\n @State()\n screenReaderCharacterCount: number;\n\n // #endregion\n // #region Public Property API\n\n /\n Defines the number of columns displayed in the field.\n * If not set, the field will be full-width and respond to the window size.\n /\n @Prop({ reflect: true })\n cols: number;\n\n /* Indicates the field cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Each item in the `errors` array will appear below the input field when the field is focused.\n * @localizable\n /\n @Prop()\n errors: string[];\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true })\n hideLabel: boolean;\n\n /\n When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n /\n @Prop({ reflect: true })\n hideMessages: boolean;\n\n /\n Each item in the `hints` array will appear below the input field when the field is focused.\n * @info\n * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n * Once all errors are resolved, the hints display the next time the field is focused.\n * @localizable\n /\n @Prop()\n hints: string[];\n\n /\n The label that appears above the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n * Make sure you account for them when setting the `maxlength` value.\n * @info\n * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n /\n @Prop({ reflect: true, mutable: true })\n maxlength: number;\n\n /* Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /\n Text that appears within the field when it is blurred and empty.\n * Placeholder text disappears when the user focuses on the field and provides input.\n * @info\n * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n * @localizable\n /\n @Prop({ reflect: true })\n placeholder: string;\n\n /\n Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n * Takes priority over `optional` if both are `true`.\n /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Indicates how the field is resizable. /\n @Prop({ reflect: true })\n resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'vertical-auto' = 'vertical';\n\n /* Defines the number of rows displayed in the field. /\n @Prop({ reflect: true })\n rows: number;\n\n /* Determines whether the field is subject to spell-checking by the underlying browser or OS. /\n @Prop({ reflect: true })\n spellcheck: boolean;\n\n /* The value of the field. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the field loses focus after the value has been changed.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field value is updated.\n * @legacyEvent\n /\n @Event()\n input: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n if (isNaN(this.maxlength)) {\n this.maxlength = undefined;\n }\n\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n\n @Listen('focus')\n onHostElementFocus(event: Event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.textareaField.focus();\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.oninput) {\n this.value = event.detail.value;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n \n This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n * to trigger the `change` event, move the focus to another element after calling this method.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n const { textareaField } = this;\n textareaField.focus();\n textareaField.value = value;\n textareaField.dispatchEvent(new InputEvent('input'));\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('cols')\n colsObserver() {\n this.contentContainer.style.width = null;\n }\n\n @Watch('errors')\n errorsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('hints')\n hintsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('maxlength')\n maxlengthObserver() {\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n @Watch('rows')\n rowsObserver() {\n this.contentContainer.style.height = null;\n }\n\n @Watch('value')\n valueObserver() {\n const { maxlength, value = '' } = this;\n if (!maxlength) return;\n\n const truncatedValue = value.substr(0, maxlength);\n if (truncatedValue === value) return;\n\n this.change.emit({ value: truncatedValue });\n }\n\n // #endregion\n // #region Local Methods\n\n get hasError() {\n return Array.isArray(this.errors) && this.errors.length > 0;\n }\n\n get inputDescribedBy() {\n let describedBy = undefined;\n\n if (this.showMessages) {\n describedBy = `${this.inputId}-description`;\n }\n\n // Remove screen reader character count from described by after typing\n // starts to avoid double announcement. It's needed on focus to announce\n // the character count when field gains focus.\n if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n }\n\n return describedBy;\n }\n\n get inputId() {\n return `input-guid-${this.guid}`;\n }\n\n get messages(): string[] {\n return (\n (this.errors && this.errors.length > 0 && this.errors) \|\|\n (this.hints && this.hints.length > 0 && this.hints) \|\|\n []\n );\n }\n\n get showMessages() {\n return this.messages.length > 0 && !this.hideMessages;\n }\n\n get showResize() {\n const { resize } = this;\n return resize && resize !== 'none';\n }\n\n get wrapperClasses() {\n const errorClass = this.hasError ? ' has-error' : '';\n const valueClass = !!this.value ? ' has-value' : '';\n const focusClass = this.hasFocus ? ' has-focus' : '';\n\n return `field-container${errorClass}${valueClass}${focusClass}`;\n }\n\n checkCols = () => {\n const { contentContainer, cols, textareaField, resize } = this;\n\n if (!cols \|\| ['none', 'vertical'].includes(resize)) return;\n contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n textareaField.removeAttribute('cols');\n };\n\n checkRows = () => {\n const { contentContainer, rows, textareaField, resize } = this;\n\n if (!rows \|\| ['none', 'horizontal'].includes(resize)) return;\n contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n textareaField.removeAttribute('rows');\n };\n\n getBorderOffset = () => {\n const computedStyle = window.getComputedStyle(this.textareaField);\n\n return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n };\n\n increaseHeightIfOverflowing = () => {\n const { scrollHeight } = this.textareaField;\n if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n // need to account for border width because scrollHeight does not include it\n const newHeight = scrollHeight + this.getBorderOffset();\n this.contentContainer.style.height = `${newHeight}px`;\n }\n };\n\n isOverflowingVertically = () => {\n const { clientHeight, scrollHeight } = this.textareaField;\n\n return scrollHeight > clientHeight;\n };\n\n onMouseDown = (event: MouseEvent) => {\n const { contentContainer } = this;\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: event.clientX,\n y: event.clientY,\n };\n document.addEventListener('mousemove', this.onMouseMove);\n document.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseMove = (event: MouseEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onMouseUp = () => {\n document.removeEventListener('mousemove', this.onMouseMove);\n document.removeEventListener('mouseup', this.onMouseUp);\n this.downParams = null;\n };\n\n onTextareaBlur = () => {\n const {\n valueOnFocus,\n textareaField: { value },\n } = this;\n this.describeByScreenReaderCharacterCount = true;\n this.hasFocus = false;\n setMessageHeight(this);\n if (valueOnFocus !== value) this.change.emit({ value });\n };\n\n onTextareaChange = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n\n this.change.emit({ value });\n };\n\n onTextareaFocus = () => {\n this.hasFocus = true;\n this.valueOnFocus = this.value;\n setMessageHeight(this);\n };\n\n onTextareaInput = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n this.describeByScreenReaderCharacterCount = false;\n this.increaseHeightIfOverflowing();\n if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n this.input.emit({ value });\n };\n\n onTouchMove = (event: TouchEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onTouchStart = (event: TouchEvent) => {\n if (event.touches.length !== 1) return;\n\n event.preventDefault();\n\n const { contentContainer } = this;\n const firstTouch = event.touches[0];\n\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: firstTouch.pageX,\n y: firstTouch.pageY,\n };\n\n document.addEventListener('touchmove', this.onTouchMove);\n document.addEventListener('touchend', this.onTouchMove);\n };\n\n setHeight(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { height, y },\n } = this;\n const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n if (!resizeY) return;\n\n const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n const newHeight = height - (y - eventY);\n // If 'vertical-auto', change height if the new height is greater\n // than the current height or the textarea is not overflowing.\n // Otherwise, change height regardless of the new height.\n if (\n resize !== 'vertical-auto' \|\|\n newHeight > height \|\|\n (resize === 'vertical-auto' && !this.isOverflowingVertically())\n ) {\n contentContainer.style.height = `${newHeight}px`;\n }\n }\n\n setWidth(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { width, x },\n } = this;\n\n const resizeX = ['both', 'horizontal'].includes(resize);\n\n if (!resizeX) return;\n const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n const newWidth = width - (x - eventX);\n contentContainer.style.width = `${newWidth}px`;\n }\n\n updateScreenReaderCharacterCount = () => {\n this.screenReaderCharacterCount = this.value?.length \|\| 0;\n };\n\n // #endregion\n // #region Render Methods\n\n renderInput() {\n const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n return (\n <div class=\"input-container\">\n <textarea\n id={this.inputId}\n class={textareaClasses}\n placeholder={(this.placeholder && loc(this.placeholder)) \|\| undefined}\n test-id=\"inputField\"\n maxLength={this.maxlength}\n aria-describedby={this.inputDescribedBy}\n aria-invalid={`${this.hasError}`}\n aria-required={`${!this.optional}`}\n aria-label={this.hideLabel && this.label}\n spellcheck={this.spellcheck}\n rows={this.rows \|\| 3}\n cols={this.cols}\n value={this.value}\n ref={el => (this.textareaField = el)}\n readonly={!!this.readonly}\n disabled={!!this.disabled}\n maxlength={this.maxlength}\n onInput={this.onTextareaInput}\n onChange={this.onTextareaChange}\n onFocus={this.onTextareaFocus}\n onBlur={this.onTextareaBlur}\n ></textarea>\n {this.hasError ? (\n <q2-icon\n type=\"error\"\n class=\"icon-error\"\n />\n ) : (\n ''\n )}\n {this.showResize && (\n <button\n onMouseDown={this.onMouseDown}\n onTouchStart={this.onTouchStart}\n class=\"btn-resize\"\n aria-label={loc('tecton.element.input.resize')}\n tabIndex={-1}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n fill=\"none\"\n stroke-stroke-linecap=\"square\"\n />\n </svg>\n </button>\n )}\n </div>\n );\n }\n\n renderMaxLength() {\n return (\n <Fragment>\n <div\n class=\"max-length\"\n aria-hidden=\"true\"\n >\n {this.value?.length \|\| 0}/{this.maxlength}\n </div>\n <div\n aria-live=\"polite\"\n class=\"sr\"\n id={`${this.inputId}-max-length`}\n test-id=\"max-length-sr\"\n >\n {loc('tecton.element.textarea.characterCount.screenReader', [\n this.screenReaderCharacterCount,\n this.maxlength,\n ])}\n </div>\n </Fragment>\n );\n }\n\n render() {\n return (\n <div class={this.wrapperClasses}>\n {renderLabel(this)}\n <div\n class=\"content-container\"\n ref={el => (this.contentContainer = el)}\n >\n {this.renderInput()}\n {this.maxlength ? this.renderMaxLength() : ''}\n {renderMessages(this)}\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAgB;;MC2BTC,IAAU;EADvB,WAAAC,CAAAC;;;;IAKIC,KAAAC,sCAAsCC,GAAS;MAC3CF,KAAKG;AAAkC,QACxC;IACHH,KAAoCI,uCAAG;IACvCJ,KAAIK,OAAGC;IACPN,KAAoBO,uBAAmB;oDA2GvCP,KAAMQ,SAAkE;IA8LxER,KAASS,YAAG;MACR,OAAMC,kBAAEA,GAAgBC,MAAEA,GAAIC,eAAEA,GAAaJ,QAAEA,KAAWR;MAE1D,KAAKW,KAAQ,EAAC,QAAQ,aAAYE,SAASL,IAAS;MACpDE,EAAiBI,MAAMC,QAAQ,GAAGL,EAAiBM;MACnDJ,EAAcK,gBAAgB;AAAO;IAGzCjB,KAASkB,YAAG;MACR,OAAMR,kBAAEA,GAAgBS,MAAEA,GAAIP,eAAEA,GAAaJ,QAAEA,KAAWR;MAE1D,KAAKmB,KAAQ,EAAC,QAAQ,eAAcN,SAASL,IAAS;MACtDE,EAAiBI,MAAMM,SAAS,GAAGV,EAAiBW;MACpDT,EAAcK,gBAAgB;AAAO;IAGzCjB,KAAesB,kBAAG;MACd,MAAMC,IAAgBC,OAAOC,iBAAiBzB,KAAKY;MAEnD,OAAOc,SAASH,EAAcI,gBAAgB,MAAMD,SAASH,EAAcK,mBAAmB;AAAG;IAGrG5B,KAA2B6B,8BAAG;MAC1B,OAAMC,cAAEA,KAAiB9B,KAAKY;MAC9B,IAAIZ,KAAKQ,WAAW,mBAAmBR,KAAK+B,2BAA2B;;QAEnE,MAAMC,IAAYF,IAAe9B,KAAKsB;QACtCtB,KAAKU,iBAAiBI,MAAMM,SAAS,GAAGY;;;IAIhDhC,KAAuB+B,0BAAG;MACtB,OAAME,cAAEA,GAAYH,cAAEA,KAAiB9B,KAAKY;MAE5C,OAAOkB,IAAeG;AAAY;IAGtCjC,KAAAkC,cAAeC;MACX,OAAMzB,kBAAEA,KAAqBV;MAC7BA,KAAKoC,aAAa;QACdrB,OAAOL,EAAiBM;QACxBI,QAAQV,EAAiBW;QACzBgB,GAAGF,EAAMG;QACTC,GAAGJ,EAAMK;;MAEbC,SAASC,iBAAiB,aAAa1C,KAAK2C;MAC5CF,SAASC,iBAAiB,WAAW1C,KAAK4C;AAAU;IAGxD5C,KAAA2C,cAAeR;MACXnC,KAAK6C,UAAUV;MACfnC,KAAK8C,SAASX;AAAM;IAGxBnC,KAAS4C,YAAG;MACRH,SAASM,oBAAoB,aAAa/C,KAAK2C;MAC/CF,SAASM,oBAAoB,WAAW/C,KAAK4C;MAC7C5C,KAAKoC,aAAa;AAAI;IAG1BpC,KAAcgD,iBAAG;MACb,OAAMC,cACFA,GACArC,gBAAesC,OAAEA,MACjBlD;MACJA,KAAKI,uCAAuC;MAC5CJ,KAAKmD,WAAW;MAChBC,EAAiBpD;MACjB,IAAIiD,MAAiBC,GAAOlD,KAAKqD,OAAOC,KAAK;QAAEJ;;AAAQ;IAG3DlD,KAAAuD,mBAAoBpB;MAChBA,EAAMqB;MACN,MAAMN,IAASf,EAAMsB,OAA+BP;MAEpDlD,KAAKqD,OAAOC,KAAK;QAAEJ;;AAAQ;IAG/BlD,KAAe0D,kBAAG;MACd1D,KAAKmD,WAAW;MAChBnD,KAAKiD,eAAejD,KAAKkD;MACzBE,EAAiBpD;AAAK;IAG1BA,KAAA2D,kBAAmBxB;MACfA,EAAMqB;MACN,MAAMN,IAASf,EAAMsB,OAA+BP;MACpDlD,KAAKI,uCAAuC;MAC5CJ,KAAK6B;MACL,IAAI7B,KAAK4D,WAAW5D,KAAKC;MACzBD,KAAK6D,MAAMP,KAAK;QAAEJ;;AAAQ;IAG9BlD,KAAA8D,cAAe3B;MACXnC,KAAK6C,UAAUV;MACfnC,KAAK8C,SAASX;AAAM;IAGxBnC,KAAA+D,eAAgB5B;MACZ,IAAIA,EAAM6B,QAAQC,WAAW,GAAG;MAEhC9B,EAAM+B;MAEN,OAAMxD,kBAAEA,KAAqBV;MAC7B,MAAMmE,IAAahC,EAAM6B,QAAQ;MAEjChE,KAAKoC,aAAa;QACdrB,OAAOL,EAAiBM;QACxBI,QAAQV,EAAiBW;QACzBgB,GAAG8B,EAAWC;QACd7B,GAAG4B,EAAWE;;MAGlB5B,SAASC,iBAAiB,aAAa1C,KAAK8D;MAC5CrB,SAASC,iBAAiB,YAAY1C,KAAK8D;AAAY;IA0C3D9D,KAAgCG,mCAAG;;MAC/BH,KAAKsE,+BAA6BC,IAAAvE,KAAKkD,WAAO,QAAAqB,WAAA,aAAAA,EAAAN,WAAU;AAAC;AA4GhE;;;EAraG,iBAAAO;IACI,IAAIC,MAAMzE,KAAK4D,YAAY;MACvB5D,KAAK4D,YAAYc;;IAGrB,IAAI1E,KAAK4D,WAAW;MAChB5D,KAAKG;;;EAIb,gBAAAwE;IACIC,EAAc5E,KAAK6E;;EAGvB,kBAAAC;IACI9E,KAAKO,qBAAqBwE,KAAK/E,KAAKkB,WAAWlB,KAAKS,WAAWT,KAAK6B;IACpE7B,KAAKO,qBAAqByE,SAAQC,KAAMA;IACxCjF,KAAKO,uBAAuB;;;;EAOhC,mBAAA2E,CAAoB/C;IAChB,IAAIA,EAAMsB,WAAWzD,KAAK6E,gBAAgB7E,KAAK6E,YAAYM,UAAU;MACjEnF,KAAKkD,QAAQf,EAAMiD,OAAOlC;;;EAKlC,kBAAAmC,CAAmBlD;IACf,KAAKmD,EAAmBnD,GAAOnC,KAAK6E,cAAc;IAClD7E,KAAKY,cAAc2E;;EAIvB,kBAAAC,CAAmBrD;IACf,IAAIA,EAAMsB,WAAWzD,KAAK6E,gBAAgB7E,KAAK6E,YAAYY,SAAS;MAChEzF,KAAKkD,QAAQf,EAAMiD,OAAOlC;;;;;;;;;;;;;EAgBlC,QAAAwC,CAASxC;IACL,OAAMtC,eAAEA,KAAkBZ;IAC1BY,EAAc2E;IACd3E,EAAcsC,QAAQA;IACtBtC,EAAc+E,cAAc,IAAIC,WAAW;;;;EAO/C,YAAAC;IACI7F,KAAKU,iBAAiBI,MAAMC,QAAQ;;EAIxC,cAAA+E;IACI9F,KAAKmD,YAAYnD,KAAKO,qBAAqBwE,MAAK,MAAM3B,EAAiBpD;;EAI3E,aAAA+F;IACI/F,KAAKmD,YAAYnD,KAAKO,qBAAqBwE,MAAK,MAAM3B,EAAiBpD;;EAI3E,iBAAAgG;IACI,IAAIhG,KAAK4D,WAAW;MAChB5D,KAAKG;;;EAKb,YAAA8F;IACIjG,KAAKU,iBAAiBI,MAAMM,SAAS;;EAIzC,aAAA8E;IACI,OAAMtC,WAAEA,GAASV,OAAEA,IAAQ,MAAOlD;IAClC,KAAK4D,GAAW;IAEhB,MAAMuC,IAAiBjD,EAAMkD,OAAO,GAAGxC;IACvC,IAAIuC,MAAmBjD,GAAO;IAE9BlD,KAAKqD,OAAOC,KAAK;MAAEJ,OAAOiD;;;;;EAM9B,YAAIE;IACA,OAAOC,MAAMC,QAAQvG,KAAKwG,WAAWxG,KAAKwG,OAAOvC,SAAS;;EAG9D,oBAAIwC;IACA,IAAIC,IAAchC;IAElB,IAAI1E,KAAK2G,cAAc;MACnBD,IAAc,GAAG1G,KAAK4G;;;;;QAM1B,IAAI5G,KAAK4D,aAAa5D,KAAKI,sCAAsC;MAC7DsG,IAAcA,IAAc,GAAGA,KAAe1G,KAAK4G,uBAAuB,GAAG5G,KAAK4G;;IAGtF,OAAOF;;EAGX,WAAIE;IACA,OAAO,cAAc5G,KAAKK;;EAG9B,YAAIwG;IACA,OACK7G,KAAKwG,UAAUxG,KAAKwG,OAAOvC,SAAS,KAAKjE,KAAKwG,UAC9CxG,KAAK8G,SAAS9G,KAAK8G,MAAM7C,SAAS,KAAKjE,KAAK8G,SAC7C;;EAIR,gBAAIH;IACA,OAAO3G,KAAK6G,SAAS5C,SAAS,MAAMjE,KAAK+G;;EAG7C,cAAIC;IACA,OAAMxG,QAAEA,KAAWR;IACnB,OAAOQ,KAAUA,MAAW;;EAGhC,kBAAIyG;IACA,MAAMC,IAAalH,KAAKqG,WAAW,eAAe;IAClD,MAAMc,MAAenH,KAAKkD,QAAQ,eAAe;IACjD,MAAMkE,IAAapH,KAAKmD,WAAW,eAAe;IAElD,OAAO,kBAAkB+D,IAAaC,IAAaC;;EAwHvD,SAAAvE,CAAUV;;IACN,OAAMzB,kBACFA,GAAgBF,QAChBA,GACA4B,aAAYhB,QAAEA,GAAMmB,GAAEA,MACtBvC;IACJ,MAAMqH,IAAU,EAAC,QAAQ,YAAY,kBAAiBxG,SAASL;IAE/D,KAAK6G,GAAS;IAEd,MAAMC,IAASnF,aAAiBoF,aAAapF,EAAMK,WAAUgF,KAAAjD,IAAApC,EAAM6B,QAAQ,QAAI,QAAAO,WAAA,aAAAA,EAAAF,WAAS,QAAAmD,WAAA,IAAAA,IAAA;IACxF,MAAMxF,IAAYZ,KAAUmB,IAAI+E;;;;QAIhC,IACI9G,MAAW,mBACXwB,IAAYZ,KACXZ,MAAW,oBAAoBR,KAAK+B,2BACvC;MACErB,EAAiBI,MAAMM,SAAS,GAAGY;;;EAI3C,QAAAc,CAASX;;IACL,OAAMzB,kBACFA,GAAgBF,QAChBA,GACA4B,aAAYrB,OAAEA,GAAKsB,GAAEA,MACrBrC;IAEJ,MAAMyH,IAAU,EAAC,QAAQ,eAAc5G,SAASL;IAEhD,KAAKiH,GAAS;IACd,MAAMC,IAASvF,aAAiBoF,aAAapF,EAAMG,WAAUkF,KAAAjD,IAAApC,EAAM6B,QAAQ,QAAI,QAAAO,WAAA,aAAAA,EAAAH,WAAS,QAAAoD,WAAA,IAAAA,IAAA;IACxF,MAAMG,IAAW5G,KAASsB,IAAIqF;IAC9BhH,EAAiBI,MAAMC,QAAQ,GAAG4G;;;;EAUtC,WAAAC;IACI,MAAMC,IAAkB7H,KAAKQ,WAAW,kBAAkB,yBAAyB;IAEnF,OACIsH,EAAA;MAAKC,OAAM;OACPD,EAAA;MACIE,IAAIhI,KAAK4G;MACTmB,OAAOF;MACPI,aAAcjI,KAAKiI,eAAeC,EAAIlI,KAAKiI,gBAAiBvD;MAAS,WAC7D;MACRyD,WAAWnI,KAAK4D;MAAS,oBACP5D,KAAKyG;MAAgB,gBACzB,GAAGzG,KAAKqG;MACP,qBAAIrG,KAAKoI;MACZ,cAAApI,KAAKqI,aAAarI,KAAKsI;MACnCC,YAAYvI,KAAKuI;MACjBpH,MAAMnB,KAAKmB,QAAQ;MACnBR,MAAMX,KAAKW;MACXuC,OAAOlD,KAAKkD;MACZsF,KAAKC,KAAOzI,KAAKY,gBAAgB6H;MACjCC,YAAY1I,KAAK0I;MACjBC,YAAY3I,KAAK2I;MACjB/E,WAAW5D,KAAK4D;MAChBgF,SAAS5I,KAAK2D;MACdkF,UAAU7I,KAAKuD;MACfuF,SAAS9I,KAAK0D;MACdqF,QAAQ/I,KAAKgD;QAEhBhD,KAAKqG,WACFyB,EAAA;MACIkB,MAAK;MACLjB,OAAM;SACR,IAIL/H,KAAKgH,cACFc,EACI;MAAA5F,aAAalC,KAAKkC;MAClB6B,cAAc/D,KAAK+D;MACnBgE,OAAM;MACM,cAAAG,EAAI;MAChBe,WAAU;OAEVnB,EACgB;MAAA;MACZoB,SAAQ;MACRC,OAAM;OAENrB,EAAA;MACIsB,GAAE;MACFC,MAAK;MACiB;;;EASlD,eAAAC;;IACI,OACIxB,EAACyB,GAAQ,MACLzB,EAAA;MACIC,OAAM;MAAY,eACN;SAEXxD,IAAAvE,KAAKkD,WAAO,QAAAqB,WAAA,aAAAA,EAAAN,WAAU,GAAC,KAAGjE,KAAK4D,YAEpCkE,EAAA;MAAA,aACc;MACVC,OAAM;MACNC,IAAI,GAAGhI,KAAK4G;MACJ;OAEPsB,EAAI,uDAAuD,EACxDlI,KAAKsE,4BACLtE,KAAK4D;;EAOzB,MAAA4F;IACI,OACI1B,EAAK;MAAA2B,KAAA;MAAA1B,OAAO/H,KAAKiH;OACZyC,EAAY1J,OACb8H,EAAA;MAAA2B,KAAA;MACI1B,OAAM;MACNS,KAAKC,KAAOzI,KAAKU,mBAAmB+H;OAEnCzI,KAAK4H,eACL5H,KAAK4D,YAAY5D,KAAKsJ,oBAAoB,IAC1CK,EAAe3J","ignoreList":[]}
1	+ {"version":3,"names":["q2TextareaCss","Q2Textarea","constructor","hostRef","this","debouncedScreenReaderCharacterCount","debounce","updateScreenReaderCharacterCount","describeByScreenReaderCharacterCount","guid","createGuid","scheduledAfterRender","resize","checkCols","contentContainer","cols","textareaField","includes","style","width","offsetWidth","removeAttribute","checkRows","rows","height","offsetHeight","getBorderOffset","computedStyle","window","getComputedStyle","parseInt","borderTopWidth","borderBottomWidth","increaseHeightIfOverflowing","scrollHeight","isOverflowingVertically","newHeight","clientHeight","onMouseDown","event","downParams","x","clientX","y","clientY","document","addEventListener","onMouseMove","onMouseUp","setHeight","setWidth","removeEventListener","onTextareaBlur","valueOnFocus","value","hasFocus","setMessageHeight","change","emit","onTextareaChange","stopPropagation","target","onTextareaFocus","onTextareaInput","maxlength","input","onTouchMove","onTouchStart","touches","length","preventDefault","firstTouch","pageX","pageY","screenReaderCharacterCount","_a","componentWillLoad","isNaN","undefined","componentDidLoad","overrideFocus","hostElement","componentDidRender","push","forEach","fn","onHostElementChange","onchange","detail","onHostElementFocus","isEventFromElement","focus","onHostElementInput","oninput","setValue","dispatchEvent","InputEvent","colsObserver","errorsObserver","hintsObserver","maxlengthObserver","rowsObserver","valueObserver","truncatedValue","substr","hasError","Array","isArray","errors","inputDescribedBy","describedBy","showMessages","inputId","messages","hints","hideMessages","showResize","wrapperClasses","errorClass","valueClass","focusClass","resizeY","eventY","MouseEvent","_b","resizeX","eventX","newWidth","renderInput","textareaClasses","h","class","id","placeholder","loc","maxLength","optional","hideLabel","label","spellcheck","ref","el","readonly","disabled","onInput","onChange","onFocus","onBlur","type","tabIndex","viewBox","xmlns","d","fill","renderMaxLength","Fragment","render","key","renderLabel","renderMessages"],"sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n --comp-label-padding: #{var-list(\n --tct-textarea-label-padding,\n unquote(\n '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n )\n )};\n --comp-label-margin: #{var-list(\n --tct-textarea-label-margin,\n unquote(\n '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n display: block;\n padding: var(--comp-label-padding);\n margin: var(--comp-label-margin);\n color: var-list(var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n .has-error & {\n color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n }\n\n :hover & {\n color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n .has-error & {\n color: var-list(\n --tct-textarea-error-hover-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-hover-label-font-color,\n --tct-textarea-label-font-color,\n inherit\n );\n }\n }\n\n :host(:focus-within) & {\n color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n }\n\n :host(:focus-within) .has-error & {\n color: var-list(\n --tct-textarea-error-focus-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-focus-label-font-color,\n var-prefixer(textarea-label-font-color),\n inherit\n );\n }\n}\n\n.optional-tag {\n --comp-label-optional-margin: #{var-list(\n --tct-textarea-label-optional-margin,\n unquote(\n '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n margin: var(--comp-label-optional-margin);\n color: var-list(\n var-prefixer(textarea-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n height: 100%;\n --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n --comp-textarea-border-top-left-radius: #{var-list(\n var-prefixer(textarea-border-top-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-top-right-radius: #{var-list(\n var-prefixer(textarea-border-top-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-right-radius: #{var-list(\n var-prefixer(textarea-border-bottom-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-left-radius: #{var-list(\n var-prefixer(textarea-border-bottom-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);\n --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n var-list(var-prefixer(textarea-border-right-width), 1px)\n var-list(var-prefixer(textarea-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-border-left-width), 1px)};\n --comp-textarea-icon-clearance: 34px;\n\n :host([disabled]) & {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n }\n}\n\n.content-container {\n --comp-textarea-min-height: 46px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n backdrop-filter: var(--comp-textarea-backdrop-filter);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition:\n background var(--comp-textarea-tween),\n backdrop-filter var(--comp-textarea-tween),\n border-width var(--comp-textarea-tween),\n border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-hover-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-hover-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #d20a0a\n );\n backdrop-filter: var-list(\n --tct-textarea-error-focus-backdrop-filter,\n --tct-textarea-error-backdrop-filter,\n --tct-textarea-focus-backdrop-filter,\n --comp-textarea-backdrop-filter\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n &:focus-visible {\n box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n }\n\n &::placeholder {\n color: var-list(\n var-prefixer(textarea-placeholder-font-color),\n --t-input-placeholder-font-color,\n --tct-gray-7,\n --app-gray-7,\n --tct-gray-d1,\n --app-gray-d1,\n #666666\n );\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n &.resize-vertical-auto {\n overflow: hidden;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n\n &:not(:focus) {\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n }\n }\n}\n\nq2-icon {\n margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n pointer-events: none;\n position: absolute;\n top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n right: 0;\n margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n --tct-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n --t-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n}\n\n.icon-error {\n color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n height: 0px;\n overflow: hidden;\n background: var-list(\n --tct-message-background,\n --tct-message-bg,\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n box-shadow: var-list(\n var-prefixer(textarea-message-box-shadow),\n --tct-box-shadow-1,\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n transition: height\n var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n margin-top: 2px;\n z-index: 1;\n position: absolute;\n width: 100%;\n color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(\n var-prefixer(textarea-max-length-font-size),\n --tct-font-size-small,\n --app-font-size-small,\n 12px\n );\n position: absolute;\n right: 0;\n}\n\n.btn-resize {\n --tct-textarea-resize-icon-padding: calc(\n calc(\n #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n var-prefixer(textarea-resize-icon-size),\n 12px\n )}\n ) / 2\n );\n width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n border: 0;\n position: absolute;\n right: var-list(\n --tct-textarea-resize-right,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n bottom: var-list(\n --tct-textarea-resize-bottom,\n calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n );\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import {\n Component,\n EventEmitter,\n Prop,\n Event,\n Element,\n Fragment,\n State,\n h,\n Watch,\n Listen,\n Method,\n} from '@stencil/core';\nimport {\n createGuid,\n debounce,\n isEventFromElement,\n renderLabel,\n loc,\n renderMessages,\n overrideFocus,\n setMessageHeight,\n} from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. /\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n // #region Own Properties\n\n contentContainer?: HTMLDivElement;\n debouncedScreenReaderCharacterCount = debounce(() => {\n this.updateScreenReaderCharacterCount();\n }, 2000);\n describeByScreenReaderCharacterCount = true;\n guid = createGuid();\n scheduledAfterRender: (() => void)[] = [];\n textareaField?: HTMLTextAreaElement;\n valueOnFocus: string;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n downParams: Record<string, number>;\n\n @State()\n hasFocus: boolean;\n\n @State()\n screenReaderCharacterCount: number;\n\n // #endregion\n // #region Public Property API\n\n /\n Defines the number of columns displayed in the field.\n * If not set, the field will be full-width and respond to the window size.\n /\n @Prop({ reflect: true })\n cols: number;\n\n /* Indicates the field cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Each item in the `errors` array will appear below the input field when the field is focused.\n * @localizable\n /\n @Prop()\n errors: string[];\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true })\n hideLabel: boolean;\n\n /\n When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n /\n @Prop({ reflect: true })\n hideMessages: boolean;\n\n /\n Each item in the `hints` array will appear below the input field when the field is focused.\n * @info\n * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n * Once all errors are resolved, the hints display the next time the field is focused.\n * @localizable\n /\n @Prop()\n hints: string[];\n\n /\n The label that appears above the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n * Make sure you account for them when setting the `maxlength` value.\n * @info\n * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n /\n @Prop({ reflect: true, mutable: true })\n maxlength: number;\n\n /* Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /\n Text that appears within the field when it is blurred and empty.\n * Placeholder text disappears when the user focuses on the field and provides input.\n * @info\n * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n * @localizable\n /\n @Prop({ reflect: true })\n placeholder: string;\n\n /\n Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n * Takes priority over `optional` if both are `true`.\n /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Indicates how the field is resizable. /\n @Prop({ reflect: true })\n resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'vertical-auto' = 'vertical';\n\n /* Defines the number of rows displayed in the field. /\n @Prop({ reflect: true })\n rows: number;\n\n /* Determines whether the field is subject to spell-checking by the underlying browser or OS. /\n @Prop({ reflect: true })\n spellcheck: boolean;\n\n /* The value of the field. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the field loses focus after the value has been changed.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field value is updated.\n * @legacyEvent\n /\n @Event()\n input: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n if (isNaN(this.maxlength)) {\n this.maxlength = undefined;\n }\n\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n\n @Listen('focus')\n onHostElementFocus(event: Event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.textareaField.focus();\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.oninput) {\n this.value = event.detail.value;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n \n This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n * to trigger the `change` event, move the focus to another element after calling this method.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n const { textareaField } = this;\n textareaField.focus();\n textareaField.value = value;\n textareaField.dispatchEvent(new InputEvent('input'));\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('cols')\n colsObserver() {\n this.contentContainer.style.width = null;\n }\n\n @Watch('errors')\n errorsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('hints')\n hintsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('maxlength')\n maxlengthObserver() {\n if (this.maxlength) {\n this.updateScreenReaderCharacterCount();\n }\n }\n\n @Watch('rows')\n rowsObserver() {\n this.contentContainer.style.height = null;\n }\n\n @Watch('value')\n valueObserver() {\n const { maxlength, value = '' } = this;\n if (!maxlength) return;\n\n const truncatedValue = value.substr(0, maxlength);\n if (truncatedValue === value) return;\n\n this.change.emit({ value: truncatedValue });\n }\n\n // #endregion\n // #region Local Methods\n\n get hasError() {\n return Array.isArray(this.errors) && this.errors.length > 0;\n }\n\n get inputDescribedBy() {\n let describedBy = undefined;\n\n if (this.showMessages) {\n describedBy = `${this.inputId}-description`;\n }\n\n // Remove screen reader character count from described by after typing\n // starts to avoid double announcement. It's needed on focus to announce\n // the character count when field gains focus.\n if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n }\n\n return describedBy;\n }\n\n get inputId() {\n return `input-guid-${this.guid}`;\n }\n\n get messages(): string[] {\n return (\n (this.errors && this.errors.length > 0 && this.errors) \|\|\n (this.hints && this.hints.length > 0 && this.hints) \|\|\n []\n );\n }\n\n get showMessages() {\n return this.messages.length > 0 && !this.hideMessages;\n }\n\n get showResize() {\n const { resize } = this;\n return resize && resize !== 'none';\n }\n\n get wrapperClasses() {\n const errorClass = this.hasError ? ' has-error' : '';\n const valueClass = !!this.value ? ' has-value' : '';\n const focusClass = this.hasFocus ? ' has-focus' : '';\n\n return `field-container${errorClass}${valueClass}${focusClass}`;\n }\n\n checkCols = () => {\n const { contentContainer, cols, textareaField, resize } = this;\n\n if (!cols \|\| ['none', 'vertical'].includes(resize)) return;\n contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n textareaField.removeAttribute('cols');\n };\n\n checkRows = () => {\n const { contentContainer, rows, textareaField, resize } = this;\n\n if (!rows \|\| ['none', 'horizontal'].includes(resize)) return;\n contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n textareaField.removeAttribute('rows');\n };\n\n getBorderOffset = () => {\n const computedStyle = window.getComputedStyle(this.textareaField);\n\n return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n };\n\n increaseHeightIfOverflowing = () => {\n const { scrollHeight } = this.textareaField;\n if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n // need to account for border width because scrollHeight does not include it\n const newHeight = scrollHeight + this.getBorderOffset();\n this.contentContainer.style.height = `${newHeight}px`;\n }\n };\n\n isOverflowingVertically = () => {\n const { clientHeight, scrollHeight } = this.textareaField;\n\n return scrollHeight > clientHeight;\n };\n\n onMouseDown = (event: MouseEvent) => {\n const { contentContainer } = this;\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: event.clientX,\n y: event.clientY,\n };\n document.addEventListener('mousemove', this.onMouseMove);\n document.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseMove = (event: MouseEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onMouseUp = () => {\n document.removeEventListener('mousemove', this.onMouseMove);\n document.removeEventListener('mouseup', this.onMouseUp);\n this.downParams = null;\n };\n\n onTextareaBlur = () => {\n const {\n valueOnFocus,\n textareaField: { value },\n } = this;\n this.describeByScreenReaderCharacterCount = true;\n this.hasFocus = false;\n setMessageHeight(this);\n if (valueOnFocus !== value) this.change.emit({ value });\n };\n\n onTextareaChange = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n\n this.change.emit({ value });\n };\n\n onTextareaFocus = () => {\n this.hasFocus = true;\n this.valueOnFocus = this.value;\n setMessageHeight(this);\n };\n\n onTextareaInput = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n this.describeByScreenReaderCharacterCount = false;\n this.increaseHeightIfOverflowing();\n if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n this.input.emit({ value });\n };\n\n onTouchMove = (event: TouchEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onTouchStart = (event: TouchEvent) => {\n if (event.touches.length !== 1) return;\n\n event.preventDefault();\n\n const { contentContainer } = this;\n const firstTouch = event.touches[0];\n\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: firstTouch.pageX,\n y: firstTouch.pageY,\n };\n\n document.addEventListener('touchmove', this.onTouchMove);\n document.addEventListener('touchend', this.onTouchMove);\n };\n\n setHeight(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { height, y },\n } = this;\n const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n if (!resizeY) return;\n\n const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n const newHeight = height - (y - eventY);\n // If 'vertical-auto', change height if the new height is greater\n // than the current height or the textarea is not overflowing.\n // Otherwise, change height regardless of the new height.\n if (\n resize !== 'vertical-auto' \|\|\n newHeight > height \|\|\n (resize === 'vertical-auto' && !this.isOverflowingVertically())\n ) {\n contentContainer.style.height = `${newHeight}px`;\n }\n }\n\n setWidth(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { width, x },\n } = this;\n\n const resizeX = ['both', 'horizontal'].includes(resize);\n\n if (!resizeX) return;\n const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n const newWidth = width - (x - eventX);\n contentContainer.style.width = `${newWidth}px`;\n }\n\n updateScreenReaderCharacterCount = () => {\n this.screenReaderCharacterCount = this.value?.length \|\| 0;\n };\n\n // #endregion\n // #region Render Methods\n\n renderInput() {\n const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n return (\n <div class=\"input-container\">\n <textarea\n id={this.inputId}\n class={textareaClasses}\n placeholder={(this.placeholder && loc(this.placeholder)) \|\| undefined}\n test-id=\"inputField\"\n maxLength={this.maxlength}\n aria-describedby={this.inputDescribedBy}\n aria-invalid={`${this.hasError}`}\n aria-required={`${!this.optional}`}\n aria-label={this.hideLabel && this.label}\n spellcheck={this.spellcheck}\n rows={this.rows \|\| 3}\n cols={this.cols}\n value={this.value}\n ref={el => (this.textareaField = el)}\n readonly={!!this.readonly}\n disabled={!!this.disabled}\n maxlength={this.maxlength}\n onInput={this.onTextareaInput}\n onChange={this.onTextareaChange}\n onFocus={this.onTextareaFocus}\n onBlur={this.onTextareaBlur}\n ></textarea>\n {this.hasError ? (\n <q2-icon\n type=\"error\"\n class=\"icon-error\"\n />\n ) : (\n ''\n )}\n {this.showResize && (\n <button\n onMouseDown={this.onMouseDown}\n onTouchStart={this.onTouchStart}\n class=\"btn-resize\"\n aria-label={loc('tecton.element.input.resize')}\n tabIndex={-1}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n fill=\"none\"\n stroke-stroke-linecap=\"square\"\n />\n </svg>\n </button>\n )}\n </div>\n );\n }\n\n renderMaxLength() {\n return (\n <Fragment>\n <div\n class=\"max-length\"\n aria-hidden=\"true\"\n >\n {this.value?.length \|\| 0}/{this.maxlength}\n </div>\n <div\n aria-live=\"polite\"\n class=\"sr\"\n id={`${this.inputId}-max-length`}\n test-id=\"max-length-sr\"\n >\n {loc('tecton.element.textarea.characterCount.screenReader', [\n this.screenReaderCharacterCount,\n this.maxlength,\n ])}\n </div>\n </Fragment>\n );\n }\n\n render() {\n return (\n <div class={this.wrapperClasses}>\n {renderLabel(this)}\n <div\n class=\"content-container\"\n ref={el => (this.contentContainer = el)}\n >\n {this.renderInput()}\n {this.maxlength ? this.renderMaxLength() : ''}\n {renderMessages(this)}\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAgB;;MC0BTC,IAAU;EADvB,WAAAC,CAAAC;;;;IAKIC,KAAAC,sCAAsCC,GAAS;MAC3CF,KAAKG;AAAkC,QACxC;IACHH,KAAoCI,uCAAG;IACvCJ,KAAIK,OAAGC;IACPN,KAAoBO,uBAAmB;oDA2GvCP,KAAMQ,SAAkE;IA8LxER,KAASS,YAAG;MACR,OAAMC,kBAAEA,GAAgBC,MAAEA,GAAIC,eAAEA,GAAaJ,QAAEA,KAAWR;MAE1D,KAAKW,KAAQ,EAAC,QAAQ,aAAYE,SAASL,IAAS;MACpDE,EAAiBI,MAAMC,QAAQ,GAAGL,EAAiBM;MACnDJ,EAAcK,gBAAgB;AAAO;IAGzCjB,KAASkB,YAAG;MACR,OAAMR,kBAAEA,GAAgBS,MAAEA,GAAIP,eAAEA,GAAaJ,QAAEA,KAAWR;MAE1D,KAAKmB,KAAQ,EAAC,QAAQ,eAAcN,SAASL,IAAS;MACtDE,EAAiBI,MAAMM,SAAS,GAAGV,EAAiBW;MACpDT,EAAcK,gBAAgB;AAAO;IAGzCjB,KAAesB,kBAAG;MACd,MAAMC,IAAgBC,OAAOC,iBAAiBzB,KAAKY;MAEnD,OAAOc,SAASH,EAAcI,gBAAgB,MAAMD,SAASH,EAAcK,mBAAmB;AAAG;IAGrG5B,KAA2B6B,8BAAG;MAC1B,OAAMC,cAAEA,KAAiB9B,KAAKY;MAC9B,IAAIZ,KAAKQ,WAAW,mBAAmBR,KAAK+B,2BAA2B;;QAEnE,MAAMC,IAAYF,IAAe9B,KAAKsB;QACtCtB,KAAKU,iBAAiBI,MAAMM,SAAS,GAAGY;;;IAIhDhC,KAAuB+B,0BAAG;MACtB,OAAME,cAAEA,GAAYH,cAAEA,KAAiB9B,KAAKY;MAE5C,OAAOkB,IAAeG;AAAY;IAGtCjC,KAAAkC,cAAeC;MACX,OAAMzB,kBAAEA,KAAqBV;MAC7BA,KAAKoC,aAAa;QACdrB,OAAOL,EAAiBM;QACxBI,QAAQV,EAAiBW;QACzBgB,GAAGF,EAAMG;QACTC,GAAGJ,EAAMK;;MAEbC,SAASC,iBAAiB,aAAa1C,KAAK2C;MAC5CF,SAASC,iBAAiB,WAAW1C,KAAK4C;AAAU;IAGxD5C,KAAA2C,cAAeR;MACXnC,KAAK6C,UAAUV;MACfnC,KAAK8C,SAASX;AAAM;IAGxBnC,KAAS4C,YAAG;MACRH,SAASM,oBAAoB,aAAa/C,KAAK2C;MAC/CF,SAASM,oBAAoB,WAAW/C,KAAK4C;MAC7C5C,KAAKoC,aAAa;AAAI;IAG1BpC,KAAcgD,iBAAG;MACb,OAAMC,cACFA,GACArC,gBAAesC,OAAEA,MACjBlD;MACJA,KAAKI,uCAAuC;MAC5CJ,KAAKmD,WAAW;MAChBC,EAAiBpD;MACjB,IAAIiD,MAAiBC,GAAOlD,KAAKqD,OAAOC,KAAK;QAAEJ;;AAAQ;IAG3DlD,KAAAuD,mBAAoBpB;MAChBA,EAAMqB;MACN,MAAMN,IAASf,EAAMsB,OAA+BP;MAEpDlD,KAAKqD,OAAOC,KAAK;QAAEJ;;AAAQ;IAG/BlD,KAAe0D,kBAAG;MACd1D,KAAKmD,WAAW;MAChBnD,KAAKiD,eAAejD,KAAKkD;MACzBE,EAAiBpD;AAAK;IAG1BA,KAAA2D,kBAAmBxB;MACfA,EAAMqB;MACN,MAAMN,IAASf,EAAMsB,OAA+BP;MACpDlD,KAAKI,uCAAuC;MAC5CJ,KAAK6B;MACL,IAAI7B,KAAK4D,WAAW5D,KAAKC;MACzBD,KAAK6D,MAAMP,KAAK;QAAEJ;;AAAQ;IAG9BlD,KAAA8D,cAAe3B;MACXnC,KAAK6C,UAAUV;MACfnC,KAAK8C,SAASX;AAAM;IAGxBnC,KAAA+D,eAAgB5B;MACZ,IAAIA,EAAM6B,QAAQC,WAAW,GAAG;MAEhC9B,EAAM+B;MAEN,OAAMxD,kBAAEA,KAAqBV;MAC7B,MAAMmE,IAAahC,EAAM6B,QAAQ;MAEjChE,KAAKoC,aAAa;QACdrB,OAAOL,EAAiBM;QACxBI,QAAQV,EAAiBW;QACzBgB,GAAG8B,EAAWC;QACd7B,GAAG4B,EAAWE;;MAGlB5B,SAASC,iBAAiB,aAAa1C,KAAK8D;MAC5CrB,SAASC,iBAAiB,YAAY1C,KAAK8D;AAAY;IA0C3D9D,KAAgCG,mCAAG;;MAC/BH,KAAKsE,+BAA6BC,IAAAvE,KAAKkD,WAAO,QAAAqB,WAAA,aAAAA,EAAAN,WAAU;AAAC;AA4GhE;;;EAraG,iBAAAO;IACI,IAAIC,MAAMzE,KAAK4D,YAAY;MACvB5D,KAAK4D,YAAYc;;IAGrB,IAAI1E,KAAK4D,WAAW;MAChB5D,KAAKG;;;EAIb,gBAAAwE;IACIC,EAAc5E,KAAK6E;;EAGvB,kBAAAC;IACI9E,KAAKO,qBAAqBwE,KAAK/E,KAAKkB,WAAWlB,KAAKS,WAAWT,KAAK6B;IACpE7B,KAAKO,qBAAqByE,SAAQC,KAAMA;IACxCjF,KAAKO,uBAAuB;;;;EAOhC,mBAAA2E,CAAoB/C;IAChB,IAAIA,EAAMsB,WAAWzD,KAAK6E,gBAAgB7E,KAAK6E,YAAYM,UAAU;MACjEnF,KAAKkD,QAAQf,EAAMiD,OAAOlC;;;EAKlC,kBAAAmC,CAAmBlD;IACf,KAAKmD,EAAmBnD,GAAOnC,KAAK6E,cAAc;IAClD7E,KAAKY,cAAc2E;;EAIvB,kBAAAC,CAAmBrD;IACf,IAAIA,EAAMsB,WAAWzD,KAAK6E,gBAAgB7E,KAAK6E,YAAYY,SAAS;MAChEzF,KAAKkD,QAAQf,EAAMiD,OAAOlC;;;;;;;;;;;;;EAgBlC,QAAAwC,CAASxC;IACL,OAAMtC,eAAEA,KAAkBZ;IAC1BY,EAAc2E;IACd3E,EAAcsC,QAAQA;IACtBtC,EAAc+E,cAAc,IAAIC,WAAW;;;;EAO/C,YAAAC;IACI7F,KAAKU,iBAAiBI,MAAMC,QAAQ;;EAIxC,cAAA+E;IACI9F,KAAKmD,YAAYnD,KAAKO,qBAAqBwE,MAAK,MAAM3B,EAAiBpD;;EAI3E,aAAA+F;IACI/F,KAAKmD,YAAYnD,KAAKO,qBAAqBwE,MAAK,MAAM3B,EAAiBpD;;EAI3E,iBAAAgG;IACI,IAAIhG,KAAK4D,WAAW;MAChB5D,KAAKG;;;EAKb,YAAA8F;IACIjG,KAAKU,iBAAiBI,MAAMM,SAAS;;EAIzC,aAAA8E;IACI,OAAMtC,WAAEA,GAASV,OAAEA,IAAQ,MAAOlD;IAClC,KAAK4D,GAAW;IAEhB,MAAMuC,IAAiBjD,EAAMkD,OAAO,GAAGxC;IACvC,IAAIuC,MAAmBjD,GAAO;IAE9BlD,KAAKqD,OAAOC,KAAK;MAAEJ,OAAOiD;;;;;EAM9B,YAAIE;IACA,OAAOC,MAAMC,QAAQvG,KAAKwG,WAAWxG,KAAKwG,OAAOvC,SAAS;;EAG9D,oBAAIwC;IACA,IAAIC,IAAchC;IAElB,IAAI1E,KAAK2G,cAAc;MACnBD,IAAc,GAAG1G,KAAK4G;;;;;QAM1B,IAAI5G,KAAK4D,aAAa5D,KAAKI,sCAAsC;MAC7DsG,IAAcA,IAAc,GAAGA,KAAe1G,KAAK4G,uBAAuB,GAAG5G,KAAK4G;;IAGtF,OAAOF;;EAGX,WAAIE;IACA,OAAO,cAAc5G,KAAKK;;EAG9B,YAAIwG;IACA,OACK7G,KAAKwG,UAAUxG,KAAKwG,OAAOvC,SAAS,KAAKjE,KAAKwG,UAC9CxG,KAAK8G,SAAS9G,KAAK8G,MAAM7C,SAAS,KAAKjE,KAAK8G,SAC7C;;EAIR,gBAAIH;IACA,OAAO3G,KAAK6G,SAAS5C,SAAS,MAAMjE,KAAK+G;;EAG7C,cAAIC;IACA,OAAMxG,QAAEA,KAAWR;IACnB,OAAOQ,KAAUA,MAAW;;EAGhC,kBAAIyG;IACA,MAAMC,IAAalH,KAAKqG,WAAW,eAAe;IAClD,MAAMc,MAAenH,KAAKkD,QAAQ,eAAe;IACjD,MAAMkE,IAAapH,KAAKmD,WAAW,eAAe;IAElD,OAAO,kBAAkB+D,IAAaC,IAAaC;;EAwHvD,SAAAvE,CAAUV;;IACN,OAAMzB,kBACFA,GAAgBF,QAChBA,GACA4B,aAAYhB,QAAEA,GAAMmB,GAAEA,MACtBvC;IACJ,MAAMqH,IAAU,EAAC,QAAQ,YAAY,kBAAiBxG,SAASL;IAE/D,KAAK6G,GAAS;IAEd,MAAMC,IAASnF,aAAiBoF,aAAapF,EAAMK,WAAUgF,KAAAjD,IAAApC,EAAM6B,QAAQ,QAAI,QAAAO,WAAA,aAAAA,EAAAF,WAAS,QAAAmD,WAAA,IAAAA,IAAA;IACxF,MAAMxF,IAAYZ,KAAUmB,IAAI+E;;;;QAIhC,IACI9G,MAAW,mBACXwB,IAAYZ,KACXZ,MAAW,oBAAoBR,KAAK+B,2BACvC;MACErB,EAAiBI,MAAMM,SAAS,GAAGY;;;EAI3C,QAAAc,CAASX;;IACL,OAAMzB,kBACFA,GAAgBF,QAChBA,GACA4B,aAAYrB,OAAEA,GAAKsB,GAAEA,MACrBrC;IAEJ,MAAMyH,IAAU,EAAC,QAAQ,eAAc5G,SAASL;IAEhD,KAAKiH,GAAS;IACd,MAAMC,IAASvF,aAAiBoF,aAAapF,EAAMG,WAAUkF,KAAAjD,IAAApC,EAAM6B,QAAQ,QAAI,QAAAO,WAAA,aAAAA,EAAAH,WAAS,QAAAoD,WAAA,IAAAA,IAAA;IACxF,MAAMG,IAAW5G,KAASsB,IAAIqF;IAC9BhH,EAAiBI,MAAMC,QAAQ,GAAG4G;;;;EAUtC,WAAAC;IACI,MAAMC,IAAkB7H,KAAKQ,WAAW,kBAAkB,yBAAyB;IAEnF,OACIsH,EAAA;MAAKC,OAAM;OACPD,EAAA;MACIE,IAAIhI,KAAK4G;MACTmB,OAAOF;MACPI,aAAcjI,KAAKiI,eAAeC,EAAIlI,KAAKiI,gBAAiBvD;MAAS,WAC7D;MACRyD,WAAWnI,KAAK4D;MAAS,oBACP5D,KAAKyG;MAAgB,gBACzB,GAAGzG,KAAKqG;MACP,qBAAIrG,KAAKoI;MACZ,cAAApI,KAAKqI,aAAarI,KAAKsI;MACnCC,YAAYvI,KAAKuI;MACjBpH,MAAMnB,KAAKmB,QAAQ;MACnBR,MAAMX,KAAKW;MACXuC,OAAOlD,KAAKkD;MACZsF,KAAKC,KAAOzI,KAAKY,gBAAgB6H;MACjCC,YAAY1I,KAAK0I;MACjBC,YAAY3I,KAAK2I;MACjB/E,WAAW5D,KAAK4D;MAChBgF,SAAS5I,KAAK2D;MACdkF,UAAU7I,KAAKuD;MACfuF,SAAS9I,KAAK0D;MACdqF,QAAQ/I,KAAKgD;QAEhBhD,KAAKqG,WACFyB,EAAA;MACIkB,MAAK;MACLjB,OAAM;SACR,IAIL/H,KAAKgH,cACFc,EACI;MAAA5F,aAAalC,KAAKkC;MAClB6B,cAAc/D,KAAK+D;MACnBgE,OAAM;MACM,cAAAG,EAAI;MAChBe,WAAU;OAEVnB,EACgB;MAAA;MACZoB,SAAQ;MACRC,OAAM;OAENrB,EAAA;MACIsB,GAAE;MACFC,MAAK;MACiB;;;EASlD,eAAAC;;IACI,OACIxB,EAACyB,GAAQ,MACLzB,EAAA;MACIC,OAAM;MAAY,eACN;SAEXxD,IAAAvE,KAAKkD,WAAO,QAAAqB,WAAA,aAAAA,EAAAN,WAAU,GAAC,KAAGjE,KAAK4D,YAEpCkE,EAAA;MAAA,aACc;MACVC,OAAM;MACNC,IAAI,GAAGhI,KAAK4G;MACJ;OAEPsB,EAAI,uDAAuD,EACxDlI,KAAKsE,4BACLtE,KAAK4D;;EAOzB,MAAA4F;IACI,OACI1B,EAAK;MAAA2B,KAAA;MAAA1B,OAAO/H,KAAKiH;OACZyC,EAAY1J,OACb8H,EAAA;MAAA2B,KAAA;MACI1B,OAAM;MACNS,KAAKC,KAAOzI,KAAKU,mBAAmB+H;OAEnCzI,KAAK4H,eACL5H,KAAK4D,YAAY5D,KAAKsJ,oBAAoB,IAC1CK,EAAe3J","ignoreList":[]}

package/dist/q2-tecton-elements/tecton-tab-pane.entry.js CHANGED Viewed

@@ -52,7 +52,7 @@ const a = class {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "8f8c9357ad20e57132580f6df244300f95fbffae",
+      key: "2d9e4fab0cae1157805d7aae94cff3d7aa15f01b",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: `tab-pane${this.selected ? "" : " hidden"}`,
       role: "tabpanel",
@@ -60,12 +60,12 @@ const a = class {
       "aria-hidden": `${!this.selected}`,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && this.provided !== undefined && !this.provided && i("div", {
-      key: "827f4251729283b2651e7897b2a2ba50a99f0dd8"
+      key: "2fc1c3c3e210ad95ffbe3295bd8b9196e4fda769"
     }, i("slot", {
-      key: "a5c95ad4d031c2424059c44241ac92761e6380bd",
+      key: "403997c87dcfad98cfbdd64989e8c4c8c51676ec",
       name: "loading-wrapper"
     }), i("iframe", {
-      key: "e3f3274d9afe4b10d20205d13394332818054a44",
+      key: "8f0f609cc2302617876ac5be0adf1eda57ac7763",
       hidden: true,
       name: this.moduleId,
       scrolling: "no",
@@ -88,11 +88,11 @@ const a = class {
       value: e.value,
       name: e.key
     })))) : ""), i("div", {
-      key: "a04b28ea2db895e185aec4992209ee7284033109",
+      key: "eef49a2d9891ddd78781565d39b06d1ded0a59d9",
       class: "slot-wrapper",
       hidden: this.selected && this.provided !== undefined && !this.provided
     }, i("slot", {
-      key: "f274657a787e3fa3a0b2144cda381ccec50c30b5"
+      key: "0dd19051231d87920960cb2e2906de90f90740ec"
     })));
   }
   get hostElement() {

package/dist/types/components/q2-action-sheet/q2-action-sheet.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Q2OptionListCustomEvent } from "../../components";
-import { ActionSheetListCloseData, ActionSheetData, ActionSheetListData, ActionSheetMessageData, ActionSheetSelectedOption, ActionSheetListOption, ActionSheetListOptgroup } from 'q2-tecton-common/lib/utility/action-sheet';
+import type { ActionSheetListCloseData, ActionSheetData, ActionSheetListData, ActionSheetMessageData, ActionSheetSelectedOption, ActionSheetListOption, ActionSheetListOptgroup } from 'q2-tecton-common/lib/types/action-sheet';
 export declare class Q2ActionSheet implements ComponentInterface {
     contentElement: HTMLDivElement;
     dialogElement: HTMLDialogElement;

package/dist/types/components/q2-avatar/q2-avatar.d.ts CHANGED Viewed

@@ -15,6 +15,8 @@ export declare class Q2Avatar implements ComponentInterface {
      * We recommend always providing a name when you want the avatar to be presented to screen readers.
      */
     name: string;
+    /**  Determines how large to make the avatar */
+    size: 'small' | 'medium' | 'large';
     /**  Displays the image provided by the user. */
     src: string;
     srcDidUpdate(): void;

package/dist/types/components/q2-card/q2-card.d.ts CHANGED Viewed

@@ -119,8 +119,8 @@ export declare class Q2Card implements ComponentInterface {
     url: string;
     /** Emitted when the card is clicked and the `url` property is not provided. */
     click: EventEmitter<undefined>;
-    componentDidLoad(): void;
     disconnectedCallback(): void;
+    componentDidLoad(): void;
     onHostElementFocus(event: any): void;
     generateAvatar(): any;
     generateContainerClasses(): string;

package/dist/types/components/q2-chart-area/q2-chart-area.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import * as echarts from 'echarts/core';
-import { IChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2ChartArea implements ComponentInterface {
     chart: echarts.ECharts;
     chartContainer: HTMLDivElement;

package/dist/types/components/q2-chart-bar/q2-chart-bar.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 import * as echarts from 'echarts/core';
-import { IChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2ChartBar implements ComponentInterface {
     chart: echarts.ECharts;
     chartContainer: HTMLDivElement;

package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import * as echarts from 'echarts/core';
-import { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2ChartDonut implements ComponentInterface {
     btnElement: HTMLDivElement;
     centerButtonElement: HTMLButtonElement;

package/dist/types/components/q2-data-table/q2-data-table.d.ts CHANGED Viewed

@@ -135,6 +135,12 @@ export declare class Q2DataTable implements ComponentInterface {
     rows: Q2DataTableRow[];
     /** Adds a checkbox to each row of the table making it selectable. */
     selectable: boolean;
+    /**
+     * Returns selected rows.
+     * @readonly
+     */
+    get selectedRows(): Q2DataTableRow[];
+    set selectedRows(_: Q2DataTableRow[]);
     /**
      * Determines if the selectable checkboxes allow for multi-select or not. If set to "single", once a row is selected, all other rows will be disabled.
      * See the documentation on the `select` event for how to handle selections.
@@ -145,6 +151,8 @@ export declare class Q2DataTable implements ComponentInterface {
     selectMode: 'multiple' | 'single';
     /** Adds a shadow to the table */
     shadowed: boolean;
+    /** Makes table header sticky */
+    sticky: boolean;
     /** Enables alternating background colors for the table rows */
     striped: boolean;
     /**
@@ -248,10 +256,8 @@ export declare class Q2DataTable implements ComponentInterface {
     selectableHandler(): void;
     get mappedHeaders(): Record<string, Q2DataTableHeader>;
     get numberOfColumns(): number;
-    get selectedRow(): Q2DataTableSerializedRow;
-    get selectedRows(): Q2DataTableSerializedRow[];
-    getSelectRowLabel(row: Q2DataTableSerializedRow): string;
     checkSlots: () => void;
+    getSelectRowLabel(row: Q2DataTableSerializedRow): string;
     onClickRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
     onClickTableRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
     onControlContainerClick: (event: MouseEvent) => void;

package/dist/types/components/q2-file-picker/q2-file-picker.d.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export type FilesObject = {
  * @slot description - An optional slot to display a custom description.
  */
 export declare class Q2FilePicker implements ComponentInterface {
+    private _value;
     browseButtonInput: HTMLElement;
     dropZone: HTMLElement;
     fileItemsToBeDeleted: any;
@@ -94,7 +95,8 @@ export declare class Q2FilePicker implements ComponentInterface {
      *   `"over-max-files-limit"` (total exceeds the max files limit).
      * @readonly
      */
-    value: FilesObject;
+    get value(): FilesObject;
+    set value(_: FilesObject);
     /**
      * Determines if the file picker is a browse button or a drop zone with a
      * browse link.

package/dist/types/components/q2-formatted-text/q2-formatted-text.d.ts CHANGED Viewed

@@ -2,6 +2,12 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2FormattedText implements ComponentInterface {
     /** @private The formatted text to display */
     formattedValue: string;
+    /**
+     * The format style for the number.
+     * - `decimal`: Standard number formatting, locale-aware (default).
+     * - `percent`: Percentage formatting, locale-aware.
+     */
+    format: 'decimal' | 'percent';
     /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */
     locale: string | string[];
     /** The maximum number of fraction digits to use.  */
@@ -26,12 +32,6 @@ export declare class Q2FormattedText implements ComponentInterface {
     slotSize: string;
     /** The value you want formatted.  */
     value: number;
-    /**
-     * The format style for the number.
-     * - `decimal`: Standard number formatting, locale-aware (default).
-     * - `percent`: Percentage formatting, locale-aware.
-     */
-    format: 'decimal' | 'percent';
     componentWillLoad(): void | Promise<void>;
     propsUpdated(): void;
     get formattedTextClasses(): string;

package/dist/types/components/q2-icon/q2-icon-types.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import { IDict } from '../../util';
 import { JSX } from '../../components';
 export interface Q2Icon {
     markup: () => JSX.IntrinsicElements;
 }
-export type Q2Icons = IDict<Q2Icon>;
+export type Q2Icons = Record<string, Q2Icon>;

package/dist/types/components/q2-input/q2-input.d.ts CHANGED Viewed

@@ -287,8 +287,8 @@ export declare class Q2Input {
      * @testOnly
      */
     setValue(value: string): void;
-    ariaLabelObserver(): void;
     updateComboboxAriaLabel(): void;
+    ariaLabelObserver(): void;
     manageClearableResizeObserver(clearable?: boolean): void;
     errorsObserver(): void;
     formatModifierObserver(): void;

package/dist/types/components/q2-legend/q2-legend.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2Legend implements ComponentInterface {
     hoveredItemIndex: number;
     selectedItemIndex: number;

package/dist/types/components/q2-modal/q2-modal.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { ModalOption, ModalResponse } from 'q2-tecton-common/lib/utility/modal';
+import type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';
 /**
  * @slot content - A slot to display custom content in the modal body above the description.
  * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.

package/dist/types/components/q2-mutation-observer/q2-mutation-observer.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2MutationObserver implements ComponentInterface {
+    currentMutationObserverEntries: MutationRecord[];
+    mutationObserver?: MutationObserver;
+    observedElements: HTMLElement[];
+    hostElement: HTMLElement;
+    /**
+     * Determines whether or not events will be emitted from the component.
+     */
+    disabled: boolean;
+    /**
+     * Determines whether or not to monitor children's attributes.
+     */
+    observeAttributes: boolean;
+    /**
+     * Determines whether or not to monitor children's child list.
+     */
+    observeChildList: boolean;
+    /**
+     * Determines whether or not to monitor children's sub tree.
+     */
+    observeSubTree: boolean;
+    /**
+     * Emitted when any of the observed elements are mutated.
+     */
+    tctMutate: EventEmitter<{
+        entries: MutationRecord[];
+    }>;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    getCurrentMutationEntries(): Promise<MutationRecord[]>;
+    disabledUpdated(newVal: boolean): void;
+    handleSlotChange: () => void;
+    startObserver(): void;
+    stopObserver(): void;
+    render(): any;
+}

package/dist/types/components/q2-pagination/q2-pagination.d.ts CHANGED Viewed

@@ -15,6 +15,8 @@ export declare class Q2Pagination implements ComponentInterface {
     alignment: 'left' | 'center' | 'right';
     /** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */
     autoSize: boolean;
+    /** Allows the component to be disabled should the state of the page require this  */
+    disabled: boolean;
     /** The current page that is being displayed. */
     page: number;
     /**

package/dist/types/components/q2-section-container/q2-section-container.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2SectonContainer implements ComponentInterface {
+    hostElement: HTMLElement;
+    /**
+     * Determines if a single or multiple sections can be open at a time.
+     */
+    openMode: 'multiple' | 'single';
+    /**
+     * Determines which section starts open.
+     */
+    openPaneIndex: number;
+    /**
+     * Determines if all sections inside the section-container start opened or closed.
+     *
+     * @info
+     * If you have openMode set to multiple, all panes will start open.
+     */
+    startAllOpen: boolean;
+    /**
+     * Determines if the section-container starts opened or closed.
+     *
+     * @info
+     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.
+     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.
+     * @warning
+     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.
+     */
+    startOpen: boolean;
+    componentWillLoad(): void;
+    handleOpenStateChange(): void;
+    filterSlottedElements: () => void;
+    fixSlottedElements: () => void;
+    render: () => any;
+}

package/dist/types/components/q2-textarea/q2-textarea.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { IDict } from "../../util";
 /** @slot label - An optional slot to display a custom label. */
 export declare class Q2Textarea {
     contentContainer?: HTMLDivElement;
@@ -10,7 +9,7 @@ export declare class Q2Textarea {
     textareaField?: HTMLTextAreaElement;
     valueOnFocus: string;
     hostElement: HTMLElement;
-    downParams: IDict<number>;
+    downParams: Record<string, number>;
     hasFocus: boolean;
     screenReaderCharacterCount: number;
     /**