npm - q2-tecton-elements - Versions diffs - 1.37.1 → 1.38.1 - Mend

q2-tecton-elements 1.37.1 → 1.38.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 (501) hide show

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

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

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

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

package/dist/esm/q2-tooltip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host([block]) {\n display: block;\n}\n\n.tooltip {\n --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n display: inline-block;\n position: relative;\n\n &:hover {\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n }\n\n // Tooltip arrow\n &:before {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n color: var(--comp-background);\n pointer-events: none;\n content: '';\n border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n }\n\n // Tooltip bubble\n &:after {\n --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n position: absolute;\n z-index: 1;\n padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n line-height: 1.5;\n color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: break-word;\n white-space: pre;\n pointer-events: none;\n content: attr(aria-label);\n background: var(--comp-background);\n border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n }\n\n &:before,\n &:after {\n display: inline-block;\n visibility: hidden;\n opacity: 0;\n transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n }\n\n :host([block]) & {\n display: block;\n }\n\n // When to show the tooltip\n &:hover,\n &.has-keyboard-focus:focus-within,\n :host([persistent]) & {\n &:before,\n &:after {\n text-decoration: none;\n visibility: visible;\n opacity: 1;\n }\n }\n\n @keyframes tooltippedFade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n &.has-generic-focus:focus-within {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade, tooltippedFade;\n animation-direction: normal, reverse;\n animation-duration: var(--comp-duration);\n animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n }\n }\n &.has-generic-focus-out {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade;\n animation-direction: reverse;\n animation-duration: var(--comp-duration);\n }\n }\n\n :host([multiline]) & {\n &:after {\n width: max-content;\n max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n word-break: break-word;\n word-wrap: normal;\n white-space: pre-line;\n border-collapse: separate;\n text-align: left;\n }\n\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n :host([position='w']) &,\n :host([position='e']) & {\n &:after {\n right: 100%;\n }\n }\n\n &:hover,\n &:active,\n &:focus {\n &:after {\n display: table-cell;\n }\n }\n\n &:focus-within {\n &:after {\n display: table-cell;\n }\n }\n }\n\n // Below\n :host([position='s']) &,\n :host([position='se']) &,\n :host([position='sw']) & {\n &:after {\n top: 100%;\n right: 50%;\n margin-top: var(--comp-position);\n }\n\n &:before {\n top: auto;\n right: 50%;\n bottom: var(--comp-offset);\n margin-right: var(--comp-offset);\n border-bottom-color: var(--comp-background);\n }\n }\n\n // Above\n :host([position='n']) &,\n :host([position='ne']) &,\n :host([position='nw']) & {\n &:after {\n right: 50%;\n bottom: 100%;\n margin-bottom: var(--comp-position);\n }\n\n &:before {\n top: var(--comp-offset);\n right: 50%;\n bottom: auto;\n margin-right: var(--comp-offset);\n border-top-color: var(--comp-background);\n }\n }\n\n :host([position='se']) &,\n :host([position='ne']) & {\n &:after {\n right: auto;\n left: 50%;\n margin-left: var(--comp-body-offset);\n }\n }\n\n :host([position='sw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n :host([position='nw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n // Centered\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n transform: translateX(50%);\n }\n }\n\n // Left side\n :host([position='w']) & {\n &:after {\n right: 100%;\n bottom: 50%;\n margin-right: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n bottom: 50%;\n left: var(--comp-offset);\n margin-top: var(--comp-offset);\n border-left-color: var(--comp-background);\n }\n }\n\n // Right side\n :host([position='e']) & {\n &:after {\n bottom: 50%;\n left: 100%;\n margin-left: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n right: var(--comp-offset);\n bottom: 50%;\n margin-top: var(--comp-offset);\n border-right-color: var(--comp-background);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-tooltip',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) block: boolean;\n @Prop({ reflect: true }) multiline: boolean;\n @Prop({ reflect: true }) persistent: boolean;\n @Prop({ reflect: true }) immediate: boolean;\n @Prop({ reflect: true }) focusable: boolean = false;\n @Prop({ reflect: true }) position: 'n' \| 's' \| 'e' \| 'w' \| 'nw' \| 'ne' \| 'sw' \| 'se' = 'n';\n\n @Element() hostElement: HTMLElement;\n @State() focusClass: 'has-keyboard-focus' \| 'has-generic-focus' \| 'has-generic-focus-out';\n\n tooltipElement: HTMLDivElement;\n animationEndCount = 0;\n\n /// LifeCycle Hooks ///\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n /// Getters ///\n get shouldBeVisible() {\n if (this.persistent) return true;\n return this.hostElement.matches(':hover, :focus-within');\n }\n\n /// Helpers //\n checkFocusClass() {\n if (!this.shouldBeVisible) return;\n const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n if (isKeyboardFocus) return;\n }\n\n hideTooltip() {\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n animationEndHandler() {\n this.animationEndCount = this.animationEndCount + 1;\n const { focusClass, animationEndCount } = this;\n\n // animationEnd is fired once for :before and once for :after pseudo elements\n // there are multiple animations defined for .has-generic-focus\n // so we need to wait for all of them to finish before we can remove the class\n if (focusClass === 'has-generic-focus-out' \|\| (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n this.focusClass = null;\n this.animationEndCount = 0;\n }\n }\n\n findFocusVisibleElement(element: Element) {\n if (!element) return;\n if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n return element?.matches(':focus-visible') ? element : null;\n }\n\n /// Listeners ///\n @Listen('keyup')\n keyUpHandler(event: KeyboardEvent) {\n switch (event.key) {\n case 'Esc':\n case 'Escape':\n this.hideTooltip();\n break;\n }\n }\n\n @Listen('focus', { capture: true })\n focusCaptureHandler() {\n this.checkFocusClass();\n }\n\n @Listen('focus')\n focusHandler(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.focusable) return;\n this.tooltipElement.focus();\n }\n\n @Listen('focusout')\n focusOutHandler() {\n if (this.shouldBeVisible) return;\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n render() {\n const { focusClass } = this;\n const classes = ['tooltip'];\n if (focusClass) classes.push(focusClass);\n\n return this.label ? (\n <div\n tabindex={this.focusable ? 0 : undefined}\n ref={el => (this.tooltipElement = el)}\n class={classes.join(' ')}\n aria-label={this.label}\n onAnimationEnd={() => this.animationEndHandler()}\n role=\"tooltip\"\n test-id=\"tooltipContainer\"\n >\n <slot />\n </div>\n ) : (\n <slot />\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host([block]) {\n display: block;\n}\n\n.tooltip {\n --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n display: inline-block;\n position: relative;\n\n &:hover {\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n }\n\n // Tooltip arrow\n &:before {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n color: var(--comp-background);\n pointer-events: none;\n content: '';\n border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n }\n\n // Tooltip bubble\n &:after {\n --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n position: absolute;\n z-index: 1;\n padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n line-height: 1.5;\n color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: break-word;\n white-space: pre;\n pointer-events: none;\n content: attr(aria-label);\n background: var(--comp-background);\n border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n }\n\n &:before,\n &:after {\n display: inline-block;\n visibility: hidden;\n opacity: 0;\n transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n }\n\n :host([block]) & {\n display: block;\n }\n\n // When to show the tooltip\n &:hover,\n &.has-keyboard-focus:focus-within,\n :host([persistent]) & {\n &:before,\n &:after {\n text-decoration: none;\n visibility: visible;\n opacity: 1;\n }\n }\n\n @keyframes tooltippedFade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n &.has-generic-focus:focus-within {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade, tooltippedFade;\n animation-direction: normal, reverse;\n animation-duration: var(--comp-duration);\n animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n }\n }\n &.has-generic-focus-out {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade;\n animation-direction: reverse;\n animation-duration: var(--comp-duration);\n }\n }\n\n :host([multiline]) & {\n &:after {\n width: max-content;\n max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n word-break: break-word;\n word-wrap: normal;\n white-space: pre-line;\n border-collapse: separate;\n text-align: left;\n }\n\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n :host([position='w']) &,\n :host([position='e']) & {\n &:after {\n right: 100%;\n }\n }\n\n &:hover,\n &:active,\n &:focus {\n &:after {\n display: table-cell;\n }\n }\n\n &:focus-within {\n &:after {\n display: table-cell;\n }\n }\n }\n\n // Below\n :host([position='s']) &,\n :host([position='se']) &,\n :host([position='sw']) & {\n &:after {\n top: 100%;\n right: 50%;\n margin-top: var(--comp-position);\n }\n\n &:before {\n top: auto;\n right: 50%;\n bottom: var(--comp-offset);\n margin-right: var(--comp-offset);\n border-bottom-color: var(--comp-background);\n }\n }\n\n // Above\n :host([position='n']) &,\n :host([position='ne']) &,\n :host([position='nw']) & {\n &:after {\n right: 50%;\n bottom: 100%;\n margin-bottom: var(--comp-position);\n }\n\n &:before {\n top: var(--comp-offset);\n right: 50%;\n bottom: auto;\n margin-right: var(--comp-offset);\n border-top-color: var(--comp-background);\n }\n }\n\n :host([position='se']) &,\n :host([position='ne']) & {\n &:after {\n right: auto;\n left: 50%;\n margin-left: var(--comp-body-offset);\n }\n }\n\n :host([position='sw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n :host([position='nw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n // Centered\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n transform: translateX(50%);\n }\n }\n\n // Left side\n :host([position='w']) & {\n &:after {\n right: 100%;\n bottom: 50%;\n margin-right: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n bottom: 50%;\n left: var(--comp-offset);\n margin-top: var(--comp-offset);\n border-left-color: var(--comp-background);\n }\n }\n\n // Right side\n :host([position='e']) & {\n &:after {\n bottom: 50%;\n left: 100%;\n margin-left: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n right: var(--comp-offset);\n bottom: 50%;\n margin-top: var(--comp-offset);\n border-right-color: var(--comp-background);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-tooltip',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) block: boolean;\n @Prop({ reflect: true }) multiline: boolean;\n @Prop({ reflect: true }) persistent: boolean;\n @Prop({ reflect: true }) immediate: boolean;\n @Prop({ reflect: true }) focusable: boolean = false;\n @Prop({ reflect: true }) position: 'n' \| 's' \| 'e' \| 'w' \| 'nw' \| 'ne' \| 'sw' \| 'se' = 'n';\n\n @Element() hostElement: HTMLElement;\n @State() focusClass: 'has-keyboard-focus' \| 'has-generic-focus' \| 'has-generic-focus-out';\n\n tooltipElement: HTMLDivElement;\n animationEndCount = 0;\n\n /// LifeCycle Hooks ///\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n /// Getters ///\n get shouldBeVisible() {\n if (this.persistent) return true;\n return this.hostElement.matches(':hover, :focus-within');\n }\n\n /// Helpers //\n checkFocusClass() {\n if (!this.shouldBeVisible) return;\n const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n if (isKeyboardFocus) return;\n }\n\n hideTooltip() {\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n animationEndHandler() {\n this.animationEndCount = this.animationEndCount + 1;\n const { focusClass, animationEndCount } = this;\n\n // animationEnd is fired once for :before and once for :after pseudo elements\n // there are multiple animations defined for .has-generic-focus\n // so we need to wait for all of them to finish before we can remove the class\n if (focusClass === 'has-generic-focus-out' \|\| (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n this.focusClass = null;\n this.animationEndCount = 0;\n }\n }\n\n findFocusVisibleElement(element: Element) {\n if (!element) return;\n if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n return element?.matches(':focus-visible') ? element : null;\n }\n\n /// Listeners ///\n @Listen('keyup')\n keyUpHandler(event: KeyboardEvent) {\n switch (event.key) {\n case 'Esc':\n case 'Escape':\n this.hideTooltip();\n break;\n }\n }\n\n @Listen('focus', { capture: true })\n focusCaptureHandler() {\n this.checkFocusClass();\n }\n\n @Listen('focus')\n focusHandler(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.focusable) return;\n this.tooltipElement.focus();\n }\n\n @Listen('focusout')\n focusOutHandler() {\n if (this.shouldBeVisible) return;\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n render() {\n const { focusClass } = this;\n const classes = ['tooltip'];\n if (focusClass) classes.push(focusClass);\n\n return this.label ? (\n <div\n tabindex={this.focusable ? 0 : undefined}\n ref={el => (this.tooltipElement = el)}\n class={classes.join(' ')}\n aria-label={this.label}\n onAnimationEnd={() => this.animationEndHandler()}\n role=\"tooltip\"\n test-id=\"tooltipContainer\"\n >\n <slot />\n </div>\n ) : (\n <slot />\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
 const TectonTabPane = class {
   constructor(hostRef) {

package/dist/esm/tecton-tab-pane.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tecton-tab-pane.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~8hCAA8hC~~;;~~MCQniC~~,aAAa;;;;;IAoEtB,iBAAY,GAAG,CAAC,KAAY;MACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;MAEjD,MAAM,CAAC,aAAa;QAChB,MAAM,CAAC,aAAa,CAAC,WAAW,CAC5B,gBAAgB,IAAI,CAAC,QAAQ,wDAAwD,EACrF,GAAG,CACN,CAAC;KACT,CAAC;;;;;;;;;;;;;;;;;;;EAhDF,aAAa;IACT,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACrB;EAED,IAAI,WAAW;IACX,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACvD;EACD,mBAAmB;IACf,MAAM,cAAc,GAAmB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACrG,IAAI,cAAc,EAAE;MAChB,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MAChD,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC1C;GACJ;EAED,iBAAiB;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;GAClC;EAED,kBAAkB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAEtE,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,WAAW,CAAC,aAAa,EAAE;MAC9C,WAAW,CAAC,MAAM,EAAE,CAAC;MACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KAC1B;GACJ;;EAID,gBAAgB;IACZ,MAAM,MAAM,GAAmB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACxG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IAE/B,IAAI,MAAM,EAAE;MACR,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAClC;GACJ;;EAcD,MAAM;IACF,QACI,WACI,EAAE,EAAE,YAAY,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACzC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,SAAS,EAAE,EAClD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAC,IAAI,iBACA,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,qBACf,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAEhD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3D,eACI,YAAM,IAAI,EAAC,iBAAiB,GAAG,EAC/B,cACI,MAAM,QACN,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,oBACnD,IAAI,CAAC,QAAQ,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,EAC5D,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,KAAK,EAAC,qBAAqB,GAC7B,EACD,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAC/B,YACI,MAAM,QACN,MAAM,EAAC,MAAM,EACb,MAAM,EAAE,IAAI,CAAC,GAAG,EAChB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,OAAO,EAAC,qBAAqB,IAE5B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO;MACzB,QACI,aACI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,IAAI,EAAE,OAAO,CAAC,GAAG,GACnB,EACJ;KACL,CAAC,CACC,KAEP,EAAE,CACL,CACC,CACT,EACD,WACI,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAEtE,eAAQ,CACN,CACJ,EACR;GACL;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n height: 44px;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n display: flex;\n}\niframe {\n width: 100%;\n height: auto;\n overflow-y: hidden;\n border: none;\n}\niframe:not([hidden]) {\n display: inline-block;\n}\n\n.slot-wrapper:focus {\n outline: none;\n box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n tag: 'tecton-tab-pane',\n styleUrl: 'styles.scss',\n shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) selected: boolean;\n @Prop() index: number;\n @Prop() guid: number;\n // above props duplicated from q2-tab-pane.\n // Unable to extend due to Stencil decorator limitation\n @Prop({ reflect: true }) provided: boolean;\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) moduleId: string;\n @Prop({ reflect: true }) minHeight: string;\n @Prop({ reflect: true }) badgeCount: number;\n @Prop({ reflect: true }) badgeDescription: string;\n @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n @Prop() authPayload: { key: string; value: string }[];\n @Prop() showForm: boolean;\n @State() _showForm: boolean;\n @Element() hostElement: HTMLElement;\n\n @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n @Watch('badgeCount')\n @Watch('badgeDescription')\n @Watch('badgeTheme')\n @Watch('badgeStatus')\n badgeObserver() {\n this.badge.emit();\n }\n\n get iframeTitle() {\n return this.moduleId.split('.').slice(-2).join('-');\n }\n componentWillRender(): void \| Promise<void> {\n const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n if (loadingWrapper) {\n loadingWrapper.style.minHeight = this.minHeight;\n loadingWrapper.hidden = !this.selected;\n }\n }\n\n componentWillLoad() {\n this._showForm = this.showForm;\n }\n\n componentDidRender() {\n const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n if (!!formElement && !!formElement.parentElement) {\n formElement.submit();\n this._showForm = false;\n }\n }\n\n ///////// Observers /////////\n @Watch('selected')\n selectedObserver() {\n const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n this._showForm = this.showForm; // reset state\n\n if (loader) {\n loader.hidden = !this.selected;\n }\n }\n\n ///////// Actions /////////\n onIFrameLoad = (event: Event) => {\n const iframe = event.target as HTMLIFrameElement;\n\n iframe.contentWindow &&\n iframe.contentWindow.postMessage(\n `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n '*'\n );\n };\n\n ///////// View Methods /////////\n render() {\n return (\n <div\n id={`tab-pane-${this.guid}-${this.index}`}\n class={`tab-pane${this.selected ? '' : ' hidden'}`}\n role=\"tabpanel\"\n tabindex=\"-1\"\n aria-hidden={`${!this.selected}`}\n aria-labelledby={`tab-${this.guid}-${this.index}`}\n >\n {this.selected && this.provided !== undefined && !this.provided && (\n <div>\n <slot name=\"loading-wrapper\" />\n <iframe\n hidden\n name={this.moduleId}\n scrolling=\"no\"\n src={this.showForm && this.authPayload.length ? '' : this.url \|\| ''}\n data-module-id={this.moduleId}\n style={this.minHeight ? { minHeight: this.minHeight } : null}\n onLoad={this.onIFrameLoad}\n title={this.iframeTitle}\n allow=\"geolocation; camera\"\n />\n {this._showForm && this.authPayload ? (\n <form\n hidden\n method=\"post\"\n action={this.url}\n target={this.moduleId}\n encType=\"multipart/form-data\"\n >\n {this.authPayload.map(element => {\n return (\n <input\n type=\"hidden\"\n value={element.value}\n name={element.key}\n />\n );\n })}\n </form>\n ) : (\n ''\n )}\n </div>\n )}\n <div\n class=\"slot-wrapper\"\n hidden={this.selected && this.provided !== undefined && !this.provided}\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tecton-tab-pane.entry.js","mappings":"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","names":[],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n height: 44px;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n display: flex;\n}\niframe {\n width: 100%;\n height: auto;\n overflow-y: hidden;\n border: none;\n}\niframe:not([hidden]) {\n display: inline-block;\n}\n\n.slot-wrapper:focus {\n outline: none;\n box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n tag: 'tecton-tab-pane',\n styleUrl: 'styles.scss',\n shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) selected: boolean;\n @Prop() index: number;\n @Prop() guid: number;\n // above props duplicated from q2-tab-pane.\n // Unable to extend due to Stencil decorator limitation\n @Prop({ reflect: true }) provided: boolean;\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) moduleId: string;\n @Prop({ reflect: true }) minHeight: string;\n @Prop({ reflect: true }) badgeCount: number;\n @Prop({ reflect: true }) badgeDescription: string;\n @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n @Prop() authPayload: { key: string; value: string }[];\n @Prop() showForm: boolean;\n @State() _showForm: boolean;\n @Element() hostElement: HTMLElement;\n\n @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n @Watch('badgeCount')\n @Watch('badgeDescription')\n @Watch('badgeTheme')\n @Watch('badgeStatus')\n badgeObserver() {\n this.badge.emit();\n }\n\n get iframeTitle() {\n return this.moduleId.split('.').slice(-2).join('-');\n }\n componentWillRender(): void \| Promise<void> {\n const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n if (loadingWrapper) {\n loadingWrapper.style.minHeight = this.minHeight;\n loadingWrapper.hidden = !this.selected;\n }\n }\n\n componentWillLoad() {\n this._showForm = this.showForm;\n }\n\n componentDidRender() {\n const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n if (!!formElement && !!formElement.parentElement) {\n formElement.submit();\n this._showForm = false;\n }\n }\n\n ///////// Observers /////////\n @Watch('selected')\n selectedObserver() {\n const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n this._showForm = this.showForm; // reset state\n\n if (loader) {\n loader.hidden = !this.selected;\n }\n }\n\n ///////// Actions /////////\n onIFrameLoad = (event: Event) => {\n const iframe = event.target as HTMLIFrameElement;\n\n iframe.contentWindow &&\n iframe.contentWindow.postMessage(\n `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n '*'\n );\n };\n\n ///////// View Methods /////////\n render() {\n return (\n <div\n id={`tab-pane-${this.guid}-${this.index}`}\n class={`tab-pane${this.selected ? '' : ' hidden'}`}\n role=\"tabpanel\"\n tabindex=\"-1\"\n aria-hidden={`${!this.selected}`}\n aria-labelledby={`tab-${this.guid}-${this.index}`}\n >\n {this.selected && this.provided !== undefined && !this.provided && (\n <div>\n <slot name=\"loading-wrapper\" />\n <iframe\n hidden\n name={this.moduleId}\n scrolling=\"no\"\n src={this.showForm && this.authPayload.length ? '' : this.url \|\| ''}\n data-module-id={this.moduleId}\n style={this.minHeight ? { minHeight: this.minHeight } : null}\n onLoad={this.onIFrameLoad}\n title={this.iframeTitle}\n allow=\"geolocation; camera\"\n />\n {this._showForm && this.authPayload ? (\n <form\n hidden\n method=\"post\"\n action={this.url}\n target={this.moduleId}\n encType=\"multipart/form-data\"\n >\n {this.authPayload.map(element => {\n return (\n <input\n type=\"hidden\"\n value={element.value}\n name={element.key}\n />\n );\n })}\n </form>\n ) : (\n ''\n )}\n </div>\n )}\n <div\n class=\"slot-wrapper\"\n hidden={this.selected && this.provided !== undefined && !this.provided}\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/q2-tecton-elements/p-059ea7c9.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as i,g as o}from"./p-277dc8cd.js";import{c as r}from"./p-f34521a4.js";import{i as e}from"./p-f0e323ad.js";const n="{box-sizing:border-box}:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-alert, var(--const-stoplight-alert, #c30000))}";const s=class{constructor(i){t(this,i);this.type=undefined;this.label=undefined;this.inline=undefined}get iconMarkup(){return e[this.type]&&e[this.type].markup()\|\|""}get isCustom(){return this.type==="custom"}componentDidLoad(){this.setCustomSVGAttrs()}customIconHandler(){this.setCustomSVGAttrs()}setCustomSVGAttrs(){if(!this.isCustom)return;const t=this.hostElement.querySelector("svg");if(!t)return;t.setAttribute("role","img");t.setAttribute("xmlns","http://www.w3.org/2000/svg");const{label:i}=this;if(i){const o=document.createElement("title");const e=`label-${r()}`;o.id=e;o.textContent=i;t.appendChild(o);t.setAttribute("aria-labelledby",e)}else{t.setAttribute("aria-hidden","true")}}render(){const{label:t}=this;return this.isCustom?i("slot",null):i("svg",{viewBox:"0 0 26 26",xmlns:"http://www.w3.org/2000/svg","aria-hidden":this.label?undefined:"true",role:"img","aria-labelledby":t?"label":undefined},t&&i("title",{id:"label"},t),this.iconMarkup)}get hostElement(){return o(this)}static get watchers(){return{type:["customIconHandler"]}}};s.style=n;export{s as q2_icon};
2	+ //# sourceMappingURL=p-059ea7c9.entry.js.map

package/dist/q2-tecton-elements/{p-bfd69d42.entry.js.map → p-059ea7c9.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","Q2Icon","iconMarkup","icons","this","type","markup","isCustom","componentDidLoad","setCustomSVGAttrs","customIconHandler","innerSVG","hostElement","querySelector","setAttribute","label","title","document","createElement","labelId","createGuid","id","textContent","appendChild","render","h","viewBox","xmlns","undefined","role"],"sources":["./src/components/q2-icon/styles.scss?tag=q2-icon&encapsulation=shadow","./src/components/q2-icon/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentColor);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentColor);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentColor);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentColor);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #c30000)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport icons from './icons';\n\n@Component({\n tag: 'q2-icon',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Icon implements ComponentInterface {\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) inline: boolean;\n\n get iconMarkup() {\n return (icons[this.type] && icons[this.type].markup()) \|\| '';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n @Element() hostElement: HTMLElement;\n\n componentDidLoad() {\n this.setCustomSVGAttrs();\n }\n\n @Watch('type')\n customIconHandler() {\n this.setCustomSVGAttrs();\n }\n\n setCustomSVGAttrs() {\n if (!this.isCustom) return;\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n render() {\n const { label } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n viewBox=\"0 0 26 26\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden={this.label ? undefined : 'true'}\n role=\"img\"\n aria-labelledby={label ? 'label' : undefined}\n >\n {label && <title id=\"label\">{label}</title>}\n {this.iconMarkup}\n </svg>\n );\n }\n}\n"],"mappings":"0HAAA,MAAMA,EAAY,~~kuE~~,MCSLC,EAAM,M,wFAKXC,iBACA,OAAQC,EAAMC,KAAKC,OAASF,EAAMC,KAAKC,MAAMC,UAAa,E,CAG1DC,eACA,OAAOH,KAAKC,OAAS,Q,CAKzBG,mBACIJ,KAAKK,mB,CAITC,oBACIN,KAAKK,mB,CAGTA,oBACI,IAAKL,KAAKG,SAAU,OACpB,MAAMI,EAAWP,KAAKQ,YAAYC,cAAc,OAEhD,IAAKF,EAAU,OAEfA,EAASG,aAAa,OAAQ,OAC9BH,EAASG,aAAa,QAAS,8BAE/B,MAAMC,MAAEA,GAAUX,KAClB,GAAIW,EAAO,CACP,MAAMC,EAAQC,SAASC,cAAc,SACrC,MAAMC,EAAU,SAASC,MACzBJ,EAAMK,GAAKF,EACXH,EAAMM,YAAcP,EACpBJ,EAASY,YAAYP,GACrBL,EAASG,aAAa,kBAAmBK,E,KACtC,CACHR,EAASG,aAAa,cAAe,O,EAI7CU,SACI,MAAMT,MAAEA,GAAUX,KAClB,OAAOA,KAAKG,SACRkB,EAAA,aAEAA,EAAA,OACIC,QAAQ,YACRC,MAAM,6BAA4B,cACrBvB,KAAKW,MAAQa,UAAY,OACtCC,KAAK,MAAK,kBACOd,EAAQ,QAAUa,WAElCb,GAASU,EAAA,SAAOJ,GAAG,SAASN,GAC5BX,KAAKF,W"}
1	+ {"version":3,"names":["stylesCss","Q2Icon","iconMarkup","icons","this","type","markup","isCustom","componentDidLoad","setCustomSVGAttrs","customIconHandler","innerSVG","hostElement","querySelector","setAttribute","label","title","document","createElement","labelId","createGuid","id","textContent","appendChild","render","h","viewBox","xmlns","undefined","role"],"sources":["./src/components/q2-icon/styles.scss?tag=q2-icon&encapsulation=shadow","./src/components/q2-icon/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentColor);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentColor);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentColor);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentColor);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #c30000)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport icons from './icons';\n\n@Component({\n tag: 'q2-icon',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Icon implements ComponentInterface {\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) inline: boolean;\n\n get iconMarkup() {\n return (icons[this.type] && icons[this.type].markup()) \|\| '';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n @Element() hostElement: HTMLElement;\n\n componentDidLoad() {\n this.setCustomSVGAttrs();\n }\n\n @Watch('type')\n customIconHandler() {\n this.setCustomSVGAttrs();\n }\n\n setCustomSVGAttrs() {\n if (!this.isCustom) return;\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n render() {\n const { label } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n viewBox=\"0 0 26 26\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden={this.label ? undefined : 'true'}\n role=\"img\"\n aria-labelledby={label ? 'label' : undefined}\n >\n {label && <title id=\"label\">{label}</title>}\n {this.iconMarkup}\n </svg>\n );\n }\n}\n"],"mappings":"0HAAA,MAAMA,EAAY,6tE,MCSLC,EAAM,M,wFAKXC,iBACA,OAAQC,EAAMC,KAAKC,OAASF,EAAMC,KAAKC,MAAMC,UAAa,E,CAG1DC,eACA,OAAOH,KAAKC,OAAS,Q,CAKzBG,mBACIJ,KAAKK,mB,CAITC,oBACIN,KAAKK,mB,CAGTA,oBACI,IAAKL,KAAKG,SAAU,OACpB,MAAMI,EAAWP,KAAKQ,YAAYC,cAAc,OAEhD,IAAKF,EAAU,OAEfA,EAASG,aAAa,OAAQ,OAC9BH,EAASG,aAAa,QAAS,8BAE/B,MAAMC,MAAEA,GAAUX,KAClB,GAAIW,EAAO,CACP,MAAMC,EAAQC,SAASC,cAAc,SACrC,MAAMC,EAAU,SAASC,MACzBJ,EAAMK,GAAKF,EACXH,EAAMM,YAAcP,EACpBJ,EAASY,YAAYP,GACrBL,EAASG,aAAa,kBAAmBK,E,KACtC,CACHR,EAASG,aAAa,cAAe,O,EAI7CU,SACI,MAAMT,MAAEA,GAAUX,KAClB,OAAOA,KAAKG,SACRkB,EAAA,aAEAA,EAAA,OACIC,QAAQ,YACRC,MAAM,6BAA4B,cACrBvB,KAAKW,MAAQa,UAAY,OACtCC,KAAK,MAAK,kBACOd,EAAQ,QAAUa,WAElCb,GAASU,EAAA,SAAOJ,GAAG,SAASN,GAC5BX,KAAKF,W"}

package/dist/q2-tecton-elements/p-072bda73.entry.js ADDED Viewed

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

package/dist/q2-tecton-elements/{p-077107c1.entry.js.map → p-072bda73.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","SUPPORTED_THEME_COLORS","STOPLIGHT_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","componentWillLoad","checkBar","componentDidLoad","hostElement","clickableElement","overrideFocus","resizeObserver","ResizeObserver","determineAutoSmall","observe","disconnectedCallback","onHostElementFocus","isEventFromElement","focus","bar","includes","barColor","determineAutoTouch","hasAttribute","isAutoTouch","isStatic","containerElement","avatarElement","avatarWidth","_a","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContent","Fragment","class","style","title","description","isTouch","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","render","href","target","rel","onClick"],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: 100%;\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n )};\n\n &:hover,\n &:active,\n &:focus {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(1);\n}\n\np {\n @include line-clamp(2);\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n Watch,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst SUPPORTED_THEME_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\nconst STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];\n\n@Component({\n tag: 'q2-card',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n @Prop({ reflect: true }) title: string;\n @Prop({ reflect: true }) description: string;\n @Prop({ reflect: true }) avatarName: string;\n @Prop({ reflect: true }) avatarInitials: string;\n @Prop({ reflect: true }) avatarIcon: string;\n @Prop({ reflect: true }) avatarSrc: string;\n @Prop({ reflect: true }) isSmall: boolean;\n @Prop({ reflect: true }) bar: string;\n @Prop({ reflect: true }) isStatic: boolean;\n @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) target: '_self' \| '_blank' \| '_parent' \| '_top';\n @Prop({ reflect: true }) type: 'clickable' \| 'non-clickable' = 'clickable';\n\n @State() isAutoTouch: boolean = false;\n @State() isAutoSmall: boolean = false;\n @Element() hostElement: HTMLElement;\n @Event() click: EventEmitter;\n\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n avatarElement: HTMLElement;\n resizeObserver: ResizeObserver;\n barColor: string;\n\n componentWillLoad() {\n this.checkBar();\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n disconnectedCallback() {\n this.resizeObserver = null;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n @Watch('bar')\n checkBar() {\n const { bar } = this;\n if (!bar) return;\n\n if (SUPPORTED_THEME_COLORS.includes(bar)) {\n this.barColor = `var(--t-${bar})`;\n } else if (STOPLIGHT_COLORS.includes(bar)) {\n this.barColor = `var(--const-stoplight-${bar})`;\n } else {\n this.barColor = bar;\n }\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class=\"bar\"\n test-id=\"bar\"\n style={{ '--comp-bar-color': this.barColor }}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stylesCss","SUPPORTED_THEME_COLORS","STOPLIGHT_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","componentWillLoad","checkBar","componentDidLoad","hostElement","clickableElement","overrideFocus","resizeObserver","ResizeObserver","determineAutoSmall","observe","disconnectedCallback","onHostElementFocus","isEventFromElement","focus","bar","includes","barColor","determineAutoTouch","hasAttribute","isAutoTouch","isStatic","containerElement","avatarElement","avatarWidth","_a","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContent","Fragment","class","style","title","description","isTouch","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","render","href","target","rel","onClick"],"sources":["./src/components/q2-card/styles.scss?tag=q2-card&encapsulation=shadow","./src/components/q2-card/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: 100%;\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 3px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote('0 3px 6px rgba(0, 0, 0, 0.3)'));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote('0 4px 12px rgba(0, 0, 0, 0.3)')\n )};\n\n &:hover,\n &:active,\n &:focus {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(1);\n}\n\np {\n @include line-clamp(2);\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n Watch,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst SUPPORTED_THEME_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\nconst STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];\n\n@Component({\n tag: 'q2-card',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Card implements ComponentInterface {\n @Prop({ reflect: true }) title: string;\n @Prop({ reflect: true }) description: string;\n @Prop({ reflect: true }) avatarName: string;\n @Prop({ reflect: true }) avatarInitials: string;\n @Prop({ reflect: true }) avatarIcon: string;\n @Prop({ reflect: true }) avatarSrc: string;\n @Prop({ reflect: true }) isSmall: boolean;\n @Prop({ reflect: true }) bar: string;\n @Prop({ reflect: true }) isStatic: boolean;\n @Prop({ reflect: true }) isTouch: boolean = isTouchDevice();\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) target: '_self' \| '_blank' \| '_parent' \| '_top';\n @Prop({ reflect: true }) type: 'clickable' \| 'non-clickable' = 'clickable';\n\n @State() isAutoTouch: boolean = false;\n @State() isAutoSmall: boolean = false;\n @Element() hostElement: HTMLElement;\n @Event() click: EventEmitter;\n\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n avatarElement: HTMLElement;\n resizeObserver: ResizeObserver;\n barColor: string;\n\n componentWillLoad() {\n this.checkBar();\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n disconnectedCallback() {\n this.resizeObserver = null;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n @Watch('bar')\n checkBar() {\n const { bar } = this;\n if (!bar) return;\n\n if (SUPPORTED_THEME_COLORS.includes(bar)) {\n this.barColor = `var(--t-${bar})`;\n } else if (STOPLIGHT_COLORS.includes(bar)) {\n this.barColor = `var(--const-stoplight-${bar})`;\n } else {\n this.barColor = bar;\n }\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class=\"bar\"\n test-id=\"bar\"\n style={{ '--comp-bar-color': this.barColor }}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-0cade28b.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as o,g as i}from"./p-277dc8cd.js";import{o as e,i as r}from"./p-f34521a4.js";const a='{box-sizing:border-box}:active{outline:none}:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';const n=class{constructor(o){t(this,o);this.animationEndCount=0;this.label=undefined;this.block=undefined;this.multiline=undefined;this.persistent=undefined;this.immediate=undefined;this.focusable=false;this.position="n";this.focusClass=undefined}componentDidLoad(){e(this.hostElement)}get shouldBeVisible(){if(this.persistent)return true;return this.hostElement.matches(":hover, :focus-within")}checkFocusClass(){if(!this.shouldBeVisible)return;const t=!!this.findFocusVisibleElement(document.activeElement);this.focusClass=t?"has-keyboard-focus":"has-generic-focus";if(t)return}hideTooltip(){if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}animationEndHandler(){this.animationEndCount=this.animationEndCount+1;const{focusClass:t,animationEndCount:o}=this;if(t==="has-generic-focus-out"\|\|t==="has-generic-focus"&&o===4){this.focusClass=null;this.animationEndCount=0}}findFocusVisibleElement(t){if(!t)return;if(t.shadowRoot)t=this.findFocusVisibleElement(t.shadowRoot.activeElement);return(t===null\|\|t===void 0?void 0:t.matches(":focus-visible"))?t:null}keyUpHandler(t){switch(t.key){case"Esc":case"Escape":this.hideTooltip();break}}focusCaptureHandler(){this.checkFocusClass()}focusHandler(t){if(!r(t,this.hostElement))return;if(!this.focusable)return;this.tooltipElement.focus()}focusOutHandler(){if(this.shouldBeVisible)return;if(this.focusClass==="has-generic-focus")this.focusClass="has-generic-focus-out";else this.focusClass=null}render(){const{focusClass:t}=this;const i=["tooltip"];if(t)i.push(t);return this.label?o("div",{tabindex:this.focusable?0:undefined,ref:t=>this.tooltipElement=t,class:i.join(" "),"aria-label":this.label,onAnimationEnd:()=>this.animationEndHandler(),role:"tooltip","test-id":"tooltipContainer"},o("slot",null)):o("slot",null)}get hostElement(){return i(this)}};n.style=a;export{n as q2_tooltip};
2	+ //# sourceMappingURL=p-0cade28b.entry.js.map