npm - q2-tecton-elements - Versions diffs - 1.59.0 → 1.60.0 - Mend

q2-tecton-elements 1.59.0 → 1.60.0

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 (299) 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}\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 }\n}\n\n.content-container {\n --comp-textarea-min-height: 46px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition:\n border-width var(--comp-textarea-tween),\n border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #d20a0a\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #d20a0a\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n &: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 border: 0;\n position: absolute;\n right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import {\n Component,\n EventEmitter,\n Prop,\n Event,\n Element,\n Fragment,\n State,\n h,\n Watch,\n Listen,\n Method,\n} from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n createGuid,\n debounce,\n isEventFromElement,\n renderLabel,\n loc,\n renderMessages,\n overrideFocus,\n setMessageHeight,\n} from 'src/utils';\n\n/** @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":"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","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 { 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":"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","ignoreList":[]}

package/dist/q2-tecton-elements/{shapes-BrIjALih.js → shapes-ElQYMSyu.js} RENAMED Viewed

@@ -1,24 +1,24 @@
 import { h as e } from "./index-COzomxjJ.js";
 const l = {
-  circle: ({width: l, additionalClasses: i}) => e("div", {
-    class: `skeleton-shape circle ${i || ""}`,
+  circle: ({width: l, additionalClasses: d}) => e("div", {
+    class: `skeleton-shape circle ${d || ""}`,
     style: {
       width: l,
       height: l
     }
   }),
-  rectangle: ({width: l, height: i, borderRadius: d, additionalClasses: t}) => e("div", {
+  rectangle: ({width: l, height: d, borderRadius: i, additionalClasses: t}) => e("div", {
     class: `skeleton-shape rectangle ${t || ""}`,
     style: {
       width: l,
-      height: i,
-      borderRadius: d
+      height: d,
+      borderRadius: i
     }
   })
 };
-const i = {
+const d = {
   field: () => e("div", {
     class: "skeleton-shape field"
   }, e("div", {
@@ -30,41 +30,42 @@ const i = {
     height: "var(--tct-input-height, 42px)",
     borderRadius: "3px"
   })),
-  text: (i, d) => {
+  text: (d, i) => {
     var t;
-    const s = (t = i === null || i === void 0 ? void 0 : i[0]) !== null && t !== void 0 ? t : 1;
-    const o = d === null || d === void 0 ? void 0 : d.has("header");
-    const n = (d === null || d === void 0 ? void 0 : d.has("center")) && "center" || (d === null || d === void 0 ? void 0 : d.has("right")) && "right" || "left";
-    const a = (d === null || d === void 0 ? void 0 : d.has("smallheader")) ? " smaller" : "";
-    const r = o ? `header ${n}${a}` : "";
+    const s = (t = d === null || d === void 0 ? void 0 : d[0]) !== null && t !== void 0 ? t : 1;
+    const o = i === null || i === void 0 ? void 0 : i.has("header");
+    const a = (i === null || i === void 0 ? void 0 : i.has("center")) && "center" || (i === null || i === void 0 ? void 0 : i.has("right")) && "right" || "left";
+    const r = (i === null || i === void 0 ? void 0 : i.has("smallheader")) ? " smaller" : "";
+    const n = o ? `header ${a}${r}` : "";
     return e("div", {
       class: "skeleton-shape text"
     }, o && l.rectangle({
       width: "60%",
-      additionalClasses: r
+      additionalClasses: n
     }), !!s && Array(s).fill(undefined).map((() => l.rectangle({
-      height: "1rem"
+      height: "1rem",
+      borderRadius: "var(--tct-border-radius-1, var(--app-border-radius-1, 4px))"
     }))));
   }
 };
-const d = {
+const i = {
   circle: () => l.circle({
     width: "100%"
   }),
   rectangle: () => l.rectangle({
     height: "100%",
-    borderRadius: "var(--tct-border-radius-1, 4px)"
+    borderRadius: "var(--tct-border-radius-1, var(--app-border-radius-1, 4px))"
   }),
-  table: (i, d) => {
+  table: (d, i) => {
     var t, s;
-    const o = (t = i === null || i === void 0 ? void 0 : i[0]) !== null && t !== void 0 ? t : 5;
-    const n = (s = i === null || i === void 0 ? void 0 : i[1]) !== null && s !== void 0 ? s : 5;
-    const a = d === null || d === void 0 ? void 0 : d.has("headless");
-    const r = d === null || d === void 0 ? void 0 : d.has("bordered");
+    const o = (t = d === null || d === void 0 ? void 0 : d[0]) !== null && t !== void 0 ? t : 5;
+    const a = (s = d === null || d === void 0 ? void 0 : d[1]) !== null && s !== void 0 ? s : 5;
+    const r = i === null || i === void 0 ? void 0 : i.has("headless");
+    const n = i === null || i === void 0 ? void 0 : i.has("bordered");
     return e("div", {
       class: "skeleton-shape table"
-    }, !a && e("div", {
+    }, !r && e("div", {
       class: "skeleton-table-head"
     }, e("div", {
       class: "skeleton-table-row skeleton-table-header flex"
@@ -76,31 +77,31 @@ const d = {
       height: "3px"
     }))), e("div", {
       class: "skeleton-table-body"
-    }, !!n && Array(n).fill(undefined).map((() => e("div", {
+    }, !!a && Array(a).fill(undefined).map((() => e("div", {
       class: "skeleton-table-row-wrapper"
     }, e("div", {
       class: "skeleton-table-row flex"
     }, !!o && Array(o).fill(undefined).map((() => l.rectangle({
       height: "1.5rem"
-    })))), r && e("div", {
+    })))), n && e("div", {
       class: "skeleton-table-row-border"
     }, l.rectangle({
       height: "1px",
       additionalClasses: "no-margin"
     })))))));
   },
-  field: i.field,
+  field: d.field,
   form: l => {
-    var d, t, s;
-    const o = (d = (l === null || l === void 0 ? void 0 : l[1]) && (l === null || l === void 0 ? void 0 : l[0])) !== null && d !== void 0 ? d : 1;
-    const n = (s = (t = l === null || l === void 0 ? void 0 : l[1]) !== null && t !== void 0 ? t : l === null || l === void 0 ? void 0 : l[0]) !== null && s !== void 0 ? s : 1;
-    const a = o * n;
+    var i, t, s;
+    const o = (i = (l === null || l === void 0 ? void 0 : l[1]) && (l === null || l === void 0 ? void 0 : l[0])) !== null && i !== void 0 ? i : 1;
+    const a = (s = (t = l === null || l === void 0 ? void 0 : l[1]) !== null && t !== void 0 ? t : l === null || l === void 0 ? void 0 : l[0]) !== null && s !== void 0 ? s : 1;
+    const r = o * a;
     return e("div", {
       class: `skeleton-shape form flex columns-${o}`
-    }, !!a && Array(a).fill(undefined).map(i.field));
+    }, !!r && Array(r).fill(undefined).map(d.field));
   },
-  text: i.text,
-  "detailed-item": (d, t) => {
+  text: d.text,
+  "detailed-item": (i, t) => {
     const s = t === null || t === void 0 ? void 0 : t.has("square");
     const o = (t === null || t === void 0 ? void 0 : t.has("center")) && "center" || (t === null || t === void 0 ? void 0 : t.has("right")) && "right" || "left";
     return e("div", {
@@ -115,11 +116,11 @@ const d = {
       width: "1.5em"
     })), e("div", {
       class: `detailed-item-text flex flex-v-center flex-${o}`
-    }, e("div", null, i.text(d, t))));
+    }, e("div", null, d.text(i, t))));
   },
-  "label-value": i => {
-    var d;
-    const t = 2 * ((d = i === null || i === void 0 ? void 0 : i[0]) !== null && d !== void 0 ? d : 1);
+  "label-value": d => {
+    var i;
+    const t = 2 * ((i = d === null || d === void 0 ? void 0 : d[0]) !== null && i !== void 0 ? i : 1);
     return e("div", {
       class: "skeleton-shape label-value flex"
     }, !!t && Array(t).fill(undefined).map((() => l.rectangle({
@@ -128,6 +129,6 @@ const d = {
   }
 };
-export { l as a, d as s };
-//# sourceMappingURL=shapes-BrIjALih.js.map
-//# sourceMappingURL=shapes-BrIjALih.js.map
+export { l as a, i as s };
+//# sourceMappingURL=shapes-ElQYMSyu.js.map
+//# sourceMappingURL=shapes-ElQYMSyu.js.map

package/dist/q2-tecton-elements/shapes-ElQYMSyu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"shapes-ElQYMSyu.js","sources":["src/components/q2-loading/skeleton/shapes.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { JSX } from './../../../components';\n\ninterface AtomOptions {\n width?: string;\n height?: string;\n borderRadius?: string;\n additionalClasses?: string;\n}\n\nexport const atoms = {\n circle: ({ width, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n <div\n class={`skeleton-shape circle ${additionalClasses || ''}`}\n style={{ width, height: width }}\n ></div>\n ),\n rectangle: ({ width, height, borderRadius, additionalClasses }: AtomOptions): JSX.IntrinsicElements => (\n <div\n class={`skeleton-shape rectangle ${additionalClasses || ''}`}\n style={{ width, height, borderRadius }}\n ></div>\n ),\n};\n\nexport const molecules = {\n field: (): JSX.IntrinsicElements => (\n <div class=\"skeleton-shape field\">\n <div class=\"skeleton-field-label\">{atoms.rectangle({ height: '1rem', width: '50%' })}</div>\n {atoms.rectangle({\n height: 'var(--tct-input-height, 42px)',\n borderRadius: '3px',\n })}\n </div>\n ),\n text: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n const rows = counts?.[0] ?? 1;\n const hasHeader = modifiers?.has('header');\n const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n const smallHeaderClass = modifiers?.has('smallheader') ? ' smaller' : '';\n const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';\n return (\n <div class=\"skeleton-shape text\">\n {hasHeader && atoms.rectangle({ width: '60%', additionalClasses })}\n {!!rows &&\n Array(rows)\n .fill(undefined)\n .map(() =>\n atoms.rectangle({\n height: '1rem',\n borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',\n })\n )}\n </div>\n );\n },\n};\n\nexport const shapes = {\n circle: (): JSX.IntrinsicElements => {\n return atoms.circle({ width: '100%' });\n },\n rectangle: (): JSX.IntrinsicElements => {\n return atoms.rectangle({\n height: '100%',\n borderRadius: 'var(--tct-border-radius-1, var(--app-border-radius-1, 4px))',\n });\n },\n table: (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n const columnCount = counts?.[0] ?? 5;\n const rowCount = counts?.[1] ?? 5;\n const headless = modifiers?.has('headless');\n const bordered = modifiers?.has('bordered');\n return (\n <div class=\"skeleton-shape table\">\n {!headless && (\n <div class=\"skeleton-table-head\">\n <div class=\"skeleton-table-row skeleton-table-header flex\">\n {!!columnCount &&\n Array(columnCount)\n .fill(undefined)\n .map(() => atoms.rectangle({ height: '1rem' }))}\n </div>\n <div class=\"skeleton-table-row-border\">{atoms.rectangle({ height: '3px' })}</div>\n </div>\n )}\n <div class=\"skeleton-table-body\">\n {!!rowCount &&\n Array(rowCount)\n .fill(undefined)\n .map(() => (\n <div class=\"skeleton-table-row-wrapper\">\n <div class=\"skeleton-table-row flex\">\n {!!columnCount &&\n Array(columnCount)\n .fill(undefined)\n .map(() => atoms.rectangle({ height: '1.5rem' }))}\n </div>\n {bordered && (\n <div class=\"skeleton-table-row-border\">\n {atoms.rectangle({\n height: '1px',\n additionalClasses: 'no-margin',\n })}\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n );\n },\n field: molecules.field,\n form: (counts?: number[]): JSX.IntrinsicElements => {\n const columns = (counts?.[1] && counts?.[0]) ?? 1;\n const rows = counts?.[1] ?? counts?.[0] ?? 1;\n const totalItems = columns * rows;\n return (\n <div class={`skeleton-shape form flex columns-${columns}`}>\n {!!totalItems && Array(totalItems).fill(undefined).map(molecules.field)}\n </div>\n );\n },\n text: molecules.text,\n 'detailed-item': (counts?: number[], modifiers?: Set<string>): JSX.IntrinsicElements => {\n const isSquare = modifiers?.has('square');\n const alignment = (modifiers?.has('center') && 'center') || (modifiers?.has('right') && 'right') || 'left';\n return (\n <div class={`skeleton-shape detailed-item flex ${alignment}`}>\n <div class={`detailed-item-image flex-${alignment}`}>\n {isSquare\n ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })\n : atoms.circle({ width: '1.5em' })}\n </div>\n <div class={`detailed-item-text flex flex-v-center flex-${alignment}`}>\n <div>{molecules.text(counts, modifiers)}</div>\n </div>\n </div>\n );\n },\n 'label-value': (counts?: number[]): JSX.IntrinsicElements => {\n const cells = 2 * (counts?.[0] ?? 1);\n return (\n <div class=\"skeleton-shape label-value flex\">\n {!!cells &&\n Array(cells)\n .fill(undefined)\n .map(() => atoms.rectangle({ height: '1rem' }))}\n </div>\n );\n },\n};\n\nexport default shapes;\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
-export declare class Q2Checkbox implements ComponentInterface {
+export declare class Q2Form implements ComponentInterface {
     /** Changes the vertical spacing of the form-fields contained within the component's slot */
     spacing: 'none' | 'compact' | 'normal' | 'comfortable';
     render(): any;

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

@@ -31,6 +31,7 @@ export type InputType = keyof typeof inputTypeMap;
 export declare class Q2Input {
     guid: number;
     inputRef: HTMLInputElement;
+    isClickEvent: boolean;
     isMobile: boolean;
     mutationObserver: MutationObserver;
     resizeObserver: ResizeObserver;
@@ -344,6 +345,7 @@ export declare class Q2Input {
     onInputFocus: () => void;
     onInputInput: (event: InputEvent) => void;
     onInputKeydown: (event: KeyboardEvent) => void;
+    onInputMousedown: () => void;
     onInputPaste: (event: ClipboardEvent) => void;
     onMutationObserved: () => void;
     onRefocusInput: () => void;

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

@@ -1,5 +1,10 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2Loading implements ComponentInterface {
+    ariaLiveTimer: any;
+    dontUpdateScreenReaderLabel: boolean;
+    observer: IntersectionObserver;
+    screenReaderElement: HTMLElement;
+    liveRegionChangeIndicatorToggle: boolean;
     hostElement: HTMLElement;
     /** @deprecated */
     ariaLabel: string;
@@ -33,6 +38,8 @@ export declare class Q2Loading implements ComponentInterface {
      * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.
      */
     modifiers: string;
+    /** Hides the loading element from screen readers. */
+    hideFromScreenReaders: boolean;
     /**
      * The specific visual presentation of a loading element `type`.
      * @snippet
@@ -44,16 +51,20 @@ export declare class Q2Loading implements ComponentInterface {
     shape: string;
     /** The type of loading element to display. */
     type: 'spinner' | 'skeleton';
+    disconnectedCallback(): void;
     componentWillLoad(): void;
-    ariaLabelObserver(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
     get countsArray(): number[];
-    get loader(): () => any;
     get localizedLabel(): string;
     get modifiersSet(): Set<string>;
     get skeletonShape(): any;
-    get spinnerShape(): any;
-    halfCircleSpinner: () => any;
-    skeletonLoader: () => any;
-    spinner: () => any;
+    cleanupLiveRegionDelay(): void;
+    setupLiveRegionDelay(): void;
+    updateScreenReaderLabel(): void;
+    renderHalfCircleSpinner: () => any;
+    get renderLoader(): () => any;
+    renderSkeletonLoader: () => any;
+    renderSpinner: () => any;
     render(): any;
 }

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

@@ -4,9 +4,9 @@ export declare class Q2Optgroup implements ComponentInterface {
     mutationObserver: MutationObserver;
     hostElement: HTMLElement;
     hidden: boolean;
-    /** Serves as the group header text. */
-    disabled: boolean;
     /** Determines whether all nested options are disabled. */
+    disabled: boolean;
+    /** Serves as the group header text. */
     label: string;
     disconnectedCallback(): void;
     componentWillLoad(): void;

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

@@ -119,7 +119,7 @@ export declare class Q2Pill implements ComponentInterface {
         closePopover?: boolean;
     }): Promise<void>;
     selectedOptionsChanged(newValue: any): void;
-    valueChanged(newValue: any): Promise<void>;
+    valueChanged(newValue: any, _oldValue: any, propName: any): Promise<void>;
     get buttonContent(): string;
     get truncatedButtonContent(): string;
     _togglePopover(): void;

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

@@ -23,6 +23,11 @@ export declare class Q2Select implements ComponentInterface {
     hasPopoverTop: boolean;
     inputFocused: boolean;
     open: boolean;
+    /**
+     * Determines what text to show in the input field.
+     * When `true`, the component will display the search text in the input field
+     * When `false`, the component will display the selected option(s) in the input field
+     */
     prioritizeSearch: boolean;
     searchText: string;
     showSelected: boolean;
@@ -224,7 +229,7 @@ export declare class Q2Select implements ComponentInterface {
         value?: string;
         values?: IOptionValue[];
     }): void;
-    handleTouchStart: (event: TouchEvent) => void;
+    handleTouchMove: (event: TouchEvent) => void;
     initEventListeners: () => void;
     initMutationObserver: () => void;
     inputBlurHandler: () => void;

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

@@ -11,6 +11,7 @@ type TabPane = {
 };
 export declare class Q2TabContainer implements ComponentInterface {
     guid: number;
+    hasValidTab: boolean;
     lastScrolled: number;
     listElement: HTMLUListElement;
     mutationObserver: MutationObserver;
@@ -77,16 +78,17 @@ export declare class Q2TabContainer implements ComponentInterface {
     get tabList(): Element;
     get tabPanes(): (HTMLQ2TabPaneElement | HTMLTectonTabPaneElement)[];
     checkScrollState: () => void;
+    determineTabMove(): void;
     moveToAdjacentTab: (value: string, direction: "next" | "prev" | "first" | "last") => void;
-    moveToTab: (index: number, shouldFocus?: boolean) => HTMLButtonElement;
+    moveToTab: (index: number, shouldFocus?: boolean) => void;
     onScrollBtnClick: (direction?: "left" | "right") => void;
     onSlotChange: () => void;
     onTabClick: (event: MouseEvent) => void;
     onTabKeyDown: (event: KeyboardEvent) => void;
     resizeIframe(): void;
     setTabs: () => void;
-    updateTabData: () => void;
     updateTabPaneProps: () => void;
+    updateTabs: () => void;
     renderTab(tab: TabPane, index: number): JSX.IntrinsicElements;
     renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements;
     render(): any;

package/dist/types/components.d.ts CHANGED Viewed

@@ -1994,6 +1994,11 @@ export namespace Components {
           * Numeric adjustments are available for specific `type` and `shape` combinations. These may impact the number of items, columns, and/or rows that display.  When `shape="text"`, `shape="detailed-item"`, or `shape="label-value"`, the `counts` attribute determines the number of rows to display.  When `shape="table"`, the `counts` attribute can be used in two ways:  1. `counts="CxR"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `"5x5" 2. `counts="N"` - Provides a skeleton table of `N` columns and 5 rows.  When `shape="form"`, the `counts` attribute can be used in two ways:  1. `counts="CxR" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `"1x1"`. 2. `counts="N"` - Provides a skeleton form of `N` fields stacked in single columns.
          */
         "counts": string;
+        /**
+          * Hides the loading element from screen readers.
+          * @default false
+         */
+        "hideFromScreenReaders": boolean;
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
          */
@@ -2110,12 +2115,12 @@ export namespace Components {
     }
     interface Q2Optgroup {
         /**
-          * Serves as the group header text.
+          * Determines whether all nested options are disabled.
           * @default false
          */
         "disabled": boolean;
         /**
-          * Determines whether all nested options are disabled.
+          * Serves as the group header text.
          */
         "label": string;
     }
@@ -6110,6 +6115,11 @@ declare namespace LocalJSX {
           * Numeric adjustments are available for specific `type` and `shape` combinations. These may impact the number of items, columns, and/or rows that display.  When `shape="text"`, `shape="detailed-item"`, or `shape="label-value"`, the `counts` attribute determines the number of rows to display.  When `shape="table"`, the `counts` attribute can be used in two ways:  1. `counts="CxR"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `"5x5" 2. `counts="N"` - Provides a skeleton table of `N` columns and 5 rows.  When `shape="form"`, the `counts` attribute can be used in two ways:  1. `counts="CxR" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `"1x1"`. 2. `counts="N"` - Provides a skeleton form of `N` fields stacked in single columns.
          */
         "counts"?: string;
+        /**
+          * Hides the loading element from screen readers.
+          * @default false
+         */
+        "hideFromScreenReaders"?: boolean;
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
          */
@@ -6239,12 +6249,12 @@ declare namespace LocalJSX {
     }
     interface Q2Optgroup {
         /**
-          * Serves as the group header text.
+          * Determines whether all nested options are disabled.
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Determines whether all nested options are disabled.
+          * Serves as the group header text.
          */
         "label"?: string;
     }