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

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

@@ -1,13 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-148a7577.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-148a7577.js';
+import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, p as polyInOut, c as interpolate, m as max, d as min, e as linear$1 } from './linear-0246aaea.js';
+import { _ as _t } from './text-26e02c8d.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { a as BarChartVariation, H as HeaderCenterContentWidth, L as LayoutBlockContainer, p as LayoutContainerVariation, q as LayoutContainerMaxWidth, r as NavigationVerticalMenuVariation, N as NavigationVerticalMenuActiveIndicatorSize, T as TitleLogoVariation } from './typography-variation.enum-531cdf64.js';
 import { B as ButtonSize } from './code-example-variation.enum-e656d235.js';
 import { B as ButtonType } from './form-input-search-variation.enum-6d8dc10a.js';
 import { B as ButtonVariation } from './button-variation.enum-94fffdd6.js';
 import './badge-notification-shape.enum-e15a6245.js';
-import { H as HeaderCenterContentWidth, L as LayoutBlockContainer, o as LayoutContainerVariation, p as LayoutContainerMaxWidth, q as NavigationVerticalMenuVariation, N as NavigationVerticalMenuActiveIndicatorSize, T as TitleLogoVariation, x as TypographyHeadingJumboLevel, y as TypographyHeadingJumboVariation } from './typography-variation.enum-8ba40d15.js';
 import './badge-status-variation.enum-8d6370ff.js';
 import './calendar-week-view-heading-level.enum-6774297c.js';
-import './bar-chart-variation.enum-97c0b47f.js';
 import './code-variation.enum-1eee7c7a.js';
 import './expandable-accordion-header-level.enum-85681e2f.js';
 import './expandable-faq-item-variation.enum-a8cb225b.js';
@@ -42,12 +43,1615 @@ import './tag-size.enum-403e0cd8.js';
 import './tools-feedback-banner-type.enum-74b4e580.js';
 import './tools-feedback-rating-variation.enum-29058ff2.js';
 import './tools-theme-provider.brand.enum-8c5a98c9.js';
+import './typography-heading-jumbo-variation.enum-eb737f1b.js';
 import './typography-meta-variation.enum-1f7c2878.js';
 import './typography-time-variation.enum-34c830ef.js';
 import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-6d004731.js';
 import { l as logger } from './logger.util-ede3c48a.js';
 import { K as KEY_CODE, k as keyboardHandler } from './keyboardHandler.util-383c0054.js';
 
+function band() {
+  var scale = 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 = 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 initRange.apply(rescale(), arguments);
+}
+
+const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:100%;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
+const DigiBarChartStyle0 = barChartCss;
+
+const barChart = class {
+    constructor(hostRef) {
+        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;
+        // Bar gap when using multiple bars for each point, this will be doubled, since it is applied on both bars
+        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();
+            });
+        });
+        this.highlightBars = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .attr('fill', (barData) => this.colorFunction(barData.serie))
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                if (barData.serie === serie)
+                    return this.colorFunction(barData.serie);
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        this.resetBarColor = () => {
+            this.barChartContainer.selectAll('.bar').transition('color').duration(150).attr('fill', (barData) => this.colorFunction(barData.serie));
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+        };
+        // 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 === 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();
+        };
+        this.highlightBarGroup = (_event, datum) => {
+            if (typeof datum === 'string') {
+                const barGroupID = '#' + this.barGroupID(datum);
+                this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
+                    .duration(20)
+                    .attr('fill', (d) => {
+                    return this.adjustColor(this.colorFunction(d.serie), 50);
+                });
+            }
+        };
+        this.unHighlightBarGroup = () => {
+            this.barSelection.selectAll('.bar').transition('color')
+                .duration(100)
+                .attr('fill', (d) => {
+                return this.colorFunction(d.serie);
+            });
+        };
+        // Adding click listener for tool tip text
+        this.setTickInteraction = () => {
+            if (this.afVariation === BarChartVariation.Horizontal) {
+                this.yAxisHandle
+                    .selectAll('text')
+                    .style('cursor', 'pointer')
+                    .on('click', this.openTooltip)
+                    .on('mouseenter', this.highlightBarGroup)
+                    .on('mouseleave', this.unHighlightBarGroup);
+            }
+            else {
+                this.xAxisHandle
+                    .selectAll('text')
+                    .style('cursor', 'pointer')
+                    .on('click', this.openTooltip)
+                    .on('mouseenter', this.highlightBarGroup)
+                    .on('mouseleave', this.unHighlightBarGroup);
+            }
+        };
+        // Setting Y-scale
+        this.setYScale = (empty) => {
+            var _a, _b, _c;
+            if (this.afVariation == 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 = axisLeft(this.yScale);
+            }
+            else {
+                this.yScale = 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 = axisLeft(this.yScale);
+            }
+        };
+        // Setting X-Scale
+        this.setXScale = (empty) => {
+            // Horizontal
+            if (this.afVariation == BarChartVariation.Horizontal) {
+                this.xScale = 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 = 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 = 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.barGroupID = (key) => {
+            return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
+        };
+        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 === BarChartVariation.Horizontal
+                    ? this.yScale(d.key)
+                    : this.dims.height - this.margin.bottom)
+                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? 2
+                    : this.xScale(d.key))
+                    .attr('width', () => this.afVariation === BarChartVariation.Horizontal
+                    ? 0
+                    : this.xScale.bandwidth())
+                    .attr('height', () => this.afVariation === BarChartVariation.Horizontal
+                    ? this.yScale.bandwidth()
+                    : 0)
+                    .on('mouseenter', this.hover)
+                    .on('mouseleave', this.hoverOut)
+                    .on('click', this.openTooltip)
+                    .transition()
+                    .duration(this.defaultDuration)
+                    .ease(polyInOut)
+                    .attr('width', this.widthFunction)
+                    .attr('y', this.yFunction)
+                    .attr('height', this.heightFunction)
+                    .attr('fill', '#00005a');
+                if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+                    return tempSelection;
+                tempSelection
+                    .append('text')
+                    .text((d) => d.value.toLocaleString())
+                    .attr('class', 'barText')
+                    .attr('font-size', this.fontSize)
+                    .attr('font-weight', '600')
+                    .attr('text-anchor', 'end')
+                    .style('pointer-events', 'none')
+                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                    : this.dims.height - this.margin.bottom)
+                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? 2
+                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
+                    .transition()
+                    .duration(this.defaultDuration)
+                    .ease(polyInOut)
+                    .attr('font-size', this.fontSize)
+                    .attr('font-weight', '600')
+                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this.xScale(d.value)
+                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
+                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                    : this.yScale(d.value))
+                    .attr('text-anchor', (d) => {
+                    if (this.afVariation === BarChartVariation.Vertical)
+                        return 'middle';
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'start'
+                        : 'end';
+                })
+                    .attr('dx', (d) => {
+                    if (this.afVariation === BarChartVariation.Horizontal)
+                        return this.xScale(d.value) < d.len + this.tickPadding * 2
+                            ? this.tickPadding
+                            : -this.tickPadding;
+                    return 0;
+                })
+                    .attr('fill', (d) => {
+                    if (this.afVariation === BarChartVariation.Vertical)
+                        return 'black';
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'black'
+                        : 'white';
+                })
+                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
+                    ? '0.35em'
+                    : '-0.25em')
+                    .style('pointer-events', 'none')
+                    .attrTween('text', (d, i, nodelist) => {
+                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
+                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
+                        : 0;
+                    const interpolatedValue = interpolate(oldnum, d.value);
+                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
+                });
+                return tempSelection;
+            }, (update) => {
+                // Update ids to bars
+                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
+                // Mouse interaction to updated loading bars
+                if (fromLoading) {
+                    update
+                        .select('rect')
+                        .on('mouseenter', this.hover)
+                        .on('mouseleave', this.hoverOut)
+                        .on('click', this.openTooltip)
+                        .attr('x', this.xFunction)
+                        .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                        ? this.yScale(d.key)
+                        : this.dims.height - this.margin.bottom)
+                        .attr('width', this.widthFunction)
+                        .attr('height', () => this.afVariation === BarChartVariation.Horizontal
+                        ? this.yScale.bandwidth()
+                        : 0)
+                        .attr('fill', '#00005a')
+                        .transition()
+                        .duration(this.defaultDuration)
+                        .ease(polyInOut)
+                        .attr('y', this.yFunction)
+                        .attr('height', this.heightFunction)
+                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
+                }
+                else {
+                    update
+                        .select('rect')
+                        .transition()
+                        .duration(this.defaultDuration)
+                        .ease(polyInOut)
+                        .attr('x', this.xFunction)
+                        .attr('y', this.yFunction)
+                        .attr('width', this.widthFunction)
+                        .attr('height', this.heightFunction)
+                        .attr('fill', '#00005a');
+                }
+                return update
+                    .select('text')
+                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
+                    .transition()
+                    .duration(this.defaultDuration)
+                    .ease(polyInOut)
+                    .attr('font-size', this.fontSize)
+                    .attr('font-weight', '600')
+                    .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                    : this.yScale(d.value))
+                    .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                    ? this.xScale(d.value)
+                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
+                    .attr('text-anchor', (d) => {
+                    if (this.afVariation === BarChartVariation.Vertical)
+                        return 'middle';
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'start'
+                        : 'end';
+                })
+                    .attr('dx', (d) => {
+                    if (this.afVariation === BarChartVariation.Horizontal)
+                        return this.xScale(d.value) < d.len + this.tickPadding * 2
+                            ? this.tickPadding
+                            : -this.tickPadding;
+                    return 0;
+                })
+                    .attr('fill', (d) => {
+                    if (this.afVariation === BarChartVariation.Vertical)
+                        return 'black';
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
+                        ? 'black'
+                        : 'white';
+                })
+                    .attr('dy', () => this.afVariation == BarChartVariation.Horizontal
+                    ? '0.35em'
+                    : '-0.25em')
+                    .style('pointer-events', 'none')
+                    .attrTween('text', (d, i, nodelist) => {
+                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
+                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
+                        : 0;
+                    const interpolatedValue = interpolate(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 === BarChartVariation.Horizontal
+                ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                : this.yScale(d.value))
+                .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+                ? this.xScale(d.value)
+                : this.xScale(d.key) + this.xScale.bandwidth() / 2)
+                .attr('dx', (d) => {
+                if (this.afVariation === BarChartVariation.Horizontal)
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
+                        ? this.tickPadding
+                        : -this.tickPadding;
+                return 0;
+            })
+                .attr('fill', (d) => {
+                if (this.afVariation === BarChartVariation.Vertical)
+                    return 'black';
+                return this.xScale(d.value) < d.len + this.tickPadding * 2
+                    ? 'black'
+                    : 'white';
+            })
+                .attr('text-anchor', (d) => {
+                if (this.afVariation === BarChartVariation.Vertical)
+                    return 'middle';
+                return this.xScale(d.value) < d.len + this.tickPadding * 2
+                    ? 'start'
+                    : 'end';
+            });
+        };
+        this.reshapeData = () => {
+            const toReturn = [];
+            if (this.loading || !this.chartData) {
+                this.placeholderTicks.forEach((key) => {
+                    const tick = { key: key, series: [] };
+                    tick.series.push({
+                        key: key,
+                        serie: 'loading',
+                        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);
+        };
+        this.evalColorVar = (colorVar) => {
+            return getComputedStyle(document.documentElement)
+                .getPropertyValue(colorVar)
+                .trim()
+                .toLocaleLowerCase();
+        };
+        // Handling x positioning of bars
+        this.xFunction = (d, i) => {
+            return this.afVariation === BarChartVariation.Horizontal
+                ? (d.value > 0 ? this.xScale(0) : this.xScale(d.value))
+                : this.xScale(d.key) + ((this.xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
+        };
+        // Handling y positioning of bars
+        this.yFunction = (d, i) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === BarChartVariation.Horizontal
+                ? this.yScale(d.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
+                : (d.value < 0 ? this.yScale(0) : this.yScale(d.value));
+        };
+        // Handling height for bars
+        this.heightFunction = (d) => {
+            if (!d.value)
+                return 0;
+            return this.afVariation === BarChartVariation.Horizontal
+                ? this.yScale.bandwidth() / this.dataWidth - (this.barGap)
+                : (d.value < 0 ? this.yScale(d.value) - this.yScale(0) : this.yScale(0) - this.yScale(d.value));
+        };
+        // Handling width for bars
+        this.widthFunction = (d) => {
+            return this.afVariation === BarChartVariation.Horizontal
+                ? Math.abs(this.xScale(0) - this.xScale(d.value))
+                : this.xScale.bandwidth() / this.dataWidth - (this.barGap);
+        };
+        // Setting dimension variable
+        this.setDims = (onlyHeight = false) => {
+            // Get title dimensions
+            const tempTitle = select(this.titleDiv).node().getBoundingClientRect(), tempLegend = select(this.legendDiv).node().getBoundingClientRect();
+            const prevHeight = this.dims.height;
+            if (!onlyHeight)
+                this.dims = select(this.chartDiv).node().getBoundingClientRect();
+            this.dims.height =
+                this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
+            return prevHeight != this.dims.height;
+        };
+        // 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 === 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;
+                this.margin.bottom = this.pixelSize + this.tickPadding + this.xTickSize;
+            }
+            else {
+                this.margin.left = this.getLargestText(fromLoading
+                    ? ['0', '10']
+                    : [
+                        this.minVal ? this.tempScale[0].toLocaleString() : '0',
+                        this.maxVal ? this.tempScale[1].toLocaleString() : '10'
+                    ]);
+                this.margin.bottom = this.pixelSize;
+            }
+            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;
+        };
+        // Adjusting y-ticks
+        this.setNamedTicks = (transition = false) => {
+            if (this.afVariation == 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.max(Math.round(this.chartData.data.xValues.length /
+                    ((this.dims.width - this.margin.left - this.margin.right) / 90 - 1)), 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 === BarChartVariation.Horizontal
+                    ? this.xAxisHandle.attr('display', 'none')
+                    : this.yAxisHandle.attr('display', 'none');
+                return;
+            }
+            let toCall, tickSize, handle;
+            if (this.afVariation === 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 == 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 === 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 === 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 === BarChartVariation.Vertical)
+                this.yAxisHandle.select('.domain').attr('display', 'none');
+        };
+        // Highlight bar
+        this.hover = (event) => {
+            select(event.target)
+                .transition('color')
+                .duration(20)
+                .attr('fill', (d) => {
+                return event.target.tagName === 'rect'
+                    ? this.adjustColor(this.colorFunction(d.serie), 50)
+                    : this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+            });
+        };
+        // Removing highlight from bar
+        this.hoverOut = (event) => {
+            select(event.target)
+                .transition('color')
+                .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(`#${this.barGroupID(d)}`)
+                    .datum();
+            }
+            else
+                this.tooltipData = d;
+            const tooltipBody = this.tooltip.select('.tooltipBody');
+            tooltipBody
+                .select('.tooltipHeading')
+                .html(this.tooltipData.key);
+            tooltipBody
+                .selectAll('div')
+                .data(this.tooltipData.series ? this.tooltipData.series : [this.tooltipData])
+                .join('div')
+                .style('display', 'flex')
+                .style('flex-direction', 'row')
+                .style('flex-wrap', 'nowrap')
+                .style('white-space', 'nowrap')
+                .style('justify-content', 'space-between')
+                .style('margin', '0.25rem 0')
+                .html((d) => {
+                return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
+            });
+            this.tooltip.style('visibility', 'visible');
+            this.positionTooltip(this.tooltipData);
+        };
+        this.closeTooltip = () => {
+            this.tooltip.style('visibility', 'hidden');
+        };
+        // Positions tooltip in horizontal mode
+        this.positionTooltip = (data) => {
+            var _a;
+            const width = this.tooltip.node().getBoundingClientRect().width;
+            // Single bar
+            if ('serie' in data) {
+                if (this.afVariation === BarChartVariation.Horizontal) {
+                    const diff = this.xScale(data.value) / 2 - width / 2;
+                    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('top', '-12px')
+                        .style('left', '0')
+                        .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
+                }
+                else {
+                    const index = (_a = this.mappedData.find(xPoint => xPoint.key === data.key)) === null || _a === void 0 ? void 0 : _a.series.findIndex(serie => serie.serie === data.serie);
+                    const barIndex = ((this.xScale.bandwidth() / this.dataWidth) * (index ? index + 1 : 1)) - (this.xScale.bandwidth() / this.dataWidth) / 2;
+                    // This should be where the x-axis starts
+                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
+                    // Creating adjustment for tooltip to not appear outside of chart
+                    const spaceToSVGEdge = 5;
+                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (this.xScale(data.key) + xStart + barIndex + width / 2) ? (((this.xScale(data.key) + xStart + barIndex + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
+                    this.tooltip
+                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + barIndex}px - ${50 + inlineAdjustment}%), calc(-100% + ${(data.value > 0 ? this.yScale(data.value) : this.yScale(0)) - 2}px) )`);
+                    this.tooltip
+                        .select('digi-icon-caret-down')
+                        .style('position', 'absolute')
+                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
+                        .style('bottom', '-12px');
+                }
+            }
+            else {
+                if (this.afVariation === BarChartVariation.Horizontal) {
+                    console.log('helloo');
+                }
+                else {
+                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
+                    const translatePoint = this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2;
+                    const yMax = max(data.series.map(elem => elem.value));
+                    // Creating adjustment for tooltip to not appear outside of chart
+                    const spaceToSVGEdge = 5;
+                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (translatePoint + width / 2) ? (((translatePoint + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
+                    this.tooltip
+                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2}px - ${50 + inlineAdjustment}%), calc(-100% + ${this.yScale(yMax && yMax > 0 ? yMax : 0) - 1}px) )`);
+                    this.tooltip
+                        .select('digi-icon-caret-down')
+                        .style('position', 'absolute')
+                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
+                        .style('bottom', '-12px');
+                }
+            }
+        };
+        // Once texts has fully loaded, we can recompute some sizes
+        this.recomputeTextSize = () => {
+            var _a, _b;
+            if (this.afVariation == 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.status.innerHTML = '<p>Visas som tabell</p>';
+            select(this.host).select('.tableButton').style('display', 'none');
+            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();
+                select(this.legendDiv).select('.legend').selectAll('.legendChip').remove();
+                this.legendDiv.style['display'] = 'none';
+                this.tableDiv.style['display'] = 'block';
+                this.setTableContent();
+                this.setTableDimensions();
+                select(this.tableDiv)
+                    .style('opacity', 0)
+                    .transition('fadein')
+                    .duration(duration)
+                    .style('opacity', 1);
+                this.chartDiv.style['display'] = 'none';
+            });
+            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.status.innerHTML = '<p>Visas som diagram</p>';
+            select(this.host).select('.tableButton').style('display', null);
+            select(this.host).select('.chartButton').style('display', 'none');
+            event.target.previousSibling.lastChild.focus();
+            const table = select(this.tableDiv);
+            const duration = 150;
+            table
+                .style('opacity', 1)
+                .transition()
+                .duration(150)
+                .style('opacity', 0)
+                .on('end', () => {
+                table.style('display', 'none');
+                this.chartDiv.style['display'] = 'flex';
+                this.legendDiv.style['display'] = 'grid';
+                this.initChain();
+                this.svg
+                    .attr('opacity', 0)
+                    .transition()
+                    .duration(duration)
+                    .attr('opacity', 1);
+                select(this.legendDiv)
+                    .style('opacity', 0)
+                    .transition('fadeout')
+                    .duration(duration)
+                    .style('opacity', 1);
+            });
+        };
+        this.afVariation = BarChartVariation.Vertical;
+        this.afHeadingLevel = 'h3';
+        this.afId = 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'
+        };
+        select(this.chartDiv).select('.chartSVG').remove();
+        this.maxHeight = (_g = 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.setDims();
+        this.setMinMax();
+        this.setMargins();
+        // Appending svg
+        this.svg = select(this.chartDiv)
+            .append('svg')
+            .attr('class', 'chartSVG')
+            .attr('aria-hidden', true)
+            .attr('role', 'img')
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
+            : 'Stapeldiagram')
+            .attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
+    }
+    initLegend() {
+        const rectSize = 18;
+        const legendChips = select(this.legendDiv).select('.legend')
+            .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
+            .selectAll('.legendChip')
+            .data(this.chartData.data.series.map(serie => serie.title))
+            .join('div')
+            .attr('class', 'legendChip')
+            .style('display', 'flex')
+            .style('flex-direction', 'row')
+            .style('align-items', 'center')
+            .style('gap', '0.25rem')
+            .style('cursor', 'default')
+            .on('mouseenter', (_event, serie) => this.highlightBars(serie))
+            .on('mouseleave', this.resetBarColor);
+        legendChips.append('svg')
+            .attr('width', rectSize)
+            .attr('height', rectSize)
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', rectSize)
+            .attr('height', rectSize)
+            .attr('rx', 4)
+            .attr('ry', 4)
+            .attr('fill', (title) => this.colorFunction(title));
+        legendChips.append('span').text((d) => d);
+    }
+    initToolTip() {
+        // Getting handle for tooltip
+        this.tooltip = select('#' + this.afId);
+        this.tooltip.select('.close').on('click', this.closeTooltip);
+        // Add heading placeholder for heading
+        this.tooltip
+            .select('.tooltipBody')
+            .append('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1)) // increment heading level by one
+            .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
+            .style('font-size', '1rem')
+            .style('margin', '0 0.75rem 0.5rem 0 ')
+            .style('font-weight', '500');
+        this.tooltip.style('visibility', 'hidden');
+    }
+    initEmpty() {
+        select(this.chartDiv).select('svg').remove();
+        this.maxHeight = select(this.host)
+            .node()
+            .parentNode.getBoundingClientRect().height;
+        this.barChartObserver.observe(this.chartDiv);
+        // Getting rem-size
+        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        this.setMargins();
+        // Appending svg
+        this.svg = 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');
+        // Hide unusable components
+        select(this.titleDiv)
+            .select(this.afHeadingLevel)
+            .html(`${_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();
+        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('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
+            : 'Stapeldiagram');
+        this.setMargins(true);
+        select(this.titleDiv)
+            .select(this.afHeadingLevel)
+            .html(`${_t.loading}...`);
+        // Waiting with observing for changes until transition to regular bars is complete
+        this.barChartContainer
+            .transition('position')
+            .duration(this.defaultDuration)
+            .ease(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 === 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 === 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$1)
+                .delay((...[, i]) => i * 150 + 400)
+                .attr('y', (d) => this.afVariation === 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$1)
+                .attr('y', (d) => this.afVariation === 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 = select(this.titleDiv).style('height');
+        select(this.titleDiv)
+            .style('height', this.prevHeight)
+            .transition('adjust')
+            .duration(400)
+            .style('height', height)
+            .on('end', () => 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 === 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$1 = max((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
+            ? max((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
+            : 0;
+        const min$1 = min([0, min((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
+            ? min([0, min((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
+            : 0;
+        this.maxVal = max$1;
+        this.minVal = min$1;
+        this.tempScale = 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 === 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) => this.barGroupID(d.key));
+        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 === BarChartVariation.Horizontal
+            ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+            : this.yScale(d.value))
+            .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
+            ? this.xScale(d)
+            : this.xScale(d.key) + this.xScale.bandwidth())
+            .attr('dy', () => this.afVariation == 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.initLegend();
+        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) {
+                select(this.titleDiv)
+                    .select(this.afHeadingLevel)
+                    .html(`${_t.loading}...`);
+            }
+            else {
+                this.setTableContent();
+                this.setTableDimensions();
+            }
+            this.transitionTitle();
+        }
+        else {
+            // displaying legend again
+            if (this.loading) {
+                select(this.host).select('.tableButton').style('display', null);
+                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
+                .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(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 === 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 == BarChartVariation.Horizontal
+                ? this.xScale.ticks().map((tick) => tick.toLocaleString())
+                : this.yScale.ticks().map((tick) => tick.toLocaleString()));
+            this.setValueTicks(true);
+            if (this.loading) {
+                select(this.legendDiv)
+                    .style('opacity', 0)
+                    .transition()
+                    .duration(400)
+                    .ease(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 === 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 this.evalColorVar(this.colorPalettes[input]);
+        else {
+            const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
+            if (index > 0)
+                return this.evalColorVar(this.colorPalettes[index]);
+            else
+                return this.evalColorVar(this.colorPalettes[0]);
+        }
+    }
+    // Resizing bar chart
+    resize() {
+        const newHeight = this.setDims();
+        //this.setMargins();
+        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 === 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.setTickInteraction();
+        this.adjustBarSize();
+        this.adjustBarText();
+        if (this.tooltip.style('visibility') !== 'hidden')
+            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;
+    }
+    adjustColor(color, amount) {
+        return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
+    }
+    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 = 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 = 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" style="width:100%" 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 = select(this.tableDiv);
+        table.style('display', 'flex').style('height', '100%').style('width', '100%');
+    }
+    // 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 (h(Host, { key: 'adbf9f1c26a8816a8d4b585b0fc7a0b9100bf252', ref: (el) => (this.host = el) }, h("div", { key: 'ee28dc5914be751e08c73253b80fd257c2e17bbb', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '6a0b051d3c26e9c34fb59d4ee323a10d1cb542e1', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '9e11623f0b35f394dc3655067625a37771f648d1', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '6e00e771521a10c0213ae6267ea2879c7ccc4b3c', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a1eec7299c9cd273ceffa1f1689ee0c6297ce0a1', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '5361af6d17e4cd7d6217afd48c4a474fd905c8de', slot: "icon" }), "Visa diagram"), h("div", { key: '2efe2244c2105390580779f60a7c1accd5135d49', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '48f2316efe396309fd73510a2eea011c137e24ed', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '4f2f494517979cbb9de43945d5ffe17acbe6c814', class: "chartTooltip", id: this.afId }, h("div", { key: '36db97d0dcd4e2009cd33b4125b631eddae039ae', class: "tooltipBody" }), h("digi-icon-x", { key: 'b3ac9ec4b6cd6c2c666d475929c10c0aaba2b9e1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'f96ed8b4c527ba32de5dd5bdb58c367435ecbc04', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '3911352915f02a33231c2e0604a5073fb7203bd3', class: "legend" })), h("div", { key: '29c613f6af6e23b05748e230bad4c00156f30fd6', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+    }
+    get hostElement() { return 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;
 
@@ -251,7 +1855,7 @@ const Header = class {
         return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" })), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
-        return (h("header", { key: '541675d708db44efd16a09721b27dcbbe44e2724', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '419fba070dc583e81ad3ce29a88581ca736fe656', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '679370ad7ccfde35f14549e63cbdc35b35024ac0', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '072768a2e0754f294fa2617828c533f8c426fb40', class: "digi-header__border" }), h("slot", { key: 'ecf54055fbee49802ecf188a36a4868416e948f2', name: "header-navigation" }))));
+        return (h("header", { key: '9dbcc11c53c815ad8f10b72ed700db1ad5bbcce4', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '15f627b8cdf88ba6a0190ddc077982a5f2a0139a', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '52e76fbed6437613b952a0e2245a0f8b01bbd25c', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: 'a3513f9383d0570d8381a5cc0e4f9362aa6dd065', class: "digi-header__border" }), h("slot", { key: 'd4eb4a6b292958a512ca9ec61b9cd261a0576cfc', name: "header-navigation" }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -359,7 +1963,7 @@ const NavigationAvatar = class {
         if (this.afShowPlaceholderImage) {
             this.afHideImage = true;
         }
-        return (h("div", { key: 'c6a31dcf973d0838e6fcc15c46df3367a7ffbf05', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'd89ff3dd87bad2f574c9dc2332ab01cca92f14f7', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: '578c4845722980eef2dcdd089e34bd74552f1c12', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'a607c3b7d8adad5e099348c2f934c11f6ca90f72' }, h("title", { key: 'e7bcf18ab68a3747bdfb67cd0099f361e1bdfc9b' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: 'd89f15f40ac637eb8b5a469580fa99949f6e496b', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '0fd876bc2059fbbafc6c676721ab72121721262b', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: '01a97ee947331bd9baf206bbc9dc2325c53f9015' }, h("title", { key: '2f96d6322af1e8926371a5971300fc229db60217' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'a56cb66e622b3eb8979b90fe33f051bf35a0a937' })));
+        return (h("div", { key: '7abfbd7b1e1933cef757ab4a4ba169618a6189d9', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: '7d9e2d755739a39c0fed8acd21ca17e0384d0b64', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: 'e0b721cc0ec670ec743bd6d0ec497fb58baf0f5a', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: '38d57fc3adb6ebb3b7c9f2683327960c0e1bbbc7' }, h("title", { key: '967f77cdc4194a063fafb6a7c684e29d7e1cbdf3' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: 'c59653a35e8a1b441e518c482f047c483c8b68d7', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: 'e32d280aa3408a1e357afbe626304b56139238c1', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: 'e472df32ef3fc8354447df8b2b23815198d3b5cf' }, h("title", { key: 'e8191617054592c9a1216fb97ab3689c402e922a' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'c35f521b2882d8033241c9dc1e2a2b5972a00a74' })));
     }
 };
 NavigationAvatar.style = DigiHeaderAvatarStyle0;
@@ -526,10 +2130,10 @@ const HeaderNavigation = class {
         };
     }
     render() {
-        return (h("div", { key: 'a2645e18fa313178d65cd9a82ccee2e5121e9d15', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '78532433a10d7b25f84ffab92c17edd0d89c1eda', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: '318e69263ceba3cea1b2b5284953ea219641d3bb', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: 'bd4916bbdd14c6587ca283b0df6d70bdaf5f28e7' }, this.isMobile && (h("div", { key: '551a7f881618137861e3b4a40b66d9e4f835fa3c', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: 'bb011ce31ad95e5ad4a78a1ef71344d11f61f310', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
+        return (h("div", { key: 'edf9df295359152406d7de1457db228066a0f51c', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '1fbab82a18578974b1cd3e13631341d8a2b36db5', onAfOnChange: (e) => (this.isMobile =
+                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: '9087a9de027d63f53a9cdb10a78e702f82a4d744', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: 'd5a08669b54caceb2a580074b151766b6f4ddc9e' }, this.isMobile && (h("div", { key: '07e5b8226dd03c8ef26ea58d97b70bfb75b3154e', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: '93c0e8b5021b5d64df7fad12e4882cb54670b5d8', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
                 this._wrapper = el;
-            } }, this.isMobile && (h("digi-button", { key: '29de9286c4d31a0fa82eff4eb433cec6e207daaa', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: '3cd3af6909b727e1545c5feb74ea4a67f6cac73f', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
+            } }, this.isMobile && (h("digi-button", { key: '4cee082ef1733140aa587abb0650ee9c9350aa40', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: 'ecf0e56b804641ce1c6b4c8af0d24bf470a1a4cc', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -553,7 +2157,7 @@ const HeaderNavigationItem = class {
         };
     }
     render() {
-        return (h("div", { key: 'f70697deec493a88ae225787e33c9781c892b1b5', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: 'de6147b23d7be7aa68d51e293db9ecb9e2fd4d3e' }), h("div", { key: '3ebd2fe503efff9bab1ebf460cb60bcb8e9c878f', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
+        return (h("div", { key: '21fd3ec068563fc546bea986e10b1256018d3b3a', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: 'c518bf00a4e445f64c246575ddd7dd3ac505a5a3' }), h("div", { key: 'd5701be9f10650fd075ed4ae57a9da14e884f8af', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
     }
 };
 HeaderNavigationItem.style = DigiHeaderNavigationItemStyle0;
@@ -567,9 +2171,9 @@ const HeaderNotification = class {
         this.afNotificationAmount = undefined;
     }
     render() {
-        return (h("div", { key: '95f98008df9604a1d8d3f99abc0ebd37ec4b149e', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (h("span", { key: '7de1e2584744df0aa1f1481a1bae8f6b50ac70a0', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
+        return (h("div", { key: '9fdf78a7fccb3604d0472f16874140892d8b9e08', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (h("span", { key: '0ad609dcffcf41c1d35b303eb788d205d599e101', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
             ? this.afNotificationAmount
-            : '+99')), h("slot", { key: 'a44dd632a78363088c6fdb97a6c8707a70dc69cf' })));
+            : '+99')), h("slot", { key: '8c3b44864f9ccf3a1d6741ecd9c37d493861d13c' })));
     }
 };
 HeaderNotification.style = DigiHeaderNotificationStyle0;
@@ -587,11 +2191,11 @@ const IconBars = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '36a3ded67ee1a01a4a513828ce2b73c846fd7351', class: "digi-icon-bars", width: "22", height: "26", viewBox: "0 0 22 26", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'e524e8347bd4620d9f8283a73b4f22322033e369', class: "digi-icon-bars", width: "22", height: "26", viewBox: "0 0 22 26", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined }, this.afTitle && h("title", { key: '9631d73ea1db8ac75396394848cabdba52c6e2e1', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7e3a7d1c4a552919ec9eb62e89c1f5471a8cc85c' }, this.afDesc), h("path", { key: '2e98ef9ec07d1dda018df2c892a900c4618ddcfc', class: "digi-icon-bars__shape", d: "M0.8,6.9h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,3.4,0,3.7,0,4.2v2C0,6.6,0.4,6.9,0.8,6.9z M0.8,14.8 h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,11.2,0,11.6,0,12v2C0,14.4,0.4,14.8,0.8,14.8z M0.8,22.6h20.4 c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8c-0.4,0-0.8,0.4-0.8,0.8v2C0,22.3,0.4,22.6,0.8,22.6z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined }, this.afTitle && h("title", { key: 'f129dab77470e6db57fc780dda52b49f7c536bae', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'aea402ff62a0357936a5acc3bbaf92a0e7a198e8' }, this.afDesc), h("path", { key: 'd75ba6cd55abcbed05a58fbb0390664d01b44be5', class: "digi-icon-bars__shape", d: "M0.8,6.9h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,3.4,0,3.7,0,4.2v2C0,6.6,0.4,6.9,0.8,6.9z M0.8,14.8 h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,11.2,0,11.6,0,12v2C0,14.4,0.4,14.8,0.8,14.8z M0.8,22.6h20.4 c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8c-0.4,0-0.8,0.4-0.8,0.8v2C0,22.3,0.4,22.6,0.8,22.6z", fill: "currentColor", "fill-rule": "nonzero" })));
     }
 };
 IconBars.style = DigiIconBarsStyle0;
@@ -609,15 +2213,81 @@ const IconBellFilled = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '202db166f12c76f609cef4402c95629990b1c8c7', class: "digi-icon-bell-filled", width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '4caa134b894076def8f1bb98c6ca5e4bf9975690', class: "digi-icon-bell-filled", width: "48", height: "48", viewBox: "0 0 48 48", "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 && h("title", { key: 'd4b7ca9ac73539939bb93adb3ff98bdbcc0a9f3b', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '09e5c4bb3c96cec014925777ed94e0687087302f' }, this.afDesc), h("path", { key: '1973f1e388dbda11e49f73bb78f9b57a310ed289', class: "digi-icon-bell-filled__shape", d: "M23.555833,48 C26.8859842,48 29.5872534,45.3140625 29.5872534,42 L17.5244126,42 C17.5244126,45.3140625 20.2256818,48 23.555833,48 Z M43.8639093,33.9646875 C42.0423204,32.0184375 38.6339126,29.090625 38.6339126,19.5 C38.6339126,12.215625 33.4972582,6.384375 26.5710718,4.95375 L26.5710718,3 C26.5710718,1.3434375 25.2209086,0 23.555833,0 C21.8907574,0 20.5405942,1.3434375 20.5405942,3 L20.5405942,4.95375 C13.6144078,6.384375 8.47775338,12.215625 8.47775338,19.5 C8.47775338,29.090625 5.06934557,32.0184375 3.24775666,33.9646875 C2.68204582,34.569375 2.43124734,35.2921875 2.43589641,36 C2.44633297,37.5375 3.65978272,39 5.4625146,39 L41.6491514,39 C43.4518833,39 44.6662759,37.5375 44.6757696,36 C44.6804187,35.2921875 44.4296202,34.5684375 43.8639093,33.9646875 L43.8639093,33.9646875 Z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: 'a7a141cce0250d5139abb2a4e9a145d3f83eca36', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'fc5344322bfe51ce2194269d16abf7cef6b136bd' }, this.afDesc), h("path", { key: '018841107c2b6efb83df7c5033427bfabc1f43b0', class: "digi-icon-bell-filled__shape", d: "M23.555833,48 C26.8859842,48 29.5872534,45.3140625 29.5872534,42 L17.5244126,42 C17.5244126,45.3140625 20.2256818,48 23.555833,48 Z M43.8639093,33.9646875 C42.0423204,32.0184375 38.6339126,29.090625 38.6339126,19.5 C38.6339126,12.215625 33.4972582,6.384375 26.5710718,4.95375 L26.5710718,3 C26.5710718,1.3434375 25.2209086,0 23.555833,0 C21.8907574,0 20.5405942,1.3434375 20.5405942,3 L20.5405942,4.95375 C13.6144078,6.384375 8.47775338,12.215625 8.47775338,19.5 C8.47775338,29.090625 5.06934557,32.0184375 3.24775666,33.9646875 C2.68204582,34.569375 2.43124734,35.2921875 2.43589641,36 C2.44633297,37.5375 3.65978272,39 5.4625146,39 L41.6491514,39 C43.4518833,39 44.6662759,37.5375 44.6757696,36 C44.6804187,35.2921875 44.4296202,34.5684375 43.8639093,33.9646875 L43.8639093,33.9646875 Z", fill: "currentColor", "fill-rule": "nonzero" })));
     }
 };
 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) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '227202fc5131633b75fd4c3e236e2bf9b3d1de3f', 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 && h("title", { key: '3b62fc5d4c3f00725b32ff48779fbba0d665a5f3', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'b199a2c7bc9b60862b7b14c8c52da9b52abf74bc' }, this.afDesc), h("path", { key: 'ee4cab75b82de255dd4a6be364afda5be733a2c0', 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) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '760d6e6b80959aaee7ee8f307c2590be3f3de85b', 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 && h("title", { key: 'b2d30a6233f5f50114606f5361228ecf2f901f85', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '53e7007bd6b1dc31d913a48c71b4b649e82ba894' }, this.afDesc), h("path", { key: '8c8438b6bf981bc77882eb6e1e83e28f63cc60fb', 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) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '49381e424db9493376da3795eec0328cd4996865', 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 }, h("title", { key: '2ac643086eba86797c96d4fc38509fce464aef57' }, "Chart"), this.afTitle && h("title", { key: '94ec0760c6df319132dd2d0d4080d19e99da13ac', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '619a23ab4abedbddc53c5a54069936d8b8809ead' }, this.afDesc), h("defs", { key: '4a2d13da41449331733d94130e9c2eec15a297bf' }, h("polygon", { key: '6fddba10a5210b68be547e057632915591ea4ac6', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("polygon", { key: '7d1431fc9795cd30cfad9b79e668ae7ae5d5d6db', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), h("g", { key: 'da99c7c359c18f717e3c518fa677ce3c462a6c11', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'a0e3944ab9b0195b455bd5070a59619b8bb7deae', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, h("g", { key: '46d262185468edbc32107cd67604273b6d08e5b9', transform: "translate(1013.063248, 823.768116)" }, h("g", { key: 'e851ea1020eb8e5f0262ad4341de797a9367e4c6', id: "Group", transform: "translate(-0.000000, 0.000000)" }, h("path", { key: '3fad1b5a6c6e3b25e2660486f7983c244e963bcf', 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" }), h("path", { key: '3291ffeda1bf2f0cb4b748c44e6725198307a15c', 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" }), h("path", { key: '115ea0659bd4c07b236746f83fc13114914cd943', 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" }), h("polygon", { key: 'f177140c61e7aaaf4d4e13fc4ac6b6e9d8b4486a', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("g", { key: '9c7ed481fa12a725c37e611066e4288c93fb0f1b', id: "Clip-4" }), h("polygon", { key: '31d1a41e4057eb4c1dee2f260e8cf7431fc03570', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), h("g", { key: '6eb2d4fcd2a590a3dbf42110db739913f936e87a', id: "Clip-9" }), h("path", { key: 'be545437d42e976d3ec8c4f7104bb59006702a81', 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;
 
@@ -631,11 +2301,11 @@ const IconMinus = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '16bcc71cfe986f9a11017261c24ec4bd2667fe59', class: "digi-icon-minus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'df3b391df11c73716f7c3e92a83559c9698fcd88', class: "digi-icon-minus", width: "22", height: "26", viewBox: "0 0 22 26", "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 && h("title", { key: '047e1f072e32a8ff127fd348360896ec40b9ca45', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '2bf5112ca0dc1f6b2277beced4d9e76c484a48e1' }, this.afDesc), h("path", { key: '006ee074160f1513300129da5a8b17ce447835fb', class: "digi-icon-minus__shape", d: "M21.2,13c0,0.7-0.5,1.2-1.2,1.2H2c-0.7,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2H20C20.7,11.8,21.2,12.4,21.2,13z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '777efa47027c7800c2b998c86536c51b5a3ed126', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'ac834cf3f5cb13176e11bc0797fe81575aa9196e' }, this.afDesc), h("path", { key: '4959d33361d854aae8a5f56b72fb93d6957d2051', class: "digi-icon-minus__shape", d: "M21.2,13c0,0.7-0.5,1.2-1.2,1.2H2c-0.7,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2H20C20.7,11.8,21.2,12.4,21.2,13z", fill: "currentColor", "fill-rule": "nonzero" })));
     }
 };
 IconMinus.style = DigiIconMinusStyle0;
@@ -653,15 +2323,37 @@ const IconPlus = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '245e229f5cec7671f37f5500cfb7212ebced6d61', class: "digi-icon-plus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'b6afe6a97d954ac433185ccbd7bbd01f07440752', class: "digi-icon-plus", width: "22", height: "26", viewBox: "0 0 22 26", "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 && h("title", { key: '3cb67defae09e9fdf28aa5272237b42e05d1139c', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7820f81f821aa310abdcc02e5c1eabffa37f933a' }, this.afDesc), h("path", { key: '5596c5b4ca49f77d18d638c65c3f656492d1d15f', class: "digi-icon-plus__shape", d: "M21.6,13c0,0.7-0.5,1.2-1.2,1.2h-7.9V22c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2v-7.9H2.3c-0.7,0-1.2-0.5-1.2-1.2 c0-0.6,0.5-1.2,1.2-1.2h7.9V4c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v7.9h7.9C21.1,11.8,21.6,12.4,21.6,13z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '09c039e783e217a1f34207d1c8aa2270042c2671', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'db57e12e8bd44bb7f1be5ad9fbd3e200011ddb1e' }, this.afDesc), h("path", { key: '3836bedd90174e5341bcb3f15936998fef71fc5e', class: "digi-icon-plus__shape", d: "M21.6,13c0,0.7-0.5,1.2-1.2,1.2h-7.9V22c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2v-7.9H2.3c-0.7,0-1.2-0.5-1.2-1.2 c0-0.6,0.5-1.2,1.2-1.2h7.9V4c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v7.9h7.9C21.1,11.8,21.6,12.4,21.6,13z", fill: "currentColor", "fill-rule": "nonzero" })));
     }
 };
 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) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '4786db5378097c489981fcc788b6560d6bf38f1d', 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 && h("title", { key: 'c27b559e06da683825686a6ae9d4e76e7b152f17', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'aec9b5919da2ae9fd6bcd754408c2777164a6dd1' }, this.afDesc), h("defs", { key: '751e36ccf6e127f1c74206d7fef08a7d480ffca3' }, h("polygon", { key: '5b0a978a3a0c8afbbed7edfb6f1db2791942d8fa', points: "0 62 62 62 62 0 0 0" })), h("g", { key: '2367bb2a0f352c6f9182c9fddd3b6a3eab3fd3bb', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'd265f8643ea91dcdef194d07582e3b516960609d', transform: "translate(-302, -975)" }, h("g", { key: 'ce3c7606bb9d95bffd0556a3d151ef35b28814ee', transform: "translate(302, 975)" }, h("polygon", { key: 'af7c3c21ac726d85d521b09ff55f2a76529ae97f', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), h("g", { key: '13046d43c2c6fe73bb9fb97da24a40b6a068f564' }, h("path", { key: '62280c648b9684305a85971e63eafc6adeea4a9d', 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" }), h("polygon", { key: '714427db3379130626bce5c7df190d05afd4f3f6', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), h("path", { key: '9ec058b7bc95aa07fbeff80fbd6e79858d25bbfc', 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" }), h("polygon", { key: '2eb725f13c84b5db12c18d55a6bfb820772bafff', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), h("path", { key: 'db21e2a9b2ae335453ee3189611cef6041524b9b', 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" }), h("polygon", { key: '481832a7ad184666e28445ba00b032f5be25579a', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), h("path", { key: 'dbaca07a25078adbedeeec302c9bb452017949e5', 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" }), h("polygon", { key: '3acdf59fe7528cb8ca70e4544f9c3f25b08ee18a', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), h("path", { key: '9ee20aa7857de556eb7934892a266cc5d92d8588', 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" }), h("polygon", { key: 'c751893e0c7b38a65ea0a4e5f6cd99525436b4a7', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), h("path", { key: 'ff673950c5f2f196e99ab2fa450bf845746669b1', 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" }), h("polygon", { key: '4f671379f8d4f90c97152a8827647c1f35a71964', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), h("path", { key: 'c81fed8a00122a0ae2a9dac6e264dd29166b4f5d', 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" }), h("polygon", { key: 'b8f5e6c5401efe1a6446548adcdc30c775e6a266', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), h("path", { key: '1ee7b68064ea19a418cdfc80a16f4872848833ff', 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" }), h("polygon", { key: '10ea08dca37173581899e07cdc0a97d9d493945d', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), h("path", { key: 'e33ffe9dc393ad3389b0f43b84fa5cf2dbc45620', 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;
 
@@ -675,11 +2367,11 @@ const IconX = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '6e61c4e863c5d212771b7084db33b89d7d9598ee', class: "digi-icon-x", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'dc4b27f5543f593528e96f621a3ff96ddc83eca1', class: "digi-icon-x", width: "12", height: "12", viewBox: "0 0 12 12", "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 && h("title", { key: '5cb35a0cc148b0af375625e1fd6c458889c0ac81', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '092097471c2f6584eb0c3eb79fe2c9ae2edc181d' }, this.afDesc), h("g", { key: 'c3bf528af06f4858a42f930b14e66702e463f00c', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, h("path", { key: '70643cda1f046f7761d70d20dda9ea52f7a62131', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '43a1d6c995f701463b8626942f9ba74bbf590391', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'b9e9fec06868fa57363d2fc3af7de658013d5500' }, this.afDesc), h("g", { key: 'b54d2c345a9dbdc5059155e5f6866930412d1785', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, h("path", { key: '31040e7163a437c4d35fefe71d1dc7c0c029cc0c', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
     }
 };
 IconX.style = DigiIconXStyle0;
@@ -714,7 +2406,7 @@ const LayoutBlock = class {
         };
     }
     render() {
-        return (h("div", { key: '66cafb951595d804b9f6621553416fe6fb97536e', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === LayoutBlockContainer.NONE ? (h(Fragment, null, h("slot", null))) : (h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, h("slot", null)))));
+        return (h("div", { key: 'fed69dbc68c86a1e48b16c2954e9044e102c976d', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === LayoutBlockContainer.NONE ? (h(Fragment, null, h("slot", null))) : (h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, h("slot", null)))));
     }
     static get watchers() { return {
         "afContainer": ["containerChangeHandler"]
@@ -758,7 +2450,7 @@ const LayoutContainer = class {
         };
     }
     render() {
-        return (h("div", { key: '7e97262e534353f37db571b77dc5401043afa76f', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: '8bf28d6b937194b2bb25684f5b3abcc1828f77ec' })));
+        return (h("div", { key: '64b3b3ea7da2545fc8d46491b2c6de903b853e40', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: 'd4f23bb4362e9edfb3575a7cbdceaaf1e04b68e8' })));
     }
     static get watchers() { return {
         "afVariation": ["variationChangeHandler"]
@@ -847,11 +2539,11 @@ const MediaImage = class {
         };
     }
     render() {
-        return (h("host", { key: 'e12a7121e8ec91455dc32e83e9566d8de794596e' }, h("div", { key: 'ac7b584f5320abb6d275262c005318b8deeb3c8e', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
+        return (h("host", { key: '0700225082606909705a197d31e633e38ca0061e' }, h("div", { key: '446b1d9d42d5953913d03aaa88091af0cb75866c', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
                 '--digi--media-image--width': this.afWidth
                     ? `${this.afWidth}px`
                     : null
-            } }, h("digi-util-intersection-observer", { key: 'cab10af769a1edd794e8d1a14bb61cbe6d334c33', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (h("div", { key: 'c64bf7722ce2f68c2541b318851fd1c6e0029f03', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), h("img", { key: '8a3a904a353f69a1b923ed400bea0afebce1c4c6', class: "digi-media-image__image", onLoad: (e) => this.loadHandler(e), src: this.src, alt: this.afAlt, "aria-label": this.afAriaLabel, height: this.afHeight, srcset: this.srcset, title: this.afTitle, width: this.afWidth, loading: this.afUnlazy ? 'eager' : 'lazy' }))));
+            } }, h("digi-util-intersection-observer", { key: '1a91202f732bb74d1662ea2cbe4d1f9f8b92210b', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (h("div", { key: '1ed01d18e9f561d7c8ff503c5e657389a1eb5331', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), h("img", { key: '13cb1cc60eb37ab68e512bbccc3a1f5dc6acb29d', class: "digi-media-image__image", onLoad: (e) => this.loadHandler(e), src: this.src, alt: this.afAlt, "aria-label": this.afAriaLabel, height: this.afHeight, srcset: this.srcset, title: this.afTitle, width: this.afWidth, loading: this.afUnlazy ? 'eager' : 'lazy' }))));
     }
     static get watchers() { return {
         "afSrc": ["srcChangeHandler"]
@@ -876,7 +2568,7 @@ const NavigationSidebarButton = class {
         this.afOnToggle.emit(this.isActive);
     }
     render() {
-        return (h("digi-button", { key: '0cc1e3d42d54053ba6a73a8658eff13b5e13fc61', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '7c66cf2c35fd66b18e850e54b857e352069c87c8', slot: "icon" })));
+        return (h("digi-button", { key: 'bb1d17280dbfbc8d0bd4fe3e889eb9e3f3872554', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '63777a5cae4260234a8473efc3a2a5c3ee997aa7', slot: "icon" })));
     }
 };
 NavigationSidebarButton.style = DigiNavigationSidebarButtonStyle0;
@@ -1042,7 +2734,7 @@ const NavigationVerticalMenu = class {
         };
     }
     render() {
-        return (h("nav", { key: '09adacd9e3d3b39226148431bd8ac025f3b6d5d4', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '87c7454dfb753c4df6b0c8aa5a41633ad3463ca4' })));
+        return (h("nav", { key: '707f9bd95de39cba4ef04b193ededcb3ed554a60', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: 'd061ffc5128d73222b7c5221655de7ac89b54828' })));
     }
     get hostElement() { return getElement(this); }
 };
@@ -1163,24 +2855,24 @@ const NavigationVerticalMenuItem = class {
         }
     }
     render() {
-        return (h("host", { key: 'b466ce9111a5e0dac19daf8903a753c78eb5a0a0', class: {
+        return (h("host", { key: '49aa08ddb4869607c0e082fe2f191a7d43682e02', class: {
                 'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                 'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
-            } }, h("div", { key: '55ecf36a90033235cfa8f4394773e868549ae78a', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '788d539b5b090a9af9d6f8667ad1d8d6136af245', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: 'd5c04026c5c25445b8cae01c0a0809839bc7b03b', id: `${this.afId}-link`, href: this.afHref, class: {
+            } }, h("div", { key: 'd9756b71f2e97881fc219982ffff5b1c5773c469', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '97bda7e01039ead9ed4183de3872b6e211a4afcd', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '2230aef6d565381986f006c9d783467a2f212fb4', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__has-subnav': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive,
                 'digi-navigation-vertical-menu-item__link--expanded': this.activeSubnav
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '8f5f0e788d6441ed9c945603ae135ba35f95e556', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '63bd8733d523416d8fdea6498d7af8d8ad5c2737', name: "icon" })), h("span", { key: '47a4175a5a6d9ceb79c494f1fb696b5e73b50ff2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'a99a1a1b19bb755809f68b10ed3e3ed57c6990ed', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '24a3bc5e91bd52454c7d3bac518c95b541748097', name: "badge" }))), h("button", { key: 'e77f10a770377161f2a1eaab942331acf8664c0c', type: "button", id: `${this.afId}-toggle-button`, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '4679ce4fced2a92439b22a30fecc2b12fda75a3e', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'e4220f646544acb4b683645828bb1d3cfe962e6e', name: "icon" })), h("span", { key: '4871eea272d8c693525e44b6412c5cd8441011d2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'c1bcaa36115dc4162e1363d000b0c56ec6c9da71', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '1726fe5f4d6986202b6a0a8d857cf298c0187b6d', name: "badge" }))), h("button", { key: 'f889f0b40a91c3383f7bc4776e315b9f05fb6077', type: "button", id: `${this.afId}-toggle-button`, class: {
                 'digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--toggle': true,
                 'digi-navigation-vertical-menu-item__button--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: 'ba7281a9f65c7775bb4c80b8c60f41518a6e2506', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'd9bffd289a04e26e0f18b03ec337081f754da342', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '4f705d7bf6fcda106628ca60aac33b7a1d6a5c32', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '60951bd35331a6d121ad4dea6c1bbdf1c6fe18aa', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '7475bc63e5282040083ea78ed6c69b16eed03c48', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '0e8c0ad4839f3386e293ff0b56d6fcf8218ef4ca', name: "icon" })), h("span", { key: '09a30d103f70fcaf1c2d2733371bfd80a3e89cb3', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '2b4df3150e64e6a26abb802e6a3edc40b3925a32', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'bbf167346ad3aaa9475be0af73cef02bc1488f4a', name: "badge" })), h("span", { key: 'ee3545bd40e6770dcb0b11b8a4b19b47f6abcc60', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'e1b81b7a54def3cc7b69c4461370444cb8a42f1e' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: 'f42c85f453bf38d14f21d99f9ef4ccc82cd14c43', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: 'f3db75b42c7f9c59b97287efdc5a7b9e25bdddb1', id: `${this.afId}-link`, href: this.afHref, class: {
+            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: 'd2c152b11155990747050e5acc78e0b5b6f50c56', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '96506ad5c333b6435d983ca08dbafc737b6bed65', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '09118924d7fc105c4c3f874acd9753dcdd5336a7', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '4c40fc170c3652c1f9b161c808678e8e90c6ec90', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: 'de2993434859e557bc50d2533f3e17dd717a8ae3', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '8c8ed94ef19e7ad6c1123a398bcc73c9515163c5', name: "icon" })), h("span", { key: '4137fee1a296d4125f0d67b8eb5264089a16cdb2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '80b66cf648e4c8f9ce2dba5c9b1cb3d8a452fd1d', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '059cded27f0e4fec6dba9799766f9ac6839a3815', name: "badge" })), h("span", { key: '0bb64b392dc3faedc7627d779a8f73e87cc827f7', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '5cfaf39da6d8f3cc9377db4f111c046d0c719111' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: 'bb89a5b1dd0bc2e29a32f913a5bb5de07e53cacf', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: '68bd1309d87a81d0d4d37c601b7cfba140c9e364', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'a11026077ffb74925488f1e84a00ea35fa2708c5', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '498b31c99a2064a5f5861a776ac4591e9e8fe868', name: "icon" })), h("span", { key: '551fc9b44157817dd60d1a0d65bea2d4f505ff8d', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '98b9083a6c9a5970883771cb111504cfc0adc36a', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'f4ecb70745f7102ac6f6d0a1921349a9d7efdfbf', name: "badge" })))), this.isActive && (h("a", { key: '59e0478351aaa62f1b7988d4ba623a295b325f35', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '09c92641eaac60d11ffa73fcd72479b06f982239', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '7bf307c7af01c7e26aed7b0f9df0c0296c073b93', name: "icon" })), h("span", { key: '9889e0ed126b1267e74e38d06041bdbf646069e0', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'd02acd695ac86a1b833c3cb56dda435ce5adc52b', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '61810faa0ded36b125b6fc373f21573277c5887c', name: "badge" })))), this.isActive && (h("a", { key: '269cc3b0890d2acadaba53ff95a13c03dac7a59c', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'dfd18536c7e5b0acaf4dcc23e2734841efee94d7', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '9c478aed7b2b39d04e196d29c74d3ddb39d5feb6', name: "icon" })), h("span", { key: '1e9f35bde837c753b65c85d83e3226e8e61c7bcf', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '663279bcdd5959c795124b015086ea85d2706847', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '492b55cedb0248ef16b2e41e55bcd41a4e22c600', name: "badge" })))))))));
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'a0210c47b9d693708b643a7d507f11238250b6eb', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'f055e1d5a0d043014b3d328db388d57e4c8830b5', name: "icon" })), h("span", { key: 'bfb4e9081287bc48964e5d228a97e13d92b0ee55', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '926081417f5d2b4315ae1a574a21e61cd8844fd2', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '7326fa2dd373941428968576f5c024ee4dcb0dc4', name: "badge" })))))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -1261,7 +2953,7 @@ const TitleLogo = class {
         };
     }
     render() {
-        return (h("div", { key: '682388427086c76a9abb42f7cd307bbbd1f85515', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '21702025ddd9cb57f8ef0722ef82c3bb1a800771', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'b61c478c0c97cd09eefea16144861ef66cdd5add', class: "digi-title-logo-symbol" }, h("svg", { key: 'ab5c1765934dfb7d3d4c1d8435e011c729b4e055', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: 'cc9bf81bf4dee33ba7a6d0a83014c233c96bff65', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '184a1438f63168d9ac66f64b051b5709266bffcc', class: "digi-title-logo-name-wrapper" }, h("slot", { key: 'f79f53a1307bedbdcb6959f1eb394e2378fad2ef', name: "logo-one-row" }), h("slot", { key: '7343c9a47863f42368e240da59ef7626dc812cf3', name: "logo-two-rows" }))));
+        return (h("div", { key: '4d21cfa7a3059c4538bb5f6fa47a0d8d1c0c1182', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '39dd873abfd559823d5d0c88a277b2328dbd1835', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'a0947125f614676368e66fcbf598ae2204fac7b6', class: "digi-title-logo-symbol" }, h("svg", { key: 'bb4f84686aa5bebeb54f28ed5830d1354ca613dc', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: 'beede4168eae81ae996e1ac11076726d438c1a46', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '77b5dcb0ea016fea68c2e931a2c0386b02df4988', class: "digi-title-logo-name-wrapper" }, h("slot", { key: '74d5ffcfa2c12b93d6481ffe4c55352d1dea08c5', name: "logo-one-row" }), h("slot", { key: '507bf4855ca57002715eef469a61f65c725f520a', name: "logo-two-rows" }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -1281,54 +2973,11 @@ const Typography = class {
         };
     }
     render() {
-        return (h("div", { key: '5db67ad20bda5f5523f8ecb2d4dab10b78c5f2e6', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, h("slot", { key: '4950037182ec2f186c0c14b38027ce3e9906f45f' })));
+        return (h("div", { key: 'c88e6cbcee677d822129d9d1362550ccdb416b9d', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, h("slot", { key: '77c9dcc0760ad6b743c852b900a82315dc992583' })));
     }
 };
 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) {
-        registerInstance(this, hostRef);
-        this.afText = '';
-        this.afVariation = undefined;
-        this.afLevel = 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 === TypographyHeadingJumboVariation.PRIMARY,
-            'digi-typography-heading-jumbo--secondary': this.afVariation === TypographyHeadingJumboVariation.SECONDARY
-        };
-    }
-    render() {
-        return (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) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h("p", { key: '0b6395ace6b7679213689fa37fd41c5e8c4f5b30', class: "digi-typography-preamble" }, 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;
 
@@ -1363,7 +3012,7 @@ const UtilBreakpointObserver = class {
         }
     }
     render() {
-        return (h(Host, { key: '9cf20d195bb4948df361742378c96edda7a0a8b0' }, h("div", { key: '1e89fa7a92ba17cf37d366a677f0ca94075dbc1f', class: "digi-util-breakpoint-observer" }, h("div", { key: '349561395422d7849f8e987fbd88bab1887def6f', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), h("slot", { key: '99542e2edbff718dffd480f76d98985092c8893a' }))));
+        return (h(Host, { key: '59950bdecc4b2c75d6f8b32df9172fcb8e517c59' }, h("div", { key: 'f4b05fd27069c5e54251021769d5b7cd243eb40a', class: "digi-util-breakpoint-observer" }, h("div", { key: 'c4f061b8653523affbdf16373725cd7c28bbc9f1', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), h("slot", { key: 'a66d563c46abb265e3018046cf547f7f0fa2163e' }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -1427,7 +3076,7 @@ const UtilIntersectionObserver = class {
         this._hasIntersected = false;
     }
     render() {
-        return h("slot", { key: '4f16e3af503f72ac9638c557348b429eea6ad784' });
+        return h("slot", { key: 'f074fb12e0a7a4a7eb33192ffdac76d08a4b3c10' });
     }
     get $el() { return getElement(this); }
     static get watchers() { return {
@@ -1506,8 +3155,8 @@ const UtilKeydownHandler = class {
         }
     }
     render() {
-        return h("slot", { key: 'b7e41652ee0661acd8970f626e94d6e80bf89223' });
+        return h("slot", { key: '1fe1d4e4cfc237751e54115d1c42cd366f99da33' });
     }
 };
 
-export { Button as digi_button, Header as digi_header, NavigationAvatar as digi_header_avatar, HeaderNavigation as digi_header_navigation, HeaderNavigationItem as digi_header_navigation_item, HeaderNotification as digi_header_notification, IconBars as digi_icon_bars, IconBellFilled as digi_icon_bell_filled, IconMinus as digi_icon_minus, IconPlus as digi_icon_plus, IconX as digi_icon_x, LayoutBlock as digi_layout_block, LayoutContainer as digi_layout_container, MediaImage as digi_media_image, NavigationSidebarButton as digi_navigation_sidebar_button, NavigationVerticalMenu as digi_navigation_vertical_menu, NavigationVerticalMenuItem as digi_navigation_vertical_menu_item, TitleLogo as digi_title_logo, Typography as digi_typography, TypographyHeadingJumbo as digi_typography_heading_jumbo, TypographyPreamble as digi_typography_preamble, UtilBreakpointObserver as digi_util_breakpoint_observer, UtilIntersectionObserver as digi_util_intersection_observer, UtilKeydownHandler as digi_util_keydown_handler };
+export { barChart as digi_bar_chart, Button as digi_button, Header as digi_header, NavigationAvatar as digi_header_avatar, HeaderNavigation as digi_header_navigation, HeaderNavigationItem as digi_header_navigation_item, HeaderNotification as digi_header_notification, IconBars as digi_icon_bars, IconBellFilled as digi_icon_bell_filled, IconCaretDown as digi_icon_caret_down, IconCaretUp as digi_icon_caret_up, IconChart as digi_icon_chart, IconMinus as digi_icon_minus, IconPlus as digi_icon_plus, IconTable as digi_icon_table, IconX as digi_icon_x, LayoutBlock as digi_layout_block, LayoutContainer as digi_layout_container, MediaImage as digi_media_image, NavigationSidebarButton as digi_navigation_sidebar_button, NavigationVerticalMenu as digi_navigation_vertical_menu, NavigationVerticalMenuItem as digi_navigation_vertical_menu_item, TitleLogo as digi_title_logo, Typography as digi_typography, UtilBreakpointObserver as digi_util_breakpoint_observer, UtilIntersectionObserver as digi_util_intersection_observer, UtilKeydownHandler as digi_util_keydown_handler };