q2-tecton-elements 1.38.2 → 1.39.0

package/dist/collection/components/q2-chart-donut/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-donut/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TooltipComponent,\n    TooltipComponentOption,\n    LegendComponent,\n    AriaComponent,\n    AriaComponentOption,\n    LegendComponentOption,\n} from 'echarts/components';\nimport { PieChart, PieSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n    TooltipComponentOption | LegendComponentOption | AriaComponentOption | PieSeriesOption\n>;\n@Component({\n    tag: 'q2-chart-donut',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ChartDonut implements ComponentInterface {\n    @Prop({ reflect: true }) chartName: string;\n    @Prop({ reflect: true }) summaryIcon: string;\n    @Prop({ reflect: true }) summaryName: string;\n    @Prop({ mutable: true }) innerRadius: string = '70%';\n    @Prop({ mutable: true }) outerRadius: string = '85%';\n    @Prop() minSliceSize: string = '2.5%';\n    @Prop() selectedOffset: number = 10;\n    @Prop() hoverScaleSize: number = 5;\n    @Prop({ reflect: true }) format: 'currency';\n    @Prop({ reflect: true }) isClickable: boolean;\n    @Prop() data: IDonutChartData[] = [];\n    @Prop() selectedId: string;\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter;\n    @Event() click: EventEmitter;\n    @State() hoveredId: string;\n    isInChangeEvent: boolean;\n    chartContainer: HTMLDivElement;\n    centerButtonElement: HTMLButtonElement;\n    btnElement: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeObserver: ResizeObserver;\n    colors: string[];\n    chart: echarts.ECharts;\n    defaultRecord = { id: null, value: null, name: null };\n\n    /// LifeCycle Hooks ///\n\n    componentDidLoad(): void {\n        const chart = echarts.init(this.chartContainer);\n\n        this.cacheComputedStyles();\n        this.colors = this.getColors();\n\n        this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n        this.resizeObserver.observe(this.hostElement);\n\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n        this.checkSelectedId();\n\n        this.chart = chart;\n        this.selectById(this.selectedId);\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    /// Getters ///\n    get centerData() {\n        const { hoveredId, data } = this;\n        const idToDisplay = hoveredId;\n        const index = this.getIndexById(idToDisplay);\n\n        return idToDisplay\n            ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n            : {\n                  name: loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName'),\n                  icon: this.summaryIcon,\n                  value: data.reduce((acc, cur) => acc + cur.value, 0),\n                  color: null,\n              };\n    }\n\n    /// Helpers\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    displayValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (isNaN(valueAsFloat)) return;\n\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        } else {\n            return Intl.NumberFormat('en-US').format(valueAsFloat);\n        }\n    }\n\n    getCSSProperty(name: string) {\n        let fallback;\n        if (name.startsWith('var(') && name.endsWith(')')) {\n            const regExp = /var\\((.*)\\)/g;\n            const result = regExp.exec(name);\n            const split = result.length >= 2 ? result[1].split(',') : [];\n            name = split[0];\n            fallback = split[1];\n        }\n        let result = this.chartContainerStyles.getPropertyValue(name).trim();\n        if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n        return result || fallback;\n    }\n\n    getIndexById(id: string) {\n        return this.data.findIndex(item => item.id === id);\n    }\n\n    getDataByIndex(index: number) {\n        if (typeof index !== 'number') return;\n        return this.data[index];\n    }\n\n    getDataById(id: string) {\n        if (!id) return;\n        return this.data.find(item => item.id === id);\n    }\n\n    getColors() {\n        const defaultColors = [\n            '--comp-color-1',\n            '--comp-color-2',\n            '--comp-color-3',\n            '--comp-color-4',\n            '--comp-color-5',\n            '--comp-color-6',\n            '--comp-color-7',\n            '--comp-color-8',\n            '--comp-color-9',\n            '--comp-color-10',\n            '--comp-color-11',\n            '--comp-color-12',\n        ];\n\n        return this.data.reduce((acc, cur) => {\n            let color = defaultColors.shift();\n            if (cur.color) color = cur.color;\n\n            acc.push(this.getCSSProperty(color) || color);\n            return acc;\n        }, []);\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        chart.on('mouseover', (params: any) => {\n            this.hoveredId = params.data.id;\n        });\n        chart.on('click', params => {\n            // Don't emit click event when clicking a chart slice\n            params.event.event.stopPropagation();\n        });\n        chart.on('mouseout', () => {\n            this.hoveredId = this.selectedId;\n        });\n        chart.on('selectchanged', (params: any) => {\n            const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n            const data =\n                typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n\n            this.selectedId = data.id;\n            this.isInChangeEvent = true;\n            this.change.emit(data);\n            setTimeout(() => {\n                this.isInChangeEvent = false;\n            }, 0);\n        });\n    }\n\n    cleanData(data: IDonutChartData[]) {\n        const { minSliceSize } = this;\n        const minSize = parseFloat(minSliceSize || '2.5%') / 100;\n\n        const total = data.reduce((acc, cur) => acc + cur.value, 0);\n        const minValue = total * minSize;\n        const newData = data.map(item => {\n            if (item.value < minValue) return { ...item, value: minValue };\n            return item;\n        });\n\n        return newData;\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        return chart.setOption<EChartsOption>({\n            tooltip: {\n                show: false,\n            },\n            legend: {\n                show: false,\n            },\n            aria: {\n                enabled: true,\n            },\n            series: [\n                {\n                    name: this.chartName,\n                    animationType: 'scale',\n                    color: this.colors,\n                    id: 'pie',\n                    type: 'pie',\n                    selectedOffset: this.selectedOffset,\n                    selectedMode: 'single',\n                    radius: [this.innerRadius, this.outerRadius],\n                    label: {\n                        show: false,\n                    },\n                    labelLine: {\n                        show: false,\n                    },\n                    itemStyle: {\n                        borderWidth: 5,\n                        borderColor: this.getCSSProperty('--comp-background-color'),\n                    },\n                    emphasis: {\n                        scaleSize: this.hoverScaleSize,\n                        itemStyle: {\n                            color: 'inherit',\n                        },\n                    },\n                    data: this.cleanData(this.data),\n                },\n            ],\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    /// Watchers ///\n    @Watch('chartName')\n    @Watch('innerRadius')\n    @Watch('outerRadius')\n    @Watch('minSliceSize')\n    @Watch('hoverScaleSize')\n    @Watch('selectedOffset')\n    @Watch('data')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    @Watch('data')\n    dataUpdated() {\n        this.colors = this.getColors();\n    }\n\n    @Watch('innerRadius')\n    innerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (innerRadiusInt >= outerRadiusInt) {\n            this.innerRadius = `${outerRadiusInt - 15}%`;\n        }\n    }\n\n    @Watch('outerRadius')\n    outerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (outerRadiusInt <= innerRadiusInt) {\n            this.outerRadius = `${innerRadiusInt + 15}%`;\n        }\n    }\n\n    @Watch('selectedId')\n    // Function to detect and set a data range (category) as selected\n    // Logc for when ledgends are present, and can set selectedId when ledgend category is clicked\n    // Also can be used by dev to preset\n    checkSelectedId() {\n        if (!!this.selectedId) {\n            this.hoveredId = this.selectedId;\n            // Dispatch action only to befired when chart is rendered\n            if (this.chart) {\n                this.selectById(this.selectedId);\n            }\n        } else {\n            // Dispatch action only to befired when chart is rendered\n            if (this.chart) {\n                this.chart.dispatchAction({\n                    type: 'unselect',\n                    seriesId: 'pie',\n                    dataIndex: this.getIndexById(this.hoveredId),\n                });\n            }\n            this.hoveredId = null;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.isClickable) return;\n        this.centerButtonElement?.focus();\n    }\n\n    /// Methods ///\n    /**\n     * Selects a slice by its provided `id` in the provided `data`.\n     */\n    @Method()\n    async selectById(id: string) {\n        const dataIndex = this.getIndexById(id);\n        if (dataIndex === -1) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Selects a slice by its index in the provided `data`.\n     */\n    @Method()\n    async selectByIndex(index: number) {\n        const dataIndex = this.data[index] ? index : null;\n        if (!dataIndex) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Clears any selected slice.\n     */\n    @Method()\n    async clearSelection() {\n        const { selectedId } = this;\n        if (!selectedId) return;\n\n        this.chart.dispatchAction({\n            type: 'unselect',\n            seriesId: 'pie',\n            dataIndex: this.getIndexById(selectedId),\n        });\n    }\n\n    /// Event Handlers ///\n    onClickElsewhere = (event: Event) => {\n        event.stopPropagation();\n        this.clearSelection();\n    };\n\n    onButtonKeyDown = (event: KeyboardEvent) => {\n        const { selectedId, data } = this;\n        let selectedIndex = this.getIndexById(selectedId) || 0;\n        switch (event.key) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n                event.preventDefault();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedIndex--;\n                if (selectedIndex < 0) selectedIndex = data.length - 1;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedIndex++;\n                if (selectedIndex > data.length - 1) selectedIndex = 0;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'Escape':\n                this.clearSelection();\n                break;\n\n            default:\n                return;\n        }\n    };\n\n    onButtonClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        const { selectedId } = this;\n        const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n        this.click.emit(data);\n    };\n\n    onContainerClick = (event: Event) => {\n        if (this.isInChangeEvent) return;\n        if (!(event.target instanceof HTMLElement)) return;\n        this.clearSelection();\n        event.stopPropagation();\n    };\n\n    /// DOM ///\n    renderCenterBlock() {\n        const { icon, name, value, color } = this.centerData;\n        const { isClickable } = this;\n        const TagName = isClickable ? 'button' : 'div';\n        const displayValue = this.displayValue(value);\n\n        const props = isClickable\n            ? {\n                  onKeyDown: this.onButtonKeyDown,\n                  onClick: this.onButtonClick,\n                  ref: el => (this.centerButtonElement = el),\n                  'aria-describedby': 'center-card-description',\n                  'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n              }\n            : null;\n\n        return (\n            <div\n                class=\"center-card-container\"\n                style={{ width: `calc(${this.innerRadius} - 10%)` }}\n            >\n                {isClickable && (\n                    <div\n                        id=\"center-card-description\"\n                        class=\"sr\"\n                    >\n                        {loc('tecton.element.chartDonut.button.description')}\n                    </div>\n                )}\n                <TagName\n                    class=\"center-card\"\n                    test-id=\"centerCard\"\n                    {...props}\n                >\n                    {!!icon && (\n                        <q2-icon\n                            type={icon}\n                            style={\n                                color && {\n                                    '--tct-icon-stroke-primary': color,\n                                    '--tct-icon-stroke-secondary': color,\n                                    color,\n                                }\n                            }\n                        ></q2-icon>\n                    )}\n                    {!!name && <div class=\"name\">{name}</div>}\n                    {!!value && <div class=\"value\">{displayValue}</div>}\n                </TagName>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class=\"container\">\n                    <div\n                        ref={el => (this.chartContainer = el)}\n                        class=\"chart-container\"\n                        test-id=\"chartContainer\"\n                        onClick={this.onContainerClick}\n                    ></div>\n                    {this.renderCenterBlock()}\n                </div>\n            </click-elsewhere>\n        );\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-donut/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport { EChartsCoreOption } from 'echarts/types/dist/core';\nimport {\n    TooltipComponent,\n    TooltipComponentOption,\n    LegendComponent,\n    AriaComponent,\n    AriaComponentOption,\n    LegendComponentOption,\n} from 'echarts/components';\nimport { PieChart, PieSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n    TooltipComponentOption | LegendComponentOption | AriaComponentOption | PieSeriesOption\n>;\n@Component({\n    tag: 'q2-chart-donut',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ChartDonut implements ComponentInterface {\n    @Prop({ reflect: true }) chartName: string;\n    @Prop({ reflect: true }) summaryIcon: string;\n    @Prop({ reflect: true }) summaryName: string;\n    @Prop({ mutable: true }) innerRadius: string = '70%';\n    @Prop({ mutable: true }) outerRadius: string = '85%';\n    @Prop() minSliceSize: string = '2.5%';\n    @Prop() selectedOffset: number = 10;\n    @Prop() hoverScaleSize: number = 5;\n    @Prop({ reflect: true }) format: 'currency';\n    @Prop({ reflect: true }) isClickable: boolean;\n    @Prop() data: IDonutChartData[] = [];\n    @Prop({ mutable: true }) selectedId: string;\n\n    @Element() hostElement: HTMLElement;\n    /**\n     * Emitted when a slice is selected.\n     */\n    @Event() change: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the center button is clicked.\n     *\n     * Requires the `isClickable` prop to be set to `true`.\n     */\n    @Event() click: EventEmitter<IDonutChartData>;\n    @State() hoveredId: string;\n    isInChangeEvent: boolean;\n    chartContainer: HTMLDivElement;\n    centerButtonElement: HTMLButtonElement;\n    btnElement: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeObserver: ResizeObserver;\n    colors: string[];\n    chart: echarts.ECharts;\n    defaultRecord = { id: null, value: null, name: null };\n\n    /// LifeCycle Hooks ///\n\n    componentDidLoad(): void {\n        const chart = echarts.init(this.chartContainer);\n\n        this.cacheComputedStyles();\n        this.colors = this.getColors();\n\n        this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n        this.resizeObserver.observe(this.hostElement);\n\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n        this.checkSelectedId();\n\n        this.chart = chart;\n        this.selectById(this.selectedId);\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    /// Getters ///\n    get centerData() {\n        const { hoveredId, data } = this;\n        const idToDisplay = hoveredId;\n        const index = this.getIndexById(idToDisplay);\n\n        return idToDisplay\n            ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n            : {\n                  name: loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName'),\n                  icon: this.summaryIcon,\n                  value: data.reduce((acc, cur) => acc + cur.value, 0),\n                  color: null,\n              };\n    }\n\n    /// Helpers\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    displayValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (isNaN(valueAsFloat)) return;\n\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        } else {\n            return Intl.NumberFormat('en-US').format(valueAsFloat);\n        }\n    }\n\n    getCSSProperty(name: string) {\n        let fallback;\n        if (name.startsWith('var(') && name.endsWith(')')) {\n            const regExp = /var\\((.*)\\)/g;\n            const result = regExp.exec(name);\n            const split = result.length >= 2 ? result[1].split(',') : [];\n            name = split[0];\n            fallback = split[1];\n        }\n        let result = this.chartContainerStyles.getPropertyValue(name).trim();\n        if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n        return result || fallback;\n    }\n\n    getIndexById(id: string) {\n        return this.data.findIndex(item => item.id === id);\n    }\n\n    getDataByIndex(index: number) {\n        if (typeof index !== 'number') return;\n        return this.data[index];\n    }\n\n    getDataById(id: string) {\n        if (!id) return;\n        return this.data.find(item => item.id === id);\n    }\n\n    getColors() {\n        const defaultColors = [\n            '--comp-color-1',\n            '--comp-color-2',\n            '--comp-color-3',\n            '--comp-color-4',\n            '--comp-color-5',\n            '--comp-color-6',\n            '--comp-color-7',\n            '--comp-color-8',\n            '--comp-color-9',\n            '--comp-color-10',\n            '--comp-color-11',\n            '--comp-color-12',\n        ];\n\n        return this.data.reduce((acc, cur) => {\n            let color = defaultColors.shift();\n            if (cur.color) color = cur.color;\n\n            acc.push(this.getCSSProperty(color) || color);\n            return acc;\n        }, []);\n    }\n\n    getMinSliceSizeAsAngle() {\n        return (parseFloat(this.minSliceSize) / 100) * 360;\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        chart.on('mouseover', (params: any) => {\n            this.hoveredId = params.data.id;\n        });\n        chart.on('click', params => {\n            // Don't emit click event when clicking a chart slice\n            params.event.event.stopPropagation();\n        });\n        chart.on('mouseout', () => {\n            this.hoveredId = this.selectedId;\n        });\n        chart.on('selectchanged', (params: any) => {\n            const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n            const data =\n                typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n\n            this.selectedId = data.id;\n            this.isInChangeEvent = true;\n            this.change.emit(data);\n            setTimeout(() => {\n                this.isInChangeEvent = false;\n            }, 0);\n        });\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        return chart.setOption<EChartsOption>({\n            tooltip: {\n                show: false,\n            },\n            legend: {\n                show: false,\n            },\n            aria: {\n                enabled: true,\n            },\n            series: [\n                {\n                    name: this.chartName,\n                    animationType: 'scale',\n                    color: this.colors,\n                    id: 'pie',\n                    type: 'pie',\n                    selectedOffset: this.selectedOffset,\n                    selectedMode: 'single',\n                    radius: [this.innerRadius, this.outerRadius],\n                    label: {\n                        show: false,\n                    },\n                    labelLine: {\n                        show: false,\n                    },\n                    itemStyle: {\n                        borderWidth: 5,\n                        borderColor: this.getCSSProperty('--comp-background-color'),\n                    },\n                    emphasis: {\n                        scaleSize: this.hoverScaleSize,\n                        itemStyle: {\n                            color: 'inherit',\n                        },\n                    },\n                    minAngle: this.getMinSliceSizeAsAngle(),\n                    data: this.data,\n                },\n            ],\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    /// Watchers ///\n    @Watch('chartName')\n    @Watch('innerRadius')\n    @Watch('outerRadius')\n    @Watch('minSliceSize')\n    @Watch('hoverScaleSize')\n    @Watch('selectedOffset')\n    @Watch('data')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    @Watch('data')\n    dataUpdated() {\n        this.colors = this.getColors();\n    }\n\n    @Watch('innerRadius')\n    innerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (innerRadiusInt >= outerRadiusInt) {\n            this.innerRadius = `${outerRadiusInt - 15}%`;\n        }\n    }\n\n    @Watch('outerRadius')\n    outerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (outerRadiusInt <= innerRadiusInt) {\n            this.outerRadius = `${innerRadiusInt + 15}%`;\n        }\n    }\n\n    @Watch('selectedId')\n    // Function to detect and set a data range (category) as selected\n    // Logc for when ledgends are present, and can set selectedId when ledgend category is clicked\n    // Also can be used by dev to preset\n    checkSelectedId() {\n        if (!!this.selectedId) {\n            this.hoveredId = this.selectedId;\n            // Dispatch action only to befired when chart is rendered\n            if (this.chart) {\n                this.selectById(this.selectedId);\n            }\n        } else {\n            // Dispatch action only to befired when chart is rendered\n            if (this.chart) {\n                this.chart.dispatchAction({\n                    type: 'unselect',\n                    seriesId: 'pie',\n                    dataIndex: this.getIndexById(this.hoveredId),\n                });\n            }\n            this.hoveredId = null;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.isClickable) return;\n        this.centerButtonElement?.focus();\n    }\n\n    /// Methods ///\n    /**\n     * Selects a slice by its provided `id` in the provided `data`.\n     */\n    @Method()\n    async selectById(id: string) {\n        const dataIndex = this.getIndexById(id);\n        if (dataIndex === -1) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Selects a slice by its index in the provided `data`.\n     */\n    @Method()\n    async selectByIndex(index: number) {\n        const dataIndex = this.data[index] ? index : null;\n        if (!dataIndex) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Clears any selected slice.\n     */\n    @Method()\n    async clearSelection() {\n        const { selectedId } = this;\n        if (!selectedId) return;\n\n        this.chart.dispatchAction({\n            type: 'unselect',\n            seriesId: 'pie',\n            dataIndex: this.getIndexById(selectedId),\n        });\n    }\n\n    /**\n     * Returns the chart instance for e2e testing.\n     *\n     * @testOnly\n     */\n    @Method()\n    async getChartOptions(): Promise<EChartsCoreOption> {\n        return this.chart.getOption();\n    }\n\n    /// Event Handlers ///\n    onClickElsewhere = (event: Event) => {\n        event.stopPropagation();\n        this.clearSelection();\n    };\n\n    onButtonKeyDown = (event: KeyboardEvent) => {\n        const { selectedId, data } = this;\n        let selectedIndex = this.getIndexById(selectedId) || 0;\n        switch (event.key) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n                event.preventDefault();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedIndex--;\n                if (selectedIndex < 0) selectedIndex = data.length - 1;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedIndex++;\n                if (selectedIndex > data.length - 1) selectedIndex = 0;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'Escape':\n                this.clearSelection();\n                break;\n\n            default:\n                return;\n        }\n    };\n\n    onButtonClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        const { selectedId } = this;\n        const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n        this.click.emit(data);\n    };\n\n    onContainerClick = (event: Event) => {\n        if (this.isInChangeEvent) return;\n        if (!(event.target instanceof HTMLElement)) return;\n        this.clearSelection();\n        event.stopPropagation();\n    };\n\n    /// DOM ///\n    renderCenterBlock() {\n        const { icon, name, value, color } = this.centerData;\n        const { isClickable } = this;\n        const TagName = isClickable ? 'button' : 'div';\n        const displayValue = this.displayValue(value);\n\n        const props = isClickable\n            ? {\n                  onKeyDown: this.onButtonKeyDown,\n                  onClick: this.onButtonClick,\n                  ref: el => (this.centerButtonElement = el),\n                  'aria-describedby': 'center-card-description',\n                  'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n              }\n            : null;\n\n        return (\n            <div\n                class=\"center-card-container\"\n                style={{ width: `calc(${this.innerRadius} - 10%)` }}\n            >\n                {isClickable && (\n                    <div\n                        id=\"center-card-description\"\n                        class=\"sr\"\n                    >\n                        {loc('tecton.element.chartDonut.button.description')}\n                    </div>\n                )}\n                <TagName\n                    class=\"center-card\"\n                    test-id=\"centerCard\"\n                    {...props}\n                >\n                    {!!icon && (\n                        <q2-icon\n                            type={icon}\n                            style={\n                                color && {\n                                    '--tct-icon-stroke-primary': color,\n                                    '--tct-icon-stroke-secondary': color,\n                                    color,\n                                }\n                            }\n                        ></q2-icon>\n                    )}\n                    {!!name && <div class=\"name\">{name}</div>}\n                    {!!value && <div class=\"value\">{displayValue}</div>}\n                </TagName>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class=\"container\">\n                    <div\n                        ref={el => (this.chartContainer = el)}\n                        class=\"chart-container\"\n                        test-id=\"chartContainer\"\n                        onClick={this.onContainerClick}\n                    ></div>\n                    {this.renderCenterBlock()}\n                </div>\n            </click-elsewhere>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-checkbox/index.js

@@ -362,8 +362,11 @@ export class Q2Checkbox {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "legacyEvent",
+              "text": undefined
+            }],
+          "text": "Emitted when the checkbox is toggled."
         },
         "complexType": {
           "original": "{ value: string; checked: boolean }",

package/dist/collection/components/q2-checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Checkbox implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) hasError: boolean = false;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) indeterminate: boolean;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n    @Prop({ reflect: true }) alignment: string;\n    @Prop({ reflect: true }) description: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Checkbox implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) hasError: boolean = false;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) indeterminate: boolean;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n    @Prop({ reflect: true }) alignment: string;\n    @Prop({ reflect: true }) description: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-checkbox-group/index.js

@@ -218,13 +218,20 @@ export class Q2CheckboxGroup {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "legacyEvent",
+              "text": undefined
+            }],
+          "text": "Emitted when a checkbox is toggled.\n\nThe event detail is an object with the value of each checkbox as the key and the checked state as the value."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "Record<string, boolean>",
+          "resolved": "{ [x: string]: boolean; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/q2-checkbox-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: object;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated();\n        this.updateDisabled();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly(this.readonly);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    @Watch('disabled')\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    @Watch('readonly')\n    updateReadonly(newReadonly: boolean) {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = newReadonly;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.label || this.optional ? (\n                    <div class=\"group-legend\">\n                        {this.label && loc(this.label)}\n                        {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n                    </div>\n                ) : (\n                    ''\n                )}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? (\n                        <legend class=\"sr-only\">\n                            {this.label && loc(this.label)}\n                            {this.optional ? (\n                                <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n                            ) : (\n                                ''\n                            )}\n                        </legend>\n                    ) : (\n                        ''\n                    )}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,OAAO,EACP,CAAC,EACD,MAAM,EAEN,KAAK,EAEL,KAAK,EACL,MAAM,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAO5C,MAAM,OAAO,eAAe;;IASxB,QAAG,GAAW,kBAAkB,UAAU,EAAE,EAAE,CAAC;IAW/C,uBAAkB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,0BAAqB,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC3C,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,MAAM,UAAU,GAAG,EAAE,CAAC;MACtB,UAAU,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;UAClC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;QAC9C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MACjC,CAAC,EAAE,CAAC,CAAC,CAAC;IACV,CAAC,CAAC;;;oBA/B2C,KAAK;oBACL,KAAK;oBACL,KAAK;oBACL,KAAK;;EAMlD,IAAI,gBAAgB;IAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAA4B,CAAC;EACnG,CAAC;EAED,IAAI,cAAc;IACd,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;EAC5B,CAAC;EAkBD,4BAA4B;EAE5B,iBAAiB;IACb,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvC,CAAC;EAED,gBAAgB;IACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC9B,CAAC;EAED,oBAAoB;IAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACvB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;MACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;EACL,CAAC;EAGD,YAAY;IACR,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAClC,IAAI,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACjD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;OAC3C;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,cAAc;IACV,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;IAC3C,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,cAAc,CAAC,WAAoB;IAC/B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrC,QAAQ,CAAC,QAAQ,GAAG,WAAW,CAAC;IACpC,CAAC,CAAC,CAAC;EACP,CAAC;EAED,eAAe;EACf;;;;KAIG;EAEH,QAAQ,CAAC,MAAyB;IAC9B,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACrE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAClC,IAAI,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;EACP,CAAC;EAcD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;MACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;KAC7B;EACL,CAAC;EAED,MAAM;IACF,OAAO,CACH;MACK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC,CAAC,CAAC,EAAE,CAC5F,CACT,CAAC,CAAC,CAAC,CACA,EAAE,CACL;MACD,gBACI,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACjE,QAAQ,EAAE,IAAI,CAAC,qBAAqB,kBACtB,GAAG,IAAI,CAAC,QAAQ,EAAE;QAE/B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,cAAQ,KAAK,EAAC,SAAS;UAClB,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;UAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAC3E,CAAC,CAAC,CAAC,CACA,EAAE,CACL,CACI,CACZ,CAAC,CAAC,CAAC,CACA,EAAE,CACL;QACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE;UAC/E,eACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,OAAO,GACL,CACT,CACT,CAAC,CAAC,CAAC,CACA,EAAE,CACL;QACA,IAAI,CAAC,QAAQ,EAAE,CACT,CACT,CACT,CAAC;EACN,CAAC;EAED,QAAQ;IACJ,OAAO,eAAQ,CAAC;EACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: object;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated();\n        this.updateDisabled();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly(this.readonly);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    @Watch('disabled')\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    @Watch('readonly')\n    updateReadonly(newReadonly: boolean) {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = newReadonly;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    /**\n     * Emitted when a checkbox is toggled.\n     *\n     * The event detail is an object with the value of each checkbox as the key and the checked state as the value.\n     *\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<Record<string, boolean>>;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.label || this.optional ? (\n                    <div class=\"group-legend\">\n                        {this.label && loc(this.label)}\n                        {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n                    </div>\n                ) : (\n                    ''\n                )}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? (\n                        <legend class=\"sr-only\">\n                            {this.label && loc(this.label)}\n                            {this.optional ? (\n                                <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n                            ) : (\n                                ''\n                            )}\n                        </legend>\n                    ) : (\n                        ''\n                    )}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"]}

package/dist/collection/components/q2-data-table/index.js

@@ -23,21 +23,6 @@ export class Q2DataTable {
       });
       this.serializedRows = this.sortRows(this.serializedRows, Object.assign(Object.assign({}, header), { sorted: direction }));
     };
-    this.onSelectAllRows = (event) => {
-      event.stopPropagation();
-      const { checked } = event.detail;
-      const selectedRows = checked
-        ? this.serializedRows.map(row => (Object.assign(Object.assign({}, row), { selected: checked })))
-        : [];
-      const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });
-      if (selectEvent.defaultPrevented)
-        return;
-      this.serializedRows = this.serializedRows.map(row => {
-        row.selected = checked;
-        return row;
-      });
-      this.allRowsSelected = checked;
-    };
     this.onSelectRow = (event, row) => {
       event.stopPropagation();
       const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;
@@ -186,8 +171,11 @@ export class Q2DataTable {
       cells: {},
       selected: false,
       expanded: false,
+      disabled: false,
     };
-    const serializedRows = rows.map(({ id, cells, selected, expanded }) => {
+    // tracks if the select-all checkbox should be visually updated as the `rows` are built
+    let isAllSelected = true;
+    const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {
       const serializedCells = Object.entries(cells).reduce((accum, [cellKey, cellData]) => {
         const header = mappedHeaders[cellKey] || {};
         const { align, type = 'text', lineClamp } = header;
@@ -206,17 +194,49 @@ export class Q2DataTable {
         accum[cellKey] = result;
         return accum;
       }, {});
-      return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, expanded: !!expanded, cells: serializedCells });
+      if (isAllSelected && !selected)
+        isAllSelected = false;
+      return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, expanded: !!expanded, disabled: !!disabled, cells: serializedCells });
     });
     const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);
+    this.allRowsSelected = isAllSelected;
     this.serializedRows = !!sortedHeader ? this.sortRows(serializedRows, sortedHeader) : serializedRows;
     this.checkSlots();
   }
+  selectableHandler() {
+    if (this.selectable === false) {
+      this.selectAllRows.emit({ checked: false });
+    }
+  }
   /// Listeners ///
   onClickListener(event) {
     if (event instanceof PointerEvent)
       event.stopImmediatePropagation();
   }
+  onSelectAllRows(event) {
+    event.stopPropagation();
+    const { checked } = event.detail;
+    const selectedRows = checked
+      ? this.serializedRows.map(row => {
+        if (row.disabled) {
+          return row;
+        }
+        else {
+          return Object.assign(Object.assign({}, row), { selected: checked });
+        }
+      })
+      : [];
+    const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });
+    if (selectEvent.defaultPrevented)
+      return;
+    this.serializedRows = this.serializedRows.map(row => {
+      if (row.disabled)
+        return row;
+      row.selected = checked;
+      return row;
+    });
+    this.allRowsSelected = checked;
+  }
   /// DOM ///
   render() {
     const { caption } = this;
@@ -232,7 +252,7 @@ export class Q2DataTable {
     const { serializedHeaders: headers, selectable, clickable, hideClickable, selectMode, hasExpandableRows, hasDropdowns, } = this;
     if (!headers.length)
       return null;
-    return (h("thead", null, h("tr", null, selectable && (h("th", null, selectMode === 'multiple' && (h("q2-checkbox", { label: loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: this.onSelectAllRows, checked: this.allRowsSelected, disabled: this.loading, "test-id": "select-all-rows-control" })))), headers.map(header => {
+    return (h("thead", null, h("tr", null, selectable && (h("th", null, selectMode === 'multiple' && (h("q2-checkbox", { label: loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: () => this.selectAllRows.emit({ checked: !this.allRowsSelected }), checked: this.allRowsSelected, disabled: this.loading, "test-id": "select-all-rows-control" })))), headers.map(header => {
       const { align, sorted } = header;
       const headerClasses = [];
       if (align)
@@ -279,7 +299,7 @@ export class Q2DataTable {
       if (row.selected)
         rowClasses.push('selected');
       const rowIsClickable = clickable || rowHasExpandableSlot;
-      return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: loc('tecton.element.dataTable.selectRow'), "hide-label": true, checked: row.selected, disabled: isSelectDisabled && row !== selectedRow, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
+      return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: loc('tecton.element.dataTable.selectRow'), "hide-label": true, checked: row.selected, disabled: (isSelectDisabled && row !== selectedRow) || row.disabled, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
         const cell = row.cells[key];
         const lineClamp = cell === null || cell === void 0 ? void 0 : cell.lineClamp;
         const cellAlign = cell === null || cell === void 0 ? void 0 : cell.align;
@@ -521,7 +541,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableHeader": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         },
@@ -541,7 +561,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         },
@@ -573,7 +593,7 @@ export class Q2DataTable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when a row is selected.\n\nRequires the `selectable` prop to be set to `true`.\n\nCall `event.preventDefault()` to prevent the default selection behavior."
         },
         "complexType": {
           "original": "{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }",
@@ -581,7 +601,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableSerializedRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
@@ -593,7 +613,7 @@ export class Q2DataTable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when a row is clicked.\n\nRequires the `clickable` prop to be set to `true`.\n\nCall `event.preventDefault()` to prevent the default click behavior."
         },
         "complexType": {
           "original": "{ row: Q2DataTableSerializedRow }",
@@ -601,7 +621,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableSerializedRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
@@ -613,7 +633,7 @@ export class Q2DataTable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when an expandable row is toggled.\n\nRequires content in the `row-{id}-expandable-content` slot.\n\nCall `event.preventDefault()` to prevent the default toggling behavior."
         },
         "complexType": {
           "original": "{ row: Q2DataTableSerializedRow }",
@@ -621,7 +641,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableSerializedRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
@@ -633,7 +653,7 @@ export class Q2DataTable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when a column is sorted.\n\nRequires the `sortable` prop to be set to `true` on the column.\n\nCall `event.preventDefault()` to prevent the default sorting behavior."
         },
         "complexType": {
           "original": "{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }",
@@ -641,10 +661,25 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableHeader": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
+      }, {
+        "method": "selectAllRows",
+        "name": "selectAllRows",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select-all checkbox is toggled.\n\nRequires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n\nCall `event.preventDefault()` to prevent the default behavior."
+        },
+        "complexType": {
+          "original": "{ checked: boolean }",
+          "resolved": "{ checked: boolean; }",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "hostElement"; }
@@ -655,6 +690,9 @@ export class Q2DataTable {
       }, {
         "propName": "rows",
         "methodName": "rowsHandler"
+      }, {
+        "propName": "selectable",
+        "methodName": "selectableHandler"
       }];
   }
   static get listeners() {
@@ -664,6 +702,12 @@ export class Q2DataTable {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "selectAllRows",
+        "method": "onSelectAllRows",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }