q2-tecton-elements 1.35.2 → 1.37.0

package/dist/components/q2-tab-container.js.map

@@ -1 +1 @@
-{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer"],"sources":["./src/components/q2-tab-container/styles.scss?tag=q2-tab-container&encapsulation=shadow","./src/components/q2-tab-container/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin));\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition: color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentColor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(var-prefixer(tab-content-padding), --comp-tab-content-padding);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge';\n\naddSmoothScrollPolyfill();\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({\n    tag: 'q2-tab-container',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class Q2TabContainer implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) type: 'main' | 'section';\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) color: 'alt' | undefined;\n    @Prop({ reflect: true }) noPrint: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @Event() change: EventEmitter;\n    @Event() settled: EventEmitter;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-controls={`tab-pane-${this.guid}-${index}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer"],"sources":["./src/components/q2-tab-container/styles.scss?tag=q2-tab-container&encapsulation=shadow","./src/components/q2-tab-container/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin));\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition: color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentColor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(var-prefixer(tab-content-padding), --comp-tab-content-padding);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge';\n\naddSmoothScrollPolyfill();\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({\n    tag: 'q2-tab-container',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class Q2TabContainer implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) type: 'main' | 'section';\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) color: 'alt' | undefined;\n    @Prop({ reflect: true }) noPrint: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @Event() change: EventEmitter;\n    @Event() settled: EventEmitter;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-controls={`tab-pane-${this.guid}-${index}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-textarea.js

@@ -180,6 +180,18 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
       this.value = event.detail.value;
     }
   }
+  onHostElementInput(event) {
+    if (event.target === this.hostElement && !this.hostElement.oninput) {
+      this.value = event.detail.value;
+    }
+  }
+  /// Methods ///
+  setValue(value) {
+    const { textareaField } = this;
+    textareaField.focus();
+    textareaField.value = value;
+    textareaField.dispatchEvent(new InputEvent('input'));
+  }
   setWidth(event) {
     var _a, _b;
     const { contentContainer, resize, downParams: { width, x }, } = this;
@@ -237,8 +249,9 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
     "errors": [16],
     "hints": [16],
     "hasFocus": [32],
-    "downParams": [32]
-  }, [[0, "focus", "onHostElementFocus"], [0, "change", "onHostElementChange"]]]);
+    "downParams": [32],
+    "setValue": [64]
+  }, [[0, "focus", "onHostElementFocus"], [0, "change", "onHostElementChange"], [0, "input", "onHostElementInput"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/q2-textarea.js.map

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

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-17T02:13:58",
+  "timestamp": "2024-02-22T18:31:17",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.4.2",
@@ -1440,7 +1440,52 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "closePopover",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "closePopover() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "openPopover",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "openPopover() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(value: string | Date) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "typeValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "typeValue(value: string | Date) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -3471,7 +3516,19 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(values: string | string[]) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -4634,7 +4691,52 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "clickCancel",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "clickCancel() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "clickEdit",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "clickEdit() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "clickSave",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "clickSave() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(value: string, options?: { clickSave?: boolean; }) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -5556,7 +5658,30 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "clearValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "clearValue() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(value: string) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -6719,6 +6844,23 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "autoSize",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "auto-size",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "page",
           "type": "number",
@@ -7396,7 +7538,7 @@
         {
           "name": "checked",
           "type": "boolean",
-          "mutable": false,
+          "mutable": true,
           "attr": "checked",
           "reflectToAttr": true,
           "docs": "",
@@ -7542,6 +7684,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "readonly",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "tabIndex",
           "type": "number",
@@ -7793,7 +7951,19 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(value: string) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -8265,7 +8435,52 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "closePopover",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "closePopover() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "openPopover",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "openPopover() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "searchOptions",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "searchOptions(query: string) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(values: string | string[], options?: { closePopover?: boolean; }) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -9523,7 +9738,19 @@
           "required": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setValue(value: string) => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "change",
@@ -9554,6 +9781,11 @@
           "event": "change",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "input",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [],