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

package/dist/cjs/{digi-button_24.cjs.entry.js → digi-bar-chart_27.cjs.entry.js}

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7a477838.js');
+const linear = require('./linear-86314cb2.js');
+const text = require('./text-3157012b.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+const typographyVariation_enum = require('./typography-variation.enum-8fd8bed4.js');
 const codeExampleVariation_enum = require('./code-example-variation.enum-1611825e.js');
 const formInputSearchVariation_enum = require('./form-input-search-variation.enum-e0e025b1.js');
 const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
 require('./badge-notification-shape.enum-ff802554.js');
-const typographyVariation_enum = require('./typography-variation.enum-9f56fd50.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
-require('./bar-chart-variation.enum-a4e866b6.js');
 require('./code-variation.enum-c4a4e6fd.js');
 require('./expandable-accordion-header-level.enum-45483252.js');
 require('./expandable-faq-item-variation.enum-89427195.js');
@@ -46,12 +47,1527 @@ require('./tag-size.enum-387c516c.js');
 require('./tools-feedback-banner-type.enum-de373ba0.js');
 require('./tools-feedback-rating-variation.enum-2f71e84d.js');
 require('./tools-theme-provider.brand.enum-bc855272.js');
+require('./typography-heading-jumbo-variation.enum-8677e099.js');
 require('./typography-meta-variation.enum-13ac3538.js');
 require('./typography-time-variation.enum-bce1d87e.js');
 const utilBreakpointObserverBreakpoints_enum = require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
 const logger_util = require('./logger.util-fdafc086.js');
 const keyboardHandler_util = require('./keyboardHandler.util-d8600adb.js');
 
+function band() {
+  var scale = linear.ordinal().unknown(undefined),
+      domain = scale.domain,
+      ordinalRange = scale.range,
+      r0 = 0,
+      r1 = 1,
+      step,
+      bandwidth,
+      round = false,
+      paddingInner = 0,
+      paddingOuter = 0,
+      align = 0.5;
+
+  delete scale.unknown;
+
+  function rescale() {
+    var n = domain().length,
+        reverse = r1 < r0,
+        start = reverse ? r1 : r0,
+        stop = reverse ? r0 : r1;
+    step = (stop - start) / Math.max(1, n - paddingInner + paddingOuter * 2);
+    if (round) step = Math.floor(step);
+    start += (stop - start - step * (n - paddingInner)) * align;
+    bandwidth = step * (1 - paddingInner);
+    if (round) start = Math.round(start), bandwidth = Math.round(bandwidth);
+    var values = linear.range(n).map(function(i) { return start + step * i; });
+    return ordinalRange(reverse ? values.reverse() : values);
+  }
+
+  scale.domain = function(_) {
+    return arguments.length ? (domain(_), rescale()) : domain();
+  };
+
+  scale.range = function(_) {
+    return arguments.length ? ([r0, r1] = _, r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
+  };
+
+  scale.rangeRound = function(_) {
+    return [r0, r1] = _, r0 = +r0, r1 = +r1, round = true, rescale();
+  };
+
+  scale.bandwidth = function() {
+    return bandwidth;
+  };
+
+  scale.step = function() {
+    return step;
+  };
+
+  scale.round = function(_) {
+    return arguments.length ? (round = !!_, rescale()) : round;
+  };
+
+  scale.padding = function(_) {
+    return arguments.length ? (paddingInner = Math.min(1, paddingOuter = +_), rescale()) : paddingInner;
+  };
+
+  scale.paddingInner = function(_) {
+    return arguments.length ? (paddingInner = Math.min(1, _), rescale()) : paddingInner;
+  };
+
+  scale.paddingOuter = function(_) {
+    return arguments.length ? (paddingOuter = +_, rescale()) : paddingOuter;
+  };
+
+  scale.align = function(_) {
+    return arguments.length ? (align = Math.max(0, Math.min(1, _)), rescale()) : align;
+  };
+
+  scale.copy = function() {
+    return band(domain(), [r0, r1])
+        .round(round)
+        .paddingInner(paddingInner)
+        .paddingOuter(paddingOuter)
+        .align(align);
+  };
+
+  return linear.initRange.apply(rescale(), arguments);
+}
+
+const barChartCss = ".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 .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:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{box-sizing:border-box;position:absolute;background-color:rgba(250, 250, 250, 0.98);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;font-size:0.875rem;display:none}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{--digi--icon--color:black;cursor:pointer;margin-top:-5px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar{height:10px;width:10px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-track,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-thumb,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.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: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}";
+const DigiBarChartStyle0 = barChartCss;
+
+const barChart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // States
+        this._loading = false;
+        this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
+        // Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
+        this.dataWidth = 1;
+        this.barGap = 0;
+        this._dims = {};
+        this._margin = {
+            bottom: 0,
+            top: 6,
+            left: 5,
+            right: 15,
+            ellipsis: false
+        };
+        this.tickPadding = 8;
+        this.yTickSize = 0;
+        this.xTickSize = 5;
+        // Width of the largets X-tick-value
+        this._tickWidth = 1;
+        // Transition
+        this.defaultDuration = 400;
+        // Text and formats
+        this.fontSize = '0.875rem';
+        this.colorPalettes = ['--digi--color--background--brand-primary', '--digi--color--infographic--brand--primary', '--digi--color--background--sentiment--beta--primary', '--digi--color--text--interactive--visited', '--digi--color--icon--validation--error'];
+        // Observer for watching size changes when in line chart mode
+        this.barChartObserver = new ResizeObserver((entries) => {
+            entries.forEach(() => {
+                if (this._loading)
+                    return this.loadingResize();
+                this.resize();
+            });
+        });
+        // Observer for watching size changes when in table mode
+        this.tableObserver = new ResizeObserver((entries) => {
+            entries.forEach(() => {
+                linear.select(this._legendDiv).style('width', this._dims.width + 'px');
+                this.resizeTable();
+            });
+        });
+        // Resizing chart while loading
+        this.loadingResize = () => {
+            const newHeight = this.setDims();
+            this.setMargins(true);
+            this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
+            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+            this._margin.right =
+                this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                    this.yTickSize +
+                    this.tickPadding;
+            // If there is a new height
+            if (newHeight) {
+                // Update y-axis with potentially new height (might want to do a check here)
+                this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale.range([
+                        this._margin.top,
+                        this._dims.height - this._margin.bottom
+                    ])
+                    : this._yScale.range([
+                        this._dims.height - this._margin.bottom,
+                        this._margin.top
+                    ]);
+                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            }
+            // Update x-axis with new width
+            this._xScale.range([
+                0,
+                this._dims.width - this._margin.right - this._margin.left
+            ]);
+            this._barSelection
+                .attr('x', this.xFunction)
+                .attr('width', this.widthFunction);
+            this.setValueTicks();
+        };
+        // Adding click listener for tool tip text
+        this.setTickInteraction = () => {
+            if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
+                this._yAxisHandle
+                    .selectAll('text')
+                    .style('cursor', 'pointer')
+                    .on('click', this.openTooltip)
+                    .on('mouseenter', this.hover)
+                    .on('mouseleave', this.hoverOut);
+            }
+            else {
+                this._xAxisHandle
+                    .selectAll('text')
+                    .style('cursor', 'pointer')
+                    .on('click', this.openTooltip)
+                    .on('mouseenter', this.hover)
+                    .on('mouseleave', this.hoverOut);
+            }
+        };
+        // Setting Y-scale
+        this.setYScale = (empty) => {
+            var _a, _b, _c;
+            if (this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal) {
+                this._yScale = band(empty
+                    ? ['0', '1', '2', '3', '4', '5', '6', '7']
+                    : this._chartData.data.xValueNames, [this._margin.top, this._dims.height - this._margin.bottom])
+                    .paddingOuter(0.1)
+                    .paddingInner(0.1);
+                this._yAxis = linear.axisLeft(this._yScale);
+            }
+            else {
+                this._yScale = linear.linear()
+                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
+                    .nice(((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
+                    ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
+                    : 3);
+                this._yScale.range([
+                    this._dims.height - this._margin.bottom,
+                    this._margin.top
+                ]);
+                this._yAxis = linear.axisLeft(this._yScale);
+            }
+        };
+        // Setting X-Scale
+        this.setXScale = (empty) => {
+            // Horizontal
+            if (this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal) {
+                this._xScale = linear.linear()
+                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
+                    .nice(3);
+                this._margin.right =
+                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                        this.yTickSize +
+                        this.tickPadding;
+                this._xScale.range([
+                    0,
+                    this._dims.width - this._margin.right - this._margin.left
+                ]);
+                // Initializing actual axis
+                this._xAxis = linear.axisBottom(this._xScale);
+                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
+            }
+            else {
+                // Vertical
+                this._xScale = band()
+                    .domain(empty ? this._placeholderTicks : this._chartData.data.xValueNames)
+                    .range([0, this._dims.width - this._margin.right - this._margin.left])
+                    .paddingOuter(0.1)
+                    .paddingInner(0.1);
+                this._xAxis = linear.axisBottom(this._xScale);
+            }
+        };
+        // Stores all tick text sizes in an indexable array
+        this.tickSizes = () => {
+            // Initializing tick size array
+            this._namedTickSizes = [];
+            this._ellipsisSize = this.getTextSize('...');
+            if (this._chartData && this._chartData.data) {
+                for (let i = 0; i < this._chartData.data.xValueNames.length; i++) {
+                    this._namedTickSizes.push(Math.ceil(this.getTextSize(this._chartData.data.xValueNames[i])));
+                }
+            }
+        };
+        this.updateBars = (fromLoading) => {
+            this._barChartContainer
+                .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 === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale(d.key)
+                    : this._dims.height - this._margin.bottom)
+                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? 2
+                    : this._xScale(d.key))
+                    .attr('width', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? 0
+                    : this._xScale.bandwidth())
+                    .attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale.bandwidth()
+                    : 0)
+                    .on('mouseenter', this.hover)
+                    .on('mouseleave', this.hoverOut)
+                    .on('click', this.openTooltip)
+                    .transition()
+                    .duration(this.defaultDuration)
+                    .ease(linear.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 === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
+                    : this._dims.height - this._margin.bottom)
+                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? 2
+                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                    .transition()
+                    .duration(this.defaultDuration)
+                    .ease(linear.polyInOut)
+                    .attr('font-size', this.fontSize)
+                    .attr('font-weight', '600')
+                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._xScale(d.value)
+                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
+                    : this._yScale(d.value))
+                    .attr('text-anchor', (d) => {
+                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                        return 'middle';
+                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'start'
+                        : 'end';
+                })
+                    .attr('dx', (d) => {
+                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
+                        return this._xScale(d.value) < d.len + this.tickPadding * 2
+                            ? this.tickPadding
+                            : -this.tickPadding;
+                    return 0;
+                })
+                    .attr('fill', (d) => {
+                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                        return 'black';
+                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'black'
+                        : 'white';
+                })
+                    .attr('dy', () => this.afVariation == typographyVariation_enum.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 = linear.interpolate(oldnum, d.value);
+                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this._numberFormat));
+                });
+                return tempSelection;
+            }, (update) => {
+                // Update ids to bars
+                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'));
+                // Mouse interaction to updated loading bars
+                if (fromLoading) {
+                    update
+                        .select('rect')
+                        .on('mouseenter', this.hover)
+                        .on('mouseleave', this.hoverOut)
+                        .on('click', this.openTooltip)
+                        .attr('x', this.xFunction)
+                        .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                        ? this._yScale(d.key)
+                        : this._dims.height - this._margin.bottom)
+                        .attr('width', this.widthFunction)
+                        .attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                        ? this._yScale.bandwidth()
+                        : 0)
+                        .attr('fill', '#00005a')
+                        .transition()
+                        .duration(this.defaultDuration)
+                        .ease(linear.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(linear.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(linear.polyInOut)
+                    .attr('font-size', this.fontSize)
+                    .attr('font-weight', '600')
+                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
+                    : this._yScale(d.value))
+                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._xScale(d.value)
+                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                    .attr('text-anchor', (d) => {
+                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                        return 'middle';
+                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'start'
+                        : 'end';
+                })
+                    .attr('dx', (d) => {
+                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
+                        return this._xScale(d.value) < d.len + this.tickPadding * 2
+                            ? this.tickPadding
+                            : -this.tickPadding;
+                    return 0;
+                })
+                    .attr('fill', (d) => {
+                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                        return 'black';
+                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'black'
+                        : 'white';
+                })
+                    .attr('dy', () => this.afVariation == typographyVariation_enum.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 = linear.interpolate(oldnum, d.value);
+                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this._numberFormat));
+                });
+            }, (exit) => exit.remove());
+            this._barSelection = this._barChartContainer.selectAll('rect');
+            this._textSelection = this._barChartContainer.selectAll('.barText');
+        };
+        // Setting position of text according to bar size
+        this.adjustBarText = () => {
+            var _a, _b;
+            if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+                return;
+            this._textSelection
+                .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale(d.key) + this._yScale.bandwidth() / 2
+                : this._yScale(d.value))
+                .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._xScale(d.value)
+                : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                .attr('dx', (d) => {
+                if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
+                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        ? this.tickPadding
+                        : -this.tickPadding;
+                return 0;
+            })
+                .attr('fill', (d) => {
+                if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                    return 'black';
+                return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    ? 'black'
+                    : 'white';
+            })
+                .attr('text-anchor', (d) => {
+                if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                    return 'middle';
+                return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    ? 'start'
+                    : 'end';
+            });
+        };
+        this.reshapeData = () => {
+            const toReturn = [];
+            if (this._loading) {
+                this._placeholderTicks.forEach((key) => {
+                    const tick = { key: key, series: [] };
+                    tick.series.push({
+                        key: key,
+                        serie: '',
+                        value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
+                        len: 0
+                    });
+                    toReturn.push(tick);
+                });
+                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
+                        });
+                    }
+                });
+                toReturn.push(tick);
+            });
+            return toReturn;
+        };
+        this.adjustBarSize = () => {
+            this._barSelection.selectAll('.bar')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction);
+        };
+        // Handling x positioning of bars
+        this.xFunction = (d, i) => {
+            return this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? (d.value > 0 ? this._xScale(0) : this._xScale(d.value))
+                : this._xScale(d.key) + ((this._xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
+        };
+        // Handling y positioning of bars
+        this.yFunction = (d, i) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale(d.key) + ((this._yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
+                : (d.value < 0 ? this._yScale(0) : this._yScale(d.value));
+        };
+        // Handling height for bars
+        this.heightFunction = (d) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale.bandwidth() / this.dataWidth - (this.barGap)
+                : (d.value < 0 ? this._yScale(d.value) - this._yScale(0) : this._yScale(0) - this._yScale(d.value));
+        };
+        // Handling width for bars
+        this.widthFunction = (d) => {
+            return this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? Math.abs(this._xScale(0) - this._xScale(d.value))
+                : this._xScale.bandwidth() / this.dataWidth - (this.barGap);
+        };
+        // Resize table
+        this.resizeTable = () => {
+            this.setDims();
+            this.setTableDimensions();
+        };
+        // Setting dimension variable
+        this.setDims = (onlyHeight = false) => {
+            // Get title dimensions
+            const tempTitle = linear.select(this._titleDiv).node().getBoundingClientRect(), tempLegend = linear.select(this._legendDiv).node().getBoundingClientRect();
+            const prevHeight = this._dims.height;
+            if (!onlyHeight)
+                this._dims = linear.select(this._chartDiv).node().getBoundingClientRect();
+            this._dims.height =
+                this._maxHeight - tempLegend.height - tempTitle.height - 1.75 * this._rem;
+            return prevHeight != this._dims.height;
+        };
+        // Setting margins given text size
+        this.setMargins = (fromLoading) => {
+            var _a;
+            this._pixelSize =
+                Number(window
+                    .getComputedStyle(document.body)
+                    .getPropertyValue('font-size')
+                    .match(/\d+/)[0]) * Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, ''));
+            // Getting the longest word, assuming it will also be the widest in terms of pixels
+            if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
+                const left = ((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data) &&
+                    this.getLargestText(this._chartData.data.xValueNames)
+                    ? this.getLargestText(this._chartData.data.xValueNames)
+                    : 0;
+                this._margin.left = left;
+            }
+            else
+                this._margin.left = this.getLargestText(fromLoading
+                    ? ['0', '10']
+                    : [
+                        this._minVal ? this._tempScale[0].toLocaleString() : '0',
+                        this._maxVal ? this._tempScale[1].toLocaleString() : '10'
+                    ]);
+            if (this._margin.left > this._dims.width / 4) {
+                this._margin.left = Math.floor(this._dims.width / 4);
+                this._margin.ellipsis = true;
+            }
+            else
+                this._margin.ellipsis = false;
+            this._margin.bottom = this._pixelSize + this.tickPadding + this.xTickSize;
+        };
+        // Adjusting y-ticks
+        this.setNamedTicks = (transition = false) => {
+            if (this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal) {
+                if (!transition) {
+                    this._yAxisHandle
+                        .style('font-size', this.fontSize)
+                        .style('font-family', 'Open Sans')
+                        .call(this._yAxis
+                        .tickPadding(this.tickPadding)
+                        .tickSize(this.yTickSize)
+                        .tickSizeOuter(0)
+                        .tickFormat((d, i) => {
+                        if (!this._margin.ellipsis)
+                            return d.toLocaleString();
+                        // Adding ellipsis to text
+                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
+                        const mSize = this._margin.left;
+                        if (size < mSize)
+                            return d.toLocaleString();
+                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
+                        let adjustment = 0;
+                        if (newSize > mSize) {
+                            adjustment = Math.ceil((newSize - mSize) / (size / d.length));
+                        }
+                        // Slicing the text up, saving atleast 3 characters
+                        return (d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .trim() + '...');
+                    }));
+                }
+                else {
+                    this._yAxisHandle
+                        .style('font-size', this.fontSize)
+                        .style('font-family', 'Open Sans')
+                        .transition()
+                        .duration(this.defaultDuration)
+                        .call(this._yAxis
+                        .tickPadding(this.tickPadding)
+                        .tickSize(this.yTickSize)
+                        .tickSizeOuter(0)
+                        .tickFormat((d, i) => {
+                        if (!this._margin.ellipsis)
+                            return d;
+                        // Adding ellipsis to text
+                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
+                        const mSize = this._margin.left;
+                        if (size < mSize)
+                            return d;
+                        const newSize = this.getTextSize(d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3))
+                            .trim() + '...');
+                        let adjustment = 0;
+                        if (newSize > mSize) {
+                            adjustment = Math.ceil((newSize - mSize) / (size / d.length));
+                        }
+                        // Slicing the text up, saving atleast 3 characters
+                        return (d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .trim() + '...');
+                    }));
+                }
+            }
+            else {
+                //Calculating every n:th text to show
+                let nTh = Math.round(this._chartData.data.xValues.length /
+                    ((this._dims.width - this._margin.left - this._margin.right) / 90 - 1));
+                if (Math.floor(this._chartData.data.xValues.length / nTh) < 4) {
+                    nTh = Math.round(this._chartData.data.xValues.length / 4);
+                }
+                const allowedWidth = (this._dims.width - this._margin.left - this._margin.right) /
+                    Math.floor(this._chartData.data.xValues.length / nTh + 1);
+                if (!transition) {
+                    this._xAxisHandle
+                        .style('font-size', this.fontSize)
+                        .style('font-family', 'Open Sans')
+                        .call(this._xAxis
+                        .tickValues(this._xScale.domain().filter((...[, i]) => {
+                        if (i == 0)
+                            return true;
+                        else {
+                            return i % nTh == 0;
+                        }
+                    }))
+                        .tickPadding(this.tickPadding)
+                        .tickSize(this.xTickSize)
+                        .tickSizeOuter(0)
+                        .tickFormat((d, i) => {
+                        const index = i * nTh;
+                        if (this._namedTickSizes[index] < allowedWidth)
+                            return d;
+                        return (d.slice(0, Math.max(Math.floor((allowedWidth /
+                            (this._namedTickSizes[index] +
+                                this._ellipsisSize +
+                                5)) *
+                            d.length), 3)) + '...');
+                    }));
+                }
+                else {
+                    this._xAxisHandle
+                        .style('font-size', this.fontSize)
+                        .style('font-family', 'Open Sans')
+                        .transition()
+                        .duration(this.defaultDuration)
+                        .call(this._xAxis
+                        .tickValues(this._xScale.domain().filter((...[, i]) => {
+                        if (i == 0)
+                            return true;
+                        else {
+                            return i % nTh == 0;
+                        }
+                    }))
+                        .tickPadding(this.tickPadding)
+                        .tickSize(this.xTickSize)
+                        .tickSizeOuter(0)
+                        .tickFormat((d, i) => {
+                        const index = i * nTh;
+                        if (this._namedTickSizes[index] < allowedWidth)
+                            return d;
+                        return (d.slice(0, Math.max(Math.floor((allowedWidth /
+                            (this._namedTickSizes[index] +
+                                this._ellipsisSize +
+                                5)) *
+                            d.length), 3)) + '...');
+                    }));
+                }
+            }
+        };
+        // Positioning the ticks of the value bearing axis
+        this.setValueTicks = (transition = false) => {
+            var _a, _b;
+            if (((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) && ((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.meta.hideXAxis)) {
+                this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._xAxisHandle.attr('display', 'none')
+                    : this._yAxisHandle.attr('display', 'none');
+                return;
+            }
+            let toCall, tickSize, handle;
+            if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
+                this._xAxisHandle.attr('display', null);
+                toCall = this._xAxis;
+                tickSize = -(this._dims.height - this._margin.top - this._margin.bottom);
+                handle = this._xAxisHandle;
+            }
+            else {
+                this._yAxisHandle.attr('display', null);
+                toCall = this._yAxis;
+                tickSize = -(this._dims.width - this._margin.left - this._margin.right);
+                handle = this._yAxisHandle;
+            }
+            // Computing the amount of ticks to show
+            const ticks = Math.min(Math.floor((this._dims.width - this._margin.left - this._margin.right) /
+                (this._tickWidth + this.xTickSize)) - 2, this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._xScale.ticks().length
+                : this._yScale.ticks().length);
+            if (!transition) {
+                handle
+                    .style('font-size', this.fontSize)
+                    .style('font-family', 'Open Sans')
+                    .call(toCall
+                    .ticks(this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? Math.max(2, Math.min(ticks, 9))
+                    : 5) // Clamping value between 2 and 10
+                    .tickPadding(this.tickPadding)
+                    .tickSize(tickSize)
+                    .tickSizeOuter(0)
+                    .tickFormat((d) => d.toLocaleString()));
+            }
+            else {
+                handle
+                    .style('font-size', this.fontSize)
+                    .style('font-family', 'Open Sans')
+                    .transition('newScale')
+                    .duration(this.defaultDuration)
+                    .call(toCall
+                    .ticks(this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? Math.max(2, Math.min(ticks, 9))
+                    : 5) // Clamping value between 2 and 10
+                    .tickPadding(this.tickPadding)
+                    .tickSize(tickSize)
+                    .tickSizeOuter(0)
+                    .tickFormat((d) => d.toLocaleString()));
+            }
+            handle.selectAll('line').attr('stroke', 'lightgray');
+            if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
+                this._yAxisHandle.select('.domain').attr('display', 'none');
+        };
+        // Highlight bar
+        this.hover = (event) => {
+            linear.select(event.target)
+                .transition('hover')
+                .duration(20)
+                .attr('fill', (d) => event.target.tagName === 'rect'
+                ? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
+                : 'var(--digi--color--background--interactive--hover--tertiary)');
+        };
+        // Removing highlight from bar
+        this.hoverOut = (event) => {
+            linear.select(event.target)
+                .transition('hover')
+                .duration(this.defaultDuration)
+                .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
+        };
+        this.openTooltip = (...[, d]) => {
+            // If type is string, the user has clicked on a y-axis tick
+            if (typeof d === 'string') {
+                this._tooltipData = this._barChartContainer
+                    .select(`#barGroup${d.replace(/[^A-Z0-9]+/gi, '_')}`)
+                    .datum();
+            }
+            else
+                this._tooltipData = d;
+            const tooltipBody = this._tooltip.select('.tooltipBody');
+            tooltipBody
+                .select(this._tooltipHeading)
+                .style('margin', '0 0.75rem 0 0 ')
+                .style('font-weight', 500)
+                .html(this._tooltipData.key);
+            tooltipBody
+                .selectAll('div')
+                .data([this._tooltipData])
+                .join('div')
+                .style('display', 'flex')
+                .style('flex-direction', 'row')
+                .style('flex-wrap', 'nowrap')
+                .style('white-space', 'nowrap')
+                .style('justify-content', 'space-between')
+                .html((d) => d.value.toLocaleString());
+            this._tooltip.style('display', 'flex');
+            this.positionTooltip(this._tooltipData);
+        };
+        this.closeTooltip = () => {
+            this._tooltip.style('display', 'none');
+        };
+        // Positions tooltip in horizontal mode
+        this.positionTooltip = (data) => {
+            const width = this._tooltip.node().getBoundingClientRect().width;
+            const height = this._tooltip.node().getBoundingClientRect().height + 8;
+            const diff = this._xScale(data.value) / 2 - width / 2;
+            if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
+                this._tooltip
+                    .style('transform', `translate(${this._margin.left + this.tickPadding + Math.max(diff, -4)}px, ${this._yScale(data.key) + this._yScale.bandwidth() + this._yScale.paddingInner() * this._yScale.bandwidth()}px )`)
+                    .style('max-width', this._xScale.range()[1] + 'px');
+                this._tooltip
+                    .select('digi-icon-caret-up')
+                    .style('position', 'absolute')
+                    .style('--digi--icon--color', 'white')
+                    .style('top', '-11px')
+                    .style('left', '0')
+                    .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this._xScale(data.value) / 2}px,0)`);
+            }
+            else {
+                this._tooltip
+                    .style('transform', `translate(${this._margin.left + this.tickPadding + this._xScale(data.key) + this._xScale.bandwidth() / 2 - width / 2}px, ${this._yScale(data.value) - height}px )`)
+                    .style('max-width', this._xScale.range()[1] + 'px');
+                this._tooltip
+                    .select('digi-icon-caret-down')
+                    .style('position', 'absolute')
+                    .style('--digi--icon--color', 'white')
+                    .style('left', '0')
+                    .style('bottom', '-11px')
+                    .style('transform', `translate(${width / 2 - 6}px,0)`);
+            }
+        };
+        // Once texts has fully loaded, we can recompute some sizes
+        this.recomputeTextSize = () => {
+            var _a, _b;
+            if (this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal)
+                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
+            this.tickSizes();
+            this._barChartContainer.selectAll('.barGroup').data(this.mappedData);
+            if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
+                this._textSelection.remove();
+            this.initBarText();
+        };
+        // Removes resize observer for chart and inits table
+        this.activateTable = (event) => {
+            this.closeTooltip();
+            this.barChartObserver.disconnect();
+            this.tableObserver.observe(this._chartDiv);
+            this._status.innerHTML = '<p>Visas som tabell</p>';
+            linear.select(this._host).select('.tableButton').style('display', 'none');
+            linear.select(this._host).select('.chartButton').style('display', null);
+            event.target.nextSibling.lastChild.focus();
+            const duration = 150;
+            this._svg
+                .attr('opacity', 1)
+                .transition('fadeout')
+                .duration(duration)
+                .attr('opacity', 0)
+                .on('end', () => {
+                this._svg.remove();
+                this._legendDiv.style['display'] = 'none';
+                this._tableDiv.style['display'] = 'block';
+                this.setTableContent();
+                this.setTableDimensions();
+                linear.select(this._tableDiv)
+                    .style('opacity', 0)
+                    .transition('fadein')
+                    .duration(duration)
+                    .style('opacity', 1);
+            });
+            linear.select(this._legendDiv)
+                .style('opacity', 1)
+                .transition('fadeout')
+                .duration(duration)
+                .style('opacity', 0);
+        };
+        // Removes observer and calls init functions for line chart
+        this.reInitChart = (event) => {
+            this.tableObserver.disconnect();
+            this._status.innerHTML = '<p>Visas som diagram</p>';
+            linear.select(this._host).select('.tableButton').style('display', null);
+            linear.select(this._host).select('.chartButton').style('display', 'none');
+            event.target.previousSibling.lastChild.focus();
+            const table = linear.select(this._tableDiv);
+            table
+                .style('opacity', 1)
+                .transition()
+                .duration(150)
+                .style('opacity', 0)
+                .on('end', () => {
+                table.style('display', 'none');
+                this.initChain();
+                this._svg
+                    .attr('opacity', 0)
+                    .transition()
+                    .duration(150)
+                    .attr('opacity', 1);
+            });
+        };
+        this.afVariation = typographyVariation_enum.BarChartVariation.Vertical;
+        this.afHeadingLevel = 'h3';
+        this.afId = randomIdGenerator_util.randomIdGenerator('tooltip');
+        this.afChartData = undefined;
+    }
+    afChartDataUpdate(data) {
+        if (typeof data != 'string')
+            this._chartData = data;
+        else
+            this._chartData = JSON.parse(data);
+        this.mappedData = this.reshapeData();
+        // checking for width of each tick
+        this.mappedData.forEach((elem) => {
+            if (elem.series.length > this.dataWidth)
+                this.dataWidth = elem.series.length;
+        });
+        if (this.dataWidth > 1)
+            this.barGap = 1;
+    }
+    initSvg() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Fetch number formatting
+        this._numberFormat = {
+            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
+            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
+                ? 'compact'
+                : 'standard'
+        };
+        linear.select(this._chartDiv).select('svg').remove();
+        this._maxHeight = (_g = linear.select(this._host)
+            .node()
+            .parentNode) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height;
+        this.barChartObserver.observe(this._chartDiv);
+        // Getting rem-size
+        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        this.setMinMax();
+        this.setDims();
+        this.setMargins();
+        // Appending svg
+        this._svg = linear.select(this._chartDiv)
+            .append('svg')
+            .attr('aria-hidden', true)
+            .attr('role', 'img')
+            .attr('aria-label', this._chartData && this._chartData.title
+            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            : 'Stapeldiagram');
+        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
+    }
+    initToolTip() {
+        // Getting handle for tooltip
+        this._tooltip = linear.select('#' + this.afId);
+        this._tooltip.select('.close').on('click', this.closeTooltip);
+        this._tooltipHeading =
+            'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1); // increment heading level by one
+        // Add heading placeholder for heading
+        this._tooltip
+            .selectAll('.tooltipBody')
+            .append(this._tooltipHeading)
+            .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
+            .style('font-size', '1rem')
+            .style('margin', '0 0.75rem')
+            .style('font-weight', '500');
+    }
+    initEmpty() {
+        linear.select(this._chartDiv).select('svg').remove();
+        this._maxHeight = linear.select(this._host)
+            .node()
+            .parentNode.getBoundingClientRect().height;
+        this.barChartObserver.observe(this._chartDiv);
+        // Getting rem-size
+        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        //this.setMinMax();
+        this.setDims();
+        this.setMargins();
+        // Appending svg
+        this._svg = linear.select(this._chartDiv)
+            .append('svg')
+            .attr('aria-hidden', true)
+            .attr('role', 'img')
+            .attr('aria-label', this._chartData && this._chartData.title
+            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            : 'Stapeldiagram');
+        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
+        // Hide unusable components
+        linear.select(this._titleDiv)
+            .select(this.afHeadingLevel)
+            .html(`${text._t.loading}...`);
+        this.initYAxis(true);
+        this.initXAxis(true);
+        this.loadingState(true);
+    }
+    loadingState(empty) {
+        this._loading = true;
+        // close potentially open tooltip
+        if (this._tooltip)
+            this.closeTooltip();
+        linear.select(this._host).select('.tableButton').style('display', 'none');
+        const newHeight = this.setDims();
+        this.transitionTitle();
+        this._xAxisHandle.selectAll('.tick').remove();
+        this._xAxisHandle.select('path').remove();
+        this._svg
+            .transition()
+            .duration(400)
+            .attr('width', this._dims.width)
+            .attr('height', this._dims.height)
+            .attr('aria-label', this._chartData && this._chartData.title
+            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            : 'Stapeldiagram');
+        this.setMargins(true);
+        linear.select(this._titleDiv)
+            .select(this.afHeadingLevel)
+            .html(`${text._t.loading}...`);
+        // Waiting with observing for changes until transition to regular bars is complete
+        this._barChartContainer
+            .transition('position')
+            .duration(this.defaultDuration)
+            .ease(linear.polyInOut)
+            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+        // If there is a new height
+        if (newHeight) {
+            // Update y-axis with potentially new height (might want to do a check here)
+            this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale.range([
+                    this._margin.top,
+                    this._dims.height - this._margin.bottom
+                ])
+                : this._yScale.range([
+                    this._dims.height - this._margin.bottom,
+                    this._margin.top
+                ]);
+            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+        }
+        const animateBars = () => {
+            this._barChartContainer.selectAll('.barGroup').remove();
+            this._barSelection = this._barChartContainer
+                .selectAll('barGroup')
+                .data(this.mappedData)
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
+                .append('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer');
+            this._barSelection
+                .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale(d.key)
+                : this._dims.height - this._margin.bottom)
+                .attr('x', this.xFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .attr('width', this.widthFunction)
+                .attr('height', () => 0)
+                .attr('fill', 'gray')
+                .transition()
+                .duration(400)
+                .delay((...[, i]) => i * 150)
+                .attr('y', this.yFunction)
+                .attr('height', this.heightFunction);
+            this._barSelection
+                .transition()
+                .duration(400)
+                .ease(linear.linear$1)
+                .delay((...[, i]) => i * 150 + 400)
+                .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale(d.key)
+                : this._dims.height - this._margin.bottom)
+                .attr('height', () => 0)
+                .on('end', (...[, i]) => {
+                if (i === this._placeholderTicks.length - 1)
+                    animateBars();
+            });
+        };
+        const flattenBars = () => {
+            this._barChartContainer
+                .selectAll('rect')
+                .transition()
+                .duration(200)
+                .ease(linear.linear$1)
+                .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale(d.key)
+                : this._dims.height - this._margin.bottom)
+                .attr('height', () => 0)
+                .on('end', (...[, i]) => {
+                if (i != 0)
+                    return;
+                this.setYScale(true);
+                this.setValueTicks();
+                this.setXScale(true);
+                this.barChartObserver.observe(this._chartDiv);
+                animateBars();
+            });
+        };
+        if (empty)
+            animateBars();
+        else
+            flattenBars();
+    }
+    transitionTitle() {
+        const height = linear.select(this._titleDiv).style('height');
+        linear.select(this._titleDiv)
+            .style('height', this._prevHeight)
+            .transition('adjust')
+            .duration(400)
+            .style('height', height)
+            .on('end', () => linear.select(this._titleDiv).style('height', null));
+    }
+    initYAxis(empty) {
+        this.setYScale(empty);
+        this._barChartContainer = this._svg
+            .append('g')
+            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+        this._yAxisHandle = this._barChartContainer.append('g');
+        if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
+            this.tickSizes();
+            this.setNamedTicks();
+            this.setTickInteraction();
+        }
+        else
+            this.setValueTicks();
+    }
+    // Sets the largest and smallest value from series 0, Should only be used when not loading
+    setMinMax() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const max = linear.max((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
+            ? linear.max((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
+            : 0;
+        const min = linear.min([0, linear.min((_c = this._chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
+            ? linear.min([0, linear.min((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
+            : 0;
+        this._maxVal = max;
+        this._minVal = min;
+        this._tempScale = linear.linear()
+            .domain([this._minVal, this._maxVal])
+            .nice(((_f = (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
+            ? (_g = this._chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
+            : 3)
+            .domain();
+    }
+    // Setting up x-axis, getting margin.right in this function
+    initXAxis(empty) {
+        this.setXScale(empty);
+        this._xAxisHandle = this._barChartContainer
+            .append('g')
+            .attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+        if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
+            this.setValueTicks();
+            // Removing first tick, because it aligns with y-axis domain
+            //this._xAxisHandle.select('.tick').select('line').remove();
+        }
+        else {
+            if (!empty) {
+                this.tickSizes();
+                this.setNamedTicks();
+                this.setTickInteraction();
+            }
+        }
+    }
+    // Initializing bars, can only handle one series of bars for now
+    initBars() {
+        this._barSelection = this._barChartContainer
+            .selectAll('barGroup')
+            .data(this.mappedData)
+            .join('g')
+            .attr('class', 'barGroup')
+            .attr('id', (d) => {
+            return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
+        });
+        this._barSelection.selectAll('.barGroup')
+            .data((d) => {
+            return d.series;
+        })
+            .join('rect')
+            .attr('class', 'bar')
+            .style('cursor', 'pointer')
+            .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);
+    }
+    initBarText() {
+        var _a, _b;
+        if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+            return;
+        this._textSelection = this._barChartContainer
+            .selectAll('.barGroup')
+            .append('text');
+        this._textSelection
+            .text((d) => {
+            return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
+        })
+            .attr('class', 'barText')
+            .attr('font-size', this.fontSize)
+            .attr('font-weight', '600')
+            .attr('text-anchor', 'end')
+            .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+            ? this._yScale(d.key) + this._yScale.bandwidth() / 2
+            : this._yScale(d.value))
+            .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+            ? this._xScale(d)
+            : this._xScale(d.key) + this._xScale.bandwidth())
+            .attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal ? '0.35em' : '-0.25em')
+            .style('pointer-events', 'none')
+            .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'; });
+        this.adjustBarText();
+    }
+    initChain() {
+        this.initSvg();
+        this.initToolTip();
+        this.initYAxis();
+        this.initXAxis();
+        this.initBars();
+        this.initBarText();
+    }
+    async updateChain() {
+        var _a, _b, _c, _d, _e, _f;
+        // Fetch number formatting
+        this._numberFormat = {
+            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
+            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
+                ? 'compact'
+                : 'standard'
+        };
+        if (this._tooltip)
+            this.closeTooltip();
+        // Check whether we are in table mode or not
+        if (this._tableDiv.style['display'] == 'block') {
+            if (!this._chartData.title) {
+                linear.select(this._titleDiv)
+                    .select(this.afHeadingLevel)
+                    .html(`${text._t.loading}...`);
+            }
+            else {
+                this.setTableContent();
+                this.setTableDimensions();
+            }
+            this.transitionTitle();
+        }
+        else {
+            // displaying legend again
+            if (this._loading) {
+                linear.select(this._host).select('.tableButton').style('display', null);
+                linear.select(this._legendDiv).style('display', null);
+                this.initToolTip();
+            }
+            // Disconnect resize observer while adjusting things
+            this.barChartObserver.disconnect();
+            this.setMinMax();
+            const newHeight = this.setDims();
+            this.transitionTitle();
+            this._svg
+                .transition()
+                .duration(400)
+                .attr('width', this._dims.width)
+                .attr('height', this._dims.height)
+                .attr('aria-label', this._chartData && this._chartData.title
+                ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+                : 'Stapeldiagram');
+            this.setMargins();
+            // Waiting with observing for changes until transition to regular bars is complete
+            this._barChartContainer
+                .transition('position')
+                .duration(this.defaultDuration)
+                .ease(linear.polyInOut)
+                .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+            if (!this._loading)
+                this._barChartContainer.on('end', () => this.barChartObserver.observe(this._chartDiv));
+            // If there is a new height
+            if (newHeight) {
+                // Update y-axis with potentially new height (might want to do a check here)
+                this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                    ? this._yScale.range([
+                        this._margin.top,
+                        this._dims.height - this._margin.bottom
+                    ])
+                    : this._yScale.range([
+                        this._dims.height - this._margin.bottom,
+                        this._margin.top
+                    ]);
+                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            }
+            this.tickSizes();
+            this.setYScale();
+            this.setXScale();
+            this.setTickInteraction();
+            this._tickWidth = this.getLargestText(this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._xScale.ticks().map((tick) => tick.toLocaleString())
+                : this._yScale.ticks().map((tick) => tick.toLocaleString()));
+            this.setValueTicks(true);
+            if (this._loading) {
+                linear.select(this._legendDiv)
+                    .style('opacity', 0)
+                    .transition()
+                    .duration(400)
+                    .ease(linear.polyInOut)
+                    .style('opacity', 1);
+                this._margin.right =
+                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                        this.yTickSize +
+                        this.tickPadding;
+                // Update x-axis with new width
+                this._xScale.range([
+                    0,
+                    this._dims.width - this._margin.right - this._margin.left
+                ]);
+                this.setNamedTicks(true);
+                // Stop animation
+                this._barSelection.selectAll('.barGroup').on('end', null);
+                this._loading = false;
+                this._barSelection
+                    .transition()
+                    .duration(this.defaultDuration)
+                    .attr('y', (d) => this.afVariation === typographyVariation_enum.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);
+                this.setTickInteraction();
+            }
+            else {
+                this.setNamedTicks(true);
+                // Removing first tick, because it aligns with y-axis domain
+                this.updateBars();
+            }
+        }
+    }
+    // Getting correct color given index or name of data serie
+    colorFunction(input) {
+        if (typeof input === 'number')
+            return `var(${this.colorPalettes[input]})`;
+        else {
+            const index = this._chartData.data.series.findIndex((serie) => serie.title === input);
+            if (index > 0)
+                return `var(${this.colorPalettes[index]})`;
+            else
+                return `var(${this.colorPalettes[0]})`;
+        }
+    }
+    // Resizing bar chart
+    resize() {
+        var _a;
+        const newHeight = this.setDims();
+        this.setMargins();
+        (_a = this._svg) === null || _a === void 0 ? void 0 : _a.attr('width', this._dims.width).attr('height', this._dims.height);
+        this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+        this._margin.right =
+            this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                this.yTickSize +
+                this.tickPadding;
+        // If there is a new height
+        if (newHeight) {
+            // Update y-axis with potentially new height (might want to do a check here)
+            this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
+                ? this._yScale.range([
+                    this._margin.top,
+                    this._dims.height - this._margin.bottom
+                ])
+                : this._yScale.range([
+                    this._dims.height - this._margin.bottom,
+                    this._margin.top
+                ]);
+            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+        }
+        // Update x-axis with new width
+        this._xScale.range([
+            0,
+            this._dims.width - this._margin.right - this._margin.left
+        ]);
+        this.setNamedTicks();
+        this.setValueTicks();
+        this.adjustBarSize();
+        this.adjustBarText();
+        if (this._tooltipData)
+            this.positionTooltip(this._tooltipData);
+    }
+    // Returns the longest text from an array of strings
+    getLargestText(array) {
+        let width = 0;
+        array.forEach((elem) => {
+            const temp = this.getTextSize(elem);
+            if (temp > width) {
+                width = temp;
+            }
+        });
+        return width;
+    }
+    componentWillLoad() {
+        this.afChartDataUpdate(this.afChartData);
+    }
+    componentDidLoad() {
+        if (!this._chartData || Object.keys(this._chartData).length === 0) {
+            this._loading = true;
+            return this.initEmpty();
+        }
+        this.initChain();
+        document.fonts.ready.then(() => {
+            this.recomputeTextSize();
+            this.setNamedTicks();
+            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+        });
+    }
+    disconnectedCallback() {
+        this.barChartObserver.disconnect();
+    }
+    componentWillUpdate() {
+        this._prevHeight = linear.select(this._titleDiv).style('height');
+    }
+    componentDidUpdate() {
+        if (this._tableDiv.style['display'] != 'block' &&
+            Object.keys(this._chartData).length === 0) {
+            // Disconnect old barchartobserver while doing resizing
+            this.barChartObserver.disconnect();
+            return this.loadingState();
+        }
+        this.updateChain();
+    }
+    // Not currently used
+    /*get cssModifiers() {
+      return {
+        'digi-bar-chart--vertical': this.afVariation == 'vertical',
+        'digi-bar-chart--horizontal': this.afVariation == 'horizontal'
+      };
+    }*/
+    // Returns pixelwidth of text given the current fontSize (costly function using .each)
+    getTextSize(text) {
+        const textWidth = [];
+        const svg = linear.select(this._chartDiv).append('svg');
+        svg
+            .selectAll('dummyText')
+            .data([text])
+            .join('text')
+            .attr('font-size', this.fontSize) // <- using 1rem here whereas default is 0.875rem
+            .text((d) => d)
+            .each((...[, i, nodelist]) => {
+            const thisWidth = nodelist[i].getComputedTextLength();
+            textWidth.push(thisWidth);
+            nodelist[i].remove();
+        });
+        svg.remove().exit();
+        return textWidth[0];
+    }
+    // Setting table content from this._chartData
+    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 table = linear.select(this._tableDiv);
+        table
+            // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
+            .style('height', this._dims.height + 'px');
+        table.style('width', this._dims.width - this._rem * 0.65 + 'px');
+    }
+    // Extracting all headings from data and returning a string with <th>-elements with headings
+    headings() {
+        let headingsString = `<th scope="col">${this._chartData.x}</th>`;
+        this._chartData.data.series.forEach((elem) => {
+            headingsString = headingsString.concat(`<th scope="col">${elem.title}</th>`);
+        });
+        return headingsString;
+    }
+    // Building the table body
+    tableBody() {
+        let body = '';
+        if (this._chartData && this._chartData.data) {
+            const loopable = this._chartData.data.xValueNames
+                ? this._chartData.data.xValueNames
+                : this._chartData.data.xValues;
+            loopable.forEach((elem, index) => {
+                let cells = '';
+                this._chartData.data.series.forEach((serie) => {
+                    cells = cells.concat(`<td>${serie.yValues[index] != null ? serie.yValues[index].toLocaleString() : '-'}</td>`);
+                });
+                body = body.concat(`<tr><th scope='row'>${elem}${cells}</th></tr>`);
+            });
+        }
+        return body;
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        // Setting header
+        let heading = '';
+        if (this._chartData) {
+            if (!this._chartData.subTitle)
+                heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
+            else {
+                if (!this._chartData.infoText)
+                    heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
+                else
+                    heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${(_a = this._chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
+				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
+            }
+        }
+        return (index.h(index.Host, { key: 'a1e4aaa788766d54c691e95b7e70932b0e7d2b05', ref: (el) => (this._host = el) }, index.h("div", { key: '2fac926d196acaa20ab5f438968e3c98c08dd104', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: '16d8cbd0f03a2a2d24d3366ab1b3eaed797dd361', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '22a93add4a7f1ea3965ce496f2b5cbf488b01314', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '152938d206dc00e2fb88b52d332960cbeda2c045', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '66db213ee1c4cb169c7c257853a15a468bf2a83e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: 'ac4b8adad6ace97f50591cd39b8b0082d067f069', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'b28e00a40b5c1a2919146ec4815f23a14fdfac50', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: '63f80744faa1d4b3d7d62bece3b5c446eda3ae7b', class: "chartTooltip", id: this.afId }, index.h("div", { key: '8c9fa9388b9bfc071c4a594275159eb36a8ec43b', class: "tooltipBody" }), index.h("digi-icon-x", { key: '252d12a937e5276381fa40ec3bb4e77c259da9c1', class: "close" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", null)) : (index.h("digi-icon-caret-down", null))), index.h("div", { key: '9b70433c310882bd0a06784ca1fa21c5b2dd9e52', ref: (el) => (this._chartDiv = el) }, " "), index.h("div", { key: '459e38448e29eea1fa7a10de7f3f1f06b6404eab', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: 'cc655054cb3c3688c75060ebbdf6c3f8ea4ad712', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afChartData": ["afChartDataUpdate"]
+    }; }
+};
+barChart.style = DigiBarChartStyle0;
+
 const buttonCss = ".sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--background--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--focus:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--active:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--secondary--default:var(--digi--color--background--interactive--default--secondary);--digi--button--color--background--secondary--hover:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--focus:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--active:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--hover:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--focus:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--active:var(--digi--color--text--interactive--secondary);--digi--button--color--text--secondary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--hover:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--focus:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--active:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--function--default:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--hover:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--focus:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--active:var(--digi--color--text--interactive--primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--border--primary--focus:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--active:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--secondary--default:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--hover:var(--digi--color--border--interactive--hover--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--active:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--hover:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--focus:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--active:var(--digi--color--icon--secondary);--digi--button--color--icon--secondary--default:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--hover:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--focus:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--active:var(--digi--color--icon--brand-primary);--digi--button--color--icon--function--default:var(--digi--color--icon--cta);--digi--button--color--icon--function--hover:var(--digi--color--icon--cta);--digi--button--color--icon--function--focus:var(--digi--color--icon--cta);--digi--button--color--icon--function--active:var(--digi--color--icon--cta);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--primary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--primary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--primary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--primary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--primary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--primary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--secondary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--secondary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--secondary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--secondary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--secondary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--secondary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--secondary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--secondary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--secondary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--secondary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--function--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--function--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--function--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--function--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--function--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--function--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}@media (any-hover: hover){.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(--digi--button--text-align--full-width);--digi--button--justify-content--default:var(--digi--button--justify-content--full-width)}";
 const DigiButtonStyle0 = buttonCss;
 
@@ -622,6 +2138,72 @@ const IconBellFilled = class {
 };
 IconBellFilled.style = DigiIconBellFilledStyle0;
 
+const iconCaretDownCss = ".sc-digi-icon-caret-down-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-caret-down-h svg.sc-digi-icon-caret-down{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconCaretDownStyle0 = iconCaretDownCss;
+
+const IconCaretDown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '076122c58ff6050a1e284cfe4459c526e5b6bb94', class: "digi-icon-caret-down", width: "12", height: "6", viewBox: "0 0 12 6", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: 'c11d1fbca067166db12a18b35fa9d36c7131e34e', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'eec49821572ad40f84afcee5650877c8338d3812' }, this.afDesc), index.h("path", { key: 'e4473f7f7152ff2263f80768dadc5ad6ac330a6c', class: "digi-icon-caret-down__shape", d: "M11.777.198A.608.608 0 0112 .667c0 .18-.074.336-.223.468l-5.25 4.667A.768.768 0 016 6a.768.768 0 01-.527-.198L.223 1.135A.608.608 0 010 .667C0 .487.074.33.223.197A.768.768 0 01.75 0h10.5c.203 0 .379.066.527.198z", fill: "currentColor", "fill-rule": "evenodd" })));
+    }
+};
+IconCaretDown.style = DigiIconCaretDownStyle0;
+
+const iconCaretUpCss = ".sc-digi-icon-caret-up-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-caret-up-h svg.sc-digi-icon-caret-up{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconCaretUpStyle0 = iconCaretUpCss;
+
+const IconCaretUp = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: 'e9ace2c9103fdaf105f3b827d963f37c7a0da692', class: "digi-icon-caret-up", width: "12", height: "7", viewBox: "0 0 12 7", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '06f4956a61d900ac2ecd6f3d7e73364e084286c6', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'bb69acfc464160dc580771ad56724b5cda76f6f3' }, this.afDesc), index.h("path", { key: '918ba79b8ef4a7ad38da77411b12c2a4a074d977', class: "digi-icon-caret-up__shape", d: "M11.777 5.65A.608.608 0 0112 6.12c0 .18-.074.337-.223.469a.768.768 0 01-.527.198H.75a.768.768 0 01-.527-.198A.608.608 0 010 6.119c0-.18.074-.337.223-.469L5.473.984A.768.768 0 016 .786c.203 0 .379.066.527.198l5.25 4.666z", fill: "currentColor", "fill-rule": "evenodd" })));
+    }
+};
+IconCaretUp.style = DigiIconCaretUpStyle0;
+
+const iconChartCss = ".sc-digi-icon-chart-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chart-h svg.sc-digi-icon-chart{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconChartStyle0 = iconChartCss;
+
+const IconChart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '6607ae220e7df0da4e33d6e26989b0a081c9b36c', width: "56", height: "62", viewBox: "0 0 56 62", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, index.h("title", { key: 'a5a9ef19879689bc5d73b96a8e4d5e3e3648d6a5' }, "Chart"), this.afTitle && index.h("title", { key: 'e6e5af46d4d34bb3b0dcdc2c8704d483a9ed46c9', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '6ff565844d5a595fd83767019670556bc453544a' }, this.afDesc), index.h("defs", { key: 'a1e2c022806ba193089e6f0d9f5af8767a7d228c' }, index.h("polygon", { key: '2b0d108004fc3f5aabbcf9336cfc570a9c1f0bb3', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), index.h("polygon", { key: '5399f0ed9826b3b6d9d456dbb642e1a1567d092e', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), index.h("g", { key: 'ed893c950447790359d41eb049fa27d3072e4550', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: '4b5f626b6fd84c24288d4ca2282bb4f77cc66f09', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, index.h("g", { key: 'd80584e04fc9647d5f3754c3c0f110d8159ae81a', transform: "translate(1013.063248, 823.768116)" }, index.h("g", { key: '865b38e62f958368b9b0c8bee661f8ad65d937d5', id: "Group", transform: "translate(-0.000000, 0.000000)" }, index.h("path", { key: 'de78d7a368a954e05a35f86279ebe64dd7e6bb5f', d: "M11.2871933,17.0724638 L3.19179715,17.0724638 C1.47642907,17.0724638 0.0891563449,18.5157634 0.0891563449,20.3004089 L0,39.003939 C0,40.7885845 1.38727273,42.2318841 3.1026408,42.2318841 L11.1980369,42.2318841 C12.913405,42.2318841 14.3006777,40.7885845 14.3006777,39.003939 L14.3898341,20.3004089 C14.3898341,18.5157634 12.9989951,17.0724638 11.2871933,17.0724638", id: "Fill-1", fill: "currentColor" }), index.h("path", { key: '9becb04f53bc8e2204057bcc91011748e91d7f49', d: "M31.292107,11.2318841 L23.077661,11.2318841 C21.3370669,11.2318841 19.9293931,12.6247 19.9293931,14.3469222 L19.8389256,39.1168459 C19.8389256,40.8354877 21.2465994,42.2318841 22.9871935,42.2318841 L31.2016396,42.2318841 C32.9422337,42.2318841 34.3499075,40.8354877 34.3499075,39.1168459 L34.4403749,14.3469222 C34.4403749,12.6247 33.0290824,11.2318841 31.292107,11.2318841", id: "Fill-3", fill: "currentColor" }), index.h("path", { key: '630d629de95cab01e5c6c12fcdf6db1370cfbcbb', d: "M51.0899571,0 L43.0444095,0 C41.339604,0 39.9608736,1.42791855 39.9608736,3.19354534 L39.7836589,39.0420095 C39.7836589,40.8039655 41.1659336,42.2318841 42.8671948,42.2318841 L50.9162867,42.2318841 C52.6175479,42.2318841 53.9962783,40.8039655 53.9962783,39.0420095 L54.173493,3.19354534 C54.173493,1.42791855 52.7912183,0 51.0899571,0", id: "Fill-6", fill: "currentColor" }), index.h("polygon", { key: 'f4840f517fa75e69552904a8a745af9685f8ef48', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), index.h("g", { key: '0c3ddc574e29a0933b9927ccbbccaf7896346181', id: "Clip-4" }), index.h("polygon", { key: '6003bdc26f9a47f8907ad2483067eb97fa47125a', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), index.h("g", { key: '58b7a6de68a0a2e9b513434c02ef2ceb9746f708', id: "Clip-9" }), index.h("path", { key: '17cc4e34e2e1c2d4065d65665c2cd2de4d1cac7c', d: "M2.64246183,-0.393115942 L24.287738,-0.393115942 C24.783165,-0.393115942 25.2716142,-0.501190406 25.7216852,-0.713736852 L51.853716,-12.8829215 C53.6086441,-13.6970825 54.3936517,-15.8297519 53.5981773,-17.6454029 C52.8027029,-19.4610539 50.7372607,-20.2680099 48.9858215,-19.4466439 L23.5376196,-7.59808021 L2.64246183,-7.59808021 C0.716576525,-7.59808021 -0.846460828,-5.98777069 -0.846460828,-3.99559807 C-0.846460828,-2.00342546 0.716576525,-0.393115942 2.64246183,-0.393115942", id: "Fill-8", fill: "currentColor", mask: "url(#mask-4)" })))))));
+    }
+};
+IconChart.style = DigiIconChartStyle0;
+
 const iconMinusCss = ".sc-digi-icon-minus-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-minus-h svg.sc-digi-icon-minus{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
 const DigiIconMinusStyle0 = iconMinusCss;
 
@@ -666,6 +2248,28 @@ const IconPlus = class {
 };
 IconPlus.style = DigiIconPlusStyle0;
 
+const iconTableCss = ".sc-digi-icon-table-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-table-h svg.sc-digi-icon-table{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconTableStyle0 = iconTableCss;
+
+const IconTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '2b15475968f010d4d9b38757d76310a0da35f9aa', class: "digi-icon-table", width: "62px", height: "62px", viewBox: "0 0 62 62", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && index.h("title", { key: '4d6f0e438a5e0815b93ae7d3c78108bfec3f5f06', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'e61d74161f5c064226f0024eee36d8873f79fe20' }, this.afDesc), index.h("defs", { key: '0cec891b39f0d976d433b03cbb67827bfe5b079b' }, index.h("polygon", { key: '519dc3fcc3c88f79639f4de0ff9cfa4ad859c377', points: "0 62 62 62 62 0 0 0" })), index.h("g", { key: '71db465acf6cb6e9584f681d734582875a92b78f', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: '33b2c9ac1ec24ea5c99e473e803376b84fa8a697', transform: "translate(-302, -975)" }, index.h("g", { key: '84aad1a7cbfb1e00b9fe6d09d6f391c6d9e3a253', transform: "translate(302, 975)" }, index.h("polygon", { key: 'fdaea81b52a89b1569ab4fe419bfce0bf63149cc', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), index.h("g", { key: 'c702ec7d878464f96670a7bf5c648ae03046432f' }, index.h("path", { key: 'fdf06acb2a51a798edd82c8fe4ddb05e89ffd72a', d: "M35.3073208,0 L26.6931958,0 C24.7918625,0 23.2496125,1.53297409 23.2496125,3.42574093 L23.2496125,11.9939482 C23.2496125,13.886715 24.7918625,15.4196891 26.6931958,15.4196891 L35.3073208,15.4196891 C37.2086542,15.4196891 38.7496125,13.886715 38.7496125,11.9939482 L38.7496125,3.42574093 C38.7496125,1.53297409 37.2086542,0 35.3073208,0", fill: "currentColor" }), index.h("polygon", { key: 'f32aeb62af7d6f2f555cdb6400b15acab99a526f', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), index.h("path", { key: 'b719764d7969126f69e5ffe8d66c6604f3678666', d: "M12.0573208,0 L3.44319583,0 C1.5418625,0 -0.0003875,1.53297409 -0.0003875,3.42574093 L-0.0003875,11.9939482 C-0.0003875,13.886715 1.5418625,15.4196891 3.44319583,15.4196891 L12.0573208,15.4196891 C13.9586542,15.4196891 15.4996125,13.886715 15.4996125,11.9939482 L15.4996125,3.42574093 C15.4996125,1.53297409 13.9586542,0 12.0573208,0", fill: "currentColor" }), index.h("polygon", { key: 'f478c28306a90a3a20ec5d165ae61c528144f5cf', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), index.h("path", { key: '32ecd42b5a7bac68784083a536a13eb8432142d6', d: "M58.5573208,0 L49.9431958,0 C48.0418625,0 46.4996125,1.53297409 46.4996125,3.42574093 L46.4996125,11.9939482 C46.4996125,13.886715 48.0418625,15.4196891 49.9431958,15.4196891 L58.5573208,15.4196891 C60.4586542,15.4196891 61.9996125,13.886715 61.9996125,11.9939482 L61.9996125,3.42574093 C61.9996125,1.53297409 60.4586542,0 58.5573208,0", fill: "currentColor" }), index.h("polygon", { key: '4adc770bd26975b7f26853960784938d22aa22de', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), index.h("path", { key: '0fea261e3e830db49452ea4f8c1d51de61baa3e5', d: "M35.3073208,46.5803109 L26.6931958,46.5803109 C24.7918625,46.5803109 23.2496125,48.113285 23.2496125,50.0060518 L23.2496125,58.5742591 C23.2496125,60.4670259 24.7918625,62 26.6931958,62 L35.3073208,62 C37.2086542,62 38.7496125,60.4670259 38.7496125,58.5742591 L38.7496125,50.0060518 C38.7496125,48.113285 37.2086542,46.5803109 35.3073208,46.5803109", fill: "currentColor" }), index.h("polygon", { key: 'aefe51986871cdcca194a2aab635c2d10a4b0df9', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), index.h("path", { key: 'b301aca5e4016a8f2576ccf4d35d820042297d3b', d: "M12.0573208,46.5803109 L3.44319583,46.5803109 C1.5418625,46.5803109 -0.0003875,48.113285 -0.0003875,50.0060518 L-0.0003875,58.5742591 C-0.0003875,60.4670259 1.5418625,62 3.44319583,62 L12.0573208,62 C13.9586542,62 15.4996125,60.4670259 15.4996125,58.5742591 L15.4996125,50.0060518 C15.4996125,48.113285 13.9586542,46.5803109 12.0573208,46.5803109", fill: "currentColor" }), index.h("polygon", { key: 'f7c37e92ce4923c69f18f9ee7bfcf024f6edca68', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), index.h("path", { key: '92b5ade4dcfee263d5c6705f0e61d497de95b127', d: "M58.5573208,46.5803109 L49.9431958,46.5803109 C48.0418625,46.5803109 46.4996125,48.113285 46.4996125,50.0060518 L46.4996125,58.5742591 C46.4996125,60.4670259 48.0418625,62 49.9431958,62 L58.5573208,62 C60.4586542,62 61.9996125,60.4670259 61.9996125,58.5742591 L61.9996125,50.0060518 C61.9996125,48.113285 60.4586542,46.5803109 58.5573208,46.5803109", fill: "currentColor" }), index.h("polygon", { key: '18efdfef14982ce32fa049ed6f4291547d69d57f', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), index.h("path", { key: 'd9650db05e8113d593266abd6b6ca24ec3d47c53', d: "M35.3073208,23.2901554 L26.6931958,23.2901554 C24.7918625,23.2901554 23.2496125,24.8231295 23.2496125,26.7158964 L23.2496125,35.2841036 C23.2496125,37.1768705 24.7918625,38.7098446 26.6931958,38.7098446 L35.3073208,38.7098446 C37.2086542,38.7098446 38.7496125,37.1768705 38.7496125,35.2841036 L38.7496125,26.7158964 C38.7496125,24.8231295 37.2086542,23.2901554 35.3073208,23.2901554", fill: "currentColor" }), index.h("polygon", { key: 'a867951d8eb353eb1e0b71914d90c835a7a09062', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), index.h("path", { key: 'e8bbdaf46e54616c09c59183e1d54a6a47d17532', d: "M12.0573208,23.2901554 L3.44319583,23.2901554 C1.5418625,23.2901554 -0.0003875,24.8231295 -0.0003875,26.7158964 L-0.0003875,35.2841036 C-0.0003875,37.1768705 1.5418625,38.7098446 3.44319583,38.7098446 L12.0573208,38.7098446 C13.9586542,38.7098446 15.4996125,37.1768705 15.4996125,35.2841036 L15.4996125,26.7158964 C15.4996125,24.8231295 13.9586542,23.2901554 12.0573208,23.2901554", fill: "currentColor" }), index.h("polygon", { key: 'e726b28b6c68eef9436a978b653e04815248c269', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), index.h("path", { key: '3664a2121e9bbf427652fa17e81c7f5e3f34f422', d: "M58.5573208,23.2901554 L49.9431958,23.2901554 C48.0418625,23.2901554 46.4996125,24.8231295 46.4996125,26.7158964 L46.4996125,35.2841036 C46.4996125,37.1768705 48.0418625,38.7098446 49.9431958,38.7098446 L58.5573208,38.7098446 C60.4586542,38.7098446 61.9996125,37.1768705 61.9996125,35.2841036 L61.9996125,26.7158964 C61.9996125,24.8231295 60.4586542,23.2901554 58.5573208,23.2901554", fill: "currentColor" })))))));
+    }
+};
+IconTable.style = DigiIconTableStyle0;
+
 const iconXCss = ".sc-digi-icon-x-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-x-h svg.sc-digi-icon-x{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
 const DigiIconXStyle0 = iconXCss;
 
@@ -1290,49 +2894,6 @@ const Typography = class {
 };
 Typography.style = DigiTypographyStyle0;
 
-const typographyHeadingJumboCss = ".sc-digi-typography-heading-jumbo-h{display:block}.sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo.sc-digi-typography-heading-jumbo{font-size:var(--digi--typography--heading-jumbo--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);color:var(--digi--color--text--primary);font-weight:var(--digi--typography--heading-jumbo--font-weight--desktop)}@media (min-width: 61.9375rem){.sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo.sc-digi-typography-heading-jumbo{font-size:var(--digi--typography--heading-jumbo--font-size--desktop-large)}}.sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo--secondary.sc-digi-typography-heading-jumbo{color:var(--digi--grayscale--0)}.sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo.sc-digi-typography-heading-jumbo::after{content:\"\";width:11.875rem;height:0.4375rem;background:var(--digi--color--border--accent--primary);display:block;margin-top:var(--digi--padding--small)}@media (min-width: 61.9375rem){.sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo.sc-digi-typography-heading-jumbo::after{width:13.75rem;margin-top:var(--digi--margin--h2-large);height:0.625rem}}.sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo--secondary.sc-digi-typography-heading-jumbo::after{background:var(--digi--color--border--accent--secondary)}digi-typography .sc-digi-typography-heading-jumbo-h .digi-typography-heading-jumbo.sc-digi-typography-heading-jumbo{margin-bottom:var(--digi--margin--medium)}";
-const DigiTypographyHeadingJumboStyle0 = typographyHeadingJumboCss;
-
-const TypographyHeadingJumbo = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afText = '';
-        this.afVariation = undefined;
-        this.afLevel = typographyVariation_enum.TypographyHeadingJumboLevel.H1;
-        this.afLang = 'sv';
-    }
-    /**
-     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
-     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
-     */
-    focusOnHeading() {
-        this.headingElement.focus();
-    }
-    get cssModifiers() {
-        return {
-            'digi-typography-heading-jumbo--primary': this.afVariation === typographyVariation_enum.TypographyHeadingJumboVariation.PRIMARY,
-            'digi-typography-heading-jumbo--secondary': this.afVariation === typographyVariation_enum.TypographyHeadingJumboVariation.SECONDARY
-        };
-    }
-    render() {
-        return (index.h(this.afLevel, { key: '3e7dd74258d680d423a0d3f0ebd7cdd4eaa312ff', ref: (el) => (this.headingElement = el), class: Object.assign({ 'digi-typography-heading-jumbo': true }, this.cssModifiers), lang: this.afLang, tabindex: -1 }, this.afText));
-    }
-};
-TypographyHeadingJumbo.style = DigiTypographyHeadingJumboStyle0;
-
-const typographyPreambleCss = ".sc-digi-typography-preamble-h .digi-typography-preamble.sc-digi-typography-preamble{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--preamble--font-size--mobile);font-weight:var(--digi--typography--preamble--font-weight--desktop);line-height:var(--digi--typography--preamble--line-height--mobile);color:var(--digi--color--text--primary);max-width:var(--digi--paragraph-width--medium)}@media (min-width: 61.9375rem){.sc-digi-typography-preamble-h .digi-typography-preamble.sc-digi-typography-preamble{font-size:var(--digi--typography--preamble--font-size--desktop);line-height:var(--digi--typography--preamble--line-height--desktop)}}";
-const DigiTypographyPreambleStyle0 = typographyPreambleCss;
-
-const TypographyPreamble = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("p", { key: '0b6395ace6b7679213689fa37fd41c5e8c4f5b30', class: "digi-typography-preamble" }, index.h("slot", { key: 'cc20315940fae3c5fe81ff0d8fc76d545e3de817' })));
-    }
-};
-TypographyPreamble.style = DigiTypographyPreambleStyle0;
-
 const utilBreakpointObserverCss = ".sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer.sc-digi-util-breakpoint-observer{--SMALL:small;--MEDIUM:medium;--LARGE:large;--XLARGE:xlarge}.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--SMALL);border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;pointer-events:none;transition:transform 0.01s;transform:rotate(0deg)}@media (min-width: 48rem){.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--MEDIUM);transform:rotate(10deg)}}@media (min-width: 61.9375rem){.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--LARGE);transform:rotate(20deg)}}@media (min-width: 75rem){.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--XLARGE);transform:rotate(30deg)}}";
 const DigiUtilBreakpointObserverStyle0 = utilBreakpointObserverCss;
 
@@ -1514,6 +3075,7 @@ const UtilKeydownHandler = class {
     }
 };
 
+exports.digi_bar_chart = barChart;
 exports.digi_button = Button;
 exports.digi_header = Header;
 exports.digi_header_avatar = NavigationAvatar;
@@ -1522,8 +3084,12 @@ exports.digi_header_navigation_item = HeaderNavigationItem;
 exports.digi_header_notification = HeaderNotification;
 exports.digi_icon_bars = IconBars;
 exports.digi_icon_bell_filled = IconBellFilled;
+exports.digi_icon_caret_down = IconCaretDown;
+exports.digi_icon_caret_up = IconCaretUp;
+exports.digi_icon_chart = IconChart;
 exports.digi_icon_minus = IconMinus;
 exports.digi_icon_plus = IconPlus;
+exports.digi_icon_table = IconTable;
 exports.digi_icon_x = IconX;
 exports.digi_layout_block = LayoutBlock;
 exports.digi_layout_container = LayoutContainer;
@@ -1533,8 +3099,6 @@ exports.digi_navigation_vertical_menu = NavigationVerticalMenu;
 exports.digi_navigation_vertical_menu_item = NavigationVerticalMenuItem;
 exports.digi_title_logo = TitleLogo;
 exports.digi_typography = Typography;
-exports.digi_typography_heading_jumbo = TypographyHeadingJumbo;
-exports.digi_typography_preamble = TypographyPreamble;
 exports.digi_util_breakpoint_observer = UtilBreakpointObserver;
 exports.digi_util_intersection_observer = UtilIntersectionObserver;
 exports.digi_util_keydown_handler = UtilKeydownHandler;