q2-tecton-elements 1.63.2 → 1.64.0

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

@@ -1 +1 @@
-{"version":3,"file":"q2-textarea.entry.cjs.js","sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n    font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\nlabel {\n    --comp-label-padding: #{var-list(\n            --tct-textarea-label-padding,\n            unquote(\n                '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n            )\n        )};\n    --comp-label-margin: #{var-list(\n            --tct-textarea-label-margin,\n            unquote(\n                '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    display: block;\n    padding: var(--comp-label-padding);\n    margin: var(--comp-label-margin);\n    color: var-list(var-prefixer(textarea-label-font-color), inherit);\n    font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n    text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n    letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n    transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n    .has-error & {\n        color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-hover-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-hover-label-font-color,\n                --tct-textarea-label-font-color,\n                inherit\n            );\n        }\n    }\n\n    :host(:focus-within) & {\n        color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n    }\n\n    :host(:focus-within) .has-error & {\n        color: var-list(\n            --tct-textarea-error-focus-label-font-color,\n            var-prefixer(textarea-error-label-font-color),\n            --tct-textarea-focus-label-font-color,\n            var-prefixer(textarea-label-font-color),\n            inherit\n        );\n    }\n}\n\n.optional-tag {\n    --comp-label-optional-margin: #{var-list(\n            --tct-textarea-label-optional-margin,\n            unquote(\n                '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    margin: var(--comp-label-optional-margin);\n    color: var-list(\n        var-prefixer(textarea-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    height: 100%;\n    --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n    --comp-textarea-border-top-left-radius: #{var-list(\n            var-prefixer(textarea-border-top-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-top-right-radius: #{var-list(\n            var-prefixer(textarea-border-top-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-right-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-left-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n        var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n        var(--comp-textarea-border-bottom-left-radius);\n    --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n        var-list(var-prefixer(textarea-border-right-width), 1px)\n        var-list(var-prefixer(textarea-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-border-left-width), 1px)};\n    --comp-textarea-icon-clearance: 34px;\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n        opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n    }\n}\n\n.content-container {\n    --comp-textarea-min-height: 46px;\n    --comp-textarea-min-width: 150px;\n    position: relative;\n    display: inline-block;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n    :host(:not([cols])) & {\n        width: 100%;\n    }\n}\n\ntextarea {\n    --comp-textarea-padding: #{var-list(\n            --tct-textarea-padding,\n            unquote(\n                '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n            )\n        )};\n    --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n    --comp-textarea-border-color: #{var-list(\n            var-prefixer(textarea-border-color),\n            var-prefixer(input-border-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-textarea-background: #{var-list(\n            --tct-textarea-background,\n            var-prefixer(textarea-bg),\n            --tct-input-background,\n            var-prefixer(input-bg),\n            --t-gray-14,\n            #fcfcfd\n        )};\n    --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n    --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n        var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n    resize: none;\n    height: 100%;\n    -webkit-appearance: none;\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    padding: var(--comp-textarea-padding);\n    backdrop-filter: var(--comp-textarea-backdrop-filter);\n    background: var(--comp-textarea-background);\n    color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n    border-width: var(--comp-textarea-border-width);\n    border-style: solid;\n    border-color: var(--comp-textarea-border-color);\n    border-radius: var(--comp-textarea-border-radius);\n    box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n    scrollbar-width: thin;\n    scrollbar-color: var(--t-a11y-gray-color) transparent;\n    --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    transition:\n        background var(--comp-textarea-tween),\n        backdrop-filter var(--comp-textarea-tween),\n        border-width var(--comp-textarea-tween),\n        border-color var(--comp-textarea-tween),\n        box-shadow var(--comp-textarea-tween);\n\n    &::-webkit-scrollbar {\n        width: var(--app-scale-1x);\n        height: var(--app-scale-1x);\n        margin: var(--app-scale-1x);\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--t-a11y-gray-color);\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &:not([cols]) {\n        width: 100%;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n        backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n        border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n    }\n\n    &:hover {\n        border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-hover-border-color,\n                var-prefixer(textarea-error-border-color),\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-hover-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-hover-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-hover-background,\n                --tct-textarea-error-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-hover-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-hover-box-shadow,\n                --comp-textarea-hover-ring\n            );\n        }\n    }\n\n    &:focus {\n        border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-focus-border-color,\n                --tct-textarea-error-border-color,\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-focus-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-focus-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-focus-background,\n                --tct-textarea-error-background,\n                --tct-textarea-focus-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-focus-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-focus-box-shadow,\n                --const-double-focus-ring\n            );\n        }\n    }\n    &:focus-visible {\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n    }\n\n    &::placeholder {\n        color: var-list(\n            var-prefixer(textarea-placeholder-font-color),\n            --t-input-placeholder-font-color,\n            --tct-gray-7,\n            --app-gray-7,\n            --tct-gray-d1,\n            --app-gray-d1,\n            #666666\n        );\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    &.resize-vertical-auto {\n        overflow: hidden;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n\n        &:not(:focus) {\n            border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        }\n    }\n}\n\nq2-icon {\n    margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n    margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n    pointer-events: none;\n    position: absolute;\n    top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n    color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n    right: 0;\n    margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n    --tct-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n    --t-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n}\n\n.icon-error {\n    color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n    height: 0px;\n    overflow: hidden;\n    background: var-list(\n        --tct-message-background,\n        --tct-message-bg,\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    box-shadow: var-list(\n        var-prefixer(textarea-message-box-shadow),\n        --tct-box-shadow-1,\n        --app-shadow-1,\n        unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n    );\n    transition: height\n        var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    margin-top: 2px;\n    z-index: 1;\n    position: absolute;\n    width: 100%;\n    color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n    color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(\n        var-prefixer(textarea-max-length-font-size),\n        --tct-font-size-small,\n        --app-font-size-small,\n        12px\n    );\n    position: absolute;\n    right: 0;\n}\n\n.btn-resize {\n    --tct-textarea-resize-icon-padding: calc(\n        calc(\n                #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n                        var-prefixer(textarea-resize-icon-size),\n                        12px\n                    )}\n            ) / 2\n    );\n    width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n    height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n    background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n    stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n    stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n    border: 0;\n    position: absolute;\n    right: var-list(\n        --tct-textarea-resize-right,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    bottom: var-list(\n        --tct-textarea-resize-bottom,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    display: block;\n    padding: var-list(var-prefixer(textarea-resize-icon-padding));\n    font-size: 0;\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([resize='both']) & {\n        cursor: se-resize;\n    }\n\n    :host([resize='vertical']) &,\n    :host([resize='vertical-auto']) & {\n        cursor: s-resize;\n    }\n\n    :host([resize='horizontal']) & {\n        cursor: e-resize;\n    }\n}\n","import {\n    Component,\n    EventEmitter,\n    Prop,\n    Event,\n    Element,\n    Fragment,\n    State,\n    h,\n    Watch,\n    Listen,\n    Method,\n} from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    createGuid,\n    debounce,\n    isEventFromElement,\n    renderLabel,\n    loc,\n    renderMessages,\n    overrideFocus,\n    setMessageHeight,\n} from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. */\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n    // #region Own Properties\n\n    contentContainer?: HTMLDivElement;\n    debouncedScreenReaderCharacterCount = debounce(() => {\n        this.updateScreenReaderCharacterCount();\n    }, 2000);\n    describeByScreenReaderCharacterCount = true;\n    guid = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    textareaField?: HTMLTextAreaElement;\n    valueOnFocus: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    downParams: IDict<number>;\n\n    @State()\n    hasFocus: boolean;\n\n    @State()\n    screenReaderCharacterCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Defines the number of columns displayed in the field.\n     * If not set, the field will be full-width and respond to the window size.\n     */\n    @Prop({ reflect: true })\n    cols: number;\n\n    /** Indicates the field cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Each item in the `errors` array will appear below the input field when the field is focused.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true })\n    hideLabel: boolean;\n\n    /**\n     * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n     * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n     */\n    @Prop({ reflect: true })\n    hideMessages: boolean;\n\n    /**\n     * Each item in the `hints` array will appear below the input field when the field is focused.\n     * @info\n     * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n     * Once all errors are resolved, the hints display the next time the field is focused.\n     * @localizable\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The label that appears above the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n     * Make sure you account for them when setting the `maxlength` value.\n     * @info\n     * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n     */\n    @Prop({ reflect: true, mutable: true })\n    maxlength: number;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user focuses on the field and provides input.\n     * @info\n     * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Indicates how the field is resizable. */\n    @Prop({ reflect: true })\n    resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n\n    /** Defines the number of rows displayed in the field. */\n    @Prop({ reflect: true })\n    rows: number;\n\n    /** Determines whether the field is subject to spell-checking by the underlying browser or OS. */\n    @Prop({ reflect: true })\n    spellcheck: boolean;\n\n    /** The value of the field. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     * @legacyEvent\n     */\n    @Event()\n    input: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('maxlength')\n    maxlengthObserver() {\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get inputDescribedBy() {\n        let describedBy = undefined;\n\n        if (this.showMessages) {\n            describedBy = `${this.inputId}-description`;\n        }\n\n        // Remove screen reader character count from described by after typing\n        // starts to avoid double announcement. It's needed on focus to announce\n        // the character count when field gains focus.\n        if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n            describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n        }\n\n        return describedBy;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        document.removeEventListener('mouseup', this.onMouseUp);\n        this.downParams = null;\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.describeByScreenReaderCharacterCount = true;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.describeByScreenReaderCharacterCount = false;\n        this.increaseHeightIfOverflowing();\n        if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n        this.input.emit({ value });\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    updateScreenReaderCharacterCount = () => {\n        this.screenReaderCharacterCount = this.value?.length || 0;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderInput() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderMaxLength() {\n        return (\n            <Fragment>\n                <div\n                    class=\"max-length\"\n                    aria-hidden=\"true\"\n                >\n                    {this.value?.length || 0}/{this.maxlength}\n                </div>\n                <div\n                    aria-live=\"polite\"\n                    class=\"sr\"\n                    id={`${this.inputId}-max-length`}\n                    test-id=\"max-length-sr\"\n                >\n                    {loc('tecton.element.textarea.characterCount.screenReader', [\n                        this.screenReaderCharacterCount,\n                        this.maxlength,\n                    ])}\n                </div>\n            </Fragment>\n        );\n    }\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {renderLabel(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.renderInput()}\n                    {this.maxlength ? this.renderMaxLength() : ''}\n                    {renderMessages(this)}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["debounce","createGuid","setMessageHeight","overrideFocus","isEventFromElement","h","loc","Fragment","renderLabel","renderMessages"],"mappings":"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"}
+{"version":3,"file":"q2-textarea.entry.cjs.js","sources":["src/components/q2-textarea/q2-textarea.scss?tag=q2-textarea&encapsulation=shadow","src/components/q2-textarea/q2-textarea.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-textarea-margin: #{var-list(var-prefixer(textarea-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(textarea-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-textarea-margin, --comp-default-textarea-margin);\n    font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n    font-weight: var-list(var-prefixer(textarea-font-weight), 400);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\nlabel {\n    --comp-label-padding: #{var-list(\n            --tct-textarea-label-padding,\n            unquote(\n                '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n            )\n        )};\n    --comp-label-margin: #{var-list(\n            --tct-textarea-label-margin,\n            unquote(\n                '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    display: block;\n    padding: var(--comp-label-padding);\n    margin: var(--comp-label-margin);\n    color: var-list(var-prefixer(textarea-label-font-color), inherit);\n    font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n    text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n    letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), inherit);\n    transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n    .has-error & {\n        color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n    }\n\n    :hover & {\n        color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n        .has-error & {\n            color: var-list(\n                --tct-textarea-error-hover-label-font-color,\n                var-prefixer(textarea-error-label-font-color),\n                --tct-textarea-hover-label-font-color,\n                --tct-textarea-label-font-color,\n                inherit\n            );\n        }\n    }\n\n    :host(:focus-within) & {\n        color: var-list(--tct-textarea-focus-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n    }\n\n    :host(:focus-within) .has-error & {\n        color: var-list(\n            --tct-textarea-error-focus-label-font-color,\n            var-prefixer(textarea-error-label-font-color),\n            --tct-textarea-focus-label-font-color,\n            var-prefixer(textarea-label-font-color),\n            inherit\n        );\n    }\n}\n\n.optional-tag {\n    --comp-label-optional-margin: #{var-list(\n            --tct-textarea-label-optional-margin,\n            unquote(\n                '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n            )\n        )};\n    margin: var(--comp-label-optional-margin);\n    color: var-list(\n        var-prefixer(textarea-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    height: 100%;\n    --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 4px)};\n    --comp-textarea-border-top-left-radius: #{var-list(\n            var-prefixer(textarea-border-top-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-top-right-radius: #{var-list(\n            var-prefixer(textarea-border-top-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-right-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-right-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-bottom-left-radius: #{var-list(\n            var-prefixer(textarea-border-bottom-left-radius),\n            --comp-default-border-radius\n        )};\n    --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n        var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n        var(--comp-textarea-border-bottom-left-radius);\n    --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n        var-list(var-prefixer(textarea-border-right-width), 1px)\n        var-list(var-prefixer(textarea-border-bottom-width), 1px)\n        var-list(var-prefixer(textarea-border-left-width), 1px)};\n    --comp-textarea-icon-clearance: 34px;\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n        opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        backdrop-filter: var-list(--tct-textarea-disabled-backdrop-filter, --comp-input-backdrop-filter);\n    }\n}\n\n.content-container {\n    --comp-textarea-min-height: 46px;\n    --comp-textarea-min-width: 150px;\n    position: relative;\n    display: inline-block;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n    :host(:not([cols])) & {\n        width: 100%;\n    }\n}\n\ntextarea {\n    --comp-textarea-padding: #{var-list(\n            --tct-textarea-padding,\n            unquote(\n                '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n            )\n        )};\n    --comp-textarea-backdrop-filter: #{var-list(--tct-textarea-backdrop-filter, none)};\n    --comp-textarea-border-color: #{var-list(\n            var-prefixer(textarea-border-color),\n            var-prefixer(input-border-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-textarea-background: #{var-list(\n            --tct-textarea-background,\n            var-prefixer(textarea-bg),\n            --tct-input-background,\n            var-prefixer(input-bg),\n            --t-gray-14,\n            #fcfcfd\n        )};\n    --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n    --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n        var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n    resize: none;\n    height: 100%;\n    -webkit-appearance: none;\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n    min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n    padding: var(--comp-textarea-padding);\n    backdrop-filter: var(--comp-textarea-backdrop-filter);\n    background: var(--comp-textarea-background);\n    color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n    border-width: var(--comp-textarea-border-width);\n    border-style: solid;\n    border-color: var(--comp-textarea-border-color);\n    border-radius: var(--comp-textarea-border-radius);\n    box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n    scrollbar-width: thin;\n    scrollbar-color: var(--t-a11y-gray-color) transparent;\n    --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    transition:\n        background var(--comp-textarea-tween),\n        backdrop-filter var(--comp-textarea-tween),\n        border-width var(--comp-textarea-tween),\n        border-color var(--comp-textarea-tween),\n        box-shadow var(--comp-textarea-tween);\n\n    &::-webkit-scrollbar {\n        width: var(--app-scale-1x);\n        height: var(--app-scale-1x);\n        margin: var(--app-scale-1x);\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: var(--t-a11y-gray-color);\n        border-radius: 2px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &:not([cols]) {\n        width: 100%;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n        backdrop-filter: var-list(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));\n        border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n    }\n\n    &:hover {\n        border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-hover-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n        box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-hover-border-color,\n                var-prefixer(textarea-error-border-color),\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-hover-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-hover-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-hover-background,\n                --tct-textarea-error-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-hover-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-hover-box-shadow,\n                --comp-textarea-hover-ring\n            );\n        }\n    }\n\n    &:focus {\n        border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n        backdrop-filter: var-list(--tct-textarea-focus-backdrop-filter, --comp-textarea-backdrop-filter);\n        background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n\n        .has-error & {\n            border-color: var-list(\n                --tct-textarea-error-focus-border-color,\n                --tct-textarea-error-border-color,\n                --const-stoplight-alert,\n                #d20a0a\n            );\n            backdrop-filter: var-list(\n                --tct-textarea-error-focus-backdrop-filter,\n                --tct-textarea-error-backdrop-filter,\n                --tct-textarea-focus-backdrop-filter,\n                --comp-textarea-backdrop-filter\n            );\n            background: var-list(\n                --tct-textarea-error-focus-background,\n                --tct-textarea-error-background,\n                --tct-textarea-focus-background,\n                --comp-textarea-background\n            );\n            box-shadow: var-list(\n                --tct-textarea-error-focus-box-shadow,\n                --tct-textarea-error-box-shadow,\n                --tct-textarea-focus-box-shadow,\n                --const-double-focus-ring\n            );\n        }\n    }\n    &:focus-visible {\n        box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n    }\n\n    &::placeholder {\n        color: var-list(\n            var-prefixer(textarea-placeholder-font-color),\n            --t-input-placeholder-font-color,\n            --tct-gray-7,\n            --app-gray-7,\n            --tct-gray-d1,\n            --app-gray-d1,\n            #666666\n        );\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    &.resize-vertical-auto {\n        overflow: hidden;\n    }\n\n    .has-error & {\n        padding-right: var(--comp-textarea-icon-clearance);\n\n        &:not(:focus) {\n            border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #d20a0a);\n        }\n    }\n}\n\nq2-icon {\n    margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n    margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n    pointer-events: none;\n    position: absolute;\n    top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n    color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n    right: 0;\n    margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n    --tct-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n    --t-icon-stroke-primary: #{var-list(\n            var-prefixer(textarea-icon-stroke-primary),\n            var-prefixer(gray-9),\n            --tct-gray,\n            --app-gray,\n            #999999\n        )};\n}\n\n.icon-error {\n    color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n    --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n}\n\n.messages-container {\n    height: 0px;\n    overflow: hidden;\n    background: var-list(\n        --tct-message-background,\n        --tct-message-bg,\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    box-shadow: var-list(\n        var-prefixer(textarea-message-box-shadow),\n        --tct-box-shadow-1,\n        --app-shadow-1,\n        unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n    );\n    transition: height\n        var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    margin-top: 2px;\n    z-index: 1;\n    position: absolute;\n    width: 100%;\n    color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n    color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(\n        var-prefixer(textarea-max-length-font-size),\n        --tct-font-size-small,\n        --app-font-size-small,\n        12px\n    );\n    position: absolute;\n    right: 0;\n}\n\n.btn-resize {\n    --tct-textarea-resize-icon-padding: calc(\n        calc(\n                #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n                        var-prefixer(textarea-resize-icon-size),\n                        12px\n                    )}\n            ) / 2\n    );\n    width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n    height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n    background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n    stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n    stroke-width: var-list(var-prefixer(textarea-resize-stroke-width), 1);\n    border: 0;\n    position: absolute;\n    right: var-list(\n        --tct-textarea-resize-right,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    bottom: var-list(\n        --tct-textarea-resize-bottom,\n        calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px)\n    );\n    display: block;\n    padding: var-list(var-prefixer(textarea-resize-icon-padding));\n    font-size: 0;\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([resize='both']) & {\n        cursor: se-resize;\n    }\n\n    :host([resize='vertical']) &,\n    :host([resize='vertical-auto']) & {\n        cursor: s-resize;\n    }\n\n    :host([resize='horizontal']) & {\n        cursor: e-resize;\n    }\n}\n","import {\n    Component,\n    EventEmitter,\n    Prop,\n    Event,\n    Element,\n    Fragment,\n    State,\n    h,\n    Watch,\n    Listen,\n    Method,\n} from '@stencil/core';\nimport {\n    createGuid,\n    debounce,\n    isEventFromElement,\n    renderLabel,\n    loc,\n    renderMessages,\n    overrideFocus,\n    setMessageHeight,\n} from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. */\n@Component({ tag: 'q2-textarea', shadow: true, styleUrl: 'q2-textarea.scss' })\nexport class Q2Textarea {\n    // #region Own Properties\n\n    contentContainer?: HTMLDivElement;\n    debouncedScreenReaderCharacterCount = debounce(() => {\n        this.updateScreenReaderCharacterCount();\n    }, 2000);\n    describeByScreenReaderCharacterCount = true;\n    guid = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    textareaField?: HTMLTextAreaElement;\n    valueOnFocus: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    downParams: Record<string, number>;\n\n    @State()\n    hasFocus: boolean;\n\n    @State()\n    screenReaderCharacterCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Defines the number of columns displayed in the field.\n     * If not set, the field will be full-width and respond to the window size.\n     */\n    @Prop({ reflect: true })\n    cols: number;\n\n    /** Indicates the field cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Each item in the `errors` array will appear below the input field when the field is focused.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true })\n    hideLabel: boolean;\n\n    /**\n     * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above).\n     * Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).\n     */\n    @Prop({ reflect: true })\n    hideMessages: boolean;\n\n    /**\n     * Each item in the `hints` array will appear below the input field when the field is focused.\n     * @info\n     * The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display.\n     * Once all errors are resolved, the hints display the next time the field is focused.\n     * @localizable\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The label that appears above the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison.\n     * Make sure you account for them when setting the `maxlength` value.\n     * @info\n     * Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.\n     */\n    @Prop({ reflect: true, mutable: true })\n    maxlength: number;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user focuses on the field and provides input.\n     * @info\n     * Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Indicates how the field is resizable. */\n    @Prop({ reflect: true })\n    resize: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto' = 'vertical';\n\n    /** Defines the number of rows displayed in the field. */\n    @Prop({ reflect: true })\n    rows: number;\n\n    /** Determines whether the field is subject to spell-checking by the underlying browser or OS. */\n    @Prop({ reflect: true })\n    spellcheck: boolean;\n\n    /** The value of the field. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the field loses focus after the value has been changed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the field value is updated.\n     * @legacyEvent\n     */\n    @Event()\n    input: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        if (isNaN(this.maxlength)) {\n            this.maxlength = undefined;\n        }\n\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onHostElementFocus(event: Event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.textareaField.focus();\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.oninput) {\n            this.value = event.detail.value;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n     *\n     * This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n     * to trigger the `change` event, move the focus to another element after calling this method.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        const { textareaField } = this;\n        textareaField.focus();\n        textareaField.value = value;\n        textareaField.dispatchEvent(new InputEvent('input'));\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('cols')\n    colsObserver() {\n        this.contentContainer.style.width = null;\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('hints')\n    hintsObserver() {\n        this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n    }\n\n    @Watch('maxlength')\n    maxlengthObserver() {\n        if (this.maxlength) {\n            this.updateScreenReaderCharacterCount();\n        }\n    }\n\n    @Watch('rows')\n    rowsObserver() {\n        this.contentContainer.style.height = null;\n    }\n\n    @Watch('value')\n    valueObserver() {\n        const { maxlength, value = '' } = this;\n        if (!maxlength) return;\n\n        const truncatedValue = value.substr(0, maxlength);\n        if (truncatedValue === value) return;\n\n        this.change.emit({ value: truncatedValue });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasError() {\n        return Array.isArray(this.errors) && this.errors.length > 0;\n    }\n\n    get inputDescribedBy() {\n        let describedBy = undefined;\n\n        if (this.showMessages) {\n            describedBy = `${this.inputId}-description`;\n        }\n\n        // Remove screen reader character count from described by after typing\n        // starts to avoid double announcement. It's needed on focus to announce\n        // the character count when field gains focus.\n        if (this.maxlength && this.describeByScreenReaderCharacterCount) {\n            describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;\n        }\n\n        return describedBy;\n    }\n\n    get inputId() {\n        return `input-guid-${this.guid}`;\n    }\n\n    get messages(): string[] {\n        return (\n            (this.errors && this.errors.length > 0 && this.errors) ||\n            (this.hints && this.hints.length > 0 && this.hints) ||\n            []\n        );\n    }\n\n    get showMessages() {\n        return this.messages.length > 0 && !this.hideMessages;\n    }\n\n    get showResize() {\n        const { resize } = this;\n        return resize && resize !== 'none';\n    }\n\n    get wrapperClasses() {\n        const errorClass = this.hasError ? ' has-error' : '';\n        const valueClass = !!this.value ? ' has-value' : '';\n        const focusClass = this.hasFocus ? ' has-focus' : '';\n\n        return `field-container${errorClass}${valueClass}${focusClass}`;\n    }\n\n    checkCols = () => {\n        const { contentContainer, cols, textareaField, resize } = this;\n\n        if (!cols || ['none', 'vertical'].includes(resize)) return;\n        contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n        textareaField.removeAttribute('cols');\n    };\n\n    checkRows = () => {\n        const { contentContainer, rows, textareaField, resize } = this;\n\n        if (!rows || ['none', 'horizontal'].includes(resize)) return;\n        contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n        textareaField.removeAttribute('rows');\n    };\n\n    getBorderOffset = () => {\n        const computedStyle = window.getComputedStyle(this.textareaField);\n\n        return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n    };\n\n    increaseHeightIfOverflowing = () => {\n        const { scrollHeight } = this.textareaField;\n        if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n            // need to account for border width because scrollHeight does not include it\n            const newHeight = scrollHeight + this.getBorderOffset();\n            this.contentContainer.style.height = `${newHeight}px`;\n        }\n    };\n\n    isOverflowingVertically = () => {\n        const { clientHeight, scrollHeight } = this.textareaField;\n\n        return scrollHeight > clientHeight;\n    };\n\n    onMouseDown = (event: MouseEvent) => {\n        const { contentContainer } = this;\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: event.clientX,\n            y: event.clientY,\n        };\n        document.addEventListener('mousemove', this.onMouseMove);\n        document.addEventListener('mouseup', this.onMouseUp);\n    };\n\n    onMouseMove = (event: MouseEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onMouseUp = () => {\n        document.removeEventListener('mousemove', this.onMouseMove);\n        document.removeEventListener('mouseup', this.onMouseUp);\n        this.downParams = null;\n    };\n\n    onTextareaBlur = () => {\n        const {\n            valueOnFocus,\n            textareaField: { value },\n        } = this;\n        this.describeByScreenReaderCharacterCount = true;\n        this.hasFocus = false;\n        setMessageHeight(this);\n        if (valueOnFocus !== value) this.change.emit({ value });\n    };\n\n    onTextareaChange = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n\n        this.change.emit({ value });\n    };\n\n    onTextareaFocus = () => {\n        this.hasFocus = true;\n        this.valueOnFocus = this.value;\n        setMessageHeight(this);\n    };\n\n    onTextareaInput = (event: InputEvent) => {\n        event.stopPropagation();\n        const value = (event.target as HTMLTextAreaElement).value;\n        this.describeByScreenReaderCharacterCount = false;\n        this.increaseHeightIfOverflowing();\n        if (this.maxlength) this.debouncedScreenReaderCharacterCount();\n        this.input.emit({ value });\n    };\n\n    onTouchMove = (event: TouchEvent) => {\n        this.setHeight(event);\n        this.setWidth(event);\n    };\n\n    onTouchStart = (event: TouchEvent) => {\n        if (event.touches.length !== 1) return;\n\n        event.preventDefault();\n\n        const { contentContainer } = this;\n        const firstTouch = event.touches[0];\n\n        this.downParams = {\n            width: contentContainer.offsetWidth,\n            height: contentContainer.offsetHeight,\n            x: firstTouch.pageX,\n            y: firstTouch.pageY,\n        };\n\n        document.addEventListener('touchmove', this.onTouchMove);\n        document.addEventListener('touchend', this.onTouchMove);\n    };\n\n    setHeight(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { height, y },\n        } = this;\n        const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n        if (!resizeY) return;\n\n        const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n        const newHeight = height - (y - eventY);\n        // If 'vertical-auto', change height if the new height is greater\n        // than the current height or the textarea is not overflowing.\n        // Otherwise, change height regardless of the new height.\n        if (\n            resize !== 'vertical-auto' ||\n            newHeight > height ||\n            (resize === 'vertical-auto' && !this.isOverflowingVertically())\n        ) {\n            contentContainer.style.height = `${newHeight}px`;\n        }\n    }\n\n    setWidth(event: MouseEvent | TouchEvent) {\n        const {\n            contentContainer,\n            resize,\n            downParams: { width, x },\n        } = this;\n\n        const resizeX = ['both', 'horizontal'].includes(resize);\n\n        if (!resizeX) return;\n        const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n        const newWidth = width - (x - eventX);\n        contentContainer.style.width = `${newWidth}px`;\n    }\n\n    updateScreenReaderCharacterCount = () => {\n        this.screenReaderCharacterCount = this.value?.length || 0;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderInput() {\n        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n        return (\n            <div class=\"input-container\">\n                <textarea\n                    id={this.inputId}\n                    class={textareaClasses}\n                    placeholder={(this.placeholder && loc(this.placeholder)) || undefined}\n                    test-id=\"inputField\"\n                    maxLength={this.maxlength}\n                    aria-describedby={this.inputDescribedBy}\n                    aria-invalid={`${this.hasError}`}\n                    aria-required={`${!this.optional}`}\n                    aria-label={this.hideLabel && this.label}\n                    spellcheck={this.spellcheck}\n                    rows={this.rows || 3}\n                    cols={this.cols}\n                    value={this.value}\n                    ref={el => (this.textareaField = el)}\n                    readonly={!!this.readonly}\n                    disabled={!!this.disabled}\n                    maxlength={this.maxlength}\n                    onInput={this.onTextareaInput}\n                    onChange={this.onTextareaChange}\n                    onFocus={this.onTextareaFocus}\n                    onBlur={this.onTextareaBlur}\n                ></textarea>\n                {this.hasError ? (\n                    <q2-icon\n                        type=\"error\"\n                        class=\"icon-error\"\n                    />\n                ) : (\n                    ''\n                )}\n                {this.showResize && (\n                    <button\n                        onMouseDown={this.onMouseDown}\n                        onTouchStart={this.onTouchStart}\n                        class=\"btn-resize\"\n                        aria-label={loc('tecton.element.input.resize')}\n                        tabIndex={-1}\n                    >\n                        <svg\n                            aria-hidden=\"true\"\n                            viewBox=\"0 0 12 12\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n                                fill=\"none\"\n                                stroke-stroke-linecap=\"square\"\n                            />\n                        </svg>\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderMaxLength() {\n        return (\n            <Fragment>\n                <div\n                    class=\"max-length\"\n                    aria-hidden=\"true\"\n                >\n                    {this.value?.length || 0}/{this.maxlength}\n                </div>\n                <div\n                    aria-live=\"polite\"\n                    class=\"sr\"\n                    id={`${this.inputId}-max-length`}\n                    test-id=\"max-length-sr\"\n                >\n                    {loc('tecton.element.textarea.characterCount.screenReader', [\n                        this.screenReaderCharacterCount,\n                        this.maxlength,\n                    ])}\n                </div>\n            </Fragment>\n        );\n    }\n\n    render() {\n        return (\n            <div class={this.wrapperClasses}>\n                {renderLabel(this)}\n                <div\n                    class=\"content-container\"\n                    ref={el => (this.contentContainer = el)}\n                >\n                    {this.renderInput()}\n                    {this.maxlength ? this.renderMaxLength() : ''}\n                    {renderMessages(this)}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["debounce","createGuid","setMessageHeight","overrideFocus","isEventFromElement","h","loc","Fragment","renderLabel","renderMessages"],"mappings":"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"}

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

@@ -53,9 +53,9 @@ const TectonTabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '8f8c9357ad20e57132580f6df244300f95fbffae', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: '827f4251729283b2651e7897b2a2ba50a99f0dd8' }, index.h("slot", { key: 'a5c95ad4d031c2424059c44241ac92761e6380bd', name: "loading-wrapper" }), index.h("iframe", { key: 'e3f3274d9afe4b10d20205d13394332818054a44', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (index.h("div", { key: '2d9e4fab0cae1157805d7aae94cff3d7aa15f01b', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: '2fc1c3c3e210ad95ffbe3295bd8b9196e4fda769' }, index.h("slot", { key: '403997c87dcfad98cfbdd64989e8c4c8c51676ec', name: "loading-wrapper" }), index.h("iframe", { key: '8f0f609cc2302617876ac5be0adf1eda57ac7763', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (index.h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), index.h("div", { key: 'a04b28ea2db895e185aec4992209ee7284033109', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'f274657a787e3fa3a0b2144cda381ccec50c30b5' }))));
+        }))) : (''))), index.h("div", { key: 'eef49a2d9891ddd78781565d39b06d1ded0a59d9', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: '0dd19051231d87920960cb2e2906de90f90740ec' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/collection-manifest.json

@@ -48,6 +48,7 @@
     "components/q2-message/q2-message.js",
     "components/q2-meter/q2-meter.js",
     "components/q2-modal/q2-modal.js",
+    "components/q2-mutation-observer/q2-mutation-observer.js",
     "components/q2-optgroup/q2-optgroup.js",
     "components/q2-option/q2-option.js",
     "components/q2-pagination/q2-pagination.js",
@@ -55,6 +56,7 @@
     "components/q2-relative-time/q2-relative-time.js",
     "components/q2-resize-observer/q2-resize-observer.js",
     "components/q2-section/q2-section.js",
+    "components/q2-section-container/q2-section-container.js",
     "components/q2-stepper/q2-stepper.js",
     "components/q2-stepper-vertical/q2-stepper-vertical.js",
     "components/q2-tab-container/q2-tab-container.js",

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

@@ -207,7 +207,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '824e9745d4fcbc615fa25e27d1535f5055a202b0', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'dea5271046a6b8ed194852f594eb6e079ab7e275', class: interiorClasses }, showHeader && (h("header", { key: '2dc81c18b96781198804fa50f991e6e30bdf6ace' }, h("div", { key: 'e74683b9676b01c00fc939848c67e5138148363f', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'd4feacb931e73ab3648983ac3bbfdc2d2df10811', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'dc8707647ff70ea557925763470e566fe751bc30', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '675fc6c16c4337aa6b27051a9196bec5d4ea4043' }, data.description), RenderContent && h(RenderContent, { key: 'edc8ba2871db46e57bb767d1110dfff2366da0cc', data: this.data }))));
+        return (h("dialog", { key: '87ea7f07c77147abf8ff1b09a2208055fdfd75f6', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'f0d10014e0268334fbe9239bf5b4c8c86d49f914', class: interiorClasses }, showHeader && (h("header", { key: '7a7d80c1ebc591c403b1252ef7ae266d7da9efa8' }, h("div", { key: '73c89a86bb5ce4bd80b8ab9cfecf307da9cfcd75', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'a5b1cd0932b91612d62b483c5c3a051bf504abac', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'cf900dcf799fe6a6262b0fd7c80e3a59bc3ec856', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: 'd1b77498bcd899c49b2d4ee26c1daed131ae6cfa' }, data.description), RenderContent && h(RenderContent, { key: 'ec7bd6cdf38ad3692b1a4046377c7e6728498ba9', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -233,8 +233,8 @@ export class Q2ActionSheet {
                     "references": {
                         "ActionSheetData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/utility/action-sheet",
-                            "id": "../q2-tecton-common/lib/utility/action-sheet.d.ts::ActionSheetData"
+                            "path": "q2-tecton-common/lib/types/action-sheet",
+                            "id": "../q2-tecton-common/lib/types/action-sheet.d.ts::ActionSheetData"
                         }
                     }
                 },
@@ -310,8 +310,8 @@ export class Q2ActionSheet {
                     "references": {
                         "ActionSheetListCloseData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/utility/action-sheet",
-                            "id": "../q2-tecton-common/lib/utility/action-sheet.d.ts::ActionSheetListCloseData"
+                            "path": "q2-tecton-common/lib/types/action-sheet",
+                            "id": "../q2-tecton-common/lib/types/action-sheet.d.ts::ActionSheetListCloseData"
                         }
                     }
                 }
@@ -352,8 +352,8 @@ export class Q2ActionSheet {
                         },
                         "ActionSheetListCloseData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/utility/action-sheet",
-                            "id": "../q2-tecton-common/lib/utility/action-sheet.d.ts::ActionSheetListCloseData"
+                            "path": "q2-tecton-common/lib/types/action-sheet",
+                            "id": "../q2-tecton-common/lib/types/action-sheet.d.ts::ActionSheetListCloseData"
                         }
                     },
                     "return": "Promise<void>"

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

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

package/dist/collection/components/q2-avatar/q2-avatar.css

@@ -69,11 +69,24 @@ button {
 .avatar-img-default {
   display: var(--tct-avatar-display, block);
   object-fit: cover;
-  height: var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));
-  width: var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));
   border-radius: var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));
   border: var(--tct-avatar-border, none);
 }
+.avatar-img.size-small,
+.avatar-img-default.size-small {
+  height: var(--tct-avatar-img-small-size, 24px);
+  width: var(--tct-avatar-img-small-size, 24px);
+}
+.avatar-img.size-medium,
+.avatar-img-default.size-medium {
+  height: var(--tct-avatar-img-medium-size, var(--tct-avatar-img-height, 44px));
+  width: var(--tct-avatar-img-medium-size, var(--tct-avatar-img-width, 44px));
+}
+.avatar-img.size-large,
+.avatar-img-default.size-large {
+  height: var(--tct-avatar-img-large-size, 64px);
+  width: var(--tct-avatar-img-large-size, 64px);
+}
 
 .avatar-img-default {
   background: var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e));
@@ -81,30 +94,63 @@ button {
 
 .avatar-initials {
   display: var(--tct-avatar-display, block);
-  height: var(--tct-avatar-height, 44px);
-  width: var(--tct-avatar-width, 44px);
   backdrop-filter: var(--tct-avatar-backdrop-filter);
   background: var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));
   border-radius: var(--tct-avatar-br, 50%);
   border: var(--tct-avatar-border, none);
 }
+.avatar-initials.size-small {
+  height: var(--tct-avatar-small-size, 24px);
+  width: var(--tct-avatar-small-size, 24px);
+}
+.avatar-initials.size-medium {
+  height: var(--tct-avatar-medium-size, var(--tct-avatar-height, 44px));
+  width: var(--tct-avatar-medium-size, var(--tct-avatar-width, 44px));
+}
+.avatar-initials.size-large {
+  height: var(--tct-avatar-large-size, 64px);
+  width: var(--tct-avatar-large-size, 64px);
+}
 
-.size-1 {
-  --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);
+.size-small.initials-size-1 {
+  --tct-avatar-font-size: var(--tct-avatar-size-1, 30px);
+}
+.size-small.initials-size-2 {
+  --tct-avatar-font-size: var(--tct-avatar-size-2, 24px);
+}
+.size-small.initials-size-3 {
+  --tct-avatar-font-size: var(--tct-avatar-size-3, 20px);
+}
+.size-small.initials-size-4 {
+  --tct-avatar-font-size: var(--tct-avatar-size-4, 15px);
 }
 
-.size-2 {
+.size-medium.initials-size-1 {
+  --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);
+}
+.size-medium.initials-size-2 {
   --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);
 }
-
-.size-3 {
+.size-medium.initials-size-3 {
   --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);
 }
-
-.size-4 {
+.size-medium.initials-size-4 {
   --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);
 }
 
+.size-large.initials-size-1 {
+  --tct-avatar-font-size: var(--tct-avatar-size-1, 90px);
+}
+.size-large.initials-size-2 {
+  --tct-avatar-font-size: var(--tct-avatar-size-2, 72px);
+}
+.size-large.initials-size-3 {
+  --tct-avatar-font-size: var(--tct-avatar-size-3, 60px);
+}
+.size-large.initials-size-4 {
+  --tct-avatar-font-size: var(--tct-avatar-size-4, 45px);
+}
+
 text {
   fill: var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));
   font-weight: var(--tct-avatar-font-weight, 200);
@@ -112,8 +158,6 @@ text {
 }
 
 .fallback {
-  height: var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));
-  width: var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));
   border-radius: var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));
   border: var(--tct-avatar-border, none);
   background: var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));
@@ -121,6 +165,18 @@ text {
   align-items: center;
   justify-content: center;
 }
+.fallback.size-small {
+  height: var(--tct-avatar-fallback-small-size, 24px);
+  width: var(--tct-avatar-fallback-small-size, 24px);
+}
+.fallback.size-medium {
+  height: var(--tct-avatar-fallback-size, var(--tct-avatar-height, 44px));
+  width: var(--tct-avatar-fallback-size, var(--tct-avatar-width, 44px));
+}
+.fallback.size-large {
+  height: var(--tct-avatar-fallback-large-size, 64px);
+  width: var(--tct-avatar-fallback-large-size, 64px);
+}
 
 q2-icon {
   --tct-icon-size: var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));

package/dist/collection/components/q2-avatar/q2-avatar.js

@@ -9,6 +9,8 @@ export class Q2Avatar {
         // #region Public Property API
         /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */
         this.icon = 'person';
+        /**  Determines how large to make the avatar */
+        this.size = 'medium';
         this.onError = () => {
             this.badSrc = true;
         };
@@ -50,7 +52,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'ac6b4cc52f8ab6d73bddd7a85abec6c2d707ffb3' }, showImg && (h("img", { key: 'bddaa710f833759cd540e8e2ef5e70d5071fa577', class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '59809fcf7033849ce48accabf7417f3801dcd93c', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '07d2208b61a92aa52ec48298abce49aac828de7b', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '82287d1b62e116f8f4ed12f62685a596be3ac6eb', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '27ff4ba4c6b85244461bd3d989234de9a3946df1', type: this.icon })))));
+        return (h("div", { key: '513e3f0c9660f6e9a3ffb15952556d6e892e18fd' }, showImg && (h("img", { key: '4e40871bb5ef32baf3e2992e72055f6d46edfd52', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'} size-${this.size}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'd576432a916c998130575ca575c98bc8fd1251d2', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${this.size} initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'b57ff30a89b4dfd721863d69be7567882fa780c2', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '6c079512612ccc9f83d9e454f6002fe292e88252', "test-id": "fallbackIcon", class: `fallback size-${this.size}` }, h("q2-icon", { key: '04a349d09b1ceed596f31c05dd13711d593ab14c', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -127,6 +129,26 @@ export class Q2Avatar {
                 "setter": false,
                 "reflect": true
             },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines how large to make the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
             "src": {
                 "type": "string",
                 "attribute": "src",