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

package/components/digi-badge-notification.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiBadgeNotification extends Components.DigiBadgeNotification, HTMLElement {}
 export const DigiBadgeNotification: {

package/components/digi-badge-status.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiBadgeStatus extends Components.DigiBadgeStatus, HTMLElement {}
 export const DigiBadgeStatus: {

package/components/digi-bar-chart.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiBarChart extends Components.DigiBarChart, HTMLElement {}
 export const DigiBarChart: {

package/components/digi-bar-chart.js

@@ -4,12 +4,12 @@ import { _ as _t } from './p-08cf2c0e.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { B as BarChartVariation } from './p-dcdffb3c.js';
 import { d as defineCustomElement$8 } from './p-e8fc33ed.js';
-import { d as defineCustomElement$7 } from './p-2e15f1c6.js';
-import { d as defineCustomElement$6 } from './p-346262e9.js';
-import { d as defineCustomElement$5 } from './p-3a53c26b.js';
-import { d as defineCustomElement$4 } from './p-70a1e53a.js';
-import { d as defineCustomElement$3 } from './p-5e2cf317.js';
-import { d as defineCustomElement$2 } from './p-204a12b0.js';
+import { d as defineCustomElement$7 } from './p-4241698a.js';
+import { d as defineCustomElement$6 } from './p-5ef44852.js';
+import { d as defineCustomElement$5 } from './p-3c9cea93.js';
+import { d as defineCustomElement$4 } from './p-94603530.js';
+import { d as defineCustomElement$3 } from './p-cc5bd9f9.js';
+import { d as defineCustomElement$2 } from './p-cfb33ac7.js';
 
 function band() {
   var scale = ordinal().unknown(undefined),
@@ -91,7 +91,7 @@ function band() {
   return 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 .close.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.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:100%;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 = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
@@ -137,16 +137,78 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .transition('color')
                 .duration(150)
                 .attr('fill', (barData) => {
+                var _a;
                 if (barData.serie === serie)
                     return this.colorFunction(barData.serie);
-                else
+                else {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                        return 'url(#prognosisInactive)';
+                    }
                     return this.evalColorVar('--digi--color--background--secondary-accent');
+                }
             });
             select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
         };
         this.resetBarColor = () => {
             this.barChartContainer.selectAll('.bar').transition('color').duration(150).attr('fill', (barData) => this.colorFunction(barData.serie));
             select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            if (this.chartData.data.averageLine) {
+                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                    .style('filter', 'contrast(0.5)');
+                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                        .style('filter', 'contrast(0.5)'); */
+            }
+        };
+        this.highlightAverageLine = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    return 'url(#prognosisInactive)';
+                }
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
+                .duration(150).style('mix-blend-mode', null).style('filter', null);
+            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
+                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        // Sets and resizespositions the average line
+        this.averageLine = () => {
+            if (!this.chartData.data.averageLine)
+                return;
+            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
+            /*     avLineGroup.selectAll('.averageLineText')
+                  .data(d => [d])
+                  .join('text')
+                  .attr('class', 'averageLineText')
+                  .text(d => d.text)
+                  .attr('x', this.xScale.range()[0])
+                  .attr('y', (d) => this.yScale(d.value))
+                  .attr('dy', -2)
+                  .attr('font-size', this.fontSize)
+                  .attr('fill', 'var(--digi--color--infographic--lineart)')
+                  .style('mix-blend-mode', 'plus-lighter')
+                  .style('filter', 'contrast(0.5)'); */
+            avLineGroup.selectAll('.averageLine')
+                .data(d => [d.value])
+                .join('line')
+                .attr('class', 'averageLine')
+                .attr('x1', this.xScale.range()[0])
+                .attr('y1', (d) => this.yScale(d))
+                .attr('x2', this.xScale.range()[1])
+                .attr('y2', (d) => this.yScale(d))
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '12, 7')
+                .attr('stroke-linecap', 'round')
+                .style('mix-blend-mode', 'plus-lighter')
+                .style('filter', 'contrast(0.5)')
+                .style('pointer-events', 'none');
         };
         // Resizing chart while loading
         this.loadingResize = () => {
@@ -188,7 +250,12 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
                     .duration(20)
                     .attr('fill', (d) => {
-                    return this.adjustColor(this.colorFunction(d.serie), 50);
+                    var _a;
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
                 });
             }
         };
@@ -520,20 +587,40 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 });
                 return toReturn;
             }
-            this.chartData.data.xValueNames.forEach((key, index) => {
-                const tick = { key: key, series: [] };
-                this.chartData.data.series.forEach((serie) => {
-                    if (serie.yValues[index]) {
-                        tick.series.push({
-                            key: key,
-                            serie: serie.title,
-                            value: serie.yValues[index],
-                            len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+            else {
+                if (this.chartData.data.xValueNames) {
+                    this.chartData.data.xValueNames.forEach((key, index) => {
+                        const tick = { key: key, series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key,
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
                         });
-                    }
-                });
-                toReturn.push(tick);
-            });
+                        toReturn.push(tick);
+                    });
+                }
+                else {
+                    this.chartData.data.xValues.forEach((key, index) => {
+                        const tick = { key: key.toString(), series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key.toString(),
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
+                        });
+                        toReturn.push(tick);
+                    });
+                }
+            }
             return toReturn;
         };
         this.adjustBarSize = () => {
@@ -586,7 +673,10 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 this.dims = 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) => {
@@ -813,9 +903,17 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .transition('color')
                 .duration(20)
                 .attr('fill', (d) => {
-                return event.target.tagName === 'rect'
-                    ? this.adjustColor(this.colorFunction(d.serie), 50)
-                    : this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                var _a;
+                if (event.target.tagName === 'rect') {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
+                }
+                else {
+                    return this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                }
             });
         };
         // Removing highlight from bar
@@ -835,7 +933,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             else
                 this.tooltipData = d;
             const tooltipBody = this.tooltip.select('.tooltipBody');
-            tooltipBody
+            this.tooltip
                 .select('.tooltipHeading')
                 .html(this.tooltipData.key);
             tooltipBody
@@ -998,6 +1096,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             this.chartData = data;
         else
             this.chartData = JSON.parse(data);
+        if (this.chartData)
+            this.series = this.chartData.data.series.map(serie => serie.title);
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -1039,10 +1139,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     }
     initLegend() {
         const rectSize = 18;
+        const legendData = this.chartData.data.series.map(serie => serie.title);
+        if (this.chartData.data.averageLine)
+            legendData.push(this.chartData.data.averageLine.text);
         const legendChips = select(this.legendDiv).select('.legend')
             .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
             .selectAll('.legendChip')
-            .data(this.chartData.data.series.map(serie => serie.title))
+            .data(legendData)
             .join('div')
             .attr('class', 'legendChip')
             .style('display', 'flex')
@@ -1063,34 +1166,52 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             .attr('rx', 4)
             .attr('ry', 4)
             .attr('fill', (title) => this.colorFunction(title));
-        legendChips.append('span').text((d) => d);
+        legendChips.append('span').style('text-wrap', 'nowrap').text((d) => d);
+        if (this.chartData.data.averageLine) {
+            const averageLine = legendChips.filter(':last-child')
+                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
+            const miniSVG = averageLine
+                .select('svg')
+                .attr('width', rectSize * 2);
+            miniSVG.select('rect').remove();
+            miniSVG.append('line')
+                .attr('x1', 1)
+                .attr('x2', rectSize * 2 - 1)
+                .attr('y1', rectSize / 2 + 1)
+                .attr('y2', rectSize / 2 + 1)
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-dasharray', '12, 7');
+        }
     }
     initToolTip() {
         // Getting handle for tooltip
         this.tooltip = select('#' + this.afId);
-        this.tooltip.select('.close').on('click', this.closeTooltip);
+        this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
         // Add heading placeholder for heading
         this.tooltip
-            .select('.tooltipBody')
-            .append('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1)) // increment heading level by one
+            .select('.tooltipHead')
+            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
             .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
             .style('font-size', '1rem')
-            .style('margin', '0 0.75rem 0.5rem 0 ')
+            .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
         this.tooltip.style('visibility', 'hidden');
     }
     initEmpty() {
-        select(this.chartDiv).select('svg').remove();
+        select(this.chartDiv).select('.chartSVG').remove();
         this.maxHeight = 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 = select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .attr('role', 'img')
             .attr('aria-label', this.chartData && this.chartData.title
@@ -1102,10 +1223,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
+        this.tooltip = 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();
@@ -1151,11 +1275,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .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)
@@ -1164,13 +1290,14 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .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$1)
@@ -1272,6 +1399,9 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     // Initializing bars, can only handle one series of bars for now
     initBars() {
         this.barSelection = this.barChartContainer
+            .append('g')
+            .attr('class', 'interactiveElements')
+            .style('isolation', 'isolate')
             .selectAll('barGroup')
             .data(this.mappedData)
             .join('g')
@@ -1328,6 +1458,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         this.initYAxis();
         this.initXAxis();
         this.initBars();
+        this.averageLine();
         this.initBarText();
     }
     async updateChain() {
@@ -1442,12 +1573,18 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     }
     // Getting correct color given index or name of data serie
     colorFunction(input) {
-        if (typeof input === 'number')
+        var _a;
+        if (typeof input === 'number') {
             return this.evalColorVar(this.colorPalettes[input]);
+        }
         else {
             const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
-            if (index > 0)
-                return this.evalColorVar(this.colorPalettes[index]);
+            if (index > 0) {
+                if ((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern)
+                    return 'url(#prognosis)';
+                else
+                    return this.evalColorVar(this.colorPalettes[index]);
+            }
             else
                 return this.evalColorVar(this.colorPalettes[0]);
         }
@@ -1483,6 +1620,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         this.setNamedTicks();
         this.setValueTicks();
         this.setTickInteraction();
+        this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
         if (this.tooltip.style('visibility') !== 'hidden')
@@ -1605,7 +1743,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
             }
         }
-        return (h(Host, { key: 'adbf9f1c26a8816a8d4b585b0fc7a0b9100bf252', ref: (el) => (this.host = el) }, h("div", { key: 'ee28dc5914be751e08c73253b80fd257c2e17bbb', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '6a0b051d3c26e9c34fb59d4ee323a10d1cb542e1', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '9e11623f0b35f394dc3655067625a37771f648d1', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '6e00e771521a10c0213ae6267ea2879c7ccc4b3c', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a1eec7299c9cd273ceffa1f1689ee0c6297ce0a1', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '5361af6d17e4cd7d6217afd48c4a474fd905c8de', slot: "icon" }), "Visa diagram"), h("div", { key: '2efe2244c2105390580779f60a7c1accd5135d49', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '48f2316efe396309fd73510a2eea011c137e24ed', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '4f2f494517979cbb9de43945d5ffe17acbe6c814', class: "chartTooltip", id: this.afId }, h("div", { key: '36db97d0dcd4e2009cd33b4125b631eddae039ae', class: "tooltipBody" }), h("digi-icon-x", { key: 'b3ac9ec4b6cd6c2c666d475929c10c0aaba2b9e1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'f96ed8b4c527ba32de5dd5bdb58c367435ecbc04', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3911352915f02a33231c2e0604a5073fb7203bd3', class: "legend" })), h("div", { key: '29c613f6af6e23b05748e230bad4c00156f30fd6', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (h(Host, { key: '3b919d1bdd201ddf5e4e5e2955190ed34c5aced3', ref: (el) => (this.host = el) }, h("svg", { key: '380b1d30cc3c7a71bf05fa4cdf4bb00def16b090', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'd39cde898124df9b34b994d0105fcc28e486a8f4' }, h("pattern", { key: '20d0ffdfa0e5310cad77ec994bf963f600de7b69', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '17d98e16afa2c42146a22a441d3dd0922ae767f5', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '3dfdebb12e5f2eba8b216acd4ff846e82615ed66', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'df76dde74f8e49e600f97b81c0c50e97147b9626', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '1d7a87ca509e067288af063e406d98962639560c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1c9618f2b783704cc0ceab0c38d8b525b9fdc520', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '5217e3c1b3063bcb77fee7bebf631296ea95ab6b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '904c16605d7947862bbf77b7f5dcbf581284ef97', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e285bef2d76e214a5615d4cee157bde5061e472a', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '2b278678de6fc8feda2f02c494c6e0dc76d1b3bb', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '85aa9d581cdf8332b87eebb80df10e2e654ec81e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'e4396b006704ebd6ffad155ebb4be3ae7abaf5d0', slot: "icon" }), "Visa diagram"), h("div", { key: '6c8a51169075d49b9da6f0158042c06e5d38a6e2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '8b0b7b63ba4f8b428f6d728d48cdc05ae791a605', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'fadf084df0bfcd6f39831b92983091e6c0fefbd0', class: "chartTooltip", id: this.afId }, h("div", { key: '3a0258527320c1719bffec8c221bc9884d77ee1f', class: "tooltipHead" }, h("digi-icon-x", { key: 'b1013c82580116f7806b2bf31b08eea205a47db1', class: "tooltipClose" })), h("div", { key: 'e98e704c7f03fe0e0c1a90a9088f2962b9661a5c', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '56da797be96540039f52ae28a2bf250d46f47f12', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3f3621240d161083d114df5d02a550d1f06613fa', class: "legend" })), h("div", { key: '427754c0a4b58f1cb334e89960d60c4ef22284f4', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/digi-button.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiButton extends Components.DigiButton, HTMLElement {}
 export const DigiButton: {

package/components/digi-calendar-datepicker.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiCalendarDatepicker extends Components.DigiCalendarDatepicker, HTMLElement {}
 export const DigiCalendarDatepicker: {

package/components/digi-calendar-datepicker.js

@@ -48,19 +48,19 @@ import './p-b0e88537.js';
 import './p-cdcaf0eb.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as detectClickOutside } from './p-430607cb.js';
-import { i as isBefore, a as isAfter, d as defineCustomElement$f } from './p-5d16bf8e.js';
-import { d as defineCustomElement$e } from './p-4be31ab9.js';
-import { d as defineCustomElement$d } from './p-0b4d2d83.js';
-import { d as defineCustomElement$c } from './p-b6b7ca97.js';
-import { d as defineCustomElement$b } from './p-14ca5b70.js';
-import { d as defineCustomElement$a } from './p-f3c0bfd0.js';
-import { d as defineCustomElement$9 } from './p-ea3ca139.js';
-import { d as defineCustomElement$8 } from './p-21cd8c48.js';
-import { d as defineCustomElement$7 } from './p-2889897c.js';
-import { d as defineCustomElement$6 } from './p-039ae2b0.js';
-import { d as defineCustomElement$5 } from './p-04d40c11.js';
-import { d as defineCustomElement$4 } from './p-6105626d.js';
-import { d as defineCustomElement$3 } from './p-ecf4d8ee.js';
+import { i as isBefore, a as isAfter, d as defineCustomElement$f } from './p-52fe1a97.js';
+import { d as defineCustomElement$e } from './p-d0884709.js';
+import { d as defineCustomElement$d } from './p-d1fc55fd.js';
+import { d as defineCustomElement$c } from './p-7811ea5a.js';
+import { d as defineCustomElement$b } from './p-f630b5d3.js';
+import { d as defineCustomElement$a } from './p-2bcbe128.js';
+import { d as defineCustomElement$9 } from './p-c90fed99.js';
+import { d as defineCustomElement$8 } from './p-2c01b4f7.js';
+import { d as defineCustomElement$7 } from './p-11278347.js';
+import { d as defineCustomElement$6 } from './p-e6a40b0a.js';
+import { d as defineCustomElement$5 } from './p-013b272d.js';
+import { d as defineCustomElement$4 } from './p-5bbb5a67.js';
+import { d as defineCustomElement$3 } from './p-33f08ec3.js';
 import { d as defineCustomElement$2 } from './p-2f619b66.js';
 import { r as requiredArgs, t as toDate, i as isValid } from './p-7aacd45f.js';
 import { t as toInteger, g as getUTCISOWeek, a as getUTCWeek, b as getUTCWeekYear, s as startOfUTCWeek, c as startOfUTCISOWeek, i as isProtectedWeekYearToken, d as throwProtectedError, e as isProtectedDayOfYearToken, f as subMilliseconds, h as getTimezoneOffsetInMilliseconds, j as defaultLocale, l as longFormatters } from './p-c7949525.js';

package/components/digi-calendar-week-view.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiCalendarWeekView extends Components.DigiCalendarWeekView, HTMLElement {}
 export const DigiCalendarWeekView: {

package/components/digi-calendar-week-view.js

@@ -5,9 +5,9 @@ import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { b as ButtonVariation } from './p-f518a4cf.js';
 import { C as CalendarWeekViewHeadingLevel } from './p-7e32c40b.js';
 import { d as defineCustomElement$5 } from './p-e8fc33ed.js';
-import { d as defineCustomElement$4 } from './p-ea3ca139.js';
-import { d as defineCustomElement$3 } from './p-21cd8c48.js';
-import { d as defineCustomElement$2 } from './p-204a12b0.js';
+import { d as defineCustomElement$4 } from './p-c90fed99.js';
+import { d as defineCustomElement$3 } from './p-2c01b4f7.js';
+import { d as defineCustomElement$2 } from './p-cfb33ac7.js';
 import { r as requiredArgs, t as toDate, i as isValid } from './p-7aacd45f.js';
 
 /**

package/components/digi-calendar.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiCalendar extends Components.DigiCalendar, HTMLElement {}
 export const DigiCalendar: {

package/components/digi-calendar.js

@@ -1,4 +1,4 @@
-import { C as Calendar, d as defineCustomElement$1 } from './p-5d16bf8e.js';
+import { C as Calendar, d as defineCustomElement$1 } from './p-52fe1a97.js';
 
 const DigiCalendar = Calendar;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-chart-line.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiChartLine extends Components.DigiChartLine, HTMLElement {}
 export const DigiChartLine: {

package/components/digi-chart-line.js

@@ -3,10 +3,10 @@ import { _ as _t } from './p-08cf2c0e.js';
 import { s as select, f as dispatch, r as range, a as axisLeft, g as formatLocale, p as polyInOut, b as axisBottom, l as linear, m as max, d as min, o as ordinal, c as interpolate, e as linear$1 } from './p-a47b6b5c.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as defineCustomElement$6 } from './p-e8fc33ed.js';
-import { d as defineCustomElement$5 } from './p-3a53c26b.js';
-import { d as defineCustomElement$4 } from './p-70a1e53a.js';
-import { d as defineCustomElement$3 } from './p-5e2cf317.js';
-import { d as defineCustomElement$2 } from './p-204a12b0.js';
+import { d as defineCustomElement$5 } from './p-3c9cea93.js';
+import { d as defineCustomElement$4 } from './p-94603530.js';
+import { d as defineCustomElement$3 } from './p-cc5bd9f9.js';
+import { d as defineCustomElement$2 } from './p-cfb33ac7.js';
 
 function sourceEvent(event) {
   let sourceEvent;
@@ -2307,7 +2307,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: 'e5e8fdc58756850c9efa7cbb07b9e1e381dea725', ref: (el) => (this._host = el) }, h("div", { key: 'be9a2e7be1153eca0ac094b6af9697978caac397', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'cb5ef87503157d2b6fde4faa88146482c4b35263', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '70fae20a2cbc88c3d196b4b397c60c6a7af017d5', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '4a8d8c1975a90a6479e48995b850bdb9de303e4b', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b54b1cde8415d450ce8d8f1381eea7a730629a69', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'c59f756df0b6baf807bbcafc4f5043b732731db5', slot: "icon" }), "Visa diagram"), h("div", { key: '4782e1922b6e45665d237516ad8340d00e1f9b45', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'e5543d8919613a9fb3ff1c3f5d5f84fd4059b076', class: "chartTooltip", id: this.afId }, h("div", { key: '236b2644e8052cc68c388210bd517e329d52ca21', class: "tooltipHead" }, h("digi-icon-x", { key: 'fb6f0881aeedd04414157ff95484a2d32fa34b38', class: "close" }), ' '), h("div", { key: 'fb9bddebfb38768a8402a59a71551b95270e3305', class: "tooltipBody" })), h("div", { key: '469dac4bc1ab51f4d4cb0b97e7e4a216cd1cc4fe', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '48bcfdc1eae947708bd2f7414f189bd1339db2d3', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'd3dc96e2710194b6e66848f663d7517b33dd5926', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '2660390a27d10e08cede6fbc9baa2f6f2c23b598', ref: (el) => (this._host = el) }, h("div", { key: '28f684dbcf23122b496b506979da55556c7441d9', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '1790454fa384ac0f0443462f4f307108dc3950ac', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'ede9024c57dd001053645e052326e36caca932c0', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'a8ff4b212951ea76a3bca93e7ffacb08053ebf35', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'e97d0302da660694c7ec5d451c794d9ae3d187c6', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '2ca654591868fb8ef85016b2fcaec0655f53ea3f', slot: "icon" }), "Visa diagram"), h("div", { key: '409521a949a75753d8ad998861e8f53f8f2cda62', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '19b8343c5039da7ead9a50ac7de74d0ce0324681', class: "chartTooltip", id: this.afId }, h("div", { key: '28767d138814122bdec3c0f83d67772f3eb2be79', class: "tooltipHead" }, h("digi-icon-x", { key: '0bb56bb3793b1a686b6f9adc4fb511fac02b2be8', class: "close" }), ' '), h("div", { key: '8c26e79ac3581ea677b483f56830c9d410cf88a9', class: "tooltipBody" })), h("div", { key: 'b52f49ec54de82fe47903b3d02951b4067989e86', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'd203c6a181d727459e2832392adaf9474c10d2ce', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'f4f0302c22507f874e5916b4ce11a706d54de1d5', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/digi-code-block.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiCodeBlock extends Components.DigiCodeBlock, HTMLElement {}
 export const DigiCodeBlock: {

package/components/digi-code-block.js

@@ -1,4 +1,4 @@
-import { C as CodeBlock, d as defineCustomElement$1 } from './p-f080d24e.js';
+import { C as CodeBlock, d as defineCustomElement$1 } from './p-03338211.js';
 
 const DigiCodeBlock = CodeBlock;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-code-example.d.ts

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../dist/types/components";
+import type { Components, JSX } from "../../../../libs/arbetsformedlingen/package/dist/types/components";
 
 interface DigiCodeExample extends Components.DigiCodeExample, HTMLElement {}
 export const DigiCodeExample: {