@designsystem-se/af 35.4.0 → 35.4.1-beta.0

package/dist/esm/{typography-variation.enum-8ba40d15.js → typography-variation.enum-531cdf64.js}

@@ -12,6 +12,12 @@ var CalendarDatepickerValidation;
     CalendarDatepickerValidation["NEUTRAL"] = "neutral";
 })(CalendarDatepickerValidation || (CalendarDatepickerValidation = {}));
 
+var BarChartVariation;
+(function (BarChartVariation) {
+    BarChartVariation["Vertical"] = "vertical";
+    BarChartVariation["Horizontal"] = "horizontal";
+})(BarChartVariation || (BarChartVariation = {}));
+
 var CodeBlockLanguage;
 (function (CodeBlockLanguage) {
     CodeBlockLanguage["JSON"] = "json";
@@ -253,26 +259,10 @@ var FeedbackVariation;
     FeedbackVariation["SECONDARY"] = "secondary";
 })(FeedbackVariation || (FeedbackVariation = {}));
 
-var TypographyHeadingJumboLevel;
-(function (TypographyHeadingJumboLevel) {
-    TypographyHeadingJumboLevel["H1"] = "h1";
-    TypographyHeadingJumboLevel["H2"] = "h2";
-    TypographyHeadingJumboLevel["H3"] = "h3";
-    TypographyHeadingJumboLevel["H4"] = "h4";
-    TypographyHeadingJumboLevel["H5"] = "h5";
-    TypographyHeadingJumboLevel["H6"] = "h6";
-})(TypographyHeadingJumboLevel || (TypographyHeadingJumboLevel = {}));
-
-var TypographyHeadingJumboVariation;
-(function (TypographyHeadingJumboVariation) {
-    TypographyHeadingJumboVariation["PRIMARY"] = "primary";
-    TypographyHeadingJumboVariation["SECONDARY"] = "secondary";
-})(TypographyHeadingJumboVariation || (TypographyHeadingJumboVariation = {}));
-
 var TypographyVariation;
 (function (TypographyVariation) {
     TypographyVariation["SMALL"] = "small";
     TypographyVariation["LARGE"] = "large";
 })(TypographyVariation || (TypographyVariation = {}));
 
-export { BadgeNotificationType as B, CalendarDatepickerValidation as C, DialogHeadingLevel as D, ErrorPageStatusCodes as E, FooterVariation as F, HeaderCenterContentWidth as H, InfoCardMultiContainerHeadingLevel as I, LayoutBlockContainer as L, NavigationVerticalMenuActiveIndicatorSize as N, TitleLogoVariation as T, CodeBlockLanguage as a, DialogSize as b, DialogVariation as c, FormErrorListHeadingLevel as d, FormRadiobuttonLayout as e, FormRadiobuttonValidation as f, FormRadiobuttonVariation as g, FormReceiptHeadingLevel as h, FormReceiptType as i, FormReceiptVariation as j, FormSelectFilterValidation as k, InfoCardMultiHeadingLevel as l, InfoCardMultiVariation as m, InfoCardHeadingLevel as n, LayoutContainerVariation as o, LayoutContainerMaxWidth as p, NavigationVerticalMenuVariation as q, NotificationAlertHeadingLevel as r, NotificationAlertSize as s, NotificationAlertVariation as t, ToolsFeedbackHeadingLevel as u, ToolsFeedbackType as v, FeedbackVariation as w, TypographyHeadingJumboLevel as x, TypographyHeadingJumboVariation as y, TypographyVariation as z };
+export { BadgeNotificationType as B, CalendarDatepickerValidation as C, DialogHeadingLevel as D, ErrorPageStatusCodes as E, FooterVariation as F, HeaderCenterContentWidth as H, InfoCardMultiContainerHeadingLevel as I, LayoutBlockContainer as L, NavigationVerticalMenuActiveIndicatorSize as N, TitleLogoVariation as T, BarChartVariation as a, CodeBlockLanguage as b, DialogSize as c, DialogVariation as d, FormErrorListHeadingLevel as e, FormRadiobuttonLayout as f, FormRadiobuttonValidation as g, FormRadiobuttonVariation as h, FormReceiptHeadingLevel as i, FormReceiptType as j, FormReceiptVariation as k, FormSelectFilterValidation as l, InfoCardMultiHeadingLevel as m, InfoCardMultiVariation as n, InfoCardHeadingLevel as o, LayoutContainerVariation as p, LayoutContainerMaxWidth as q, NavigationVerticalMenuVariation as r, NotificationAlertHeadingLevel as s, NotificationAlertSize as t, NotificationAlertVariation as u, ToolsFeedbackHeadingLevel as v, ToolsFeedbackType as w, FeedbackVariation as x, TypographyVariation as y };

package/dist/types/components/_chart/bar-chart/bar-chart.d.ts

@@ -43,6 +43,9 @@ export declare class barChart {
     private _placeholderTicks;
     private _prevHeight;
     private _tempScale;
+    private mappedData;
+    private dataWidth;
+    private barGap;
     afChartDataUpdate(data: ChartLineData | string): void;
     private _chartDiv;
     private _host;
@@ -66,6 +69,7 @@ export declare class barChart {
     private defaultDuration;
     fontSize: string;
     private _numberFormat;
+    private colorPalettes;
     barChartObserver: ResizeObserver;
     tableObserver: ResizeObserver;
     initSvg(): void;
@@ -89,6 +93,11 @@ export declare class barChart {
     private adjustBarText;
     private reshapeData;
     private adjustBarSize;
+    colorFunction(input: number | string): string;
+    xFunction: (d: any, i: number) => any;
+    yFunction: (d: any, i: number) => any;
+    heightFunction: (d: any) => number;
+    widthFunction: (d: any) => number;
     resize(): void;
     private resizeTable;
     private getLargestText;

package/hydrate/index.js

@@ -35701,6 +35701,9 @@ class barChart {
         // States
         this._loading = false;
         this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
+        // Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
+        this.dataWidth = 1;
+        this.barGap = 0;
         this._dims = {};
         this._margin = {
             bottom: 0,
@@ -35718,6 +35721,7 @@ class barChart {
         this.defaultDuration = 400;
         // Text and formats
         this.fontSize = '0.875rem';
+        this.colorPalettes = ['--digi--color--background--brand-primary', '--digi--color--infographic--brand--primary', '--digi--color--background--sentiment--beta--primary', '--digi--color--text--interactive--visited', '--digi--color--icon--validation--error'];
         // Observer for watching size changes when in line chart mode
         this.barChartObserver = new ResizeObserver((entries) => {
             entries.forEach(() => {
@@ -35763,12 +35767,8 @@ class barChart {
                 this._dims.width - this._margin.right - this._margin.left
             ]);
             this._barSelection
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth());
+                .attr('x', this.xFunction)
+                .attr('width', this.widthFunction);
             this.setValueTicks();
         };
         // Adding click listener for tool tip text
@@ -35857,7 +35857,7 @@ class barChart {
         this.updateBars = (fromLoading) => {
             this._barChartContainer
                 .selectAll('.barGroup')
-                .data(this.reshapeData)
+                .data(this.mappedData)
                 .join((enter) => {
                 var _a, _b;
                 const tempSelection = enter
@@ -35888,17 +35888,9 @@ class barChart {
                     .transition()
                     .duration(this.defaultDuration)
                     .ease(polyInOut)
-                    .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale.bandwidth())
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._yScale(d.value))
-                    .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.bandwidth()
-                    : this._dims.height -
-                        this._margin.bottom -
-                        this._yScale(d.value))
+                    .attr('width', this.widthFunction)
+                    .attr('y', this.yFunction)
+                    .attr('height', this.heightFunction)
                     .attr('fill', '#00005a');
                 if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
                     return tempSelection;
@@ -35970,15 +35962,11 @@ class barChart {
                         .on('mouseenter', this.hover)
                         .on('mouseleave', this.hoverOut)
                         .on('click', this.openTooltip)
-                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? 2
-                        : this._xScale(d.key))
+                        .attr('x', this.xFunction)
                         .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                         ? this._yScale(d.key)
                         : this._dims.height - this._margin.bottom)
-                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._xScale(d.value)
-                        : this._xScale.bandwidth())
+                        .attr('width', this.widthFunction)
                         .attr('height', () => this.afVariation === BarChartVariation.Horizontal
                         ? this._yScale.bandwidth()
                         : 0)
@@ -35986,14 +35974,8 @@ class barChart {
                         .transition()
                         .duration(this.defaultDuration)
                         .ease(polyInOut)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._yScale(d.value))
-                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : this._dims.height -
-                            this._margin.bottom -
-                            this._yScale(d.value))
+                        .attr('y', this.yFunction)
+                        .attr('height', this.heightFunction)
                         .on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
                 }
                 else {
@@ -36002,20 +35984,10 @@ class barChart {
                         .transition()
                         .duration(this.defaultDuration)
                         .ease(polyInOut)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._yScale(d.value))
-                        .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? 2
-                        : this._xScale(d.key))
-                        .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._xScale(d.value)
-                        : this._xScale.bandwidth())
-                        .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
-                        : this._dims.height -
-                            this._margin.bottom -
-                            this._yScale(d.value))
+                        .attr('x', this.xFunction)
+                        .attr('y', this.yFunction)
+                        .attr('width', this.widthFunction)
+                        .attr('height', this.heightFunction)
                         .attr('fill', '#00005a');
                 }
                 return update
@@ -36106,37 +36078,67 @@ class barChart {
             const toReturn = [];
             if (this._loading) {
                 this._placeholderTicks.forEach((key) => {
-                    toReturn.push({
+                    const tick = { key: key, series: [] };
+                    tick.series.push({
                         key: key,
+                        serie: '',
                         value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
-                        len: '1'
+                        len: 0
                     });
+                    toReturn.push(tick);
                 });
                 return toReturn;
             }
             this._chartData.data.xValueNames.forEach((key, index) => {
-                toReturn.push({
-                    key: key,
-                    value: this._chartData.data.series[0].yValues[index],
-                    len: this.getTextSize(this._chartData.data.series[0].yValues[index].toLocaleString())
+                const tick = { key: key, series: [] };
+                this._chartData.data.series.forEach((serie) => {
+                    if (serie.yValues[index]) {
+                        tick.series.push({
+                            key: key,
+                            serie: serie.title,
+                            value: serie.yValues[index],
+                            len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                        });
+                    }
                 });
+                toReturn.push(tick);
             });
             return toReturn;
         };
         this.adjustBarSize = () => {
-            this._barSelection
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._yScale(d.value))
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
-                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth()
-                : this._dims.height - this._margin.bottom - this._yScale(d.value));
+            this._barSelection.selectAll('.bar')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction);
+        };
+        // Handling x positioning of bars
+        this.xFunction = (d, i) => {
+            return this.afVariation === BarChartVariation.Horizontal
+                ? (d.value > 0 ? this._xScale(0) : this._xScale(d.value))
+                : this._xScale(d.key) + ((this._xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
+        };
+        // Handling y positioning of bars
+        this.yFunction = (d, i) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === BarChartVariation.Horizontal
+                ? this._yScale(d.key) + ((this._yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
+                : (d.value < 0 ? this._yScale(0) : this._yScale(d.value));
+        };
+        // Handling height for bars
+        this.heightFunction = (d) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === BarChartVariation.Horizontal
+                ? this._yScale.bandwidth() / this.dataWidth - (this.barGap)
+                : (d.value < 0 ? this._yScale(d.value) - this._yScale(0) : this._yScale(0) - this._yScale(d.value));
+        };
+        // Handling width for bars
+        this.widthFunction = (d) => {
+            return this.afVariation === BarChartVariation.Horizontal
+                ? Math.abs(this._xScale(0) - this._xScale(d.value))
+                : this._xScale.bandwidth() / this.dataWidth - (this.barGap);
         };
         // Resize table
         this.resizeTable = () => {
@@ -36376,16 +36378,16 @@ class barChart {
             select(event.target)
                 .transition('hover')
                 .duration(20)
-                .attr('fill', event.target.tagName === 'rect'
-                ? '#4C4C8B'
-                : 'var(--digi--color--text--link-hover)');
+                .attr('fill', (d) => event.target.tagName === 'rect'
+                ? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
+                : 'var(--digi--color--background--interactive--hover--tertiary)');
         };
         // Removing highlight from bar
         this.hoverOut = (event) => {
             select(event.target)
                 .transition('hover')
                 .duration(this.defaultDuration)
-                .attr('fill', event.target.tagName === 'rect' ? '#00005a' : '#333333');
+                .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
         };
         this.openTooltip = (...[, d]) => {
             // If type is string, the user has clicked on a y-axis tick
@@ -36454,7 +36456,7 @@ class barChart {
             if (this.afVariation == BarChartVariation.Horizontal)
                 this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
             this.tickSizes();
-            this._barChartContainer.selectAll('.barGroup').data(this.reshapeData);
+            this._barChartContainer.selectAll('.barGroup').data(this.mappedData);
             if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
                 this._textSelection.remove();
             this.initBarText();
@@ -36525,6 +36527,14 @@ class barChart {
             this._chartData = data;
         else
             this._chartData = JSON.parse(data);
+        this.mappedData = this.reshapeData();
+        // checking for width of each tick
+        this.mappedData.forEach((elem) => {
+            if (elem.series.length > this.dataWidth)
+                this.dataWidth = elem.series.length;
+        });
+        if (this.dataWidth > 1)
+            this.barGap = 1;
     }
     initSvg() {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -36644,7 +36654,7 @@ class barChart {
             this._barChartContainer.selectAll('.barGroup').remove();
             this._barSelection = this._barChartContainer
                 .selectAll('barGroup')
-                .data(this.reshapeData)
+                .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
                 .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
@@ -36655,26 +36665,17 @@ class barChart {
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                 ? this._yScale(d.key)
                 : this._dims.height - this._margin.bottom)
-                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? 2
-                : this._xScale(d.key))
+                .attr('x', this.xFunction)
                 .attr('ry', 4)
                 .attr('rx', 4)
-                .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale.bandwidth())
+                .attr('width', this.widthFunction)
                 .attr('height', () => 0)
-                //.attr('height', (d: any) => this.afVariation === BarChartVariation.Horizontal ? this._yScale.bandwidth() : (this._dims.height - this._margin.bottom) - this._yScale(d.value))
                 .attr('fill', 'gray')
                 .transition()
                 .duration(400)
                 .delay((...[, i]) => i * 150)
-                .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._yScale(d.value))
-                .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth()
-                : this._dims.height - this._margin.bottom - this._yScale(d.value));
+                .attr('y', this.yFunction)
+                .attr('height', this.heightFunction);
             this._barSelection
                 .transition()
                 .duration(400)
@@ -36764,7 +36765,7 @@ class barChart {
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.setValueTicks();
             // Removing first tick, because it aligns with y-axis domain
-            this._xAxisHandle.select('.tick').select('line').remove();
+            //this._xAxisHandle.select('.tick').select('line').remove();
         }
         else {
             if (!empty) {
@@ -36778,39 +36779,41 @@ class barChart {
     initBars() {
         this._barSelection = this._barChartContainer
             .selectAll('barGroup')
-            .data(this.reshapeData)
+            .data(this.mappedData)
             .join('g')
             .attr('class', 'barGroup')
-            .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
-            .append('rect')
+            .attr('id', (d) => {
+            return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
+        });
+        this._barSelection.selectAll('.barGroup')
+            .data((d) => {
+            return d.series;
+        })
+            .join('rect')
             .attr('class', 'bar')
-            .style('cursor', 'pointer');
-        this._barSelection
-            .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale(d.key)
-            : this._yScale(d.value))
-            .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? 2
-            : this._xScale(d.key))
+            .style('cursor', 'pointer')
+            .attr('x', this.xFunction)
+            .attr('y', this.yFunction)
             .attr('ry', 4)
             .attr('rx', 4)
-            .attr('width', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._xScale(d.value)
-            : this._xScale.bandwidth())
-            .attr('height', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale.bandwidth()
-            : this._dims.height - this._margin.bottom - this._yScale(d.value))
-            .attr('fill', '#00005a')
+            .attr('width', this.widthFunction)
+            .attr('height', this.heightFunction)
+            .attr('fill', (d) => this.colorFunction(d.serie))
             .on('mouseenter', this.hover)
             .on('mouseleave', this.hoverOut)
             .on('click', this.openTooltip);
     }
     initBarText() {
+        var _a, _b;
+        if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+            return;
         this._textSelection = this._barChartContainer
             .selectAll('.barGroup')
             .append('text');
         this._textSelection
-            .text((d) => d.value.toLocaleString(undefined, this._numberFormat))
+            .text((d) => {
+            return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
+        })
             .attr('class', 'barText')
             .attr('font-size', this.fontSize)
             .attr('font-weight', '600')
@@ -36948,6 +36951,18 @@ class barChart {
             }
         }
     }
+    // Getting correct color given index or name of data serie
+    colorFunction(input) {
+        if (typeof input === 'number')
+            return `var(${this.colorPalettes[input]})`;
+        else {
+            const index = this._chartData.data.series.findIndex((serie) => serie.title === input);
+            if (index > 0)
+                return `var(${this.colorPalettes[index]})`;
+            else
+                return `var(${this.colorPalettes[0]})`;
+        }
+    }
     // Resizing bar chart
     resize() {
         var _a;
@@ -37028,11 +37043,11 @@ class barChart {
     }
     // Not currently used
     /*get cssModifiers() {
-          return {
-              'digi-bar-chart--vertical': this.afVariation == 'vertical',
-              'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
-          };
-      }*/
+      return {
+        'digi-bar-chart--vertical': this.afVariation == 'vertical',
+        'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
+      };
+    }*/
     // Returns pixelwidth of text given the current fontSize (costly function using .each)
     getTextSize(text) {
         const textWidth = [];
@@ -37102,7 +37117,7 @@ class barChart {
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
             }
         }
-        return (hAsync(Host, { key: '7659fcc4817cdfb3f19f2bd11a41464c13b5e19e', ref: (el) => (this._host = el) }, hAsync("div", { key: '063611cf8dbb2554904d972ed3fc1f89d714772e', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, hAsync("digi-typography", { key: 'ad58c43c2629e7b2b97e3ad1658646e5171b1531', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '2234460c0ffab8e7d251f099f4f2d38e1e5ebede', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: 'b82a89d578d997ab878d44a2928e5e31773bd34f', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'b5dc532f7655bd383d0dcf42f8851edbc81b448c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: 'f868d9fd2c37c247e8abdd59cf2b9342ad120fef', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '6a0f7838d86a43b46d9a036ad935f50ebb2b523f', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), hAsync("div", { key: '5f37b9eaf1030cd1d5b1b0360cdaaa61f953b624', class: "chartTooltip", id: this.afId }, hAsync("div", { key: 'a89608cb64620456a165ba4fb57db823870d2231', class: "tooltipBody" }), hAsync("digi-icon-x", { key: 'e842c2b42f6bc7d6dfdad1d1b8a7acb9f8df5a1a', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", null)) : (hAsync("digi-icon-caret-down", null))), hAsync("div", { key: 'f07154ab370a948016aa30a2547c4c9b25fae03b', ref: (el) => (this._chartDiv = el) }, " "), hAsync("div", { key: '385151df18d373779257040d298bf8c108184500', class: "legend", ref: (el) => (this._legendDiv = el) }), hAsync("div", { key: 'd5f07fc01a628aa2035a96d86621b6bab1e73f01', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (hAsync(Host, { key: 'a1e4aaa788766d54c691e95b7e70932b0e7d2b05', ref: (el) => (this._host = el) }, hAsync("div", { key: '2fac926d196acaa20ab5f438968e3c98c08dd104', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, hAsync("digi-typography", { key: '16d8cbd0f03a2a2d24d3366ab1b3eaed797dd361', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '22a93add4a7f1ea3965ce496f2b5cbf488b01314', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '152938d206dc00e2fb88b52d332960cbeda2c045', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '66db213ee1c4cb169c7c257853a15a468bf2a83e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: 'ac4b8adad6ace97f50591cd39b8b0082d067f069', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'b28e00a40b5c1a2919146ec4815f23a14fdfac50', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), hAsync("div", { key: '63f80744faa1d4b3d7d62bece3b5c446eda3ae7b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '8c9fa9388b9bfc071c4a594275159eb36a8ec43b', class: "tooltipBody" }), hAsync("digi-icon-x", { key: '252d12a937e5276381fa40ec3bb4e77c259da9c1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", null)) : (hAsync("digi-icon-caret-down", null))), hAsync("div", { key: '9b70433c310882bd0a06784ca1fa21c5b2dd9e52', ref: (el) => (this._chartDiv = el) }, " "), hAsync("div", { key: '459e38448e29eea1fa7a10de7f3f1f06b6404eab', class: "legend", ref: (el) => (this._legendDiv = el) }), hAsync("div", { key: 'cc655054cb3c3688c75060ebbdf6c3f8ea4ad712', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {