@designsystem-se/af 35.4.1-beta.1 → 35.4.1-beta.3

package/dist/collection/components/_chart/bar-chart/bar-chart.js

@@ -51,16 +51,78 @@ export class barChart {
                 .transition('color')
                 .duration(150)
                 .attr('fill', (barData) => {
+                var _a;
                 if (barData.serie === serie)
                     return this.colorFunction(barData.serie);
-                else
+                else {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                        return 'url(#prognosisInactive)';
+                    }
                     return this.evalColorVar('--digi--color--background--secondary-accent');
+                }
             });
             d3.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
         };
         this.resetBarColor = () => {
             this.barChartContainer.selectAll('.bar').transition('color').duration(150).attr('fill', (barData) => this.colorFunction(barData.serie));
             d3.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            if (this.chartData.data.averageLine) {
+                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                    .style('filter', 'contrast(0.5)');
+                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                        .style('filter', 'contrast(0.5)'); */
+            }
+        };
+        this.highlightAverageLine = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    return 'url(#prognosisInactive)';
+                }
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
+                .duration(150).style('mix-blend-mode', null).style('filter', null);
+            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
+                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
+            d3.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        // Sets and resizespositions the average line
+        this.averageLine = () => {
+            if (!this.chartData.data.averageLine)
+                return;
+            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
+            /*     avLineGroup.selectAll('.averageLineText')
+                  .data(d => [d])
+                  .join('text')
+                  .attr('class', 'averageLineText')
+                  .text(d => d.text)
+                  .attr('x', this.xScale.range()[0])
+                  .attr('y', (d) => this.yScale(d.value))
+                  .attr('dy', -2)
+                  .attr('font-size', this.fontSize)
+                  .attr('fill', 'var(--digi--color--infographic--lineart)')
+                  .style('mix-blend-mode', 'plus-lighter')
+                  .style('filter', 'contrast(0.5)'); */
+            avLineGroup.selectAll('.averageLine')
+                .data(d => [d.value])
+                .join('line')
+                .attr('class', 'averageLine')
+                .attr('x1', this.xScale.range()[0])
+                .attr('y1', (d) => this.yScale(d))
+                .attr('x2', this.xScale.range()[1])
+                .attr('y2', (d) => this.yScale(d))
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '12, 7')
+                .attr('stroke-linecap', 'round')
+                .style('mix-blend-mode', 'plus-lighter')
+                .style('filter', 'contrast(0.5)')
+                .style('pointer-events', 'none');
         };
         // Resizing chart while loading
         this.loadingResize = () => {
@@ -102,7 +164,12 @@ export class barChart {
                 this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
                     .duration(20)
                     .attr('fill', (d) => {
-                    return this.adjustColor(this.colorFunction(d.serie), 50);
+                    var _a;
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
                 });
             }
         };
@@ -438,20 +505,40 @@ export class barChart {
                 });
                 return toReturn;
             }
-            this.chartData.data.xValueNames.forEach((key, index) => {
-                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
+            else {
+                if (this.chartData.data.xValueNames) {
+                    this.chartData.data.xValueNames.forEach((key, index) => {
+                        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);
-            });
+                        toReturn.push(tick);
+                    });
+                }
+                else {
+                    this.chartData.data.xValues.forEach((key, index) => {
+                        const tick = { key: key.toString(), series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key.toString(),
+                                    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 = () => {
@@ -504,7 +591,10 @@ export class barChart {
                 this.dims = d3.select(this.chartDiv).node().getBoundingClientRect();
             this.dims.height =
                 this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
-            return prevHeight != this.dims.height;
+            // Making sure height and width are defined
+            this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
+            this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
+            return prevHeight !== this.dims.height;
         };
         // Setting margins given text size
         this.setMargins = (fromLoading) => {
@@ -731,9 +821,17 @@ export class barChart {
                 .transition('color')
                 .duration(20)
                 .attr('fill', (d) => {
-                return event.target.tagName === 'rect'
-                    ? this.adjustColor(this.colorFunction(d.serie), 50)
-                    : this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                var _a;
+                if (event.target.tagName === 'rect') {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
+                }
+                else {
+                    return this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                }
             });
         };
         // Removing highlight from bar
@@ -753,7 +851,7 @@ export class barChart {
             else
                 this.tooltipData = d;
             const tooltipBody = this.tooltip.select('.tooltipBody');
-            tooltipBody
+            this.tooltip
                 .select('.tooltipHeading')
                 .html(this.tooltipData.key);
             tooltipBody
@@ -916,6 +1014,8 @@ export class barChart {
             this.chartData = data;
         else
             this.chartData = JSON.parse(data);
+        if (this.chartData)
+            this.series = this.chartData.data.series.map(serie => serie.title);
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -959,10 +1059,13 @@ export class barChart {
     }
     initLegend() {
         const rectSize = 18;
+        const legendData = this.chartData.data.series.map(serie => serie.title);
+        if (this.chartData.data.averageLine)
+            legendData.push(this.chartData.data.averageLine.text);
         const legendChips = d3.select(this.legendDiv).select('.legend')
             .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
             .selectAll('.legendChip')
-            .data(this.chartData.data.series.map(serie => serie.title))
+            .data(legendData)
             .join('div')
             .attr('class', 'legendChip')
             .style('display', 'flex')
@@ -983,29 +1086,46 @@ export class barChart {
             .attr('rx', 4)
             .attr('ry', 4)
             .attr('fill', (title) => this.colorFunction(title));
-        legendChips.append('span').text((d) => d);
+        legendChips.append('span').style('text-wrap', 'nowrap').text((d) => d);
+        if (this.chartData.data.averageLine) {
+            const averageLine = legendChips.filter(':last-child')
+                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
+            const miniSVG = averageLine
+                .select('svg')
+                .attr('width', rectSize * 2);
+            miniSVG.select('rect').remove();
+            miniSVG.append('line')
+                .attr('x1', 1)
+                .attr('x2', rectSize * 2 - 1)
+                .attr('y1', rectSize / 2 + 1)
+                .attr('y2', rectSize / 2 + 1)
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-dasharray', '12, 7');
+        }
     }
     initToolTip() {
         // Getting handle for tooltip
         this.tooltip = d3.select('#' + this.afId);
-        this.tooltip.select('.close').on('click', this.closeTooltip);
+        this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
         // Add heading placeholder for heading
         this.tooltip
-            .select('.tooltipBody')
-            .append('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1)) // increment heading level by one
+            .select('.tooltipHead')
+            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
             .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
             .style('font-size', '1rem')
-            .style('margin', '0 0.75rem 0.5rem 0 ')
+            .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
         this.tooltip.style('visibility', 'hidden');
     }
     initEmpty() {
-        d3.select(this.chartDiv).select('svg').remove();
+        d3.select(this.chartDiv).select('.chartSVG').remove();
         this.maxHeight = d3
             .select(this.host)
             .node()
             .parentNode.getBoundingClientRect().height;
         this.barChartObserver.observe(this.chartDiv);
+        this.setDims();
         // Getting rem-size
         this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setMargins();
@@ -1013,6 +1133,7 @@ export class barChart {
         this.svg = d3
             .select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
@@ -1024,10 +1145,13 @@ export class barChart {
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
+        this.tooltip = d3.select('#' + this.afId);
+        this.tooltip.style('visibility', 'hidden');
         this.loadingState(true);
     }
     loadingState(empty) {
         this.loading = true;
+        console.log('loading!');
         // close potentially open tooltip
         if (this.tooltip)
             this.closeTooltip();
@@ -1073,11 +1197,13 @@ export class barChart {
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
-                .append('rect')
+                .attr('id', (d) => '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.dims.height - this.margin.bottom)
@@ -1086,13 +1212,14 @@ export class barChart {
                 .attr('rx', 4)
                 .attr('width', this.widthFunction)
                 .attr('height', () => 0)
-                .attr('fill', 'gray')
-                .transition()
+                .attr('fill', 'gray');
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .delay((...[, i]) => i * 150)
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
-            this.barSelection
+            this.barChartContainer.selectAll('.bar')
                 .transition()
                 .duration(400)
                 .ease(d3.easeLinear)
@@ -1195,6 +1322,9 @@ export class barChart {
     // Initializing bars, can only handle one series of bars for now
     initBars() {
         this.barSelection = this.barChartContainer
+            .append('g')
+            .attr('class', 'interactiveElements')
+            .style('isolation', 'isolate')
             .selectAll('barGroup')
             .data(this.mappedData)
             .join('g')
@@ -1251,6 +1381,7 @@ export class barChart {
         this.initYAxis();
         this.initXAxis();
         this.initBars();
+        this.averageLine();
         this.initBarText();
     }
     async updateChain() {
@@ -1365,12 +1496,18 @@ export class barChart {
     }
     // Getting correct color given index or name of data serie
     colorFunction(input) {
-        if (typeof input === 'number')
+        var _a;
+        if (typeof input === 'number') {
             return this.evalColorVar(this.colorPalettes[input]);
+        }
         else {
             const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
-            if (index > 0)
-                return this.evalColorVar(this.colorPalettes[index]);
+            if (index > 0) {
+                if ((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern)
+                    return 'url(#prognosis)';
+                else
+                    return this.evalColorVar(this.colorPalettes[index]);
+            }
             else
                 return this.evalColorVar(this.colorPalettes[0]);
         }
@@ -1406,6 +1543,7 @@ export class barChart {
         this.setNamedTicks();
         this.setValueTicks();
         this.setTickInteraction();
+        this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
         if (this.tooltip.style('visibility') !== 'hidden')
@@ -1528,7 +1666,7 @@ export 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 (h(Host, { key: 'adbf9f1c26a8816a8d4b585b0fc7a0b9100bf252', ref: (el) => (this.host = el) }, h("div", { key: 'ee28dc5914be751e08c73253b80fd257c2e17bbb', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '6a0b051d3c26e9c34fb59d4ee323a10d1cb542e1', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '9e11623f0b35f394dc3655067625a37771f648d1', 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() : ''}` }, h("digi-icon-table", { key: '6e00e771521a10c0213ae6267ea2879c7ccc4b3c', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a1eec7299c9cd273ceffa1f1689ee0c6297ce0a1', 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() : ''}` }, h("digi-icon-chart", { key: '5361af6d17e4cd7d6217afd48c4a474fd905c8de', slot: "icon" }), "Visa diagram"), h("div", { key: '2efe2244c2105390580779f60a7c1accd5135d49', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '48f2316efe396309fd73510a2eea011c137e24ed', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '4f2f494517979cbb9de43945d5ffe17acbe6c814', class: "chartTooltip", id: this.afId }, h("div", { key: '36db97d0dcd4e2009cd33b4125b631eddae039ae', class: "tooltipBody" }), h("digi-icon-x", { key: 'b3ac9ec4b6cd6c2c666d475929c10c0aaba2b9e1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'f96ed8b4c527ba32de5dd5bdb58c367435ecbc04', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3911352915f02a33231c2e0604a5073fb7203bd3', class: "legend" })), h("div", { key: '29c613f6af6e23b05748e230bad4c00156f30fd6', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (h(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', 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() : ''}` }, h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', 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() : ''}` }, h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_chart/chart-line/chart-line.js

@@ -1616,7 +1616,7 @@ export class ChartLine {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: 'e5e8fdc58756850c9efa7cbb07b9e1e381dea725', ref: (el) => (this._host = el) }, h("div", { key: 'be9a2e7be1153eca0ac094b6af9697978caac397', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'cb5ef87503157d2b6fde4faa88146482c4b35263', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '70fae20a2cbc88c3d196b4b397c60c6a7af017d5', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '4a8d8c1975a90a6479e48995b850bdb9de303e4b', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b54b1cde8415d450ce8d8f1381eea7a730629a69', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'c59f756df0b6baf807bbcafc4f5043b732731db5', slot: "icon" }), "Visa diagram"), h("div", { key: '4782e1922b6e45665d237516ad8340d00e1f9b45', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'e5543d8919613a9fb3ff1c3f5d5f84fd4059b076', class: "chartTooltip", id: this.afId }, h("div", { key: '236b2644e8052cc68c388210bd517e329d52ca21', class: "tooltipHead" }, h("digi-icon-x", { key: 'fb6f0881aeedd04414157ff95484a2d32fa34b38', class: "close" }), ' '), h("div", { key: 'fb9bddebfb38768a8402a59a71551b95270e3305', class: "tooltipBody" })), h("div", { key: '469dac4bc1ab51f4d4cb0b97e7e4a216cd1cc4fe', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '48bcfdc1eae947708bd2f7414f189bd1339db2d3', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'd3dc96e2710194b6e66848f663d7517b33dd5926', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '2660390a27d10e08cede6fbc9baa2f6f2c23b598', ref: (el) => (this._host = el) }, h("div", { key: '28f684dbcf23122b496b506979da55556c7441d9', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '1790454fa384ac0f0443462f4f307108dc3950ac', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'ede9024c57dd001053645e052326e36caca932c0', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'a8ff4b212951ea76a3bca93e7ffacb08053ebf35', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'e97d0302da660694c7ec5d451c794d9ae3d187c6', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '2ca654591868fb8ef85016b2fcaec0655f53ea3f', slot: "icon" }), "Visa diagram"), h("div", { key: '409521a949a75753d8ad998861e8f53f8f2cda62', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '19b8343c5039da7ead9a50ac7de74d0ce0324681', class: "chartTooltip", id: this.afId }, h("div", { key: '28767d138814122bdec3c0f83d67772f3eb2be79', class: "tooltipHead" }, h("digi-icon-x", { key: '0bb56bb3793b1a686b6f9adc4fb511fac02b2be8', class: "close" }), ' '), h("div", { key: '8c26e79ac3581ea677b483f56830c9d410cf88a9', class: "tooltipBody" })), h("div", { key: 'b52f49ec54de82fe47903b3d02951b4067989e86', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'd203c6a181d727459e2832392adaf9474c10d2ce', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'f4f0302c22507f874e5916b4ce11a706d54de1d5', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-chart-line"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_code/code/code.js

@@ -36,7 +36,7 @@ export class Code {
         };
     }
     render() {
-        return (h("span", { key: '7c1ef98c36152df078e8bedcb71742d8bf1ee567', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '851c4c6ff5a7475543f2e5bef68946103f1dce17', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (h("span", { key: 'e4ccd883dae3019da944b14792cb2f435396317c', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: 'ea2b50ef49a1cd75a452701f31f2b9ccbb2e5a6d', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get is() { return "digi-code"; }
     static get originalStyleUrls() {

package/dist/collection/components/_code/code-block/code-block.js

@@ -46,7 +46,7 @@ export class CodeBlock {
         };
     }
     render() {
-        return (h("div", { key: 'e029a956df57a20023b7891ca17193bb22bb4a49', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'd947d2cc58f9ca343ef1d5f86c3c8384cf30674b', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: 'c0198254aac7591404c22e4c9b2bd42f574eb074', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '9c6cfa7ee1692aec7d63fdce792df73acc9178df', class: "digi-code-block__toolbar" }, h("digi-button", { key: '6482a677d2c0a3dd881b8b4f8963ad92131eee9d', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: '187a6cdd4ba8ccb5b750a556f427537e70eb9d55', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
+        return (h("div", { key: '0e303cbfa97ce3236ed4371b4c45936081f0b8b3', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'b0ed125798e6a05dcfc29af8b35b483492be1e6e', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: 'fe91928297c3833d7e17cefe283c75a47b0e229b', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '1bde0cbe8ef10b1eb08cca1e2eac67ea2caf7eb2', class: "digi-code-block__toolbar" }, h("digi-button", { key: '66823907ac7bb38d4b6b23fdd3a875b4fe38ddff', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: '4329fa1556960690d691b32b59801fbdbd07d390', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
     }
     static get is() { return "digi-code-block"; }
     static get originalStyleUrls() {

package/dist/collection/components/_code/code-example/code-example.js

@@ -137,17 +137,17 @@ export class CodeExample {
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (h("div", { key: '0aac88062d18bb191c2404520006a2f5b8c33ae5', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: 'b6d609bb0bfc8bd7056a712ff482737c7226bd4c', class: {
+        return (h("div", { key: '2ef6570a3577fc8e68971f09151dec2bd86bdc18', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '94e1dfbf94a1b7b90a770c86c4c309c02a5d682a', class: {
                 'digi-code-example__container': true
-            } }, h("div", { key: '1d1c2f8bfbc25d98bb6075e80ffc2d795de8ae12', class: "digi-code-example__example" }, h("slot", { key: 'cba52c172ea1a353d955c2126097ec54f6e0ff3d' })), !this.afHideCode && (h("div", { key: 'f50222cfb99ed37838a8170c9a749c818c867b79', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: 'e845e695285530ffb9f3eb9bdf62d3084363bced', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '6d19ac2f5a8a543a71438eea512d3a866bc55a19', class: {
+            } }, h("div", { key: '2a56800cc263782d8bbbf3962eaacaa1df341067', class: "digi-code-example__example" }, h("slot", { key: 'c11c6a395e412c64291261fc9c849b22960e685b' })), !this.afHideCode && (h("div", { key: 'd230e73ee09938b258675aae499eb5d0f20cb6da', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: 'bc334ed8052f21302dc1abd9402974938d3b11ae', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: 'e1d2f3d0908f13abffdda78f83fa008af09f0cb8', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), h("div", { key: 'c1c45315383b313f9419ed9088cccfc11545f85f', class: {
+            }, "aria-hidden": "true" }))), h("div", { key: 'a7fe982261026080d861cda236a555a50aee199d', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, h("digi-code-block", { key: 'aca64a8b41e403fda4cd8727efc2d53294c2ed6e', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
+            } }, h("digi-code-block", { key: '35e29b95fbe734f9823b39d34e91b78e338189b0', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'

package/dist/collection/components/_dialog/dialog/dialog.js

@@ -234,11 +234,11 @@ export class Dialog {
         };
     }
     render() {
-        return (h(Host, { key: '6f74c149ed1d3265d436e22a1b115352b7860c0c', ref: (el) => {
+        return (h(Host, { key: '7645cdea8aa64030e5cdacc13d2b657ced71694d', ref: (el) => {
                 this._host = el;
-            } }, this.afShowDialog && (h("div", { key: '4f7895c5f43e0faef2c06826e555c55c50aa8af5', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, h("digi-util-keydown-handler", { key: '881985dd349d3f975e9680a5eb844ec046bf628d', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e), class: "digi-dialog__keydown-handler" }, h("div", { key: '02ad87c54658da3c3adfbaac7768a87cc8e0d3c3', ref: (el) => {
+            } }, this.afShowDialog && (h("div", { key: '7956ce0de7909b54bd51a2a203f34239eea43f38', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, h("digi-util-keydown-handler", { key: 'd032d1a8b27b5cd88558c06d1a044dced2c0287c', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e), class: "digi-dialog__keydown-handler" }, h("div", { key: '5eaa4f82217a657b8a956ca19620ce5ee4058651', ref: (el) => {
                 this._wrapper = el;
-            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: 'bcf1d9fa5f4594e6ebe544c65587e49872dcd65f' }, this.afCloseButtonText && (h("digi-button", { key: '0a3b2adbc992d1a79f36c055709bd5ac24e29e94', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, h("digi-icon-x", { key: 'ec51a6c5d7af7ae4a965211a96dac8c273fe608c', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: 'e133694ca3fddaa700ce4e5693ad592e4f62f92d', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '3a77beeb5cb20112a78598e28df6f05d8ad7d84f', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '80e5e86fe0fdaa6594a866ce9a5be09c35406e9f' }), h("div", { key: 'd80c83821f6da6e1211f15fbd15cba56224325ee', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: 'fc15801b25df9926bb0dbbb00edfded78300ec81', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: '34c614b44e69353c59539510db04e8f8c3894ff1', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
+            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: '08f9045a7fedc3127593a92e85dbdb08243cd7aa' }, this.afCloseButtonText && (h("digi-button", { key: '297e28a9840d4365a98b41d7ce0b704ba20c3632', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, h("digi-icon-x", { key: 'b21d15d15f96f30cfeba0cc952c99918dbe92f0d', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: '9a17c4c0accd79502cd53d4f1a9b40bd24aa8f63', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '797db07e133f8e424972a22dc4cd9c0fff87c1ca', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '228d808404637c354e80264d9a16accd07ef7038' }), h("div", { key: '3026af7da362dae66103f8bee7d0cf82d4b9d9bc', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: '5799f15bee8a093981c7a2ee1746c3ebf5bcaaa4', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: '78aa226ed8b00565138cdc52c50dbfc719c7775a', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
     }
     static get is() { return "digi-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/_expandable/expandable-accordion/expandable-accordion.js

@@ -78,7 +78,7 @@ export class ExpandableAccordion {
         this.afOnClick.emit(e);
     }
     render() {
-        return (h("article", { key: '68aa6cc9280d5dfc4911d5cc3d87bafe90495e16', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '5ae5e7289bf0111f2868c4fb2973e956231340b0', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '9fb0fd9e4ac092a7215bc6b21d8ecdd3f0bdfe36', class: "digi-expandable-accordion__heading" }, h("button", { key: '93fb1b59b8c419dc8505df65222904e9057c1d53', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: '3e2186adf2cb77babe58be1ba82d668f08ab520f', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: '1bd7d3aa602cd470b9d30ef28c3d5f4f157e0cf1', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '27a2903efb492a56be047c021e8ab4822fb6860e', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: '573cd16cc0c20d902f3b12bf61c090ee753ce804' }, h("digi-typography", { key: '701028d3555074a63fcf57f70eda62244313dc19' }, h("slot", { key: '2c0ae1b4ff41f8fc03808c91281c241c8f67b2c5' }))))));
+        return (h("article", { key: '8d5ce165aedb7ed2a0b6522bdf3b5ea17006efc5', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '1f59047728c9801ee02b28c3ded6cb01ada183d6', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '1ffb558f80b0176ad168963f4c6523ae25a41c38', class: "digi-expandable-accordion__heading" }, h("button", { key: '4d46778a6df61aaa2a66aa43723936eba1239fce', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: '2fd77c212f1c5b6c9d049af4fce5167077a87e5f', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: 'b6545a0d30edaffac6f1e68d0c852cd1f994bb9a', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '4da27c2bfcb70a31f90b5ae7ff98c5d814b93de6', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: '9e919c0f92663e6d601f71fd31a8ad46e5b3661b' }, h("digi-typography", { key: 'b590cf6ba29e1cfbe7343f15c9164fe62e8d36bc' }, h("slot", { key: '8d4844b2b7b1cdd6ff013292865fcbbab8aced1a' }))))));
     }
     static get is() { return "digi-expandable-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_expandable/expandable-faq/expandable-faq.js

@@ -50,9 +50,9 @@ export class ExpandableFaq {
             });
     }
     render() {
-        return (h("div", { key: '02785d05fd78220d615a0d01581afa3645cb128a', class: {
+        return (h("div", { key: 'd84ec6e500c1b68e97f3d603bed1ff7d3ffeefab', class: {
                 'digi-expandable-faq': true
-            } }, h(this.afHeadingLevel, { key: '9223159298cdcf2484d47558ec645a890ae6e451' }, this.afHeading), h("slot", { key: '4cc5a09edf0d63647edaf091d039325a1155121e' })));
+            } }, h(this.afHeadingLevel, { key: '1a71cdaa1d07a35e95a89d2bf4fd058a09971c7a' }, this.afHeading), h("slot", { key: '97c1cd09ad0d655fc6f10355c2370f3f880e901c' })));
     }
     static get is() { return "digi-expandable-faq"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_expandable/expandable-faq-item/expandable-faq-item.js

@@ -70,18 +70,18 @@ export class ExpandableFaqItem {
         }
     }
     render() {
-        return (h("article", { key: '63c9c19e2bcdba9fa428780e7d0f22054374e6bd', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '17003e09ef6f4170e186468dff4ed7532e78834c', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: '376a8ce63823bdb6c243316d17d8fe7f2b000d2d' }, h("button", { key: '0db0dc297296ed3df4f5c519490582b3fb74013e', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
+        return (h("article", { key: '7b2b0373f7f84167b89b012528e7be9ee7f70615', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '1696540ad262246538d0c06e8c4f509d89e001fe', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: 'e83eadc3b36841d2fcd446f47cae5b0bf6c88c0c' }, h("button", { key: 'dd702a1089e2bc936b16af5e58ca01836da1fb13', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
                 e.preventDefault();
                 this.afExpanded = !this.afExpanded;
                 this.afOnClick.emit(e);
-            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: 'c5fa5a98f74f33ff0187241825511b1f10960a15', class: {
+            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '51cb95de4071557f33e5d8bc4183cdcae0322dd5', class: {
                 'digi-expandable-faq-item__header--toggle-icon': true,
                 'digi-expandable-faq-item__header--toggle-icon--expanded': this.afExpanded
-            } }), h("div", { key: '9cebd8655f77daafc65ba99a675065bd7cfbd8ee', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: '24c13561321956accf5fa1ee92b08fb4781b1e2f', class: {
+            } }), h("div", { key: '0e275884fd0cf1033f2c0c3c576ba1951c6ae428', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: 'a3f2864b8da871187757844f4e36da0e83d87e77', class: {
                 'digi-expandable-faq-item__content': true,
                 'digi-expandable-faq-item__content--animation': this.afAnimation,
                 'digi-expandable-faq-item__content--hidden': !this.afExpanded
-            }, id: `${this.afId}-content` }, h("div", { key: '0b6f42abedbe00376047c5569612cecc9fc28967' }, h("digi-typography", { key: '2d8bdad3676fd597a12537b764a22c9583646975' }, h("slot", { key: '675deb0132dabd0ca4ca8e7ff2b6f067434a2f71' }))))));
+            }, id: `${this.afId}-content` }, h("div", { key: 'cf0a26beec405ea2ce63de5109531519059cf1cb' }, h("digi-typography", { key: 'f3de9345310bf8336e791c252554e26f80d337f5' }, h("slot", { key: '930caf3476eb17a28d6d220dfd5b4086d73aa988' }))))));
     }
     static get is() { return "digi-expandable-faq-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_footer/footer/footer.js

@@ -22,7 +22,7 @@ export class FooterFooter {
         };
     }
     render() {
-        return (h(Host, { key: 'ff34fe66248a59fba77402d1c58de08a5befa548' }, h("footer", { key: '1b51ae4fe0568a2348a02c3bd509a7dea5ae50f2', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: 'f66718cfe0674a965a24d779e88d05663f500299' }, h("digi-layout-block", { key: '490853ff22c4c8c04d69eff4ee71ee5511969444', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: '8fd768895c9fd98107e2338ecab8b1037681fa5f', "af-no-gutter": true }, h("div", { key: '2f3b47a868fb316bd2da0d38026a23d20335c73d', class: "digi-footer__content-top" }, h("slot", { key: '0a715ece2a38a52df905bc34c4ca81d06543410e', name: "content-top" })), h("div", { key: '2e83f302937357cc3cf33fdc7f512d1ec2d2e5a7', class: "digi-footer__content-bottom" }, h("slot", { key: '633928887f643c9d9258d622d3dc63cbef611c13', name: "content-bottom-left" }), h("slot", { key: '0236efcdb59da26ceb3711a3d48b1b006a5f812a', name: "content-bottom-right" }))))))));
+        return (h(Host, { key: '01f991e208985e0f4baa2370e1759796e79e16e2' }, h("footer", { key: 'ec717c1ea929b7e8f4768a8f2cda28d44c40457c', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: '0f880d2402708f5d5b9750ed79c4e5da249d79d0' }, h("digi-layout-block", { key: '33ebd6330a7a5a491c74dd8b0ba02ef4498fd418', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: 'f646697637b94cefb4d15d68e5577dd36f5cca56', "af-no-gutter": true }, h("div", { key: '1489000ea40378ff7c53d90eba8b6514bc921c67', class: "digi-footer__content-top" }, h("slot", { key: '694e5154560344d84fbaf6aac24ec81887054e15', name: "content-top" })), h("div", { key: '016b0d947e1874414636808aa97471561d310c6f', class: "digi-footer__content-bottom" }, h("slot", { key: '7ed92012150110ae25bc17ee35c9417fa6f58b31', name: "content-bottom-left" }), h("slot", { key: '7e46f29f763f76fd30605bde73b5b23542906b88', name: "content-bottom-right" }))))))));
     }
     static get is() { return "digi-footer"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_footer/footer-card/footer-card.js

@@ -20,7 +20,7 @@ export class FooterFooterCard {
         };
     }
     render() {
-        return (h(Host, { key: 'eceee2631d0e0cd69e0c6d09936f659473b005c7' }, h("div", { key: '9d5cae4332e69e83f9aacb3f06a792f2f80f88ab', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: '8efbe43b0db2a6e20698358547c65f7e18721358', class: "digi-footer-card__content" }, h("slot", { key: 'bfcc4cabf1418e691531977b7edf138201f47f8d' })))));
+        return (h(Host, { key: '53f8d5774dce0d2b9c41000a68e76c44957a43f2' }, h("div", { key: '00af88b7956647374a763dc3af89f444e748ecd1', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: '28eac7401a11f8526fb997950c4a393471d1c4d9', class: "digi-footer-card__content" }, h("slot", { key: '39f48ef9ffc87f4cac7149d10d7a6e1736532b75' })))));
     }
     static get is() { return "digi-footer-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-category-filter/form-category-filter.js

@@ -92,7 +92,7 @@ export class FormCategoryFilter {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (h(Host, { key: 'b280f9d0028997c7269a26d4e12aeebf5836067f' }, h("div", { key: '484fd95470ca94c7d1907a2ccae25bf53eb4648e', class: {
+        return (h(Host, { key: 'a9bf071c9972f6ae732f8dfa7b5f3481548dd77b' }, h("div", { key: 'c7fa2dbbe1305e65989c31e7450ead6e4122f8df', class: {
                 'digi-form-category-filter': true
             } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                 'digi-form-category-filter--category': true,
@@ -100,7 +100,7 @@ export class FormCategoryFilter {
             }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                 this.toggleCategory(category);
             } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
-            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '0b6ba47ff19ef7d486d547d06419c609a3366efa' }, h("digi-button", { key: '34263d716ba7785407b90e09900b37ddf1085ae5', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '2549c0fe3b8c9364be6614bdc965f039bb0aadcb' }, h("digi-button", { key: '3a4bb85891ff201ab27495dba557e0e5de884cbf', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                 this.toggleCollapsed();
             } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
     }

package/dist/collection/components/_form/form-checkbox/form-checkbox.js

@@ -89,7 +89,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: '79589f1989edf058721c3accd59fe60c88e56071', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '9193cadd1e9cba6c09265eff1cf25ed60ee778ce', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h("div", { key: '991ac437cb149487dbafa067d0a453322bc92039', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '3be3281e632a73de89c19bf900bdfaf0407b976b', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -97,7 +97,7 @@ export class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '976dc0ca3ab0ace1979ead43da824c706935d4cb', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'f59428d098754af33dcac40b2d9d9306df91d4ea', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'af1c4cdb0e2b525305e4c4d1a0079ea831c42268', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '71959598b2e5b3ab3b53e8ff0746d21ce1d1ff43', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'edd3fdfd546f0f635e4db1cd75f47c582f743a23', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '58cc0348c18b4adf345e6fa2314101ee656c652b', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }