@designsystem-se/af 35.4.1-beta.5 → 35.4.1-beta.7

package/hydrate/index.mjs

@@ -35682,7 +35682,7 @@ class UtilResizeObserver {
     }; }
 }
 
-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 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 .topWrapper.sc-digi-bar-chart{margin-bottom: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:0 0 0.75rem 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}";
 var DigiBarChartStyle0 = barChartCss;
 
 /**
@@ -35944,190 +35944,31 @@ class barChart {
         this.barGroupID = (key) => {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
-        this.updateBars = (fromLoading) => {
-            this.barChartContainer
+        this.updateBars = () => {
+            this.barSelection = this.barChartContainer.select('.interactiveElements')
                 .selectAll('.barGroup')
                 .data(this.mappedData)
-                .join((enter) => {
-                var _a, _b;
-                const tempSelection = enter
-                    .append('g')
-                    .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                tempSelection
-                    .append('rect')
-                    .attr('class', 'bar')
-                    .style('cursor', 'pointer')
-                    .attr('ry', 4)
-                    .attr('rx', 4)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key)
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key))
-                    .attr('width', () => this.afVariation === BarChartVariation.Horizontal
-                    ? 0
-                    : this.xScale.bandwidth())
-                    .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale.bandwidth()
-                    : 0)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut)
-                    .on('click', this.openTooltip)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(polyInOut)
-                    .attr('width', this.widthFunction)
-                    .attr('y', this.yFunction)
-                    .attr('height', this.heightFunction)
-                    .attr('fill', '#00005a');
-                if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-                    return tempSelection;
-                tempSelection
-                    .append('text')
-                    .text((d) => d.value.toLocaleString())
-                    .attr('class', 'barText')
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('text-anchor', 'end')
-                    .style('pointer-events', 'none')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = interpolate$1(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-                return tempSelection;
-            }, (update) => {
-                // Update ids to bars
-                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                // Mouse interaction to updated loading bars
-                if (fromLoading) {
-                    update
-                        .select('rect')
-                        .on('mouseenter', this.hover)
-                        .on('mouseleave', this.hoverOut)
-                        .on('click', this.openTooltip)
-                        .attr('x', this.xFunction)
-                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this.yScale(d.key)
-                        : this.dims.height - this.margin.bottom)
-                        .attr('width', this.widthFunction)
-                        .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                        ? this.yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(polyInOut)
-                        .attr('y', this.yFunction)
-                        .attr('height', this.heightFunction)
-                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(polyInOut)
-                        .attr('x', this.xFunction)
-                        .attr('y', this.yFunction)
-                        .attr('width', this.widthFunction)
-                        .attr('height', this.heightFunction)
-                        .attr('fill', '#00005a');
-                }
-                return update
-                    .select('text')
-                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = interpolate$1(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-            }, (exit) => exit.remove());
-            this.barSelection = this.barChartContainer.selectAll('rect');
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('.bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction)
+                .attr('fill', (d) => this.colorFunction(d.serie))
+                .on('mouseenter', this.hover)
+                .on('mouseleave', this.hoverOut)
+                .on('click', this.openTooltip);
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
             this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
@@ -36166,7 +36007,7 @@ class barChart {
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this.loading || !this.chartData) {
+            if (!this.chartData) {
                 this.placeholderTicks.forEach((key) => {
                     const tick = { key: key, series: [] };
                     tick.series.push({
@@ -36561,7 +36402,7 @@ class barChart {
                     this.tooltip
                         .select('digi-icon-caret-up')
                         .style('position', 'absolute')
-                        .style('top', '-12px')
+                        .style('top', '-11px')
                         .style('left', '0')
                         .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
                 }
@@ -36584,7 +36425,16 @@ class barChart {
             }
             else {
                 if (this.afVariation === BarChartVariation.Horizontal) {
-                    console.log('helloo');
+                    this.tooltip
+                        .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
+                    );
+                    this.tooltip
+                        .select('digi-icon-caret-up')
+                        .style('position', 'absolute')
+                        .style('top', '-11px')
+                        .style('left', '0')
+                        .style('transform', `translate(50%,0)`);
+                    //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
                 }
                 else {
                     const xStart = this.margin.left + this.tickPadding + this.yTickSize;
@@ -36684,7 +36534,7 @@ class barChart {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
             if (typeof data != 'string')
                 this.chartData = data;
             else
@@ -36786,6 +36636,7 @@ class barChart {
             .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('text-wrap', 'wrap')
             .style('font-size', '1rem')
             .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
@@ -36812,7 +36663,7 @@ class barChart {
             : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         select(this.titleDiv)
-            .append(this.afHeadingLevel)
+            .select(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
@@ -36861,14 +36712,17 @@ class barChart {
             this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this.barChartContainer.selectAll('.barGroup').remove();
+            this.barChartContainer.selectAll('.interactiveElements').remove();
             this.barSelection = this.barChartContainer
+                .append('g')
+                .attr('class', 'interactiveElements')
+                .style('isolation', 'isolate')
                 .selectAll('barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-            this.barSelection.selectAll('.barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
                 .data((d) => {
                 return d.series;
             })
@@ -36890,7 +36744,7 @@ class barChart {
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
             this.barChartContainer.selectAll('.bar')
-                .transition()
+                .transition('animateBar')
                 .duration(400)
                 .ease(linear$1)
                 .delay((...[, i]) => i * 150 + 400)
@@ -36905,8 +36759,8 @@ class barChart {
         };
         const flattenBars = () => {
             this.barChartContainer
-                .selectAll('rect')
-                .transition()
+                .selectAll('.bar')
+                .transition('animateBar')
                 .duration(200)
                 .ease(linear$1)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
@@ -37083,6 +36937,7 @@ class barChart {
                 select(this.host).select('.tableButton').style('display', null);
                 select(this.legendDiv).style('display', null);
                 this.initToolTip();
+                this.initLegend();
             }
             // Disconnect resize observer while adjusting things
             this.barChartObserver.disconnect();
@@ -37142,18 +36997,22 @@ class barChart {
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this.barSelection.selectAll('.barGroup').on('end', null);
+                this.barChartContainer.selectAll('.barGroup').on('end', null);
+                select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
-                this.barSelection
-                    .transition()
+                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
+                this.barChartContainer.selectAll('.bar').transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
                     ? this.yScale(d.key)
                     : this.dims.height - this.margin.bottom)
                     .attr('height', () => 0)
-                    .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
-                    ? this.updateBars(true)
-                    : null);
+                    .on('end', (...[, i]) => {
+                    if (i === this.placeholderTicks.length - 1) {
+                        this.updateBars();
+                        this.barChartObserver.observe(this.chartDiv);
+                    }
+                });
                 this.setTickInteraction();
             }
             else {
@@ -37335,7 +37194,7 @@ 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 (hAsync(Host, { key: '78d96a495f4d362eb0f599ee48f79465ae6e6f0c', ref: (el) => (this.host = el) }, hAsync("svg", { key: '39537403f0811e8090fc1c95a97bfa6b682df1c5', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '29a015c3dd10fe55948ebc41835aa04eae31a9ff' }, hAsync("pattern", { key: '0f48268bb9e065e0cf2c7d85a3602a66552b87ce', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'fc24757af401e96fa228135bbbf17232bff16210', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: 'e779819d8986d0d23dc799bfe208cac5d0f31211', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '767468e01325e2bd2d5847b9e72f70d421f9fd58', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '63772f52b5ed106d7cbece41143e932301f87bc5', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4b89cfdb16e55f992cf7a9e6bcdf94528c7f4706', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'd20cc02f768d7a19302b8ed5982f03fff5d82370', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '200a0918a84e054e3579cd7d14854c51bb1fb49c', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '0241efd1a7e114a74d08fb2d9dcc3243765e2c67', 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() : ''}` }, hAsync("digi-icon-table", { key: '8d3cecf7d3abd7f32c24634e11da3608ba6e1aa8', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'da15d792de3403b50828e7b951fdb73e213baa9f', 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() : ''}` }, hAsync("digi-icon-chart", { key: '05cc0d7e638469f3cd60a4ad0fd93c16aaef1748', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'e83745a86bcb781a970c0caf1177c3b3c7406a13', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '8b99b1365bcacccf51a7352c1385d54781ffb227', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '9eeb41124c07587a7e9b2cad5fe6597716ec905b', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '19f4428ae23fc9861b6743ef4617a2a5a48c3d02', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'abb1b56f8d9449aa0fe16bacbf0b8ef8d10f94b7', class: "tooltipClose" })), hAsync("div", { key: '67be9c846f0b0d5fcbae4b49e3a6266a58709c92', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: 'bd56f13ab74501c24279f66a62e879ec25fc72e9', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '12089dd98e1e62198ed7a2e054bb454567cc220a', class: "legend" })), hAsync("div", { key: '05c1f726446185113b0bf39e7c2e2cf6bbaba376', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (hAsync(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, hAsync("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', 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() : ''}` }, hAsync("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', 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() : ''}` }, hAsync("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), hAsync("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), hAsync("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "35.4.1-beta.5",
+  "version": "35.4.1-beta.7",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",

package/dist/digi-arbetsformedlingen/p-10dd9a49.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,g as s}from"./p-52e3bb32.js";import{_ as h}from"./p-08cf2c0e.js";import{s as e,f as n,r as a,a as r,g as o,p as l,b as c,l as d,m as u,d as p,o as f,c as g,e as b}from"./p-a47b6b5c.js";import{r as m}from"./p-ffe5c0e8.js";function y(t,i){if(t=function(t){let i;for(;i=t.sourceEvent;)t=i;return t}(t),void 0===i&&(i=t.currentTarget),i){var s=i.ownerSVGElement||i;if(s.createSVGPoint){var h=s.createSVGPoint();return h.x=t.clientX,h.y=t.clientY,[(h=h.matrixTransform(i.getScreenCTM().inverse())).x,h.y]}if(i.getBoundingClientRect){var e=i.getBoundingClientRect();return[t.clientX-e.left-i.clientLeft,t.clientY-e.top-i.clientTop]}}return[t.pageX,t.pageY]}const x={passive:!1},w={capture:!0,passive:!1};function v(t){t.stopImmediatePropagation()}function $(t){t.preventDefault(),t.stopImmediatePropagation()}const k=t=>()=>t;function M(t,{sourceEvent:i,subject:s,target:h,identifier:e,active:n,x:a,y:r,dx:o,dy:l,dispatch:c}){Object.defineProperties(this,{type:{value:t,enumerable:!0,configurable:!0},sourceEvent:{value:i,enumerable:!0,configurable:!0},subject:{value:s,enumerable:!0,configurable:!0},target:{value:h,enumerable:!0,configurable:!0},identifier:{value:e,enumerable:!0,configurable:!0},active:{value:n,enumerable:!0,configurable:!0},x:{value:a,enumerable:!0,configurable:!0},y:{value:r,enumerable:!0,configurable:!0},dx:{value:o,enumerable:!0,configurable:!0},dy:{value:l,enumerable:!0,configurable:!0},_:{value:c}})}function N(t){return!t.ctrlKey&&!t.button}function T(){return this.parentNode}function A(t,i){return null==i?{x:t.x,y:t.y}:i}function P(){return navigator.maxTouchPoints||"ontouchstart"in this}function S(t){return((t*=2)<=1?t*t:--t*(2-t)+1)/2}M.prototype.on=function(){var t=this._.on.apply(this._,arguments);return t===this._?this:t};const j=Math.PI,E=2*j,z=1e-6,G=E-z;function C(t){this._+=t[0];for(let i=1,s=t.length;i<s;++i)this._+=arguments[i]+t[i]}class B{constructor(t){this._x0=this._y0=this._x1=this._y1=null,this._="",this._append=null==t?C:function(t){let i=Math.floor(t);if(!(i>=0))throw new Error(`invalid digits: ${t}`);if(i>15)return C;const s=10**i;return function(t){this._+=t[0];for(let i=1,h=t.length;i<h;++i)this._+=Math.round(arguments[i]*s)/s+t[i]}}(t)}moveTo(t,i){this._append`M${this._x0=this._x1=+t},${this._y0=this._y1=+i}`}closePath(){null!==this._x1&&(this._x1=this._x0,this._y1=this._y0,this._append`Z`)}lineTo(t,i){this._append`L${this._x1=+t},${this._y1=+i}`}quadraticCurveTo(t,i,s,h){this._append`Q${+t},${+i},${this._x1=+s},${this._y1=+h}`}bezierCurveTo(t,i,s,h,e,n){this._append`C${+t},${+i},${+s},${+h},${this._x1=+e},${this._y1=+n}`}arcTo(t,i,s,h,e){if(t=+t,i=+i,s=+s,h=+h,(e=+e)<0)throw new Error(`negative radius: ${e}`);let n=this._x1,a=this._y1,r=s-t,o=h-i,l=n-t,c=a-i,d=l*l+c*c;if(null===this._x1)this._append`M${this._x1=t},${this._y1=i}`;else if(d>z)if(Math.abs(c*r-o*l)>z&&e){let u=s-n,p=h-a,f=r*r+o*o,g=u*u+p*p,b=Math.sqrt(f),m=Math.sqrt(d),y=e*Math.tan((j-Math.acos((f+d-g)/(2*b*m)))/2),x=y/m,w=y/b;Math.abs(x-1)>z&&this._append`L${t+x*l},${i+x*c}`,this._append`A${e},${e},0,0,${+(c*u>l*p)},${this._x1=t+w*r},${this._y1=i+w*o}`}else this._append`L${this._x1=t},${this._y1=i}`}arc(t,i,s,h,e,n){if(t=+t,i=+i,n=!!n,(s=+s)<0)throw new Error(`negative radius: ${s}`);let a=s*Math.cos(h),r=s*Math.sin(h),o=t+a,l=i+r,c=1^n,d=n?h-e:e-h;null===this._x1?this._append`M${o},${l}`:(Math.abs(this._x1-o)>z||Math.abs(this._y1-l)>z)&&this._append`L${o},${l}`,s&&(d<0&&(d=d%E+E),d>G?this._append`A${s},${s},0,1,${c},${t-a},${i-r}A${s},${s},0,1,${c},${this._x1=o},${this._y1=l}`:d>z&&this._append`A${s},${s},0,${+(d>=j)},${c},${this._x1=t+s*Math.cos(e)},${this._y1=i+s*Math.sin(e)}`)}rect(t,i,s,h){this._append`M${this._x0=this._x1=+t},${this._y0=this._y1=+i}h${s=+s}v${+h}h${-s}Z`}toString(){return this._}}function D(t){return function(){return t}}const L=Math.sqrt,I=Math.PI,O=2*I;function H(t){let i=3;return t.digits=function(s){if(!arguments.length)return i;if(null==s)i=null;else{const t=Math.floor(s);if(!(t>=0))throw new RangeError(`invalid digits: ${s}`);i=t}return t},()=>new B(i)}function R(t){this._context=t}function F(t){return new R(t)}function W(t){return t[0]}function V(t){return t[1]}function J(t,i){var s=D(!0),h=null,e=F,n=null,a=H(r);function r(r){var o,l,c,d=(r=function(t){return"object"==typeof t&&"length"in t?t:Array.from(t)}(r)).length,u=!1;for(null==h&&(n=e(c=a())),o=0;o<=d;++o)!(o<d&&s(l=r[o],o,r))===u&&((u=!u)?n.lineStart():n.lineEnd()),u&&n.point(+t(l,o,r),+i(l,o,r));if(c)return n=null,c+""||null}return t="function"==typeof t?t:void 0===t?W:D(t),i="function"==typeof i?i:void 0===i?V:D(i),r.x=function(i){return arguments.length?(t="function"==typeof i?i:D(+i),r):t},r.y=function(t){return arguments.length?(i="function"==typeof t?t:D(+t),r):i},r.defined=function(t){return arguments.length?(s="function"==typeof t?t:D(!!t),r):s},r.curve=function(t){return arguments.length?(e=t,null!=h&&(n=e(h)),r):e},r.context=function(t){return arguments.length?(null==t?h=n=null:n=e(h=t),r):h},r}R.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;default:this._context.lineTo(t,i)}}};const U={draw(t,i){const s=L(i/I);t.moveTo(s,0),t.arc(0,0,s,0,O)}},Y={draw(t,i){const s=.62625*L(i);t.moveTo(0,-s),t.lineTo(s,0),t.lineTo(0,s),t.lineTo(-s,0),t.closePath()}},_={draw(t,i){const s=L(i),h=-s/2;t.rect(h,h,s,s)}},Z=L(3),q={draw(t,i){const s=-L(i/(3*Z));t.moveTo(0,2*s),t.lineTo(-Z*s,-s),t.lineTo(Z*s,-s),t.closePath()}},Q=-.5,K=L(3)/2,X=1/L(12),tt=3*(X/2+1),it={draw(t,i){const s=L(i/tt),h=s/2,e=s*X,n=h,a=s*X+s,r=-n,o=a;t.moveTo(h,e),t.lineTo(n,a),t.lineTo(r,o),t.lineTo(Q*h-K*e,K*h+Q*e),t.lineTo(Q*n-K*a,K*n+Q*a),t.lineTo(Q*r-K*o,K*r+Q*o),t.lineTo(Q*h+K*e,Q*e-K*h),t.lineTo(Q*n+K*a,Q*a-K*n),t.lineTo(Q*r+K*o,Q*o-K*r),t.closePath()}};function st(t,i){let s=null,h=H(e);function e(){let e;if(s||(s=e=h()),t.apply(this,arguments).draw(s,+i.apply(this,arguments)),e)return s=null,e+""||null}return t="function"==typeof t?t:D(t||U),i="function"==typeof i?i:D(void 0===i?64:+i),e.type=function(i){return arguments.length?(t="function"==typeof i?i:D(i),e):t},e.size=function(t){return arguments.length?(i="function"==typeof t?t:D(+t),e):i},e.context=function(t){return arguments.length?(s=null==t?null:t,e):s},e}function ht(t,i,s){t._context.bezierCurveTo((2*t._x0+t._x1)/3,(2*t._y0+t._y1)/3,(t._x0+2*t._x1)/3,(t._y0+2*t._y1)/3,(t._x0+4*t._x1+i)/6,(t._y0+4*t._y1+s)/6)}function et(t){this._context=t}function nt(t){return new et(t)}et.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=NaN,this._point=0},lineEnd:function(){switch(this._point){case 3:ht(this,this._x1,this._y1);case 2:this._context.lineTo(this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;break;case 2:this._point=3,this._context.lineTo((5*this._x0+this._x1)/6,(5*this._y0+this._y1)/6);default:ht(this,t,i)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=i}};const at=class{constructor(i){t(this,i),this._lineTypes=[null,"18, 7","8,7","2,6"],this._strokeWidth=2.75,this._lineCap="round",this._strokeGlyphs=[U,q,_,it,Y],this._toggled=!1,this._tickSize=0,this._selectedLines=[],this._dragStart=0,this._dragDir=0,this._loading=!1,this.margin={bottom:0,top:6,left:5,right:15},this.fontSize="0.875rem",this.xPadding=5,this.yPadding=8,this.xTickSize=5,this.formatStyle=",d",this.axisNumberFormat={decimal:",",thousands:" ",grouping:[3],currency:["","kr"]},this.lineChartObserver=new ResizeObserver((t=>{t.forEach((()=>{this.resizeSvg(),this.resizeLines(),this.repositionTooltip(),e(this._legendDiv).style("width",this.dims.width+"px")}))})),this.tableObserver=new ResizeObserver((t=>{t.forEach((()=>{e(this._legendDiv).style("width",this.dims.width+"px"),this.resizeTable()}))})),this.dragStart=t=>{const i=e(this._legendDiv).node();this._dragStart=t.x-i.offsetLeft,this._scrollLeft=i.scrollLeft},this.drag=t=>{const i=e(this._legendDiv);this._dragDir=t.x;const s=this._dragDir-i.node().offsetLeft;i.property("scrollLeft",this._scrollLeft-1*(s-this._dragStart))},this.setYTicks=(t=!1)=>{const i=this._chartData.meta&&this._chartData.meta.numberOfReferenceLines?this._chartData.meta.numberOfReferenceLines:5,s=this._yAxis.domain()[0],h=this._yAxis.domain()[1],e=(h-s)/(i-1),n=a(s,h+e,e);t?this._yAxisHandle.style("font-size",this.fontSize).call(r(this._yAxis).ticks(i).tickPadding(this.yPadding).tickValues(n).tickSize(-(this.dims.width-this.margin.left)).tickFormat((t=>o(this.axisNumberFormat).format(this.formatStyle)(t)))):this._yAxisHandle.style("font-size",this.fontSize).transition().duration(400).call(r(this._yAxis).ticks(i).tickPadding(this.yPadding).tickValues(n).tickSize(-(this.dims.width-this.margin.left)).tickFormat((t=>o(this.axisNumberFormat).format(this.formatStyle)(t)))).on("end",(()=>this.leftSetAxis())),this._yAxisHandle.selectAll("line").attr("stroke","#BDBDBD"),this._yAxisHandle.select(".domain").attr("display","none"),t&&this.leftSetAxis(t)},this.addListenersToChart=()=>{this._Tipbox.style("cursor","pointer").on("mousemove",this.drawTooltipLine).on("touchmove","ontouchstart"in window||window.navigator.maxTouchPoints?this.drawTooltip:null).on("mouseup",this.drawTooltip).on("mouseleave",(()=>{this._secondaryLine.attr("display","none"),this._toggled||(this._TooltipLine.attr("display","none"),this._Circles.selectAll("circle").attr("display","none"))}))},this.initLegend=()=>{const t=e(this._legendDiv);e(this._legendDiv).style("width",this.dims.width+"px"),t.selectAll(".chip").remove(),t.call(function(){var t,i,s,h,a=N,r=T,o=A,l=P,c={},d=n("start","drag","end"),u=0,p=0;function f(t){t.on("mousedown.drag",g).filter(l).on("touchstart.drag",S).on("touchmove.drag",j,x).on("touchend.drag touchcancel.drag",E).style("touch-action","none").style("-webkit-tap-highlight-color","rgba(0,0,0,0)")}function g(n,o){if(!h&&a.call(this,n,o)){var l,c,d,u=z(this,r.call(this,n,o),n,o,"mouse");u&&(e(n.view).on("mousemove.drag",b,w).on("mouseup.drag",m,w),c=(l=n.view).document.documentElement,d=e(l).on("dragstart.drag",$,w),"onselectstart"in c?d.on("selectstart.drag",$,w):(c.__noselect=c.style.MozUserSelect,c.style.MozUserSelect="none"),v(n),s=!1,t=n.clientX,i=n.clientY,u("start",n))}}function b(h){if($(h),!s){var e=h.clientX-t,n=h.clientY-i;s=e*e+n*n>p}c.mouse("drag",h)}function m(t){var i,h,n,a;e(t.view).on("mousemove.drag mouseup.drag",null),h=s,n=(i=t.view).document.documentElement,a=e(i).on("dragstart.drag",null),h&&(a.on("click.drag",$,w),setTimeout((function(){a.on("click.drag",null)}),0)),"onselectstart"in n?a.on("selectstart.drag",null):(n.style.MozUserSelect=n.__noselect,delete n.__noselect),$(t),c.mouse("end",t)}function S(t,i){if(a.call(this,t,i)){var s,h,e=t.changedTouches,n=r.call(this,t,i),o=e.length;for(s=0;s<o;++s)(h=z(this,n,t,i,e[s].identifier,e[s]))&&(v(t),h("start",t,e[s]))}}function j(t){var i,s,h=t.changedTouches,e=h.length;for(i=0;i<e;++i)(s=c[h[i].identifier])&&($(t),s("drag",t,h[i]))}function E(t){var i,s,e=t.changedTouches,n=e.length;for(h&&clearTimeout(h),h=setTimeout((function(){h=null}),500),i=0;i<n;++i)(s=c[e[i].identifier])&&(v(t),s("end",t,e[i]))}function z(t,i,s,h,e,n){var a,r,l,p=d.copy(),g=y(n||s,i);if(null!=(l=o.call(t,new M("beforestart",{sourceEvent:s,target:f,identifier:e,active:u,x:g[0],y:g[1],dx:0,dy:0,dispatch:p}),h)))return a=l.x-g[0]||0,r=l.y-g[1]||0,function s(n,o,d){var b,m=g;switch(n){case"start":c[e]=s,b=u++;break;case"end":delete c[e],--u;case"drag":g=y(d||o,i),b=u}p.call(n,t,new M(n,{sourceEvent:o,subject:l,target:f,identifier:e,active:b,x:g[0]+a,y:g[1]+r,dx:g[0]-m[0],dy:g[1]-m[1],dispatch:p}),h)}}return f.filter=function(t){return arguments.length?(a="function"==typeof t?t:k(!!t),f):a},f.container=function(t){return arguments.length?(r="function"==typeof t?t:k(t),f):r},f.subject=function(t){return arguments.length?(o="function"==typeof t?t:k(t),f):o},f.touchable=function(t){return arguments.length?(l="function"==typeof t?t:k(!!t),f):l},f.on=function(){var t=d.on.apply(d,arguments);return t===d?f:t},f.clickDistance=function(t){return arguments.length?(p=(t=+t)*t,f):Math.sqrt(p)},f}().on("start",this.dragStart).on("drag",this.drag)),t.selectAll("legendChips").data(this._chartData.data.series).join("button").attr("class","chip").attr("type","button").attr("aria-pressed",!1).style("padding","0.15rem 0.75rem").style("border","2px solid white").style("border-radius","6px").style("display","flex").style("flex-direction","row").style("gap","0.5rem").style("align-items","center").style("flex-wrap","nowrap").style("min-width","fit-content").style("height","calc(2rem - 2px)").style("font-size",this.fontSize).style("white-space","nowrap").style("box-sizing","border-box").style("background-color","white").style("cursor","pointer").html((t=>'<span style="pointer-events:none;">'+t.title+"</span>")).on("click",this.togglePath).on("mouseover",this.highlightPath).on("focus",this.highlightPath).on("mouseleave",this.colorLines).on("blur",this.colorLines).datum((t=>t)).insert("svg","span").attr("class","legendSvg").attr("pointer-events","none").attr("width",32).attr("height",28).append("line").attr("stroke",(t=>this.colorFunction(t))).attr("stroke-linecap",this._lineCap).attr("stroke-width",4).attr("stroke-dasharray",((t,i)=>this.dashFunction(t,i))).attr("x1",3).attr("x2",29).attr("y1","50%").attr("y2","50%"),this._chartData.data.series.length<=this._lineTypes.length||t.selectAll(".legendSvg").filter(((...[,t])=>t>this._lineTypes.length-1)).append("path").attr("d",((...[,t])=>this.symbolType(t,70))).attr("fill",(t=>this.colorFunction(t))).attr("transform","translate(16,14)")},this.highlightPath=(t,i)=>{"chip"==t.target.className&&(e(t.target).style("border",(t=>"2px solid "+this.colorFunction(t))),this._lineChartContainer.selectAll(".linePath").transition("highlight").duration(150).attr("stroke",((t,s,h)=>t.title===i.title?(e(h[s]).raise(),this.colorFunction(t)):"#E3E3E3")).attr("stroke-width",(t=>t.title===i.title?1.25*this._strokeWidth:this._strokeWidth)),this._lineChartContainer.selectAll(".symbolGroup").attr("fill",((t,s,h)=>{t.title===i.title&&e(h[s]).raise()})),this._lineChartContainer.selectAll(".symbolGroup").selectAll(".symbol").transition("highlight").duration(150).attr("fill",(t=>{if(t)return t.title===i.title?this.colorFunction(t):"#E3E3E3"})))},this.togglePath=t=>{if("chip"!=t.target.className)return;const i=e(t.target),s="white"===i.style("color");i.style("border",(t=>"2px solid "+this.colorFunction(t))).style("background-color",(t=>s?"white":this.colorFunction(t))).style("color",(()=>s?"black":"white")).attr("aria-pressed","false"==i.attr("aria-pressed")).select("line").attr("stroke",(t=>s?this.colorFunction(t):"white")),i.select("path").attr("fill",(t=>s?this.colorFunction(t):"white")),s?this._selectedLines=this._selectedLines.filter((t=>t.title!==i.datum().title)):this._selectedLines.push(this._coreSeries.filter((t=>t.title===i.datum().title))[0]),this._selectedLines.length<1?this._chartData.data.series=JSON.parse(JSON.stringify(this._coreSeries)):this._chartData.data.series.map((t=>{const i=this._selectedLines.findIndex((i=>t.title===i.title));t.yValues=-1!=i?this._selectedLines[i].yValues:[]})),this.updateSvg()},this.colorLines=t=>{e(t.target).style("border","2px solid white"),this._lineChartContainer.selectAll(".linePath").transition("highlight").duration(150).attr("stroke",(t=>this.colorFunction(t))).attr("stroke-width",this._strokeWidth),this._lineChartContainer.selectAll(".symbolGroup").selectAll(".symbol").transition("highlight").duration(150).attr("fill",(t=>t?this.colorFunction(t):null))},this.dashFunction=(...[,t])=>this._lineTypes[t%this._lineTypes.length],this.initLines=()=>{this.defineLineAndScale(),this._lineChartContainer.selectAll("linePath").data(this.reshapeData(this._chartData.data.series)).join("path").attr("class","linePath").attr("stroke",(t=>this.colorFunction(t))).attr("stroke-linecap",this._lineCap).attr("stroke-width",(t=>t.length>1?this._strokeWidth:4)).attr("stroke-dasharray",((t,i)=>t.length>1?this.dashFunction(t,i):null)).attr("fill","none").attr("d",(t=>this._LineFunc(t.line))),this.addSymbols()},this.defineLineAndScale=()=>{this._LineFunc=J().defined((t=>null!=t[1]&&null!=t[1]&&!isNaN(t[1]))).x((t=>this._lineScale(t[0]))).y((t=>this._yAxis(t[1])))},this.reshapeData=t=>t.map((t=>(t.line=this._chartData.data.xValues.map(((i,s)=>[i,t.yValues[s]])),t.length=t.yValues.filter((t=>null!=t&&null!=t)).length,t))),this.addSymbols=(t=!1)=>{this._lineChartContainer.selectAll(".symbolGroup").data(this.reshapeData(this._chartData.data.series.filter(((...[,t])=>t>this._lineTypes.length-1)))).join((i=>{t?i.append("g").attr("class","symbolGroup").selectAll("symbol").data(((t,i)=>t.line.map((s=>null!=s[1]?{val:s[1],x:s[0],title:t.title,colorToken:t.colorToken,index:i}:null)))).join("path").attr("class","symbol").attr("d",(t=>t?this.symbolType(t.index):null)).attr("fill",(t=>t?this.colorFunction(t):null)).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(t.val)})`:null)):i.append("g").attr("class","symbolGroup").selectAll("symbols").data(((t,i)=>t.line.map((s=>null!=s[1]?{val:s[1],x:s[0],title:t.title,colorToken:t.colorToken,index:i}:null)))).join("path").attr("class","symbol").attr("d",(t=>t?this.symbolType(t.index):null)).attr("fill",(t=>t?this.colorFunction(t):null)).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(t.val)})`:null))}),(i=>{t?i.selectAll("path").data(((t,i)=>t.line.map((s=>null!=s[1]?{val:s[1],x:s[0],title:t.title,colorToken:t.colorToken,index:i}:null)).filter((t=>t)))).join((t=>{t.append("path").attr("class","symbol").attr("d",(t=>t?this.symbolType(t.index):null)).attr("fill",(t=>t?this.colorFunction(t):null)).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(t.val)})`:null)).attr("opacity",0).transition().duration(400).ease(l).attr("opacity",1)}),(t=>{t.transition().duration(400).ease(l).attr("d",(t=>t?this.symbolType(t.index):null)).attr("fill",(t=>t?this.colorFunction(t):null)).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(t.val)})`:null))}),(t=>t.remove())):i.selectAll(".symbol").data(((t,i)=>t.line.map((s=>(console.log(t.title,i),null!=s[1]?{val:s[1],x:s[0],title:t.title,colorToken:t.colorToken,index:i}:null))))).join("path").attr("class","symbol").attr("d",(t=>t?this.symbolType(t.index):null)).attr("fill",(t=>t?this.colorFunction(t):null)).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(t.val)})`:null))}),(t=>t.remove()))},this.symbolType=(t,i)=>st().type(this._strokeGlyphs[Math.trunc(t/this._lineTypes.length)]).size(i||60)(),this.setDims=(t=!1)=>{const i=e(this._titleDiv).node().getBoundingClientRect(),s=e(this._legendDiv).node().getBoundingClientRect(),h=parseFloat(getComputedStyle(document.documentElement).fontSize);t||(this.dims=e(this._chartDiv).node().getBoundingClientRect()),this.dims.height=this._maxHeight-s.height-i.height-1.75*h},this.resizeSvg=()=>{if(this._loading)return this.loadingResize();this.setDims(),this._svg.attr("width",this.dims.width).attr("height",this.dims.height),this._yAxis.range([this.dims.height-this.margin.bottom,this.margin.top]),this.setYTicks(!0),this._xAxis.range([0,this.dims.width-this.margin.left-this.margin.right]);const t=Math.min(Math.max(Math.floor((this.dims.width-this.margin.left-this.margin.right)/this._tickSize)-2,1),this._chartData.data.xValues.length);this._xAxisHandle.attr("transform","translate(0,"+(this.dims.height-this.margin.bottom)+")").call(c(this._xAxis).ticks(t).tickPadding(this.xPadding).tickFormat((t=>this._chartData.data.xValueNames?this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(t)]:t))),this._Tipbox.attr("width",this.dims.width-this.margin.left/2).attr("height",this.dims.height-this.margin.top-this.margin.bottom).attr("transform",`translate(${this.margin.left/2},${this.margin.top})`)},this.loadingResize=()=>{this.setDims(),this._svg.attr("width",this.dims.width),this.setYTicks(),this._xAxis.range([0,this.dims.width-this.margin.left-this.margin.right]);const t=Math.min(Math.floor((this.dims.width-this.margin.left-this.margin.right)/this._tickSize)-2,this._xAxis.domain()[1]);this._xAxisHandle.call(c(this._xAxis).ticks(t).tickPadding(this.xPadding).tickFormat((t=>this._chartData.data&&this._chartData.data.xValueNames?this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(t)]:t))),this._lineScale.range([0,this.dims.width-this.margin.left-this.margin.right]);const i=J().defined((t=>null!=t[1])).x((t=>this._lineScale(t[0]))).y((t=>this._yAxis(t[1]))).curve(nt);this._lineChartContainer.selectAll(".linePath").attr("d",(t=>i(t)))},this.resizeLines=()=>{this._loading||(this._lineScale.range([0,this.dims.width-this.margin.left-this.margin.right]),this.defineLineAndScale(),this._lineChartContainer.selectAll(".linePath").attr("stroke",(t=>this.colorFunction(t))).attr("d",(t=>this._LineFunc(t.line))),this._lineChartContainer.selectAll(".symbolGroup").selectAll(".symbol").attr("transform",((t,i)=>t?`translate(${this._lineScale(this._chartData.data.xValues[i])},${this._yAxis(t.val)})`:null)))},this.colorFunction=t=>t.colorToken?getComputedStyle(document.documentElement).getPropertyValue(t.colorToken).trim().toLocaleLowerCase():this._Color(t.title),this.drawTooltipLine=t=>{if(this._toggled)return this.drawDottedLine(t);this.drawMainLineAndCircles(t)},this.closeTooltip=()=>{this._toggled=!1,this._tooltip.style("display","none"),this._secondaryLine.attr("display","none"),this._TooltipLine.attr("display","none"),this._Circles.selectAll("circle").attr("display","none"),this._Circles.selectAll("circle").attr("fill","white").attr("stroke",(t=>this.colorFunction(t))),this._svg.select(".tooltipPointer").remove()},this.drawDottedLine=t=>{if(this._hoverPoint=this.closest(Math.round(this._lineScale.invert(y(t,this._Tipbox.node())[0]-this.margin.left/2))),this._hoverPoint===this._tooltipPoint)return this._secondaryLine.attr("display","none");this._secondaryLine.attr("display",null).attr("stroke","gray").attr("stroke-dasharray",4).attr("x1",this._xAxis(this._hoverPoint.toString())+this.margin.left).attr("x2",this._xAxis(this._hoverPoint.toString())+this.margin.left).attr("y1",this._yAxis(this._maxVal)).attr("y2",this.dims.height-this.margin.bottom).style("pointer-events","none")},this.drawMainLineAndCircles=t=>{this._hoverPoint=this.touchPosition(t);const i=this._hoverPoint.toString();this._TooltipLine.attr("display",null).attr("stroke","gray").attr("x1",this._xAxis(i)+this.margin.left).attr("x2",this._xAxis(i)+this.margin.left).attr("y1",this._yAxis(this._maxVal)).attr("y2",this.dims.height-this.margin.bottom).style("pointer-events","none"),this._Circles.selectAll("circle").attr("display",null).attr("pointer-events","none"),this.positionCircles(i)},this.touchPosition=t=>"touchmove"===t.type?(t.preventDefault(),this.closest(Math.round(this._lineScale.invert(y(t.touches[0],this._Tipbox.node())[0]-this.margin.left/2)))):this.closest(Math.round(this._lineScale.invert(y(t,this._Tipbox.node())[0]-this.margin.left/2))),this.drawTooltip=t=>{this.drawMainLineAndCircles(t),this._toggled=!0,this._tooltipPoint=this.touchPosition(t),this._tooltipDataIndex=this._chartData.data.xValues.indexOf(this._tooltipPoint),this._tooltip.style("display","flex");const i=this._tooltip.select(".tooltipBody");this._tooltip.select(".tooltipHead").select(this._tooltipHeading).style("margin","0 0.75rem 0 0 ").html((()=>this._chartData.data.xValueNames?this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(this._tooltipPoint)]:this._tooltipPoint)),i.selectAll("div").data(this._chartData.data.series).join("div").style("display","flex").style("flex-direction","row").style("flex-wrap","nowrap").style("white-space","nowrap").style("justify-content","space-between").html((t=>null!=t.yValues[this._tooltipDataIndex]?"<span>"+t.title+'</span><span style="margin-left:0.75rem;">'+o(this.axisNumberFormat).format(this.formatStyle)(t.yValues[this._tooltipDataIndex])+"</span>":null)),this.positionTooltipWithinBounds(this._xAxis(this._tooltipPoint.toString())+this.margin.left),this._Circles.selectAll("circle").attr("fill",(t=>this.colorFunction(t))).attr("stroke","white"),this._svg.select(".tooltipPointer").remove();const s=st().type(q).size(60);this._svg.append("path").attr("d",s).attr("class","tooltipPointer").attr("fill","rgba(10, 10, 10, 0.90)").style("filter","drop-shadow(gray 0px -1px 1px)").attr("transform",`translate(${this._xAxis(this._tooltipPoint.toString())+this.margin.left},${this._yAxis(this._maxVal)-7}) rotate(180) scale(1.5,1.0)`)},this.initYAxis=t=>{this._yAxis=d().domain([0,t?10:this._maxVal]).nice(3).range([this.dims.height-this.margin.bottom,this.margin.top]),this.margin.left=this.getTextSize(o(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1]))+this.yPadding+3,this._lineChartContainer=this._svg.append("g").attr("transform",`translate(${this.margin.left},0)`),this._yAxisHandle=this._lineChartContainer.append("g").attr("class","yAxis"),this.setYTicks(!0)},this.initXAxis=t=>{this._lineChartContainer.select(".xAxis").remove(),t||(this.margin.right=this._chartData.data.xValueNames?this.getTextSize(this._chartData.data.xValueNames[this._chartData.data.xValueNames.length-1])/2+1:this.getTextSize(u(this._chartData.data.xValues).toString())/2+1),this._xAxis=d().domain([t?1:p(this._chartData.data.xValues),t?10:u(this._chartData.data.xValues)]).range([0,this.dims.width-this.margin.left-this.margin.right]),this._lineScale=d().domain([t?1:p(this._chartData.data.xValues),t?10:u(this._chartData.data.xValues)]).range([0,this.dims.width-this.margin.left-this.margin.right]);const i=Math.min(Math.max(Math.floor((this.dims.width-this.margin.left-this.margin.right)/this._tickSize)-2,2),t?10:this._chartData.data.xValues.length);this._xAxisHandle=this._lineChartContainer.append("g").attr("transform","translate(0,"+(this.dims.height-this.margin.bottom)+")").attr("class","xAxis").style("font-size",this.fontSize).call(c(this._xAxis).ticks(i).tickSize(this.xTickSize).tickPadding(this.xPadding).tickFormat((i=>!t&&this._chartData.data.xValueNames?this._chartData.data.xValueNames[this._chartData.data.xValues.indexOf(i)]:i))),this._xAxisHandle.select(".domain").attr("display","none"),this._xAxisHandle.selectAll("line").attr("stroke-linecap",this._lineCap).attr("stroke","#757575")},this.positionCircles=(t,i)=>{i?this._Circles.selectAll("circle").transition("positioncircles").duration(i).attr("cx",(()=>this._xAxis(t)+this.margin.left)).attr("cy",((i,s,h)=>{const n=i.yValues[this._chartData.data.xValues.indexOf(parseInt(t))];return this._yAxis(n)?this._yAxis(n):(e(h[s]).attr("display","none"),null)})):this._Circles.selectAll("circle").attr("cx",(()=>this._xAxis(t)+this.margin.left)).attr("cy",((i,s,h)=>{const n=i.yValues[this._chartData.data.xValues.indexOf(parseInt(t))];return this._yAxis(n)?this._yAxis(n):(e(h[s]).attr("display","none"),null)}))},this.repositionTooltip=()=>{if(!this._toggled)return;const t=this._chartData.data.xValues[this._tooltipDataIndex].toString();this._TooltipLine.attr("stroke","gray").attr("x1",this._xAxis(t)+this.margin.left).attr("x2",this._xAxis(t)+this.margin.left).attr("y1",this._yAxis(this._maxVal)).attr("y2",this.dims.height-this.margin.bottom),this.positionTooltipWithinBounds(this._xAxis(t)+this.margin.left),this._svg.select(".tooltipPointer").attr("transform",`translate(${this._xAxis(this._tooltipPoint.toString())+this.margin.left},${this._yAxis(this._maxVal)-7}) rotate(180) scale(1.5,1.0)`),this.positionCircles(t)},this.positionTooltipWithinBounds=(t,i)=>{this._tooltip.style("transform",(()=>`translateY(${this._yAxis(this._maxVal)-this._tooltip.node().getBoundingClientRect().height-9}px)`));const s=this._chartDiv.getBoundingClientRect(),h=t+s.left,e=this._tooltip.node().getBoundingClientRect().width/2;s.left<h-e&&s.right>h+e?this._tooltip.style("left",t-e+"px"):s.right<h+e?this._tooltip.style("left",t-this._tooltip.node().getBoundingClientRect().width+Math.max(this.margin.right,10)+"px"):s.left>h-e?i?this._tooltip.transition("moveTooltip").duration(i).ease(l).style("left",t-this.margin.left+"px"):this._tooltip.style("left",t-this.margin.left+"px"):this._tooltip.style("left",t-document.getElementById(this.afId).getBoundingClientRect().width/2+"px")},this.mapColorToLine=()=>{this._Color=f().domain(this._chartData.data.series.map((function(t){return t.title}))).range(["#00005a","#D43372","#058470","#0058A3","#556D22","#1616B2","#AA295B","#035548"])},this.computeMaxVal=()=>{this._maxVal=parseFloat(u(this._chartData.data.series,(t=>u(t.yValues))))},this.checkPercentage=()=>{this.formatStyle=this._chartData.meta&&this._chartData.meta.percentage?".1%":",d"},this.closest=t=>this._chartData.data.xValues.reduce((function(i,s){return Math.abs(s-t)<Math.abs(i-t)?s:i})),this.activateTable=t=>{this.closeTooltip(),this.lineChartObserver.disconnect(),this.tableObserver.observe(this._chartDiv),this._status.innerHTML="<p>Visas som tabell</p>",e(this._host).select(".tableButton").style("display","none"),e(this._host).select(".chartButton").style("display",null),t.target.nextSibling.lastChild.focus(),this._svg.attr("opacity",1).transition("fadeout").duration(150).attr("opacity",0).on("end",(()=>{this._svg.remove(),this._legendDiv.style.display="none",this._tableDiv.style.display="block",this.setTableContent(),this.setTableDimensions(),e(this._tableDiv).style("opacity",0).transition("fadein").duration(150).style("opacity",1)})),e(this._legendDiv).style("opacity",1).transition("fadeout").duration(150).style("opacity",0)},this.resizeTable=()=>{this.setDims(),this.setTableDimensions()},this.reInitChart=t=>{this.tableObserver.disconnect(),this._status.innerHTML="<p>Visas som diagram</p>",e(this._host).select(".tableButton").style("display",null),e(this._host).select(".chartButton").style("display","none"),t.target.previousSibling.lastChild.focus();const i=e(this._tableDiv);i.style("opacity",1).transition().duration(150).style("opacity",0).on("end",(()=>{i.style("display","none"),this.initSvg(),this.initLines(),this._svg.attr("opacity",0).transition().duration(150).attr("opacity",1),e(this._legendDiv).style("display",null).style("opacity",0).transition().duration(150).style("opacity",1)}))},this.afHeadingLevel=void 0,this.afId=m("tooltip"),this.afChartData=void 0}afChartDataUpdate(){const t=this.afChartData;"object"!=typeof t?(this._chartData=JSON.parse(t),this._chartData.data&&(this._coreSeries=JSON.parse(JSON.stringify(this._chartData.data.series)))):this._chartData=Object.assign({},t)}initSvg(){this.margin.bottom=Number(window.getComputedStyle(document.body).getPropertyValue("font-size").match(/\d+/)[0])*Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g,""))+this.xPadding+this.xTickSize,this.lineChartObserver.observe(this._chartDiv),e(this._chartDiv).select("svg").remove(),this._tooltip=e("#"+this.afId),this._tooltip.select(".close").on("click",this.closeTooltip),this._tooltipHeading="h"+(parseInt(this.afHeadingLevel.replace(/\D/g,""))+1),this._tooltip.selectAll(".tooltipHead").insert(this._tooltipHeading,":first-child").style("margin","0 0.75rem").style("font-weight","500"),this._maxHeight=e(this._host).node().parentNode.getBoundingClientRect().height,this.setDims(),this.setTickSize(),this.checkPercentage(),e(this._chartDiv).attr("height",this.dims.height+"px"),this._svg=e(this._chartDiv).append("svg").attr("aria-hidden",!0).attr("role","img").attr("aria-label",this._chartData&&this._chartData.title?"Linjediagram om "+this._chartData.title.toLowerCase():"Linjediagram"),this._svg.attr("width",this.dims.width).attr("height",this.dims.height),this.mapColorToLine(),this._TooltipLine=this._svg.append("line").attr("id","toolTipLine"+this.afId),this._secondaryLine=this._svg.append("line").attr("id","secondaryLine"+this.afId),this.computeMaxVal(),this.initYAxis(),this.initXAxis(),this._Tipbox=this._svg.append("rect").attr("class","svgRect").attr("width",this.dims.width-this.margin.left/2).attr("height",this.dims.height-this.margin.top-this.margin.bottom).attr("opacity",0).attr("transform",`translate(${this.margin.left/2},0)`),this.addListenersToChart(),this._Circles=this._svg.append("g").attr("class","circleGroup").on("mousemove",this.drawTooltipLine),this._Circles.selectAll("circle").data(this._chartData.data.series).join("circle").attr("stroke",(t=>this.colorFunction(t))).attr("fill","white").attr("stroke-width","1px").attr("r",7).attr("display","none"),e(window).on("resize."+this.afId,this.repositionTooltip)}initEmpty(){this.margin.bottom=Number(window.getComputedStyle(document.body).getPropertyValue("font-size").match(/\d+/)[0])*Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g,""))+this.xPadding+this.xTickSize,e(this._chartDiv).select("svg").remove(),this._tooltip=e("#"+this.afId),e("digi-icon-x").on("click",this.closeTooltip),this._tooltipHeading="h"+(parseInt(this.afHeadingLevel.replace(/\D/g,""))+1),this._tooltip.selectAll(".tooltipHead").insert(this._tooltipHeading,":first-child").style("margin","0 0.75rem").style("font-weight","500"),this._maxHeight=e(this._host).node().parentNode.getBoundingClientRect().height,this.setDims(),e(this._chartDiv).attr("height",this.dims.height+"px"),this._svg=e(this._chartDiv).append("svg").attr("aria-hidden",!0),this._svg.attr("width",this.dims.width).attr("height",this.dims.height),this._TooltipLine=this._svg.append("line").attr("id","toolTipLine"+this.afId),this._secondaryLine=this._svg.append("line").attr("id","secondaryLine"+this.afId),this.initYAxis(!0),this.initXAxis(!0),this._Tipbox=this._svg.append("rect").attr("class","svgRect").attr("width",this.dims.width-this.margin.left/2).attr("height",this.dims.height-this.margin.top-this.margin.bottom).attr("opacity",0).attr("transform",`translate(${this.margin.left/2},0)`),this._Circles=this._svg.append("g").attr("class","circleGroup").on("mousemove",this.drawTooltipLine),this.defineLineAndScale(),this.lineChartObserver.observe(this._chartDiv),this.loadingState(!0)}loadingState(t){this._loading=!0,e(".tableButton").style("display","none");const i=J().defined((t=>null!=t[1])).x((t=>this._lineScale(t[0]))).y((t=>this._yAxis(t[1]))).curve(nt);this.closeTooltip(),this._Tipbox.style("cursor","wait").on("mousemove",null).on("touchmove",null).on("mouseup",null).on("mouseleave",null),e(this._titleDiv).select(this.afHeadingLevel).html(`${h.loading}...`);const s=e(this._titleDiv).style("height");e(this._titleDiv).style("height",this._prevHeight).transition("adjust").duration(400).style("height",s).on("end",(()=>e(this._titleDiv).style("height",null))),e(this._legendDiv).style("display","none");const n=()=>{let t=this._xAxis.domain()[0];const s=[...Array(this._xAxis.domain()[1])].map((()=>{const i=[t,Math.round(Math.random()*this._yAxis.domain()[1]*100)/100];return t++,i}));this._lineChartContainer.selectAll(".linePath").remove(),this._lineChartContainer.selectAll("linePath").data([s]).join("path").attr("class","linePath").attr("stroke","lightgray").attr("stroke-linecap",this._lineCap).attr("stroke-width",this._strokeWidth).attr("fill","none").attr("d",(t=>i(t))).transition().duration(1200).ease(S).attrTween("stroke-dasharray",(function(){const t=this.getTotalLength();return g(`0,${t}`,`${t},${t}`)})).on("end",(()=>{this._lineChartContainer.selectAll(".linePath").attr("stroke-dasharray",(function(){const t=this.getTotalLength();return t+" "+t})).attr("stroke-dashoffset",0).transition().duration(1200).ease(S).attr("stroke-dashoffset",(function(){return-this.getTotalLength()})).on("end",(()=>n()))}))};t?n():(()=>{const t=this._lineChartContainer.selectAll(".linePath").data().map((t=>(t.line=t.line.map((t=>t[1]?[t[0],this._yAxis.domain()[0]]:[t[0],void 0])),t)));this._lineChartContainer.selectAll(".linePath").data(t).transition().duration(400).ease(l).attr("d",(t=>this._LineFunc(t.line))).on("end",((...[,t])=>0===t?n():null)),this._lineChartContainer.selectAll(".symbolGroup").selectAll(".symbol").transition().duration(400).ease(b).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(this._yAxis.domain()[0])})`:null)).attr("opacity",0)})()}updateSvg(){this._loading&&(e(this._host).select(".tableButton").style("display",null),e(this._legendDiv).style("display",null),e(this._titleDiv).style("height",null)),this.margin.right=this._chartData.data.xValueNames?this.getTextSize(this._chartData.data.xValueNames[this._chartData.data.xValueNames.length-1])/2+1:this.getTextSize(u(this._chartData.data.xValues).toString())/2+1,this.checkPercentage(),this.setDims(!0),this.mapColorToLine(),this.computeMaxVal(),this.setTickSize(),e(this._chartDiv).attr("height",this.dims.height+"px"),this._svg.attr("width",this.dims.width+"px").attr("height",this.dims.height+"px").attr("aria-label",this._chartData&&this._chartData.title?"Linjediagram om "+this._chartData.title.toLowerCase():"Linjediagram"),this._yAxis=d().domain([0,this._maxVal]).nice(3).range([this.dims.height-this.margin.bottom,this.margin.top]),this.margin.left=this.getTextSize(o(this.axisNumberFormat).format(this.formatStyle)(this._yAxis.domain()[1]))+this.yPadding+3;const t=this._xAxis.domain();if(this.initXAxis(),this._lineChartContainer.transition("position").duration(400).ease(l).attr("width",this.dims.width).attr("height",this.dims.height).attr("transform",`translate(${this.margin.left},0)`),this.setYTicks(),this.defineLineAndScale(),this.addSymbols(!0),this._loading){e(this._host).select(".tableButton").style("display",null),this.addListenersToChart();const t=e(this._titleDiv).style("height");e(this._titleDiv).style("height",this._prevHeight).transition("adjust").duration(400).style("height",t).on("end",(()=>e(this._titleDiv).style("height",null))),e(this._legendDiv).style("opacity",0).transition().duration(400).ease(l).style("opacity",1),this._lineChartContainer.selectAll(".linePath").on("end",null),this._lineChartContainer.selectAll(".symbolGroup").selectAll(".symbol").attr("opacity",0).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(this._yAxis.domain()[0])})`:null)),this._lineChartContainer.selectAll(".linePath").transition().duration(400).ease(S).attr("stroke-dashoffset",(function(){return-this.getTotalLength()})).on("end",(()=>{this._lineChartContainer.selectAll(".linePath").data(this.reshapeData(this._chartData.data.series)).join("path").attr("class","linePath").attr("stroke",(t=>this.colorFunction(t))).attr("stroke-linecap",this._lineCap).attr("stroke-width",this._strokeWidth).attr("fill","none").attr("stroke-dasharray",this.dashFunction).attr("stroke-dashoffset",null).attr("d",(t=>this._LineFunc(t.line.map((t=>[t[0],this._yAxis.domain()[0]]))))),this._lineChartContainer.selectAll(".linePath").transition().duration(400).ease(l).attr("d",(t=>this._LineFunc(t.line))),this._lineChartContainer.selectAll(".symbolGroup").selectAll(".symbol").transition().duration(400).ease(l).attr("transform",(t=>t?`translate(${this._lineScale(t.x)},${this._yAxis(t.val)})`:null)).attr("opacity",1),this._loading=!1}))}else this._lineChartContainer.selectAll(".linePath").data(this.reshapeData(this._chartData.data.series)).join("path").transition().duration(400).ease(l).attr("class","linePath").attr("stroke",(t=>this.colorFunction(t))).attr("stroke-linecap",this._lineCap).attr("stroke-width",(t=>t.length>1?this._strokeWidth:4)).attr("fill","none").attr("stroke-dasharray",((t,i)=>t.length>1?this.dashFunction(t,i):null)).attr("d",(t=>this._LineFunc(t.line)));if(this._toggled&&t===this._xAxis.domain()){const t=this._chartData.data.xValues[this._tooltipDataIndex].toString();this._Circles.selectAll("circle").data(this._chartData.data.series).join("circle").transition("New circles").duration(400).ease(l).attr("stroke","white").attr("fill",(t=>this.colorFunction(t))).attr("stroke-width","1px").attr("r",7),this.positionCircles(t,400);const i=this._TooltipLine.attr("y1");this._TooltipLine.transition().duration(400).ease(l).attr("x1",this._xAxis(t)+this.margin.left).attr("x2",this._xAxis(t)+this.margin.left).attr("y1",this._yAxis(this._maxVal)).attr("y2",this.dims.height-this.margin.bottom);const s=this._tooltip.select(".tooltipBody");this._tooltip.select(".tooltipHead").select(this._tooltipHeading).style("margin","0 0.75rem").html((()=>this._chartData.data.xValueNames?this._chartData.data.xValueNames[this._tooltipPoint-1]:this._tooltipPoint)),s.selectAll("div").data(this._chartData.data.series).join("div").style("display","flex").style("flex-direction","row").style("flex-wrap","nowrap").style("white-space","nowrap").style("justify-content","space-between").html((t=>"<span>"+t.title+':&nbsp</span><span class="tooltipVal">'+t.yValues[this._tooltipDataIndex]+"</span>")),this.positionTooltipWithinBounds(this._xAxis(t)+this.margin.left,400),this._tooltip.style("transform",(()=>`translateY(${i-this._tooltip.node().getBoundingClientRect().height-9}px)`)).transition().duration(400).ease(l).style("transform",(()=>`translateY(${this._yAxis(this._maxVal)-this._tooltip.node().getBoundingClientRect().height-9}px)`)),this._svg.select(".tooltipPointer").transition().duration(400).ease(l).attr("transform",`translate(${this._xAxis(t)+this.margin.left},${this._yAxis(this._maxVal)-7}) rotate(180) scale(1.5,1.0)`)}else this._Circles.selectAll("circle").data(this._chartData.data.series).join("circle").attr("stroke",(t=>this.colorFunction(t))).attr("fill","white").attr("stroke-width","1px").attr("r",7).attr("display","none"),this.closeTooltip()}componentWillLoad(){this.afChartDataUpdate()}componentDidLoad(){if(0===Object.keys(this._chartData).length)return this.initEmpty();this._selectedLines=[],this.initSvg(),this.initLegend(),this.initLines(),document.fonts.onloadingdone=()=>{this.setTickSize(),this.resizeSvg()}}componentWillUpdate(){this._prevHeight=e(this._titleDiv).style("height")}componentDidUpdate(){if(0===Object.keys(this._chartData).length)return this.loadingState();this._selectedLines=[],this.updateSvg(),this.initLegend(),this.updateTableContent()}disconnectedCallback(){this.lineChartObserver.disconnect()}getTextSize(t){const i=[],s=e(this._chartDiv).append("svg");return s.selectAll("dummyText").data([t]).join("text").attr("font-size",this.fontSize).attr("font-family","sans-serif").text((t=>t)).each(((...[,t,s])=>{const h=s[t].getComputedTextLength()+5;i.push(h),s[t].remove()})),s.remove().exit(),i[0]}setTickSize(){if(this._chartData.data.xValueNames)for(const t of this._chartData.data.xValueNames){const i=this.getTextSize(t)+25;i>this._tickSize&&(this._tickSize=i)}else for(const t of this._chartData.data.xValues){const i=this.getTextSize(t.toString())+25;i>this._tickSize&&(this._tickSize=i)}}leftSetAxis(t=!1){const i=[];t?(this._yAxisHandle.selectAll("text").attr("transform",((...[,t,s])=>{const h=s[t].getComputedTextLength();return i.push(h),`translate(${-1*(this.margin.left-(h+this.yPadding))},0)`})),this._yAxisHandle.selectAll("line").attr("x1",((...[,t])=>-1*(this.margin.left-(i[t]+this.yPadding))))):(this._yAxisHandle.selectAll("text").transition("shuffle text").duration(400).attr("transform",((...[,t,s])=>{const h=s[t].getComputedTextLength();return i.push(h),`translate(${-1*(this.margin.left-(h+this.yPadding))},0)`})),this._yAxisHandle.selectAll("line").transition("shuffle line").duration(400).attr("x1",((...[,t])=>-1*(this.margin.left-(i[t]+this.yPadding)))))}updateTableContent(){""!==this._tableDiv.style.display&&"none"!==this._tableDiv.style.display&&(this.setTableContent(),this.animateTableDimensions())}setTableContent(){this._tableDiv.innerHTML=`<digi-table af-size="small" af-variation="primary"> <table><caption>${this._chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`}setTableDimensions(){const t=e(this._tableDiv);t.style("height",this._maxHeight-e(this._titleDiv).node().getBoundingClientRect().height-.65*parseFloat(getComputedStyle(document.documentElement).fontSize)+"px"),t.style("width",this.dims.width-.65*parseFloat(getComputedStyle(document.documentElement).fontSize)+"px")}animateTableDimensions(){const t=e(this._titleDiv).style("height");e(this._titleDiv).style("height",this._prevHeight).transition("adjust").duration(400).style("height",t).on("end",(()=>e(this._titleDiv).style("height",null)));const i=e(this._tableDiv);i.transition("adjustHeight").duration(400).style("height",this._maxHeight-(parseFloat(t)+1.25*parseFloat(getComputedStyle(document.documentElement).fontSize))-.65*parseFloat(getComputedStyle(document.documentElement).fontSize)+"px"),i.style("width",this.dims.width-.65*parseFloat(getComputedStyle(document.documentElement).fontSize)+"px")}headings(){let t=`<th scope="col">${this._chartData.x}</th>`;return this._coreSeries.forEach((i=>{t=t.concat(`<th scope="col">${i.title}</th>`)})),t}tableBody(){let t="";return(this._chartData.data.xValueNames?this._chartData.data.xValueNames:this._chartData.data.xValues).forEach(((i,s)=>{let h="";this._coreSeries.forEach((t=>{h=h.concat(`<td>${null!=t.yValues[s]?o(this.axisNumberFormat).format(this.formatStyle)(t.yValues[s]):"-"}</td>`)})),t=t.concat(`<tr><th scope='row'>${i}${h}</th></tr>`)})),t}render(){let t="";return t=this._chartData.subTitle?`<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`:`<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`,i("host",{key:"2660390a27d10e08cede6fbc9baa2f6f2c23b598",ref:t=>this._host=t},i("div",{key:"28f684dbcf23122b496b506979da55556c7441d9",class:"topWrapper",ref:t=>this._titleDiv=t},i("digi-typography",{key:"1790454fa384ac0f0443462f4f307108dc3950ac",class:"chartTitle",innerHTML:t}),i("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():""}`},i("digi-icon-table",{key:"a8ff4b212951ea76a3bca93e7ffacb08053ebf35",slot:"icon"}),"Visa tabell"),i("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():""}`},i("digi-icon-chart",{key:"2ca654591868fb8ef85016b2fcaec0655f53ea3f",slot:"icon"}),"Visa diagram"),i("div",{key:"409521a949a75753d8ad998861e8f53f8f2cda62",class:"scChartStatus",role:"status",ref:t=>this._status=t})),i("div",{key:"19b8343c5039da7ead9a50ac7de74d0ce0324681",class:"chartTooltip",id:this.afId},i("div",{key:"28767d138814122bdec3c0f83d67772f3eb2be79",class:"tooltipHead"},i("digi-icon-x",{key:"0bb56bb3793b1a686b6f9adc4fb511fac02b2be8",class:"close"})," "),i("div",{key:"8c26e79ac3581ea677b483f56830c9d410cf88a9",class:"tooltipBody"})),i("div",{key:"b52f49ec54de82fe47903b3d02951b4067989e86",class:"chart",ref:t=>this._chartDiv=t}),i("div",{key:"d203c6a181d727459e2832392adaf9474c10d2ce",class:"legend",ref:t=>this._legendDiv=t}),i("div",{key:"f4f0302c22507f874e5916b4ce11a706d54de1d5",class:"table",ref:t=>this._tableDiv=t}," "))}get element(){return s(this)}static get watchers(){return{afChartData:["afChartDataUpdate"]}}};at.style=".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{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}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;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}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n    --digi--global--color--neutral--grayscale--darkest-3\n  )}.tooltipHead.sc-digi-chart-line{display:flex;width:100%;justify-content:space-between;margin-bottom:0.25rem;flex-direction:row}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;padding-right:5px;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(245, 245, 245) transparent}";export{at as digi_chart_line}