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

package/dist/cjs/digi-bar-chart_27.cjs.entry.js

@@ -134,7 +134,7 @@ function band() {
   return linear.initRange.apply(rescale(), arguments);
 }
 
-const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .close.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
+const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
 const DigiBarChartStyle0 = barChartCss;
 
 const barChart = class {
@@ -715,7 +715,10 @@ const barChart = class {
                 this.dims = linear.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) => {
@@ -1135,7 +1138,8 @@ const barChart = class {
             this.chartData = data;
         else
             this.chartData = JSON.parse(data);
-        this.series = this.chartData.data.series.map(serie => serie.title);
+        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) => {
@@ -1225,29 +1229,31 @@ const barChart = class {
     initToolTip() {
         // Getting handle for tooltip
         this.tooltip = linear.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('.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() {
-        linear.select(this.chartDiv).select('svg').remove();
+        linear.select(this.chartDiv).select('.chartSVG').remove();
         this.maxHeight = linear.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();
         // Appending svg
         this.svg = linear.select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
@@ -1259,10 +1265,13 @@ const barChart = class {
             .html(`${text._t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
+        this.tooltip = linear.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();
@@ -1308,11 +1317,13 @@ const barChart = class {
                 .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 === typographyVariation_enum.BarChartVariation.Horizontal
                 ? this.yScale(d.key)
                 : this.dims.height - this.margin.bottom)
@@ -1321,13 +1332,14 @@ const barChart = class {
                 .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(linear.linear$1)
@@ -1773,7 +1785,7 @@ const barChart = class {
 				<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 (index.h(index.Host, { key: '54667697f174d4094b521c81dc772b599c262c29', ref: (el) => (this.host = el) }, index.h("svg", { key: 'df7e852f09b0c7b142154024444a8cc694b3a34a', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: '036603fe008473d87dac2c97e7d4106aca962cc6' }, index.h("pattern", { key: '4d69d72862f411f0c1d115613ef21b449467a8cf', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '75f26f0b57f83546f5b0a788f14be2daebe4c1f9', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '93a47ceac0fb59103486e974e63325b31672e89d', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '90e8ca1a698db50f0711ede271c6d5357fb26c42', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: 'cc034a851b624f5c2107b15f29d63a224601e0c9', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '248034ecb86d548ceafe837341dabbae07b6c753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '51b7a0e2f9ff0f85d3abde08ab3f3cf346cdd4aa', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '880b7b7a2fde8eccbd4c24878cc7b3b9b9c6497a', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: 'f374ae56dc6d13906d27bbb76fba63128bc6b704', 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() : ''}` }, index.h("digi-icon-table", { key: '3c8dcd209ffd76fb97cdb14232996136ff3a0387', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '89e5a3a838efd0e2c21abb88141e7e455c1c5b7a', 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() : ''}` }, index.h("digi-icon-chart", { key: '8c3debb222d5079506dee4f9cdacf85128ead251', slot: "icon" }), "Visa diagram"), index.h("div", { key: '0c1916ce68d02ab2b567ed20ea25c17076497aaf', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '143cc5ecbc3bbf3d085eb0426bca9b3bf66ecc7b', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: 'eabbfd6c62996ae237014bd0e4754fb857e0f518', class: "chartTooltip", id: this.afId }, index.h("div", { key: '97c7c2e479acb9a6f4658768870c1484baa59f01', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'ec08ba3c764cb66ed0ecac0afdd6b4d16bc84b84', class: "close" })), index.h("div", { key: '6d80b2cb7bf94c492eaed42a80a8252394fe92b9', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '7a22b0e07deb81e3e566f60e5e8e2d2f3056a2a2', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '40d906b37ea0a69cb7fcfe310e612e8a5cba2928', class: "legend" })), index.h("div", { key: '24802d1363812b9d50bd98216f36c7c3f44856d2', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (index.h(index.Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, index.h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, index.h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), index.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() : ''}` }, index.h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), index.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() : ''}` }, index.h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), index.h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, index.h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), index.h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), index.h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -12,6 +12,8 @@
 :host .svgWrap {
   position: relative;
   display: flex;
+  min-height: 20px;
+  min-width: 20px;
   width: 100%;
   height: 100%;
 }
@@ -53,13 +55,13 @@
   flex-direction: row;
   justify-content: space-between;
 }
-:host .close {
+:host .tooltipClose {
   display: inline-block;
   vertical-align: top;
   --digi--color--icon--primary: #333;
   cursor: pointer;
 }
-:host .close:hover {
+:host .tooltipClose:hover {
   --digi--color--icon--primary: gray;
 }
 :host .legendWrap {

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

@@ -591,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) => {
@@ -1011,7 +1014,8 @@ export class barChart {
             this.chartData = data;
         else
             this.chartData = JSON.parse(data);
-        this.series = this.chartData.data.series.map(serie => serie.title);
+        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) => {
@@ -1103,24 +1107,25 @@ export class barChart {
     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('.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();
@@ -1128,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
@@ -1139,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();
@@ -1188,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)
@@ -1201,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)
@@ -1654,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: '54667697f174d4094b521c81dc772b599c262c29', ref: (el) => (this.host = el) }, h("svg", { key: 'df7e852f09b0c7b142154024444a8cc694b3a34a', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '036603fe008473d87dac2c97e7d4106aca962cc6' }, h("pattern", { key: '4d69d72862f411f0c1d115613ef21b449467a8cf', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '75f26f0b57f83546f5b0a788f14be2daebe4c1f9', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '93a47ceac0fb59103486e974e63325b31672e89d', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '90e8ca1a698db50f0711ede271c6d5357fb26c42', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: 'cc034a851b624f5c2107b15f29d63a224601e0c9', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '248034ecb86d548ceafe837341dabbae07b6c753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '51b7a0e2f9ff0f85d3abde08ab3f3cf346cdd4aa', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '880b7b7a2fde8eccbd4c24878cc7b3b9b9c6497a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'f374ae56dc6d13906d27bbb76fba63128bc6b704', 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: '3c8dcd209ffd76fb97cdb14232996136ff3a0387', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '89e5a3a838efd0e2c21abb88141e7e455c1c5b7a', 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: '8c3debb222d5079506dee4f9cdacf85128ead251', slot: "icon" }), "Visa diagram"), h("div", { key: '0c1916ce68d02ab2b567ed20ea25c17076497aaf', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '143cc5ecbc3bbf3d085eb0426bca9b3bf66ecc7b', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'eabbfd6c62996ae237014bd0e4754fb857e0f518', class: "chartTooltip", id: this.afId }, h("div", { key: '97c7c2e479acb9a6f4658768870c1484baa59f01', class: "tooltipHead" }, h("digi-icon-x", { key: 'ec08ba3c764cb66ed0ecac0afdd6b4d16bc84b84', class: "close" })), h("div", { key: '6d80b2cb7bf94c492eaed42a80a8252394fe92b9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7a22b0e07deb81e3e566f60e5e8e2d2f3056a2a2', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '40d906b37ea0a69cb7fcfe310e612e8a5cba2928', class: "legend" })), h("div", { key: '24802d1363812b9d50bd98216f36c7c3f44856d2', 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/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);
 }

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

@@ -1,16 +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;
+@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);
 }