npm - q2-tecton-elements - Versions diffs - 1.62.6 → 1.63.0 - Mend

q2-tecton-elements 1.62.6 → 1.63.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 (306) hide show

package/dist/q2-tecton-elements/q2-chart-bar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-bar.entry.esm.js","sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/\n Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements. See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership. The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License. You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied. See the License for the\n* specific language governing permissions and limitations\n* under the License.\n/\n\n\n/\n AUTO-GENERATED FILE. DO NOT MODIFY.\n /\n\n/\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements. See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership. The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License. You may obtain a copy of the License at\r\n\r\n http://www.apache.org/licenses/LICENSE-2.0\r\n\r\n Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied. See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n/\nimport as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n registers.registerChartView(BarView);\n registers.registerSeriesModel(BarSeries);\n registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n // Do layout after other overall layout, which can prepare some information.\n registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n // Down sample after filter\n registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n /*\r\n @payload\r\n * @property {string} [componentType=series]\r\n * @property {number} [dx]\r\n * @property {number} [dy]\r\n * @property {number} [zoom]\r\n * @property {number} [originX]\r\n * @property {number} [originY]\r\n /\n registers.registerAction({\n type: 'changeAxisOrder',\n event: 'changeAxisOrder',\n update: 'update'\n }, function (payload, ecModel) {\n var componentType = payload.componentType \|\| 'series';\n ecModel.eachComponent({\n mainType: componentType,\n query: payload\n }, function (componentModel) {\n if (payload.sortInfo) {\n componentModel.axis.setCategorySortInfo(payload.sortInfo);\n }\n });\n });\n}","@import '../../styles/host.scss';\n\n:host {\n width: var(--tct-bar-chart-width, 100%);\n height: var(--tct-bar-chart-height, 100%);\n display: block;\n}\n\n.container {\n width: 100%;\n height: 100%;\n}\n\n.chart-container {\n width: 100%;\n height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n chartFinishedListener: () => void;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["BarSeries","zrUtil.curry","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","echarts.init"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"q2-chart-bar.entry.esm.js","sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/\n Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements. See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership. The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License. You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied. See the License for the\n* specific language governing permissions and limitations\n* under the License.\n/\n\n\n/\n AUTO-GENERATED FILE. DO NOT MODIFY.\n /\n\n/\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements. See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership. The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License. You may obtain a copy of the License at\r\n\r\n http://www.apache.org/licenses/LICENSE-2.0\r\n\r\n Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied. See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n/\nimport as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n registers.registerChartView(BarView);\n registers.registerSeriesModel(BarSeries);\n registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n // Do layout after other overall layout, which can prepare some information.\n registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n // Down sample after filter\n registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n /*\r\n @payload\r\n * @property {string} [componentType=series]\r\n * @property {number} [dx]\r\n * @property {number} [dy]\r\n * @property {number} [zoom]\r\n * @property {number} [originX]\r\n * @property {number} [originY]\r\n /\n registers.registerAction({\n type: 'changeAxisOrder',\n event: 'changeAxisOrder',\n update: 'update'\n }, function (payload, ecModel) {\n var componentType = payload.componentType \|\| 'series';\n ecModel.eachComponent({\n mainType: componentType,\n query: payload\n }, function (componentModel) {\n if (payload.sortInfo) {\n componentModel.axis.setCategorySortInfo(payload.sortInfo);\n }\n });\n });\n}","@import '../../styles/host.scss';\n\n:host {\n width: var(--tct-bar-chart-width, 100%);\n height: var(--tct-bar-chart-height, 100%);\n display: block;\n}\n\n.container {\n width: 100%;\n height: 100%;\n}\n\n.chart-container {\n width: 100%;\n height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n chartFinishedListener: () => void;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["BarSeries","zrUtil.curry","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","echarts.init"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/q2-tecton-elements/q2-chart-bar.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, h as s, g as i } from "./index-CGkHOjh1.js";
-import { o as e, l as a } from "./index-LNnzUeDP.js";
+import { o as e, l as a } from "./index-YJ5sXwiE.js";
 import { B as r, h as o, j as h, l as n, k as d, u as p, c as l, d as c, m as f, e as u, i as b, g as m, b as g, f as v } from "./charting-BNYmzAlx.js";

package/dist/q2-tecton-elements/q2-chart-bar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["install","registers","registerChartView","BarView","registerSeriesModel","BarSeries","registerLayout","PRIORITY","VISUAL","LAYOUT","zrUtil.curry","layout","PROGRESSIVE_LAYOUT","createProgressiveLayout","registerProcessor","PROCESSOR","STATISTIC","dataSample","registerAction","type","event","update","payload","ecModel","componentType","eachComponent","mainType","query","componentModel","sortInfo","axis","setCategorySortInfo","q2ChartBarCss","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","Q2ChartBar","constructor","hostRef","this","data","hideBarLabels","hideValueAxisLabels","offsetDataNames","offsetDataValues","showChartName","sort","disconnectedCallback","window","removeEventListener","resizeEventListener","chart","chartFinishedListener","off","dispose","chartContainerStyles","hostElementStyles","chartContainer","componentDidLoad","echarts.init","resizeChart","addEventListener","cacheComputedStyles","updateChart","setupChartEvents","overrideFocus","hostElement","propsUpdates","getComputedStyle","getColor","color","primaryColor","getCSSProperty","seriesColor","cssColorProp","isValidColor","processData","map","datum","value","itemStyle","resize","canvas","getDom","querySelector","_a","hasAttribute","setAttribute","on","decimals","formatModifier","includes","replace","valueAxis","axisLabel","formatter","formatValue","format","rotate","margin","show","categoryAxis","loc","name","interval","width","dataNamesWidth","overflow","dataNamesOverflow","truncate","axisTick","alignWithLabel","setOption","aria","enabled","title","text","chartName","left","alignChartName","subtext","chartSubTitle","grid","Object","assign","containLabel","gridPadding","xAxis","orientation","yAxis","series","id","label","position","fontWeight","params","realtimeSort","render","h","key","class","ref","el","role"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/\n Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements. See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership. The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License. You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied. See the License for the\n* specific language governing permissions and limitations\n* under the License.\n/\n\n\n/\n AUTO-GENERATED FILE. DO NOT MODIFY.\n /\n\n/\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements. See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership. The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License. You may obtain a copy of the License at\r\n\r\n http://www.apache.org/licenses/LICENSE-2.0\r\n\r\n Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied. See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n/\nimport as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n registers.registerChartView(BarView);\n registers.registerSeriesModel(BarSeries);\n registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n // Do layout after other overall layout, which can prepare some information.\n registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n // Down sample after filter\n registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n /*\r\n @payload\r\n * @property {string} [componentType=series]\r\n * @property {number} [dx]\r\n * @property {number} [dy]\r\n * @property {number} [zoom]\r\n * @property {number} [originX]\r\n * @property {number} [originY]\r\n /\n registers.registerAction({\n type: 'changeAxisOrder',\n event: 'changeAxisOrder',\n update: 'update'\n }, function (payload, ecModel) {\n var componentType = payload.componentType \|\| 'series';\n ecModel.eachComponent({\n mainType: componentType,\n query: payload\n }, function (componentModel) {\n if (payload.sortInfo) {\n componentModel.axis.setCategorySortInfo(payload.sortInfo);\n }\n });\n });\n}","@import '../../styles/host.scss';\n\n:host {\n width: var(--tct-bar-chart-width, 100%);\n height: var(--tct-bar-chart-height, 100%);\n display: block;\n}\n\n.container {\n width: 100%;\n height: 100%;\n}\n\n.chart-container {\n width: 100%;\n height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n chartFinishedListener: () => void;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;;;;;;;AAgDO,SAASA,QAAQC;EACtBA,EAAUC,kBAAkBC;EAC5BF,EAAUG,oBAAoBC;EAC9BJ,EAAUK,eAAeL,EAAUM,SAASC,OAAOC,QAAQC,EAAaC,GAAQ;;IAEhFV,EAAUK,eAAeL,EAAUM,SAASC,OAAOI,oBAAoBC,EAAwB;;IAE/FZ,EAAUa,kBAAkBb,EAAUM,SAASQ,UAAUC,WAAWC,EAAW;;;;;;;;;OAU/EhB,EAAUiB,eAAe;IACvBC,MAAM;IACNC,OAAO;IACPC,QAAQ;MACP,SAAUC,GAASC;IACpB,IAAIC,IAAgBF,EAAQE,iBAAiB;IAC7CD,EAAQE,cAAc;MACpBC,UAAUF;MACVG,OAAOL;QACN,SAAUM;MACX,IAAIN,EAAQO,UAAU;QACpBD,EAAeE,KAAKC,oBAAoBT,EAAQO;AACxD;AACA;AACA;AACA;;AChFA,MAAMG,IAAgB;;ACiBtBC,EAAY,EAACC,GAAeC,SAAUC,GAAgBC,GAAaC,GAAeC;;MAKrEC,IAAU;EADvB,WAAAC,CAAAC;;yEAoDIC,KAAIC,OAAiB;8DAwCrBD,KAAaE,gBAAY;+DAIzBF,KAAmBG,sBAAY;;;;eAO/BH,KAAeI,kBAAY;;;;eAO3BJ,KAAgBK,mBAAY;iFAY5BL,KAAaM,gBAAY;;;;eAOzBN,KAAIO,OAAY;AAoMnB;;;EA/LG,oBAAAC;;IAEIC,OAAOC,oBAAoB,UAAUV,KAAKW;;QAG1C,IAAIX,KAAKY,OAAO;MACZ,IAAIZ,KAAKa,uBAAuB;QAC5Bb,KAAKY,MAAME,IAAI,YAAYd,KAAKa;;MAEpCb,KAAKY,MAAMG;MACXf,KAAKY,QAAQ;;;QAIjBZ,KAAKgB,uBAAuB;IAC5BhB,KAAKiB,oBAAoB;;QAGzBjB,KAAKkB,iBAAiB;IACtBlB,KAAKW,sBAAsB;IAC3BX,KAAKa,wBAAwB;;EAGjC,gBAAAM;IACI,MAAMP,IAAQQ,EAAapB,KAAKkB;IAEhClB,KAAKY,QAAQA;IAEbZ,KAAKW,sBAAsB,MAAMX,KAAKqB;IACtCZ,OAAOa,iBAAiB,UAAUtB,KAAKW;IAEvCX,KAAKuB;IACLvB,KAAKwB,YAAYZ;IACjBZ,KAAKyB,iBAAiBb;IAEtBc,EAAc1B,KAAK2B;;;;EAqBvB,YAAAC;IACI5B,KAAKwB,YAAYxB,KAAKY;;;;EAM1B,mBAAAW;IACIvB,KAAKgB,uBAAuBa,iBAAiB7B,KAAKkB;IAClDlB,KAAKiB,oBAAoBY,iBAAiB7B,KAAK2B;;EAGnD,QAAAG,CAASC;IACL,MAAMC,IAAeC,EAAe,oBAAoBjC,KAAKgB,sBAAsBhB,KAAKiB;IACxF,MAAMiB,IAAcD,EAAejC,KAAK+B,OAAO/B,KAAKgB,sBAAsBhB,KAAKiB;IAC/E,MAAMkB,IAAeF,EAAeF,GAAO/B,KAAKgB,sBAAsBhB,KAAKiB;IAC3E,IAAIkB,GAAc,OAAOA;IACzB,IAAIC,EAAaL,IAAQ,OAAOA;IAChC,IAAIG,GAAa,OAAOA;IACxB,IAAIE,EAAapC,KAAK+B,QAAQ,OAAO/B,KAAK+B;IAC1C,OAAOC;;EAGX,WAAAK,CAAYpC;IACR,OAAOA,EAAKqC,KAAIC,MACL;MACHC,OAAOD,EAAMC,SAAS;MACtBC,WAAW;QACPV,OAAO/B,KAAK8B,SAASS,EAAMR;;;;EAM3C,WAAAV;IACIrB,KAAKY,MAAM8B;;EAGf,gBAAAjB,CAAiBb;IACbZ,KAAKa,wBAAwB;;MACzB,MAAM8B,IAAS/B,EAAMgC,SAASC,cAAc;MAC5C,KAAIC,IAAAH,MAAA,QAAAA,WAAA,aAAAA,EAAQI,aAAa,oBAAc,QAAAD,WAAA,IAAAA,IAAI,OAAO;MAClDH,EAAOK,aAAa,eAAe;AAAO;IAE9CpC,EAAMqC,GAAG,YAAYjD,KAAKa;;EAG9B,WAAAW,CAAYZ;;IACR,MAAMsC,MAAWJ,IAAA9C,KAAKmD,oBAAc,QAAAL,WAAA,aAAAA,EAAEM,SAAS,UAASpD,KAAKmD,eAAeE,QAAQ,OAAO,MAAM;IAEjG,MAAMC,IAAY;MACd9E,MAAM;MACN+E,WAAW;QACPC,WAAYhB,KACRiB,EAAYjB,GAAO;UACfhE,MAAMwB,KAAK0D;UACXR;;QAERS,QAAQ3D,KAAKK,mBAAmB,KAAK;QACrCuD,QAAQ5D,KAAKK,mBAAmB,KAAK;QACrCwD,OAAO7D,KAAKG;;;IAIpB,MAAM2D,IAAe;MACjBtF,MAAM;MACNyB,MAAMD,KAAKC,KAAKqC,KAAIC,KAASwB,EAAIxB,EAAMyB,SAAS;MAChDT,WAAW;QACPI,QAAQ3D,KAAKI,kBAAkB,KAAK;QACpCwD,QAAQ5D,KAAKI,kBAAkB,KAAK;QACpC6D,UAAU;QACVC,OAAOlE,KAAKmE,kBAAkB;QAC9BC,UAAUpE,KAAKqE,qBAAqB;QACpCC,UAAU;;MAEdC,UAAU;QACNC,gBAAgBxE,KAAKI;;;IAI7B,OAAOQ,EAAM6D,UAAyB;MAClCC,MAAM;QACFC,SAAS;;MAEbC,OAAO;QACHC,MAAMd,EAAI/D,KAAK8E;QACfjB,MAAM7D,KAAKM;QACXyE,MAAM/E,KAAKgF;QACXC,SAASjF,KAAKkF;;MAElBC,MAAIC,OAAAC,OAAA;QACAC,cAAc;SACXtF,KAAKuF;MAEZC,OAAOxF,KAAKyF,gBAAgB,eAAenC,IAAYQ;MACvD4B,OAAO1F,KAAKyF,gBAAgB,eAAe3B,IAAeR;MAC1DqC,QAAQ,EACJ;QACI1F,MAAMD,KAAKqC,YAAYrC,KAAKC;QAC5B2F,IAAI;QACJpH,MAAM;QACNqH,OAAO;UACHhC,OAAO7D,KAAKE;UACZ4F,UAAU;UACVC,YAAY;UACZvC,WAAYwC,KACDvC,EAAYuC,EAAOxD,OAAiB;YACvChE,MAAMwB,KAAK0D;YACXR;;;QAIZ+C,cAAcjG,KAAKO;;;;;;EASnC,MAAA2F;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EACI;MAAAC,KAAA;MAAAE,KAAKC,KAAOvG,KAAKkB,iBAAiBqF;MAClCF,OAAM;MACNG,MAAK;MAAK,WACF","ignoreList":[]}
1	+ {"version":3,"names":["install","registers","registerChartView","BarView","registerSeriesModel","BarSeries","registerLayout","PRIORITY","VISUAL","LAYOUT","zrUtil.curry","layout","PROGRESSIVE_LAYOUT","createProgressiveLayout","registerProcessor","PROCESSOR","STATISTIC","dataSample","registerAction","type","event","update","payload","ecModel","componentType","eachComponent","mainType","query","componentModel","sortInfo","axis","setCategorySortInfo","q2ChartBarCss","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","Q2ChartBar","constructor","hostRef","this","data","hideBarLabels","hideValueAxisLabels","offsetDataNames","offsetDataValues","showChartName","sort","disconnectedCallback","window","removeEventListener","resizeEventListener","chart","chartFinishedListener","off","dispose","chartContainerStyles","hostElementStyles","chartContainer","componentDidLoad","echarts.init","resizeChart","addEventListener","cacheComputedStyles","updateChart","setupChartEvents","overrideFocus","hostElement","propsUpdates","getComputedStyle","getColor","color","primaryColor","getCSSProperty","seriesColor","cssColorProp","isValidColor","processData","map","datum","value","itemStyle","resize","canvas","getDom","querySelector","_a","hasAttribute","setAttribute","on","decimals","formatModifier","includes","replace","valueAxis","axisLabel","formatter","formatValue","format","rotate","margin","show","categoryAxis","loc","name","interval","width","dataNamesWidth","overflow","dataNamesOverflow","truncate","axisTick","alignWithLabel","setOption","aria","enabled","title","text","chartName","left","alignChartName","subtext","chartSubTitle","grid","Object","assign","containLabel","gridPadding","xAxis","orientation","yAxis","series","id","label","position","fontWeight","params","realtimeSort","render","h","key","class","ref","el","role"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/\n Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements. See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership. The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License. You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied. See the License for the\n* specific language governing permissions and limitations\n* under the License.\n/\n\n\n/\n AUTO-GENERATED FILE. DO NOT MODIFY.\n /\n\n/\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements. See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership. The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License. You may obtain a copy of the License at\r\n\r\n http://www.apache.org/licenses/LICENSE-2.0\r\n\r\n Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied. See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n/\nimport as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n registers.registerChartView(BarView);\n registers.registerSeriesModel(BarSeries);\n registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n // Do layout after other overall layout, which can prepare some information.\n registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n // Down sample after filter\n registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n /*\r\n @payload\r\n * @property {string} [componentType=series]\r\n * @property {number} [dx]\r\n * @property {number} [dy]\r\n * @property {number} [zoom]\r\n * @property {number} [originX]\r\n * @property {number} [originY]\r\n /\n registers.registerAction({\n type: 'changeAxisOrder',\n event: 'changeAxisOrder',\n update: 'update'\n }, function (payload, ecModel) {\n var componentType = payload.componentType \|\| 'series';\n ecModel.eachComponent({\n mainType: componentType,\n query: payload\n }, function (componentModel) {\n if (payload.sortInfo) {\n componentModel.axis.setCategorySortInfo(payload.sortInfo);\n }\n });\n });\n}","@import '../../styles/host.scss';\n\n:host {\n width: var(--tct-bar-chart-width, 100%);\n height: var(--tct-bar-chart-height, 100%);\n display: block;\n}\n\n.container {\n width: 100%;\n height: 100%;\n}\n\n.chart-container {\n width: 100%;\n height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n chartFinishedListener: () => void;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-chart-donut.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { r as t, c as e, h as n, g as i } from "./index-CGkHOjh1.js";
-import { o as r, a, l as o, j as s } from "./index-LNnzUeDP.js";
+import { o as r, i as a, l as s, g as o } from "./index-YJ5sXwiE.js";
 import { u as c, o as l, W as d, j as h, H as u, X as p, Y as v, Z as f, _ as b, $ as g, a0 as m, d as x, c as y, m as w, i as I, g as S } from "./charting-BNYmzAlx.js";
-import { T as k, a as z, L as C, b as A, S as U, c as D } from "./install-qbdIiszz.js";
+import { T as k, a as z, L as C, b as A, S as T, c as U } from "./install-qbdIiszz.js";
 function install$4(t) {
   c(l);
@@ -101,7 +101,7 @@ function legendSelectActionHandler(t, e, n) {
     makeSelectedMap(n, r);
     a.push(n.componentIndex);
   }));
-  var o = {};
+  var s = {};
   // make selectedMap from all legend components
     n.eachComponent("legend", (function(t) {
     u(r, (function(e, n) {
@@ -111,16 +111,16 @@ function legendSelectActionHandler(t, e, n) {
       // doesn't has the item, they will assume it is selected.
       t[e ? "select" : "unSelect"](n);
     }));
-    makeSelectedMap(t, o);
+    makeSelectedMap(t, s);
   }));
   // Return the event explicitly
     return i ? {
-    selected: o,
+    selected: s,
     // return legendIndex array to tell the developers which legends are allSelect / inverseSelect
     legendIndex: a
   } : {
     name: e.name,
-    selected: o
+    selected: s
   };
 }
@@ -237,8 +237,8 @@ function install$3(t) {
 function install$2(t) {
   c(install$3);
-  t.registerComponentModel(U);
-  t.registerComponentView(D);
+  t.registerComponentModel(T);
+  t.registerComponentView(U);
   installScrollableLegendAction(t);
 }
@@ -338,7 +338,7 @@ function install(t) {
   t.registerProcessor(negativeDataFilter("pie"));
 }
-const T = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 4px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
+const D = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 4px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
 c([ install$4, install$1, install, x, y, w ]);
@@ -637,14 +637,14 @@ const j = class {
     return n ? Object.assign(Object.assign({}, this.getDataById(n)), {
       color: this.colors[i]
     }) : {
-      name: o(this.summaryName || "tecton.element.chartDonut.button.summaryName"),
+      name: s(this.summaryName || "tecton.element.chartDonut.button.summaryName"),
       icon: this.summaryIcon,
       value: e.reduce(((t, e) => t + e.value), 0),
       color: null
     };
   }
   get isMobile() {
-    return s();
+    return o();
   }
   get legendHoveredId() {
     return this.hoveredId === this.selectedId ? null : this.hoveredId;
@@ -731,10 +731,10 @@ const j = class {
     t.on("selectchanged", (t => {
       var e, n, i, r;
       const a = (r = (i = (n = (e = t.selected) === null || e === void 0 ? void 0 : e[0]) === null || n === void 0 ? void 0 : n.dataIndex) === null || i === void 0 ? void 0 : i[0]) !== null && r !== void 0 ? r : null;
-      const o = typeof a === "number" ? this.getDataByIndex(a) : Object.assign({}, this.defaultRecord);
-      this.selectedId = o.id;
+      const s = typeof a === "number" ? this.getDataByIndex(a) : Object.assign({}, this.defaultRecord);
+      this.selectedId = s.id;
       this.isInChangeEvent = true;
-      this.change.emit(o);
+      this.change.emit(s);
       setTimeout((() => {
         this.isInChangeEvent = false;
       }), 0);
@@ -807,14 +807,14 @@ const j = class {
   renderCenterBlock() {
     const {icon: t, name: e, value: i, color: r} = this.centerData;
     const {isClickable: a} = this;
-    const s = a ? "button" : "div";
+    const o = a ? "button" : "div";
     const c = this.displayValue(i);
     const l = a ? {
       onKeyDown: this.onButtonKeyDown,
       onClick: this.onButtonClick,
       ref: t => this.centerButtonElement = t,
       "aria-describedby": "center-card-description",
-      "aria-roledescription": o("tecton.element.chartDonut.button.roleDescription")
+      "aria-roledescription": s("tecton.element.chartDonut.button.roleDescription")
     } : null;
     return n("div", {
       class: "center-card-container",
@@ -824,7 +824,7 @@ const j = class {
     }, n("div", {
       id: "center-card-description",
       class: "sr"
-    }, o("tecton.element.chartDonut.button.description")), n(s, Object.assign({
+    }, s("tecton.element.chartDonut.button.description")), n(o, Object.assign({
       class: "center-card",
       "test-id": "centerCard"
     }, l), !!t && n("q2-icon", {
@@ -890,7 +890,7 @@ const j = class {
   }
 };
-j.style = T;
+j.style = D;
 export { j as q2_chart_donut };
 //# sourceMappingURL=q2-chart-donut.entry.esm.js.map

package/dist/q2-tecton-elements/q2-checkbox-group.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as r, F as o, g as a } from "./index-CGkHOjh1.js";
-import { c as i, r as n } from "./index-LNnzUeDP.js";
+import { c as i, r as n } from "./index-YJ5sXwiE.js";
 const s = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}';

package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-checkbox.entry.esm.js","sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n )};\n\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-color: #{var-list(\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-control-width: var(--comp-checkbox-size);\n --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n --comp-checkbox-bold-fallback-stroke-width: #{var-list(--tct-checkbox-bold-fallback-stroke-width, 0.7px)};\n --comp-checkbox-stroke-width: #{var-list(--tct-checkbox-stroke-width, unset)};\n --comp-checkbox-checked-stroke-width: #{var-list(\n --tct-checkbox-checked-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-hover-stroke-width: #{var-list(--tct-checkbox-hover-stroke-width, unset)};\n --comp-checkbox-focused-stroke-width: #{var-list(--tct-checkbox-focused-stroke-width, unset)};\n --comp-checkbox-checked-hover-stroke-width: #{var-list(\n --tct-checkbox-checked-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-checked-focused-stroke-width: #{var-list(\n --tct-checkbox-checked-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-stroke-width: #{var-list(\n --tct-checkbox-description-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-focused-stroke-width: #{var-list(\n --tct-checkbox-description-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-hover-stroke-width: #{var-list(\n --tct-checkbox-description-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n\n :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: center;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n}\n\n.label-text {\n grid-area: label;\n\n :host([description]) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-stroke-width);\n }\n :host([checked]:not([checked='false'])) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n }\n :host(:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n }\n :host(:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n }\n :host([description]:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n }\n :host([checked]:not([checked='false']):hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n }\n :host([description]:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n }\n :host([checked]:not([checked='false']):focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n }\n\n label {\n line-height: var-list(--tct-checkbox-label-line-height, 24px);\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n width: var(--comp-checkbox-size);\n height: var(--comp-checkbox-size);\n border-radius: var-list(\n var-prefixer(checkbox-outer-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 4px\n );\n stroke: var(--comp-checkbox-outer-stroke-color);\n fill: var(--comp-checkbox-outer-fill-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n flex-shrink: 0;\n box-shadow: var(--tct-checkbox-box-shadow);\n\n rect {\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n :host([checked]:not([checked='false']):not([type='favorite'])) & {\n stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n\n rect {\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n }\n }\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n box-shadow: var-list(--tct-checkbox-error-box-shadow, --tct-checkbox-box-shadow);\n\n rect {\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n box-shadow: var-list(--tct-checkbox-hover-box-shadow, --tct-checkbox-box-shadow);\n rect {\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n :host(:hover[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-hover-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow,\n --tct-checkbox-box-shadow\n );\n rect {\n fill: var-list(\n --tct-checkbox-error-hover-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n }\n }\n\n :host(:focus-within:not([type='favorite'])) & {\n --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var-list(\n --tct-checkbox-focused-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n :host(:focus-within[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-focused-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-focused-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-focused-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n\n // Favorite\n :host([type='favorite']) & {\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host(:hover[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n // Checked favorite\n :host([checked]:not([checked='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-stroke-color,\n --tct-checkbox-favorite-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-hover-stroke-color,\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-fill-primary: #{var-list(\n --tct-checkbox-favorite-checked-fill-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-focused-stroke-color,\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error]:not([has-error='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error]:not([has-error='false'])[type='favorite'][checked]:not([checked='false'])) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n fill: none;\n stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n.toggle-indicator {\n transition:\n left var(--comp-checkbox-tween),\n height var(--comp-checkbox-tween),\n width var(--comp-checkbox-tween);\n height: 16px;\n width: 16px;\n left: 4px;\n border-radius: 50%;\n}\n\n.toggle-track {\n --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n height: 24px;\n width: 38px;\n fill: var-list(--tct-checkbox-toggle-track-color, transparent);\n border-radius: var(--app-border-radius-3, 12px);\n box-shadow: var-list(--tct-checkbox-toggle-track-box-shadow, --comp-default-track-box-shadow);\n transition:\n fill var(--comp-checkbox-tween),\n box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n mask: url(#xMask);\n fill: var(--comp-checkbox-toggle-color);\n transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n box-shadow: var-list(\n --tct-checkbox-toggle-hover-track-box-shadow,\n --comp-default-hover-track-box-shadow\n );\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n }\n }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n }\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-error-color);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n }\n }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n }\n }\n }\n }\n}\n\n:host([checked]:not([checked='false'])) {\n .toggle-indicator {\n left: 18px;\n }\n\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n border: none;\n }\n .toggle-circle {\n mask: url(#checkMask);\n fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n }\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-hover-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-active-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n }\n }\n }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n label {\n cursor: not-allowed;\n }\n}\n","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({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\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 // #endregion\n // #region Listeners\n\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 // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\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 onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\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 // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\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.renderToggleSVG();\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.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\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 renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n ></rect>\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask\n id=\"xMask\"\n maskUnits=\"userSpaceOnUse\"\n >\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n ></rect>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n </mask>\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n ></circle>\n </svg>\n </div>\n );\n }\n\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 === undefined ? undefined : `${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 aria-label={loc(this.label)}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n aria-hidden=\"true\"\n >\n <div>\n {loc(this.label)}\n <slot />\n </div>\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 // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-checkbox.entry.esm.js","sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n )};\n\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-color: #{var-list(\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-control-width: var(--comp-checkbox-size);\n --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n --comp-checkbox-bold-fallback-stroke-width: #{var-list(--tct-checkbox-bold-fallback-stroke-width, 0.7px)};\n --comp-checkbox-stroke-width: #{var-list(--tct-checkbox-stroke-width, unset)};\n --comp-checkbox-checked-stroke-width: #{var-list(\n --tct-checkbox-checked-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-hover-stroke-width: #{var-list(--tct-checkbox-hover-stroke-width, unset)};\n --comp-checkbox-focused-stroke-width: #{var-list(--tct-checkbox-focused-stroke-width, unset)};\n --comp-checkbox-checked-hover-stroke-width: #{var-list(\n --tct-checkbox-checked-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-checked-focused-stroke-width: #{var-list(\n --tct-checkbox-checked-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-stroke-width: #{var-list(\n --tct-checkbox-description-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-focused-stroke-width: #{var-list(\n --tct-checkbox-description-focused-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n --comp-checkbox-description-hover-stroke-width: #{var-list(\n --tct-checkbox-description-hover-stroke-width,\n --comp-checkbox-bold-fallback-stroke-width\n )};\n\n :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: center;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n cursor: pointer;\n}\n\n.label-text {\n grid-area: label;\n\n :host([description]) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-stroke-width);\n }\n :host([checked]:not([checked='false'])) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n }\n :host(:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n }\n :host(:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n }\n :host([description]:hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n }\n :host([checked]:not([checked='false']):hover) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n }\n :host([description]:focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n }\n :host([checked]:not([checked='false']):focus-within) & {\n -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n }\n\n label {\n line-height: var-list(--tct-checkbox-label-line-height, 24px);\n .label-content {\n display: inline-block;\n }\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n :host(:not([type='toggle'])) & {\n cursor: pointer;\n }\n}\n\n.checkbox-icon {\n width: var(--comp-checkbox-size);\n height: var(--comp-checkbox-size);\n border-radius: var-list(\n var-prefixer(checkbox-outer-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 4px\n );\n stroke: var(--comp-checkbox-outer-stroke-color);\n fill: var(--comp-checkbox-outer-fill-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n flex-shrink: 0;\n box-shadow: var(--tct-checkbox-box-shadow);\n\n rect {\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n :host([checked]:not([checked='false']):not([type='favorite'])) & {\n stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n\n rect {\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n }\n }\n\n :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n box-shadow: var-list(--tct-checkbox-error-box-shadow, --tct-checkbox-box-shadow);\n\n rect {\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n box-shadow: var-list(--tct-checkbox-hover-box-shadow, --tct-checkbox-box-shadow);\n rect {\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n }\n }\n :host(:hover[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-hover-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow,\n --tct-checkbox-box-shadow\n );\n rect {\n fill: var-list(\n --tct-checkbox-error-hover-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n }\n }\n\n :host(:focus-within:not([type='favorite'])) & {\n --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var-list(\n --tct-checkbox-focused-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n :host(:focus-within[has-error]:not([has-error='false']):not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-focused-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-focused-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-focused-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n\n // Favorite\n :host([type='favorite']) & {\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host(:hover[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n // Checked favorite\n :host([checked]:not([checked='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-stroke-color,\n --tct-checkbox-favorite-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n transition:\n fill var(--comp-checkbox-tween),\n color var(--comp-checkbox-tween),\n stroke var(--comp-checkbox-tween);\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-hover-stroke-color,\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-fill-primary: #{var-list(\n --tct-checkbox-favorite-checked-fill-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-focused-stroke-color,\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error]:not([has-error='false'])[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error]:not([has-error='false'])[type='favorite'][checked]:not([checked='false'])) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n fill: none;\n stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n.toggle-indicator {\n transition:\n left var(--comp-checkbox-tween),\n height var(--comp-checkbox-tween),\n width var(--comp-checkbox-tween);\n height: 16px;\n width: 16px;\n left: 4px;\n border-radius: 50%;\n}\n\n.toggle-track {\n --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n height: 24px;\n width: 38px;\n fill: var-list(--tct-checkbox-toggle-track-color, transparent);\n border-radius: var(--app-border-radius-3, 12px);\n box-shadow: var-list(--tct-checkbox-toggle-track-box-shadow, --comp-default-track-box-shadow);\n transition:\n fill var(--comp-checkbox-tween),\n box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n mask: url(#xMask);\n fill: var(--comp-checkbox-toggle-color);\n transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n box-shadow: var-list(\n --tct-checkbox-toggle-hover-track-box-shadow,\n --comp-default-hover-track-box-shadow\n );\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n }\n }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n }\n .toggle-circle {\n fill: var(--comp-checkbox-toggle-error-color);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n }\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n }\n }\n :active {\n .toggle-circle {\n fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n }\n }\n }\n }\n}\n\n:host([checked]:not([checked='false'])) {\n .toggle-indicator {\n left: 18px;\n }\n\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n border: none;\n }\n .toggle-circle {\n mask: url(#checkMask);\n fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n }\n\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n }\n .toggle-indicator {\n height: 18px;\n width: 18px;\n }\n }\n }\n\n &:host([has-error]:not([has-error='false'])) {\n .toggle-track {\n fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n }\n &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n :hover,\n :focus-within {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-hover-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n }\n\n :active {\n .toggle-track {\n fill: var-list(\n --tct-checkbox-toggle-checked-error-active-track-color,\n --comp-checkbox-toggle-error-color\n );\n }\n }\n }\n }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n label {\n cursor: not-allowed;\n }\n}\n","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({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\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 // #endregion\n // #region Listeners\n\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 // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\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 onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\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 // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\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.renderToggleSVG();\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.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\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 renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n ></rect>\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask\n id=\"xMask\"\n maskUnits=\"userSpaceOnUse\"\n >\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n ></rect>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n </mask>\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n ></circle>\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;\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 === undefined ? undefined : `${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 aria-label={loc(this.label)}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={labelId}\n aria-hidden=\"true\"\n >\n <div\n class=\"label-content\"\n id={labelId}\n >\n {loc(this.label)}\n <slot />\n </div>\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 // #endregion\n}\n"],"names":[],"mappings":"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"}