@designsystem-se/af 35.4.1-beta.4 → 35.4.1-beta.6

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

@@ -127,8 +127,6 @@ export class barChart {
         // Resizing chart while loading
         this.loadingResize = () => {
             const newHeight = this.setDims();
-            this.setMargins(true);
-            this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
             this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
             this.margin.right =
                 this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
@@ -153,10 +151,8 @@ export class barChart {
                 0,
                 this.dims.width - this.margin.right - this.margin.left
             ]);
-            this.barSelection
-                .attr('x', this.xFunction)
-                .attr('width', this.widthFunction);
             this.setValueTicks();
+            this.adjustBarSize();
         };
         this.highlightBarGroup = (_event, datum) => {
             if (typeof datum === 'string') {
@@ -271,189 +267,33 @@ export class barChart {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
         this.updateBars = (fromLoading) => {
-            this.barChartContainer
+            this.barSelection = this.barChartContainer.select('.interactiveElements')
                 .selectAll('.barGroup')
                 .data(this.mappedData)
-                .join((enter) => {
-                var _a, _b;
-                const tempSelection = enter
-                    .append('g')
-                    .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                tempSelection
-                    .append('rect')
-                    .attr('class', 'bar')
-                    .style('cursor', 'pointer')
-                    .attr('ry', 4)
-                    .attr('rx', 4)
-                    .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('width', () => this.afVariation === BarChartVariation.Horizontal
-                    ? 0
-                    : this.xScale.bandwidth())
-                    .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale.bandwidth()
-                    : 0)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut)
-                    .on('click', this.openTooltip)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(d3.easePolyInOut)
-                    .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;
-                tempSelection
-                    .append('text')
-                    .text((d) => d.value.toLocaleString())
-                    .attr('class', 'barText')
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('text-anchor', 'end')
-                    .style('pointer-events', 'none')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(d3.easePolyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = d3.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-                return tempSelection;
-            }, (update) => {
-                // Update ids to bars
-                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                // Mouse interaction to updated loading bars
-                if (fromLoading) {
-                    update
-                        .select('rect')
-                        .on('mouseenter', this.hover)
-                        .on('mouseleave', this.hoverOut)
-                        .on('click', this.openTooltip)
-                        .attr('x', this.xFunction)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this.yScale(d.key)
-                        : this.dims.height - this.margin.bottom)
-                        .attr('width', this.widthFunction)
-                        .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                        ? this.yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(d3.easePolyInOut)
-                        .attr('y', this.yFunction)
-                        .attr('height', this.heightFunction)
-                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(d3.easePolyInOut)
-                        .attr('x', this.xFunction)
-                        .attr('y', this.yFunction)
-                        .attr('width', this.widthFunction)
-                        .attr('height', this.heightFunction)
-                        .attr('fill', '#00005a');
-                }
-                return update
-                    .select('text')
-                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(d3.easePolyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = d3.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-            }, (exit) => exit.remove());
-            this.barSelection = this.barChartContainer.selectAll('rect');
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('.bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .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);
+            if (fromLoading) {
+                this.initLegend();
+            }
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
             this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
@@ -492,7 +332,7 @@ export class barChart {
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this.loading || !this.chartData) {
+            if (!this.chartData) {
                 this.placeholderTicks.forEach((key) => {
                     const tick = { key: key, series: [] };
                     tick.series.push({
@@ -867,11 +707,11 @@ export class barChart {
                 .html((d) => {
                 return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
             });
-            this.tooltip.style('visibility', 'visible');
+            this.tooltip.style('display', null);
             this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this.tooltip.style('visibility', 'hidden');
+            this.tooltip.style('display', 'none');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
@@ -1010,12 +850,13 @@ export class barChart {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this.chartData = data;
-        else
-            this.chartData = JSON.parse(data);
-        if (this.chartData)
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
+            if (typeof data != 'string')
+                this.chartData = data;
+            else
+                this.chartData = JSON.parse(data);
             this.series = this.chartData.data.series.map(serie => serie.title);
+        }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -1108,7 +949,7 @@ export class barChart {
         // Getting handle for tooltip
         this.tooltip = d3.select('#' + this.afId);
         this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
-        // Add heading placeholder for heading
+        this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
             .select('.tooltipHead')
             .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
@@ -1116,7 +957,7 @@ export class barChart {
             .style('font-size', '1rem')
             .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
         d3.select(this.chartDiv).select('.chartSVG').remove();
@@ -1138,20 +979,20 @@ export class barChart {
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
             ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
-            : 'Stapeldiagram');
+            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         d3.select(this.titleDiv)
-            .select(this.afHeadingLevel)
+            .append(this.afHeadingLevel)
+            .attr('class', 'loadingHeader')
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
         this.tooltip = d3.select('#' + this.afId);
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
         this.loading = true;
-        console.log('loading!');
         // close potentially open tooltip
         if (this.tooltip)
             this.closeTooltip();
@@ -1191,14 +1032,17 @@ export class barChart {
             this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this.barChartContainer.selectAll('.barGroup').remove();
+            this.barChartContainer.selectAll('.interactiveElements').remove();
             this.barSelection = this.barChartContainer
+                .append('g')
+                .attr('class', 'interactiveElements')
+                .style('isolation', 'isolate')
                 .selectAll('barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-            this.barSelection.selectAll('.barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
                 .data((d) => {
                 return d.series;
             })
@@ -1220,7 +1064,7 @@ export class barChart {
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
             this.barChartContainer.selectAll('.bar')
-                .transition()
+                .transition('animateBar')
                 .duration(400)
                 .ease(d3.easeLinear)
                 .delay((...[, i]) => i * 150 + 400)
@@ -1235,8 +1079,8 @@ export class barChart {
         };
         const flattenBars = () => {
             this.barChartContainer
-                .selectAll('rect')
-                .transition()
+                .selectAll('.bar')
+                .transition('animateBar')
                 .duration(200)
                 .ease(d3.easeLinear)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
@@ -1473,10 +1317,11 @@ export class barChart {
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this.barSelection.selectAll('.barGroup').on('end', null);
+                this.barChartContainer.selectAll('.barGroup').on('end', null);
+                d3.select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
-                this.barSelection
-                    .transition()
+                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
+                this.barChartContainer.selectAll('.bar').transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                     ? this.yScale(d.key)
@@ -1546,7 +1391,7 @@ export class barChart {
         this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this.tooltip.style('visibility') !== 'hidden')
+        if (this.tooltip.style('display') !== 'none')
             this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
@@ -1666,7 +1511,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: '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) }, ' ')));
+        return (h(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, h("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, h("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), h("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, h("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, h("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), h("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), h("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/design-tokens/components/_logo.variables.scss

@@ -1,20 +1,17 @@
-@use '../../../../../../styles/src/digi-styles.utils' as *;
-
-@mixin digi-logo--variables() {
-  --digi--logo--img--min-width: #{rem(256)};
-  --digi--logo--img--max-width:#{rem(292)};
-  --digi--logo--img--max-width--large: #{rem(368)};
-  --digi--logo--img--max-width--system: #{rem(44)};
-
-  --digi--logo--padding: 1.375rem;
-  --digi--logo--padding--wide: var(--digi--gutter--larger);
-  --digi--logo--padding--large: var(--digi--gutter--medium);
-  --digi--logo--padding--large--wide: var(--digi--gutter--larger);
-
-  --digi--logo--logotype-color: var(--digi--color--logotype-color);
-  --digi--logo--color--primary: var(--digi--color--text--interactive--brand-primary);
-  --digi--logo--color--secondary: var(--digi--color--text--secondary);
-
-  --digi--logo--color--border--primary: var(--digi--color--text--primary);
-  --digi--logo--color--border--secondary: var(--digi--color--text--secondary);
+@mixin digi-title-logo--variables() {
+  --digi--title-logo-text-color: var(--digi--color--text--primary);
+  --digi--title-logo-font-weight: var(--digi--global--typography--font-weight--bold);
+  --digi--title-logo-font-size: var(--digi--typography--title-logo--font-size--mobile);
+  --digi--title-logo-font-size-small: var(--digi--global--typography--font-size--large);
+  --digi--title-logo-line-height-small: 1.25rem;
+  --digi--title-logo-symbol-color: var(--digi--color--logotype-color);
+  --digi--title-logo-symbol-width: 36px;
+  --digi--title-logo-symbol-height: 36px;
+  --digi--title-logo-symbol-width-mobile: 44px;
+  --digi--title-logo-symbol-height-mobile: 44px;
+  --digi--title-logo-text-height: 40px;
+  --digi--title-logo-border-width: var(--digi--global--border-width--base);
+  --digi--title-logo-vertical-padding: 1.375rem;
+  --digi--title-logo-gap: 9px;
+}color--text--secondary);
 }

package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss

@@ -1,17 +1,20 @@
-@mixin digi-title-logo--variables() {
-  --digi--title-logo-text-color: var(--digi--color--text--primary);
-  --digi--title-logo-font-weight: var(--digi--global--typography--font-weight--bold);
-  --digi--title-logo-font-size: var(--digi--typography--title-logo--font-size--mobile);
-  --digi--title-logo-font-size-small: var(--digi--global--typography--font-size--large);
-  --digi--title-logo-line-height-small: 1.25rem;
-  --digi--title-logo-symbol-color: var(--digi--color--logotype-color);
-  --digi--title-logo-symbol-width: 36px;
-  --digi--title-logo-symbol-height: 36px;
-  --digi--title-logo-symbol-width-mobile: 44px;
-  --digi--title-logo-symbol-height-mobile: 44px;
-  --digi--title-logo-text-height: 40px;
-  --digi--title-logo-border-width: var(--digi--global--border-width--base);
-  --digi--title-logo-vertical-padding: 1.375rem;
-  --digi--title-logo-gap: 9px;
-}color--text--secondary);
+@use '../../../../../../styles/src/digi-styles.utils' as *;
+
+@mixin digi-logo--variables() {
+  --digi--logo--img--min-width: #{rem(256)};
+  --digi--logo--img--max-width:#{rem(292)};
+  --digi--logo--img--max-width--large: #{rem(368)};
+  --digi--logo--img--max-width--system: #{rem(44)};
+
+  --digi--logo--padding: 1.375rem;
+  --digi--logo--padding--wide: var(--digi--gutter--larger);
+  --digi--logo--padding--large: var(--digi--gutter--medium);
+  --digi--logo--padding--large--wide: var(--digi--gutter--larger);
+
+  --digi--logo--logotype-color: var(--digi--color--logotype-color);
+  --digi--logo--color--primary: var(--digi--color--text--interactive--brand-primary);
+  --digi--logo--color--secondary: var(--digi--color--text--secondary);
+
+  --digi--logo--color--border--primary: var(--digi--color--text--primary);
+  --digi--logo--color--border--secondary: var(--digi--color--text--secondary);
 }