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

package/dist/cjs/{typography-variation.enum-9f56fd50.js → typography-variation.enum-8fd8bed4.js}

@@ -14,6 +14,12 @@ exports.CalendarDatepickerValidation = void 0;
     CalendarDatepickerValidation["NEUTRAL"] = "neutral";
 })(exports.CalendarDatepickerValidation || (exports.CalendarDatepickerValidation = {}));
 
+exports.BarChartVariation = void 0;
+(function (BarChartVariation) {
+    BarChartVariation["Vertical"] = "vertical";
+    BarChartVariation["Horizontal"] = "horizontal";
+})(exports.BarChartVariation || (exports.BarChartVariation = {}));
+
 exports.CodeBlockLanguage = void 0;
 (function (CodeBlockLanguage) {
     CodeBlockLanguage["JSON"] = "json";
@@ -255,22 +261,6 @@ exports.FeedbackVariation = void 0;
     FeedbackVariation["SECONDARY"] = "secondary";
 })(exports.FeedbackVariation || (exports.FeedbackVariation = {}));
 
-exports.TypographyHeadingJumboLevel = void 0;
-(function (TypographyHeadingJumboLevel) {
-    TypographyHeadingJumboLevel["H1"] = "h1";
-    TypographyHeadingJumboLevel["H2"] = "h2";
-    TypographyHeadingJumboLevel["H3"] = "h3";
-    TypographyHeadingJumboLevel["H4"] = "h4";
-    TypographyHeadingJumboLevel["H5"] = "h5";
-    TypographyHeadingJumboLevel["H6"] = "h6";
-})(exports.TypographyHeadingJumboLevel || (exports.TypographyHeadingJumboLevel = {}));
-
-exports.TypographyHeadingJumboVariation = void 0;
-(function (TypographyHeadingJumboVariation) {
-    TypographyHeadingJumboVariation["PRIMARY"] = "primary";
-    TypographyHeadingJumboVariation["SECONDARY"] = "secondary";
-})(exports.TypographyHeadingJumboVariation || (exports.TypographyHeadingJumboVariation = {}));
-
 exports.TypographyVariation = void 0;
 (function (TypographyVariation) {
     TypographyVariation["SMALL"] = "small";

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

@@ -3,20 +3,21 @@
 :host .digi-bar-chart {
   font-family: var(--digi--global--typography--font-family--default);
 }
-:host .chartTitle {
-  --digi--typography--h2--margin: 0.5rem;
-  --digi--typography--h3--margin: 0.5rem;
-  --digi--typography--h4--margin: 0.5rem;
-  --digi--typography--h5--margin: 0.5rem;
-  --digi--typography--h6--margin: 0.5rem;
+:host .topWrapper,
+:host .chartTitle .digi-typography {
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: left;
-  text-align: left;
-  padding-bottom: 1rem;
-  margin-right: 0.5rem;
-  flex-grow: 2;
+  gap: 0.75rem;
+}
+:host .topWrapper {
+  margin-bottom: 0.75rem;
+}
+:host .chartTitle {
+  --MARGIN--HEADING-2: 0;
+  --MARGIN--HEADING-3: 0;
+  --MARGIN--HEADING-4: 0;
+  --MARGIN--HEADING-5: 0;
+  --MARGIN--HEADING-6: 0;
 }
 :host .buttonWrapper {
   --digi--button--padding--medium: 4px 4px 0.8125rem 0;
@@ -79,11 +80,4 @@
   background-repeat: no-repeat;
   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
   background-attachment: local, local, scroll, scroll;
-}
-:host .topWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }

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

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

@@ -13,28 +13,32 @@
   min-height: fit-content;
 }
 
-.buttonWrapper {
-  --digi--button--padding--medium: 0 0 0.75rem 0;
-}
-
 .chart {
   box-sizing: content-box;
   width: auto;
 }
 
-.chartTitle {
-  --digi--typography--h2--margin: 0.5rem;
-  --digi--typography--h3--margin: 0.5rem;
-  --digi--typography--h4--margin: 0.5rem;
-  --digi--typography--h5--margin: 0.5rem;
-  --digi--typography--h6--margin: 0.5rem;
+.topWrapper,
+.chartTitle .digi-typography {
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: left;
-  text-align: left;
-  padding-bottom: 1rem;
-  flex-grow: 2;
+  gap: 0.75rem;
+}
+
+.topWrapper {
+  margin-bottom: 0.75rem;
+}
+
+.chartTitle {
+  --MARGIN--HEADING-2: 0;
+  --MARGIN--HEADING-3: 0;
+  --MARGIN--HEADING-4: 0;
+  --MARGIN--HEADING-5: 0;
+  --MARGIN--HEADING-6: 0;
+}
+
+.buttonWrapper {
+  --digi--button--padding--medium: 0 0 0.75rem 0;
 }
 
 .close {
@@ -150,12 +154,4 @@
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgb(245, 245, 245) transparent;
-}
-
-.topWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }

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

@@ -30,7 +30,7 @@ digi-code-block .digi-code-block--light pre[class*=language-] {
   text-align: left;
   white-space: pre-wrap;
   word-spacing: normal;
-  word-break: normal;
+  word-break: break-word;
   word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 4;
@@ -174,7 +174,7 @@ digi-code-block .digi-code-block--dark pre[class*=language-] {
   text-align: left;
   white-space: pre-wrap;
   word-spacing: normal;
-  word-break: normal;
+  word-break: break-word;
   word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 4;

package/dist/collection/components/_info-card/info-card/info-card.js

@@ -67,7 +67,7 @@ export class InfoCard {
         };
     }
     render() {
-        return (h("div", { key: '599ab94c2cd57bf47b9aa9d4ef1d4872b765a4ee', class: Object.assign({ 'digi-info-card': true }, this.cssModifiers) }, h("div", { key: '8c03931edf08190044429cc784a78c795705c3ef', class: "digi-info-card__content" }, h("div", { key: 'e17ff930b2e0185e2f1fcbac57c1a7d7fea72e6d', class: "digi-info-card__icon" }, this.hasListIcon && (h("span", { key: '6229283bf582298ca6979f2815effd21281e9b29', class: "digi-info-card__icon" }, h("slot", { key: 'c474cc478505c1408d3a642da71d188e9e377748', name: "icon" })))), h(this.afHeadingLevel, { key: 'a24efa82b07245240cd8b2f309b600c29077f449', class: "digi-info-card__heading" }, this.afHeading), h("digi-typography", { key: '538428ecae3c6f2228bf7b431d62582927ea4c56' }, h("slot", { key: '6b6a2864991d9411da62185ab27e8d73c0163650' })), this.shouldRenderInternalLink && (h("digi-link-internal", { key: 'f4079d2efed0e0f0a38428049b1773260a184e2a', class: "digi-info-card__link", afHref: this.afLinkHref, onAfOnClick: (e) => this.clickLinkHandler(e), hideVisitedColor: this.hideVisitedColor }, this.afLinkText)))));
+        return (h("div", { key: 'b87aaf790c4736075233c8cf0d15e16e757e67f1', class: Object.assign({ 'digi-info-card': true }, this.cssModifiers) }, h("div", { key: '4f645a39d73a782d44ce58d6027805daa07ce6b6', class: "digi-info-card__content" }, h("div", { key: '3c0e7f91e3ac681c051eb24688c88fb28a1cf6bf', class: "digi-info-card__icon" }, this.hasListIcon && (h("span", { key: '53ddc991ebbd95b6a2076f491187a4c8de274b58', class: "digi-info-card__icon" }, h("slot", { key: '182ee887c37e7dea4a4ab98189ea08af15418944', name: "icon" })))), h(this.afHeadingLevel, { key: '8a2b1fbd4cf78cc706daf2fc74157587c16e43b8', class: "digi-info-card__heading" }, this.afHeading), h("digi-typography", { key: '6c0ccbf7115dd68e2f7e6e0b55daac41d9285c2d' }, h("slot", { key: '34f5f0b4526721271edd8095ae78e8812142ea10' })), this.shouldRenderInternalLink && (h("digi-link-internal", { key: 'c4f3442b1b6c22ecc6d0cd12f37af5f4707244b1', class: "digi-info-card__link", afHref: this.afLinkHref, onAfOnClick: (e) => this.clickLinkHandler(e), hideVisitedColor: this.hideVisitedColor }, this.afLinkText)))));
     }
     static get is() { return "digi-info-card"; }
     static get encapsulation() { return "scoped"; }
@@ -181,9 +181,9 @@ export class InfoCard {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set info card variation. Can be 'Standar'."
+                            "text": "Set info card size. Can be 'Standard'."
                         }],
-                    "text": "S\u00E4tter storlek p\u00E5 kortet. Kan vara 'Standar'."
+                    "text": "S\u00E4tter storlek p\u00E5 kortet. Kan vara 'Standard'."
                 },
                 "getter": false,
                 "setter": false,
@@ -210,9 +210,9 @@ export class InfoCard {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set info card variation. Can be 'Standard'."
+                            "text": "Set border position. Can be 'top' or 'left'. This only applies if 'af-type' is 'related'."
                         }],
-                    "text": "S\u00E4tter storlek p\u00E5 kortet. Kan vara 'Standard'."
+                    "text": "S\u00E4tter position f\u00F6r kantlinjen. Kan vara 'top' eller 'left'. Detta har endast genomslag om 'af-type' \u00E4r 'related'."
                 },
                 "getter": false,
                 "setter": false,