npm - q2-tecton-elements - Versions diffs - 1.36.0 → 1.37.0 - Mend

q2-tecton-elements 1.36.0 → 1.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (312) hide show

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

	@@ -1 +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 @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 @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 @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 onButtonKeyUp = (event: KeyboardEvent) => {\n const { selectedId, data } = this;\n let selectedIndex = this.getIndexById(selectedId) \|\| 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\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 case 'ArrowDown':\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 onKeyUp: this.onButtonKeyUp,\n onClick: this.onButtonClick,\n ref: el => (this.centerButtonElement = el),\n 'aria-description': loc('tecton.element.chartDonut.button.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 <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"]}
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 @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 @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 @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"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createGuid, loc } from 'src/utils';
 export class Q2CheckboxGroup {
   constructor() {
@@ -10,10 +10,12 @@ export class Q2CheckboxGroup {
     this.onInnerCheckboxChange = (event) => {
       event.stopImmediatePropagation();
       const groupValue = {};
-      this.checkboxElements.forEach(check => {
-        groupValue[check.value] = !!check.checked;
-      });
-      this.change.emit(groupValue);
+      setTimeout(() => {
+        this.checkboxElements.forEach(check => {
+          groupValue[check.value] = !!check.checked;
+        });
+        this.change.emit(groupValue);
+      }, 0);
     };
     this.label = undefined;
     this.value = undefined;
@@ -29,6 +31,9 @@ export class Q2CheckboxGroup {
     return this.value || {};
   }
   ///// LIFECYCLE HOOK ///////
+  componentWillLoad() {
+    this.updateReadonly(this.readonly);
+  }
   componentDidLoad() {
     const observer = new MutationObserver(this.onMutationObserved);
     observer.observe(this.hostElement, { childList: true });
@@ -56,6 +61,19 @@ export class Q2CheckboxGroup {
       checkbox.groupDisabled = groupDisabled;
     });
   }
+  updateReadonly(newReadonly) {
+    this.checkboxElements.forEach(checkbox => {
+      checkbox.readonly = newReadonly;
+    });
+  }
+  /// Methods ///
+  setValue(values) {
+    const valuesSet = new Set(Array.isArray(values) ? values : [values]);
+    this.checkboxElements.forEach(check => {
+      if (valuesSet.has(check.value))
+        check.click();
+    });
+  }
   onHostElementChange(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange) {
       this.value = event.detail;
@@ -205,6 +223,25 @@ export class Q2CheckboxGroup {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setValue": {
+        "complexType": {
+          "signature": "(values: string | string[]) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
@@ -213,6 +250,9 @@ export class Q2CheckboxGroup {
       }, {
         "propName": "disabled",
         "methodName": "updateDisabled"
+      }, {
+        "propName": "readonly",
+        "methodName": "updateReadonly"
       }];
   }
   static get listeners() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,IAAI,~~EAAE~~,OAAO,~~EAAE~~,CAAC,~~EAAE~~,MAAM,~~EAAgB~~,KAAK,~~EAAsB~~,KAAK,~~EAAE~~,MAAM,eAAe,CAAC;~~AACpH~~,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,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;~~QAClC~~,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;~~MAC9C~~,CAAC,CAAC,CAAC;~~MACH~~,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;~~IACjC~~,CAAC,CAAC;;;~~oBA7B2C~~,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;~~EAgBD~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, Prop, Element, h, Listen, EventEmitter, Event, ComponentInterface, Watch } 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 this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n };\n\n ///// LIFECYCLE HOOK ///////\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 ///// 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"]}
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 @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"]}

package/dist/collection/components/q2-data-table/styles.css CHANGED Viewed

@@ -70,10 +70,10 @@ button {
 }
 .container {
-  --comp-cell-padding: var(--tct-table-cell-padding, var(--app-scale-3x, 15px));
-  --comp-select-column-width: var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px));
-  --comp-dropdown-column-width: var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px));
-  --comp-expandable-row-control-column-width: var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px));
+  --comp-cell-padding: var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));
+  --comp-select-column-width: var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));
+  --comp-dropdown-column-width: var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));
+  --comp-expandable-row-control-column-width: var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));
   overflow: auto;
   --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
   --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));
@@ -95,30 +95,30 @@ button {
   border-radius: var(--comp-scrollbar-border-radius);
 }
 :host([shadowed]:not([shadowed=false])) .container {
-  box-shadow: var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));
+  box-shadow: var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
 }
 :host([density=compact]) .container {
-  --comp-cell-padding: var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px));
+  --comp-cell-padding: var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)));
 }
 :host([density=comfortable]) .container {
-  --comp-cell-padding: var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px));
+  --comp-cell-padding: var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)));
 }
 table {
-  table-layout: var(--tct-table-layout, auto);
+  table-layout: var(--tct-data-table-layout, var(--tct-table-layout, auto));
   border-collapse: collapse;
   border-spacing: 0;
-  width: var(--tct-table-width);
+  width: var(--tct-data-table-width, var(--tct-table-width));
   min-width: 100%;
-  background: var(--tct-table-background, var(--t-base, #ffffff));
-  caption-side: var(--tct-table-caption-side, bottom);
+  background: var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));
+  caption-side: var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom));
 }
 thead {
-  border-width: var(--tct-table-header-border-width, 0 0 2px 0);
-  border-style: var(--tct-table-header-border-style, solid);
-  border-color: var(--tct-table-header-border-color, var(--t-gray-9, #999999));
-  background: var(--tct-table-header-background);
+  border-width: var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));
+  border-style: var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));
+  border-color: var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));
+  background: var(--tct-data-table-header-background, var(--tct-table-header-background));
 }
 col.select-column {
@@ -146,13 +146,14 @@ th.align-center {
 }
 th .header-content {
-  font-weight: var(--tct-table-header-font-weight, 400);
+  font-weight: var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 400));
+  font-size: var(--tct-data-table-header-font-size, var(--app-font-size, 14px));
 }
 th.sorted .header-content {
-  font-weight: var(--tct-table-header-sorted-font-weight, 600);
+  font-weight: var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600));
 }
 th .sorted-indicator {
-  --comp-header-sortable-icon-size: var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px));
+  --comp-header-sortable-icon-size: var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));
   --tct-icon-stroke-width: 2;
   width: var(--comp-header-sortable-icon-size);
   height: var(--comp-header-sortable-icon-size);
@@ -163,7 +164,7 @@ th .sorted-indicator.direction-ASC {
 th q2-btn .header-content {
   display: flex;
   align-items: center;
-  gap: var(--tct-table-header-content-gap, var(--app-scale-2x, 10px));
+  gap: var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)));
 }
 tr.expandable, tr.clickable {
@@ -174,27 +175,27 @@ tr.expandable:focus, tr.clickable:focus {
   box-shadow: none;
 }
 tr.expandable:hover {
-  background: var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2));
+  background: var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)));
 }
 tr.clickable:hover {
-  background: var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2));
+  background: var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)));
 }
 tr.selected {
-  background: var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2));
+  background: var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)));
 }
 tr.expanded {
-  background: var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2));
+  background: var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)));
 }
 tr.expanded .toggle-expandable-row {
   transform: rotate(180deg);
 }
 :host([bordered]:not([bordered=false])) tbody tr {
-  border-width: var(--tct-table-row-border-width, 0 0 1px 0);
-  border-style: var(--tct-table-row-border-style, solid);
-  border-color: var(--tct-table-row-border-color, var(--t-gray-9, #999999));
+  border-width: var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));
+  border-style: var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));
+  border-color: var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)));
 }
 tr.loading-row {
-  background: var(--tct-table-loading-row-background, var(--t-base, #ffffff));
+  background: var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)));
 }
 tr.loading-row td {
   text-align: center;
@@ -203,7 +204,7 @@ tr.loading-row q2-loading {
   font-size: 4em;
 }
 tr.expandable-row {
-  background: var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2));
+  background: var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)));
 }
 td.clamped div {
@@ -215,24 +216,24 @@ td.clamped div {
 }
 td.expandable-row-control-column {
   --tct-btn-icon-hover-bg: transparent;
-  padding: var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px));
+  padding: var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px)));
   text-align: center;
 }
 td.dropdown-column {
-  padding: var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px));
+  padding: var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px)));
   text-align: center;
 }
 td.click-column:not(.sr) {
-  padding: var(--tct-table-clickable-column-padding, 0 var(--app-scale-1x, 5px));
+  padding: var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 var(--app-scale-1x, 5px)));
   text-align: center;
 }
 caption {
-  padding: var(--tct-table-caption-padding, var(--app-scale-2x, 10px));
-  font-size: var(--tct-table-caption-font-size, inherit);
-  font-weight: var(--tct-table-caption-font-weight, 600);
-  text-align: var(--tct-table-caption-text-align, center);
-  color: var(--tct-table-caption-color, inherit);
+  padding: var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));
+  font-size: var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));
+  font-weight: var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));
+  text-align: var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));
+  color: var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit));
 }
 q2-checkbox {

package/dist/collection/components/q2-editable-field/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';
+import { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';
 export class Q2EditableField {
   constructor() {
     this.scheduledAfterRender = [];
@@ -81,7 +81,7 @@ export class Q2EditableField {
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
-    this.formattedValue = this.q2InputElement.formattedValue;
+    this.formattedValue = this.inputElement.formattedValue;
   }
   componentDidLoad() {
     overrideFocus(this.hostElement);
@@ -95,7 +95,7 @@ export class Q2EditableField {
     const hasErrors = errors.length;
     if (isInputFocused || !focusedElement || !editing || !hasErrors)
       return;
-    this.q2InputElement.focus();
+    this.inputElement.focus();
   }
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -117,7 +117,7 @@ export class Q2EditableField {
         this.value = event.detail.value;
         break;
       case 'cancel':
-        this.q2InputElement.value = this.value;
+        this.inputElement.value = this.value;
         break;
     }
     this.editing = event.detail.editing;
@@ -127,11 +127,39 @@ export class Q2EditableField {
       return;
     this.hostElement.shadowRoot.querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();
   }
+  /// Methods ///
+  clickEdit() {
+    var _a;
+    if (this.editing)
+      return;
+    (_a = this.editBtnElement) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  clickCancel() {
+    var _a;
+    if (!this.editing)
+      return;
+    (_a = this.cancelBtnElement) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  clickSave() {
+    var _a;
+    if (!this.editing)
+      return;
+    (_a = this.saveBtnElement) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  async setValue(value, options = { clickSave: true }) {
+    await this.clickEdit();
+    await waitForNextPaint();
+    await this.inputElement.setValue(value);
+    if (options.clickSave) {
+      await this.clickSave();
+      await waitForNextPaint();
+    }
+  }
   render() {
     return (h("div", null, this.generateEditStateDOM(), this.generateReadStateDOM()));
   }
   generateEditStateDOM() {
-    return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
+    return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
   }
   generateReadStateDOM() {
     if (this.persistentLabel && this.locLabel) {
@@ -140,7 +168,7 @@ export class Q2EditableField {
     return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.formattedValue || this.value), this.generateEditBtn()));
   }
   generateEditBtn() {
-    return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
+    return (h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
   }
   static get is() { return "q2-editable-field"; }
   static get encapsulation() { return "shadow"; }
@@ -441,6 +469,68 @@ export class Q2EditableField {
         }
       }];
   }
+  static get methods() {
+    return {
+      "clickEdit": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "clickCancel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "clickSave": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(value: string, options?: { clickSave?: boolean; }) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{