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

package/dist/cjs/digi-bar-chart_27.cjs.entry.js

@@ -134,7 +134,7 @@ function band() {
   return linear.initRange.apply(rescale(), arguments);
 }
 
-const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:100%;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
+const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0;--MARGIN--BODY:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
 const DigiBarChartStyle0 = barChartCss;
 
 const barChart = class {
@@ -179,22 +179,82 @@ const barChart = class {
                 .transition('color')
                 .duration(150)
                 .attr('fill', (barData) => {
+                var _a;
                 if (barData.serie === serie)
                     return this.colorFunction(barData.serie);
-                else
+                else {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                        return 'url(#prognosisInactive)';
+                    }
                     return this.evalColorVar('--digi--color--background--secondary-accent');
+                }
             });
             linear.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));
             linear.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            if (this.chartData.data.averageLine) {
+                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                    .style('filter', 'contrast(0.5)');
+                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                        .style('filter', 'contrast(0.5)'); */
+            }
+        };
+        this.highlightAverageLine = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    return 'url(#prognosisInactive)';
+                }
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
+                .duration(150).style('mix-blend-mode', null).style('filter', null);
+            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
+                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
+            linear.select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        // Sets and resizespositions the average line
+        this.averageLine = () => {
+            if (!this.chartData.data.averageLine)
+                return;
+            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
+            /*     avLineGroup.selectAll('.averageLineText')
+                  .data(d => [d])
+                  .join('text')
+                  .attr('class', 'averageLineText')
+                  .text(d => d.text)
+                  .attr('x', this.xScale.range()[0])
+                  .attr('y', (d) => this.yScale(d.value))
+                  .attr('dy', -2)
+                  .attr('font-size', this.fontSize)
+                  .attr('fill', 'var(--digi--color--infographic--lineart)')
+                  .style('mix-blend-mode', 'plus-lighter')
+                  .style('filter', 'contrast(0.5)'); */
+            avLineGroup.selectAll('.averageLine')
+                .data(d => [d.value])
+                .join('line')
+                .attr('class', 'averageLine')
+                .attr('x1', this.xScale.range()[0])
+                .attr('y1', (d) => this.yScale(d))
+                .attr('x2', this.xScale.range()[1])
+                .attr('y2', (d) => this.yScale(d))
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '12, 7')
+                .attr('stroke-linecap', 'round')
+                .style('mix-blend-mode', 'plus-lighter')
+                .style('filter', 'contrast(0.5)')
+                .style('pointer-events', 'none');
         };
         // Resizing chart while loading
         this.loadingResize = () => {
             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 +
@@ -219,10 +279,8 @@ const barChart = class {
                 0,
                 this.dims.width - this.margin.right - this.margin.left
             ]);
-            this.barSelection
-                .attr('x', this.xFunction)
-                .attr('width', this.widthFunction);
             this.setValueTicks();
+            this.adjustBarSize();
         };
         this.highlightBarGroup = (_event, datum) => {
             if (typeof datum === 'string') {
@@ -230,7 +288,12 @@ const barChart = class {
                 this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
                     .duration(20)
                     .attr('fill', (d) => {
-                    return this.adjustColor(this.colorFunction(d.serie), 50);
+                    var _a;
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
                 });
             }
         };
@@ -327,190 +390,31 @@ const barChart = class {
         this.barGroupID = (key) => {
             return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
         };
-        this.updateBars = (fromLoading) => {
-            this.barChartContainer
+        this.updateBars = () => {
+            this.barSelection = this.barChartContainer.select('.interactiveElements')
                 .selectAll('.barGroup')
                 .data(this.mappedData)
-                .join((enter) => {
-                var _a, _b;
-                const tempSelection = enter
-                    .append('g')
-                    .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                tempSelection
-                    .append('rect')
-                    .attr('class', 'bar')
-                    .style('cursor', 'pointer')
-                    .attr('ry', 4)
-                    .attr('rx', 4)
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key)
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key))
-                    .attr('width', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? 0
-                    : this.xScale.bandwidth())
-                    .attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale.bandwidth()
-                    : 0)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut)
-                    .on('click', this.openTooltip)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(linear.polyInOut)
-                    .attr('width', this.widthFunction)
-                    .attr('y', this.yFunction)
-                    .attr('height', this.heightFunction)
-                    .attr('fill', '#00005a');
-                if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
-                    return tempSelection;
-                tempSelection
-                    .append('text')
-                    .text((d) => d.value.toLocaleString())
-                    .attr('class', 'barText')
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('text-anchor', 'end')
-                    .style('pointer-events', 'none')
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.dims.height - this.margin.bottom)
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? 2
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(linear.polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = linear.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-                return tempSelection;
-            }, (update) => {
-                // Update ids to bars
-                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
-                // Mouse interaction to updated loading bars
-                if (fromLoading) {
-                    update
-                        .select('rect')
-                        .on('mouseenter', this.hover)
-                        .on('mouseleave', this.hoverOut)
-                        .on('click', this.openTooltip)
-                        .attr('x', this.xFunction)
-                        .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                        ? this.yScale(d.key)
-                        : this.dims.height - this.margin.bottom)
-                        .attr('width', this.widthFunction)
-                        .attr('height', () => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                        ? this.yScale.bandwidth()
-                        : 0)
-                        .attr('fill', '#00005a')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(linear.polyInOut)
-                        .attr('y', this.yFunction)
-                        .attr('height', this.heightFunction)
-                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
-                }
-                else {
-                    update
-                        .select('rect')
-                        .transition()
-                        .duration(this.defaultDuration)
-                        .ease(linear.polyInOut)
-                        .attr('x', this.xFunction)
-                        .attr('y', this.yFunction)
-                        .attr('width', this.widthFunction)
-                        .attr('height', this.heightFunction)
-                        .attr('fill', '#00005a');
-                }
-                return update
-                    .select('text')
-                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
-                    .transition()
-                    .duration(this.defaultDuration)
-                    .ease(linear.polyInOut)
-                    .attr('font-size', this.fontSize)
-                    .attr('font-weight', '600')
-                    .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
-                    : this.yScale(d.value))
-                    .attr('x', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
-                    ? this.xScale(d.value)
-                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
-                    .attr('text-anchor', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'middle';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'start'
-                        : 'end';
-                })
-                    .attr('dx', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal)
-                        return this.xScale(d.value) < d.len + this.tickPadding * 2
-                            ? this.tickPadding
-                            : -this.tickPadding;
-                    return 0;
-                })
-                    .attr('fill', (d) => {
-                    if (this.afVariation === typographyVariation_enum.BarChartVariation.Vertical)
-                        return 'black';
-                    return this.xScale(d.value) < d.len + this.tickPadding * 2
-                        ? 'black'
-                        : 'white';
-                })
-                    .attr('dy', () => this.afVariation == typographyVariation_enum.BarChartVariation.Horizontal
-                    ? '0.35em'
-                    : '-0.25em')
-                    .style('pointer-events', 'none')
-                    .attrTween('text', (d, i, nodelist) => {
-                    const oldnum = parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
-                        : 0;
-                    const interpolatedValue = linear.interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
-                });
-            }, (exit) => exit.remove());
-            this.barSelection = this.barChartContainer.selectAll('rect');
+                .join('g')
+                .attr('class', 'barGroup')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('.bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
+                .attr('class', 'bar')
+                .style('cursor', 'pointer')
+                .attr('x', this.xFunction)
+                .attr('y', this.yFunction)
+                .attr('ry', 4)
+                .attr('rx', 4)
+                .attr('width', this.widthFunction)
+                .attr('height', this.heightFunction)
+                .attr('fill', (d) => this.colorFunction(d.serie))
+                .on('mouseenter', this.hover)
+                .on('mouseleave', this.hoverOut)
+                .on('click', this.openTooltip);
+            this.barSelection = this.barChartContainer.selectAll('.barGroup');
             this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
@@ -549,7 +453,7 @@ const barChart = class {
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this.loading || !this.chartData) {
+            if (!this.chartData) {
                 this.placeholderTicks.forEach((key) => {
                     const tick = { key: key, series: [] };
                     tick.series.push({
@@ -562,20 +466,40 @@ const barChart = class {
                 });
                 return toReturn;
             }
-            this.chartData.data.xValueNames.forEach((key, index) => {
-                const tick = { key: key, series: [] };
-                this.chartData.data.series.forEach((serie) => {
-                    if (serie.yValues[index]) {
-                        tick.series.push({
-                            key: key,
-                            serie: serie.title,
-                            value: serie.yValues[index],
-                            len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+            else {
+                if (this.chartData.data.xValueNames) {
+                    this.chartData.data.xValueNames.forEach((key, index) => {
+                        const tick = { key: key, series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key,
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
                         });
-                    }
-                });
-                toReturn.push(tick);
-            });
+                        toReturn.push(tick);
+                    });
+                }
+                else {
+                    this.chartData.data.xValues.forEach((key, index) => {
+                        const tick = { key: key.toString(), series: [] };
+                        this.chartData.data.series.forEach((serie) => {
+                            if (serie.yValues[index]) {
+                                tick.series.push({
+                                    key: key.toString(),
+                                    serie: serie.title,
+                                    value: serie.yValues[index],
+                                    len: serie.yValues[index] ? this.getTextSize(serie.yValues[index].toLocaleString()) : 0
+                                });
+                            }
+                        });
+                        toReturn.push(tick);
+                    });
+                }
+            }
             return toReturn;
         };
         this.adjustBarSize = () => {
@@ -628,7 +552,10 @@ const barChart = class {
                 this.dims = linear.select(this.chartDiv).node().getBoundingClientRect();
             this.dims.height =
                 this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
-            return prevHeight != this.dims.height;
+            // Making sure height and width are defined
+            this.dims.height = Number.isNaN(this.dims.height) ? 10 : this.dims.height;
+            this.dims.width = Number.isNaN(this.dims.width) ? 10 : this.dims.width;
+            return prevHeight !== this.dims.height;
         };
         // Setting margins given text size
         this.setMargins = (fromLoading) => {
@@ -855,9 +782,17 @@ const barChart = class {
                 .transition('color')
                 .duration(20)
                 .attr('fill', (d) => {
-                return event.target.tagName === 'rect'
-                    ? this.adjustColor(this.colorFunction(d.serie), 50)
-                    : this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                var _a;
+                if (event.target.tagName === 'rect') {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(d.serie) > 0) {
+                        return 'url(#prognosisHighlight)';
+                    }
+                    else
+                        return this.adjustColor(this.colorFunction(d.serie), 50);
+                }
+                else {
+                    return this.evalColorVar('--digi--color--background--interactive--hover--tertiary');
+                }
             });
         };
         // Removing highlight from bar
@@ -877,7 +812,7 @@ const barChart = class {
             else
                 this.tooltipData = d;
             const tooltipBody = this.tooltip.select('.tooltipBody');
-            tooltipBody
+            this.tooltip
                 .select('.tooltipHeading')
                 .html(this.tooltipData.key);
             tooltipBody
@@ -893,11 +828,11 @@ const barChart = class {
                 .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.tooltip.style('display', null);
             this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this.tooltip.style('visibility', 'hidden');
+            this.tooltip.style('display', 'none');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
@@ -913,7 +848,7 @@ const barChart = class {
                     this.tooltip
                         .select('digi-icon-caret-up')
                         .style('position', 'absolute')
-                        .style('top', '-12px')
+                        .style('top', '-11px')
                         .style('left', '0')
                         .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
                 }
@@ -931,12 +866,21 @@ const barChart = class {
                         .select('digi-icon-caret-down')
                         .style('position', 'absolute')
                         .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
-                        .style('bottom', '-12px');
+                        .style('bottom', '-11.5px');
                 }
             }
             else {
                 if (this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal) {
-                    console.log('helloo');
+                    this.tooltip
+                        .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
+                    );
+                    this.tooltip
+                        .select('digi-icon-caret-up')
+                        .style('position', 'absolute')
+                        .style('top', '-11px')
+                        .style('left', '0')
+                        .style('transform', `translate(50%,0)`);
+                    //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
                 }
                 else {
                     const xStart = this.margin.left + this.tickPadding + this.yTickSize;
@@ -951,7 +895,7 @@ const barChart = class {
                         .select('digi-icon-caret-down')
                         .style('position', 'absolute')
                         .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
-                        .style('bottom', '-12px');
+                        .style('bottom', '-11.5px');
                 }
             }
         };
@@ -1036,10 +980,13 @@ const barChart = class {
         this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
-        if (typeof data != 'string')
-            this.chartData = data;
-        else
-            this.chartData = JSON.parse(data);
+        if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
+            if (typeof data != 'string')
+                this.chartData = data;
+            else
+                this.chartData = JSON.parse(data);
+            this.series = this.chartData.data.series.map(serie => serie.title);
+        }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
         this.mappedData.forEach((elem) => {
@@ -1081,10 +1028,13 @@ const barChart = class {
     }
     initLegend() {
         const rectSize = 18;
+        const legendData = this.chartData.data.series.map(serie => serie.title);
+        if (this.chartData.data.averageLine)
+            legendData.push(this.chartData.data.averageLine.text);
         const legendChips = linear.select(this.legendDiv).select('.legend')
             .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
             .selectAll('.legendChip')
-            .data(this.chartData.data.series.map(serie => serie.title))
+            .data(legendData)
             .join('div')
             .attr('class', 'legendChip')
             .style('display', 'flex')
@@ -1095,8 +1045,8 @@ const barChart = class {
             .on('mouseenter', (_event, serie) => this.highlightBars(serie))
             .on('mouseleave', this.resetBarColor);
         legendChips.append('svg')
-            .attr('width', rectSize)
-            .attr('height', rectSize)
+            .attr('width', rectSize + 1)
+            .attr('height', rectSize + 1)
             .append('rect')
             .attr('x', 0)
             .attr('y', 0)
@@ -1105,45 +1055,66 @@ const barChart = class {
             .attr('rx', 4)
             .attr('ry', 4)
             .attr('fill', (title) => this.colorFunction(title));
-        legendChips.append('span').text((d) => d);
+        legendChips.append('span').style('text-wrap', 'nowrap').text((d) => d);
+        if (this.chartData.data.averageLine) {
+            const averageLine = legendChips.filter(':last-child')
+                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
+            const miniSVG = averageLine
+                .select('svg')
+                .attr('width', rectSize * 2);
+            miniSVG.select('rect').remove();
+            miniSVG.append('line')
+                .attr('x1', 1)
+                .attr('x2', rectSize * 2 - 1)
+                .attr('y1', rectSize / 2 + 1)
+                .attr('y2', rectSize / 2 + 1)
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-dasharray', '12, 7');
+        }
     }
     initToolTip() {
         // Getting handle for tooltip
         this.tooltip = linear.select('#' + this.afId);
-        this.tooltip.select('.close').on('click', this.closeTooltip);
-        // Add heading placeholder for heading
+        this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
+        this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
-            .select('.tooltipBody')
-            .append('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1)) // increment heading level by one
+            .select('.tooltipHead')
+            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
             .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
+            .style('text-wrap', 'wrap')
             .style('font-size', '1rem')
-            .style('margin', '0 0.75rem 0.5rem 0 ')
+            .style('margin', '0 0.75rem 0.25rem 0 ')
             .style('font-weight', '500');
-        this.tooltip.style('visibility', 'hidden');
+        this.tooltip.style('display', 'none');
     }
     initEmpty() {
-        linear.select(this.chartDiv).select('svg').remove();
+        linear.select(this.chartDiv).select('.chartSVG').remove();
         this.maxHeight = linear.select(this.host)
             .node()
             .parentNode.getBoundingClientRect().height;
         this.barChartObserver.observe(this.chartDiv);
+        this.setDims();
         // Getting rem-size
         this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setMargins();
         // Appending svg
         this.svg = linear.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');
+            : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
         linear.select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${text._t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
+        this.tooltip = linear.select('#' + this.afId);
+        this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
     loadingState(empty) {
@@ -1187,17 +1158,22 @@ const barChart = class {
             this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this.barChartContainer.selectAll('.barGroup').remove();
+            this.barChartContainer.selectAll('.interactiveElements').remove();
             this.barSelection = this.barChartContainer
+                .append('g')
+                .attr('class', 'interactiveElements')
+                .style('isolation', 'isolate')
                 .selectAll('barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
-                .append('rect')
+                .attr('id', (d) => this.barGroupID(d.key));
+            this.barSelection.selectAll('bar')
+                .data((d) => {
+                return d.series;
+            })
+                .join('rect')
                 .attr('class', 'bar')
-                .style('cursor', 'pointer');
-            this.barSelection
                 .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
                 ? this.yScale(d.key)
                 : this.dims.height - this.margin.bottom)
@@ -1206,14 +1182,15 @@ const barChart = class {
                 .attr('rx', 4)
                 .attr('width', this.widthFunction)
                 .attr('height', () => 0)
-                .attr('fill', 'gray')
-                .transition()
+                .attr('fill', 'gray');
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .delay((...[, i]) => i * 150)
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
-            this.barSelection
-                .transition()
+            this.barChartContainer.selectAll('.bar')
+                .transition('animateBar')
                 .duration(400)
                 .ease(linear.linear$1)
                 .delay((...[, i]) => i * 150 + 400)
@@ -1228,8 +1205,8 @@ const barChart = class {
         };
         const flattenBars = () => {
             this.barChartContainer
-                .selectAll('rect')
-                .transition()
+                .selectAll('.bar')
+                .transition('animateBar')
                 .duration(200)
                 .ease(linear.linear$1)
                 .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
@@ -1314,6 +1291,9 @@ const barChart = class {
     // Initializing bars, can only handle one series of bars for now
     initBars() {
         this.barSelection = this.barChartContainer
+            .append('g')
+            .attr('class', 'interactiveElements')
+            .style('isolation', 'isolate')
             .selectAll('barGroup')
             .data(this.mappedData)
             .join('g')
@@ -1370,6 +1350,7 @@ const barChart = class {
         this.initYAxis();
         this.initXAxis();
         this.initBars();
+        this.averageLine();
         this.initBarText();
     }
     async updateChain() {
@@ -1402,6 +1383,7 @@ const barChart = class {
                 linear.select(this.host).select('.tableButton').style('display', null);
                 linear.select(this.legendDiv).style('display', null);
                 this.initToolTip();
+                this.initLegend();
             }
             // Disconnect resize observer while adjusting things
             this.barChartObserver.disconnect();
@@ -1461,18 +1443,22 @@ const barChart = class {
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this.barSelection.selectAll('.barGroup').on('end', null);
+                this.barChartContainer.selectAll('.barGroup').on('end', null);
+                linear.select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
-                this.barSelection
-                    .transition()
+                this.barChartContainer.selectAll('.bar').interrupt('animateBar');
+                this.barChartContainer.selectAll('.bar').transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal
                     ? this.yScale(d.key)
                     : this.dims.height - this.margin.bottom)
                     .attr('height', () => 0)
-                    .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
-                    ? this.updateBars(true)
-                    : null);
+                    .on('end', (...[, i]) => {
+                    if (i === this.placeholderTicks.length - 1) {
+                        this.updateBars();
+                        this.barChartObserver.observe(this.chartDiv);
+                    }
+                });
                 this.setTickInteraction();
             }
             else {
@@ -1484,12 +1470,18 @@ const barChart = class {
     }
     // Getting correct color given index or name of data serie
     colorFunction(input) {
-        if (typeof input === 'number')
+        var _a;
+        if (typeof input === 'number') {
             return this.evalColorVar(this.colorPalettes[input]);
+        }
         else {
             const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
-            if (index > 0)
-                return this.evalColorVar(this.colorPalettes[index]);
+            if (index > 0) {
+                if ((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern)
+                    return 'url(#prognosis)';
+                else
+                    return this.evalColorVar(this.colorPalettes[index]);
+            }
             else
                 return this.evalColorVar(this.colorPalettes[0]);
         }
@@ -1525,9 +1517,10 @@ const barChart = class {
         this.setNamedTicks();
         this.setValueTicks();
         this.setTickInteraction();
+        this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this.tooltip.style('visibility') !== 'hidden')
+        if (this.tooltip.style('display') !== 'none')
             this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
@@ -1633,21 +1626,18 @@ const barChart = class {
         return body;
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         // 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>`;
-            }
+            else
+                heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
+            if (this.chartData.infoText)
+                heading = `${heading}<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>`;
         }
-        return (index.h(index.Host, { key: 'adbf9f1c26a8816a8d4b585b0fc7a0b9100bf252', ref: (el) => (this.host = el) }, index.h("div", { key: 'ee28dc5914be751e08c73253b80fd257c2e17bbb', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '6a0b051d3c26e9c34fb59d4ee323a10d1cb542e1', class: "chartTitle", innerHTML: heading }), index.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() : ''}` }, index.h("digi-icon-table", { key: '6e00e771521a10c0213ae6267ea2879c7ccc4b3c', slot: "icon" }), "Visa tabell"), index.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() : ''}` }, index.h("digi-icon-chart", { key: '5361af6d17e4cd7d6217afd48c4a474fd905c8de', slot: "icon" }), "Visa diagram"), index.h("div", { key: '2efe2244c2105390580779f60a7c1accd5135d49', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '48f2316efe396309fd73510a2eea011c137e24ed', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '4f2f494517979cbb9de43945d5ffe17acbe6c814', class: "chartTooltip", id: this.afId }, index.h("div", { key: '36db97d0dcd4e2009cd33b4125b631eddae039ae', class: "tooltipBody" }), index.h("digi-icon-x", { key: 'b3ac9ec4b6cd6c2c666d475929c10c0aaba2b9e1', class: "close" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: 'f96ed8b4c527ba32de5dd5bdb58c367435ecbc04', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '3911352915f02a33231c2e0604a5073fb7203bd3', class: "legend" })), index.h("div", { key: '29c613f6af6e23b05748e230bad4c00156f30fd6', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (index.h(index.Host, { key: 'bf35d7e9a6879cd90cd8cef33c9319cfc9e45afe', ref: (el) => (this.host = el) }, index.h("svg", { key: 'd77703db16cf0fbcffef18175b9d96279c8bdc32', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'c5cd241c72b0efb58f7746d4bc211cfba84409d0' }, index.h("pattern", { key: '14470e18a1a1d32c69bc2512f50c1bfb2cd49322', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: '933cab31edfbe7a5c8cc3c10e75acc33e2127580', width: "8", height: "8", fill: 'white' }), index.h("line", { key: 'bbeaec28de36eee9c91cc8582bd730f07da34db2', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '8110668de7c30e02750952985b6ca66a2ad4e58a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: '87584cc28027449d4d86040958afebd8cbe1ba29', width: "8", height: "8", fill: 'white' }), index.h("line", { key: '7c9be9252d78e672ecf88a3f0a90cde84b814351', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: 'a3c95790daba9caca5d2f42731a5ebd524ac88af', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("rect", { key: 'a4f07c66f79be3c72dca68f6f341b5dc2e6dcb38', width: "8", height: "8", fill: 'white' }), index.h("line", { key: 'e01cab4d8cad879f4505ce1529f39d1edace944f', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '0c9c9a7e008a044b587d6fb858b4de1d142a1c3d', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: '7b72e2721c2adb2cd2480964823653740c0821bc', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '3594b346973aa92145de441582885ac2241c5607', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: 'afcfe356372dc0567c03973fd2072293604f07eb', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: 'e9b2d97e6d0927a07b631bce6ee286474d9c31d5', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '2aa17b4c3fbf09cf403d471d87f680dd59369267', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'fb5470de9e9ed6dae7e3bfafafb0acf3862f8cad', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: '238cdcdbc5764f68b7e40bd43bc7a149e771bce7', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '9b40c605117dc413d96e5b5b97e5556fd96b0476', class: "chartTooltip", id: this.afId }, index.h("div", { key: 'b3b5dc9736472c54b5a54c01533b330a4eaeee7b', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'b900c8736cc643c95bef4a185cf2265486ed6ad3', class: "tooltipClose" })), index.h("div", { key: 'd246a0fdcd9d1f0519bdd4b63a7bbd385b8797bf', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: 'a73b39f64d4b3404196143d072492a932f721240', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: '898465a71b180f1a61624307914f428e6d71ee48', class: "legend" })), index.h("div", { key: 'b0503a2f87992f3012e27b113ade2112e32537ec', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -1859,7 +1849,7 @@ const Header = class {
         return (index.h("div", { class: "digi-header__wrapper" }, index.h("slot", { name: "header-logo" }), index.h("div", { class: "digi-header__content" }, index.h("slot", { name: "header-content" })), this.hasNavigation && this.isMobile && (index.h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
-        return (index.h("header", { key: '9dbcc11c53c815ad8f10b72ed700db1ad5bbcce4', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: '15f627b8cdf88ba6a0190ddc077982a5f2a0139a', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("digi-layout-block", { key: '52e76fbed6437613b952a0e2245a0f8b01bbd25c', afContainer: typographyVariation_enum.LayoutBlockContainer.NONE }, this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT ? (index.h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), index.h("div", { key: 'a3513f9383d0570d8381a5cc0e4f9362aa6dd065', class: "digi-header__border" }), index.h("slot", { key: 'd4eb4a6b292958a512ca9ec61b9cd261a0576cfc', name: "header-navigation" }))));
+        return (index.h("header", { key: '516b77bfe2d1dfe003133ebac92ff7d4d71d1c60', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: 'f89d54c1ad48e5452dd5df7bfed4a6df86c0f7e5', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("digi-layout-block", { key: '46b9736bfdfa355be5483cc83104716f2020c8d1', afContainer: typographyVariation_enum.LayoutBlockContainer.NONE }, this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT ? (index.h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), index.h("div", { key: '4314b63dfe2bdb9b99ceea40b8beaed68e4753d9', class: "digi-header__border" }), index.h("slot", { key: 'fa38515d8a8da19e1d17eaac5c9b40c1f3bb03e8', name: "header-navigation" }))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -1967,7 +1957,7 @@ const NavigationAvatar = class {
         if (this.afShowPlaceholderImage) {
             this.afHideImage = true;
         }
-        return (index.h("div", { key: '7abfbd7b1e1933cef757ab4a4ba169618a6189d9', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (index.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 && (index.h("span", { key: 'e0b721cc0ec670ec743bd6d0ec497fb58baf0f5a', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, index.h(this.currentAvatar, { key: '38d57fc3adb6ebb3b7c9f2683327960c0e1bbbc7' }, index.h("title", { key: '967f77cdc4194a063fafb6a7c684e29d7e1cbdf3' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (index.h("span", { key: 'c59653a35e8a1b441e518c482f047c483c8b68d7', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (index.h("span", { key: 'e32d280aa3408a1e357afbe626304b56139238c1', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, index.h(this.currentAvatar, { key: 'e472df32ef3fc8354447df8b2b23815198d3b5cf' }, index.h("title", { key: 'e8191617054592c9a1216fb97ab3689c402e922a' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && index.h("slot", { key: 'c35f521b2882d8033241c9dc1e2a2b5972a00a74' })));
+        return (index.h("div", { key: 'ad4a6fbb56f329d2de7e3da505204e5907e2edff', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (index.h("digi-media-image", { key: '88698d3b3e264b0c75006b449e1ce053baaea595', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (index.h("span", { key: '0d2f3035ada5926f0b2e967f75129d800cc500d6', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, index.h(this.currentAvatar, { key: '54b8cfd82f8cc663a9cbf428717de5acd1904147' }, index.h("title", { key: 'c3d9aa1dd81a22e6546696c1d64f3899c74ab32e' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (index.h("span", { key: '8d139eff27551f63846c2a75279438ca8fd913b6', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (index.h("span", { key: '92429c3baff14e6fa269b465ea953843878438c7', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, index.h(this.currentAvatar, { key: '02cc5522f465fdda8b3ec93f71a5c1b43528d278' }, index.h("title", { key: '3565ed9d119fb1cb8ea72de6806e9c7f785acc18' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && index.h("slot", { key: 'a24cc7907825dbee8389b6d26ccb18d4bea5e2fb' })));
     }
 };
 NavigationAvatar.style = DigiHeaderAvatarStyle0;
@@ -2134,10 +2124,10 @@ const HeaderNavigation = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'edf9df295359152406d7de1457db228066a0f51c', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: '1fbab82a18578974b1cd3e13631341d8a2b36db5', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL) }, index.h("digi-util-keydown-handler", { key: '9087a9de027d63f53a9cdb10a78e702f82a4d744', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, index.h("div", { key: 'd5a08669b54caceb2a580074b151766b6f4ddc9e' }, this.isMobile && (index.h("div", { key: '07e5b8226dd03c8ef26ea58d97b70bfb75b3154e', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), index.h("nav", { key: '93c0e8b5021b5d64df7fad12e4882cb54670b5d8', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
+        return (index.h("div", { key: '121c72d40552f28dba749b4396316766478f0b09', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: 'f88dddc98531eaa9ee02d845f84ae87072291038', onAfOnChange: (e) => (this.isMobile =
+                e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL) }, index.h("digi-util-keydown-handler", { key: '0cf7888905c1445d901b56453c6097bc65f1fa99', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, index.h("div", { key: 'ea6f5eb7d720d56b50b619379c341f0926c07876' }, this.isMobile && (index.h("div", { key: 'cdf39a5c739732a39bf05b4f29da58e0895de974', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), index.h("nav", { key: 'bc1d7c45ea0f6565f82f4ec8c9a22c76c10b1ed1', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
                 this._wrapper = el;
-            } }, this.isMobile && (index.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, index.h("digi-icon-x", { key: 'ecf0e56b804641ce1c6b4c8af0d24bf470a1a4cc', slot: "icon-secondary" }))), this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT ? (index.h("digi-layout-container", { "af-max-width": this.afCentered }, index.h("div", { role: "list", class: "digi-header-navigation__inner" }, index.h("slot", null)))) : (index.h("div", { role: "list", class: "digi-header-navigation__inner" }, index.h("slot", null)))))))));
+            } }, this.isMobile && (index.h("digi-button", { key: '838ad3369efd0f09fc42236ac361c8f71eddd22a', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, index.h("digi-icon-x", { key: '1053d972fbac618f9c0a5dac8362f982a331b132', slot: "icon-secondary" }))), this.afCentered !== typographyVariation_enum.HeaderCenterContentWidth.DEFAULT ? (index.h("digi-layout-container", { "af-max-width": this.afCentered }, index.h("div", { role: "list", class: "digi-header-navigation__inner" }, index.h("slot", null)))) : (index.h("div", { role: "list", class: "digi-header-navigation__inner" }, index.h("slot", null)))))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -2161,7 +2151,7 @@ const HeaderNavigationItem = class {
         };
     }
     render() {
-        return (index.h("div", { key: '21fd3ec068563fc546bea986e10b1256018d3b3a', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, index.h("slot", { key: 'c518bf00a4e445f64c246575ddd7dd3ac505a5a3' }), index.h("div", { key: 'd5701be9f10650fd075ed4ae57a9da14e884f8af', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
+        return (index.h("div", { key: '09574618b951d57f256a5bcb74c456e4c6c51b43', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, index.h("slot", { key: '4aa00a54099d93b9428f5106aa0d53e5e49e26a5' }), index.h("div", { key: '5b74e7195dbc0810252dadd334c8f1f4804e9b36', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
     }
 };
 HeaderNavigationItem.style = DigiHeaderNavigationItemStyle0;
@@ -2175,9 +2165,9 @@ const HeaderNotification = class {
         this.afNotificationAmount = undefined;
     }
     render() {
-        return (index.h("div", { key: '9fdf78a7fccb3604d0472f16874140892d8b9e08', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (index.h("span", { key: '0ad609dcffcf41c1d35b303eb788d205d599e101', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
+        return (index.h("div", { key: '550ca6a7db32322a4f141b30ecdeb5bd5fba9885', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (index.h("span", { key: 'bf072f1ff0db43568159abcf7ad1692a0d57b20e', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
             ? this.afNotificationAmount
-            : '+99')), index.h("slot", { key: '8c3b44864f9ccf3a1d6741ecd9c37d493861d13c' })));
+            : '+99')), index.h("slot", { key: 'cff400f7310c0345ede4bb35371485c7378145a8' })));
     }
 };
 HeaderNotification.style = DigiHeaderNotificationStyle0;
@@ -2195,11 +2185,11 @@ const IconBars = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: 'cd3395c1acf4ac442dd674c357530752e455b239', 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 && index.h("title", { key: 'f129dab77470e6db57fc780dda52b49f7c536bae', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'aea402ff62a0357936a5acc3bbaf92a0e7a198e8' }, this.afDesc), index.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" })));
+                    : undefined }, this.afTitle && index.h("title", { key: '2477201a6ccc5b32c600f7e08f2365b492c1ca63', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '33792ccb1400a29a8cf9b145a607dff52a52438e' }, this.afDesc), index.h("path", { key: 'f10dc8d2d5bfc46fab4636145f0c47e0d148c32c', 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;
@@ -2217,11 +2207,11 @@ const IconBellFilled = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: '9bbfc954b67b436d2e20b97f5d44344c68cc99b9', 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 && index.h("title", { key: 'a7a141cce0250d5139abb2a4e9a145d3f83eca36', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'fc5344322bfe51ce2194269d16abf7cef6b136bd' }, this.afDesc), index.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" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '805d01a696e1ceae218dd6a48b03db050eb64f04', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '3203f64bd0388be0df68e095571a332c30c53270' }, this.afDesc), index.h("path", { key: 'c757b8e44e2500101d1f013fbdc2ab8a753e213e', 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;
@@ -2239,11 +2229,11 @@ const IconCaretDown = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: '675d10c9b02f5aed58e4d0148a22cf6230b31815', class: "digi-icon-caret-down", width: "12", height: "6", viewBox: "0 0 12 6", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '3b62fc5d4c3f00725b32ff48779fbba0d665a5f3', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'b199a2c7bc9b60862b7b14c8c52da9b52abf74bc' }, this.afDesc), index.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" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '6894db0b24015f58b6e223ca270c3c6a1fa3efd1', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '1224fbe99d514a2f450e7815bea1a81be9eacd6d' }, this.afDesc), index.h("path", { key: '451fc715a183d99c4b139122189f5c0d02a691fe', 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;
@@ -2261,11 +2251,11 @@ const IconCaretUp = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: 'eaacfb3cc975129ffff11ab0ca468080f051fce8', class: "digi-icon-caret-up", width: "12", height: "7", viewBox: "0 0 12 7", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: 'b2d30a6233f5f50114606f5361228ecf2f901f85', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '53e7007bd6b1dc31d913a48c71b4b649e82ba894' }, this.afDesc), index.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" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '96d83bbd565178f2269c586156db6432b180ccc8', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'b23371ee899c7d0054f046be028f2e4d5ac3735c' }, this.afDesc), index.h("path", { key: 'b05cdd67f4b1e5cf8a28c0d23c40d7b601938241', 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;
@@ -2283,11 +2273,11 @@ const IconChart = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: '1118147e96f2db712c8b56da72e6c6fbb1e3498c', width: "56", height: "62", viewBox: "0 0 56 62", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined }, index.h("title", { key: '2ac643086eba86797c96d4fc38509fce464aef57' }, "Chart"), this.afTitle && index.h("title", { key: '94ec0760c6df319132dd2d0d4080d19e99da13ac', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '619a23ab4abedbddc53c5a54069936d8b8809ead' }, this.afDesc), index.h("defs", { key: '4a2d13da41449331733d94130e9c2eec15a297bf' }, index.h("polygon", { key: '6fddba10a5210b68be547e057632915591ea4ac6', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), index.h("polygon", { key: '7d1431fc9795cd30cfad9b79e668ae7ae5d5d6db', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), index.h("g", { key: 'da99c7c359c18f717e3c518fa677ce3c462a6c11', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: 'a0e3944ab9b0195b455bd5070a59619b8bb7deae', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, index.h("g", { key: '46d262185468edbc32107cd67604273b6d08e5b9', transform: "translate(1013.063248, 823.768116)" }, index.h("g", { key: 'e851ea1020eb8e5f0262ad4341de797a9367e4c6', id: "Group", transform: "translate(-0.000000, 0.000000)" }, index.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" }), index.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" }), index.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" }), index.h("polygon", { key: 'f177140c61e7aaaf4d4e13fc4ac6b6e9d8b4486a', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), index.h("g", { key: '9c7ed481fa12a725c37e611066e4288c93fb0f1b', id: "Clip-4" }), index.h("polygon", { key: '31d1a41e4057eb4c1dee2f260e8cf7431fc03570', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), index.h("g", { key: '6eb2d4fcd2a590a3dbf42110db739913f936e87a', id: "Clip-9" }), index.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)" })))))));
+                    : undefined }, index.h("title", { key: '8b94e8d922abadbae0dd661a806e97d6fe9992ed' }, "Chart"), this.afTitle && index.h("title", { key: '5d0b722a84f3a6d5f822a69c62774a6bad497331', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '5fb92dbb0834566d7dc220486fb737edb602ab29' }, this.afDesc), index.h("defs", { key: 'aa6448c8895bee05d0b88ee76c7563bebe5d7c15' }, index.h("polygon", { key: 'cccad3ca1e1bcc86d706cc5334304e96f007ea16', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), index.h("polygon", { key: 'd08792b838b7a53fff12ff4aad7c990ac7af2baa', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), index.h("g", { key: '12f4c3cb2a78743067371a0aee924232c98afe6e', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: '359eb010b12bcfabbc276282b06de418b86c0376', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, index.h("g", { key: 'd55973b8e1f8b3e251da2b3f8c74a223af5b2f15', transform: "translate(1013.063248, 823.768116)" }, index.h("g", { key: 'b3f9d168e83db9478adcbcc6ede76d3491c9b7ea', id: "Group", transform: "translate(-0.000000, 0.000000)" }, index.h("path", { key: 'ecd79aec0b963b521a6c842e96381094e0cd3b6d', d: "M11.2871933,17.0724638 L3.19179715,17.0724638 C1.47642907,17.0724638 0.0891563449,18.5157634 0.0891563449,20.3004089 L0,39.003939 C0,40.7885845 1.38727273,42.2318841 3.1026408,42.2318841 L11.1980369,42.2318841 C12.913405,42.2318841 14.3006777,40.7885845 14.3006777,39.003939 L14.3898341,20.3004089 C14.3898341,18.5157634 12.9989951,17.0724638 11.2871933,17.0724638", id: "Fill-1", fill: "currentColor" }), index.h("path", { key: '8208421dffa647569f3b11d0589054c9222f1c69', d: "M31.292107,11.2318841 L23.077661,11.2318841 C21.3370669,11.2318841 19.9293931,12.6247 19.9293931,14.3469222 L19.8389256,39.1168459 C19.8389256,40.8354877 21.2465994,42.2318841 22.9871935,42.2318841 L31.2016396,42.2318841 C32.9422337,42.2318841 34.3499075,40.8354877 34.3499075,39.1168459 L34.4403749,14.3469222 C34.4403749,12.6247 33.0290824,11.2318841 31.292107,11.2318841", id: "Fill-3", fill: "currentColor" }), index.h("path", { key: 'a14adb079b3eeb3bdc76b1a75a7362276a54ba82', d: "M51.0899571,0 L43.0444095,0 C41.339604,0 39.9608736,1.42791855 39.9608736,3.19354534 L39.7836589,39.0420095 C39.7836589,40.8039655 41.1659336,42.2318841 42.8671948,42.2318841 L50.9162867,42.2318841 C52.6175479,42.2318841 53.9962783,40.8039655 53.9962783,39.0420095 L54.173493,3.19354534 C54.173493,1.42791855 52.7912183,0 51.0899571,0", id: "Fill-6", fill: "currentColor" }), index.h("polygon", { key: 'f0e39a56ea9768ffa9f2b5054b60795da62f4b29', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), index.h("g", { key: '34b6562258c9cc6f87cec31c62506ab86e227685', id: "Clip-4" }), index.h("polygon", { key: 'b2e59dcfd853ceae78cae1503e174af4f0edc6ca', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), index.h("g", { key: '608a16e4420710c377a1770b7e398bee4e8217eb', id: "Clip-9" }), index.h("path", { key: '706cc18e4c125a9e9dc9da7aebf7a90a55efb1d9', 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;
@@ -2305,11 +2295,11 @@ const IconMinus = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: 'fa06434e782160a3c7dbf01d590700108cde6f17', 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 && index.h("title", { key: '777efa47027c7800c2b998c86536c51b5a3ed126', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'ac834cf3f5cb13176e11bc0797fe81575aa9196e' }, this.afDesc), index.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" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '86c042921f0e88e179db119fea8f4351a86b6cbd', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '488d0d9d0f3c7a9c765e15f22dfa79335fb2d764' }, this.afDesc), index.h("path", { key: '19b0dfdc235446421f2a15b6cab741702abf32d9', 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;
@@ -2327,11 +2317,11 @@ const IconPlus = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: 'ca73f1f13c31ad1f4a10c81d4ca451b93e9853cc', 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 && index.h("title", { key: '09c039e783e217a1f34207d1c8aa2270042c2671', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'db57e12e8bd44bb7f1be5ad9fbd3e200011ddb1e' }, this.afDesc), index.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" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: 'b6ce297c3fbde4dd09a703d0e9e594999b8145f3', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '45b1ea941f724c263897007871b2fda58f775aa3' }, this.afDesc), index.h("path", { key: '43ce466a817df98b348cc1ad80d71d462fd2e945', 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;
@@ -2349,11 +2339,11 @@ const IconTable = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: 'b49d205462200268d44fc7b725d4a08798f30a4c', class: "digi-icon-table", width: "62px", height: "62px", viewBox: "0 0 62 62", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && index.h("title", { key: 'c27b559e06da683825686a6ae9d4e76e7b152f17', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'aec9b5919da2ae9fd6bcd754408c2777164a6dd1' }, this.afDesc), index.h("defs", { key: '751e36ccf6e127f1c74206d7fef08a7d480ffca3' }, index.h("polygon", { key: '5b0a978a3a0c8afbbed7edfb6f1db2791942d8fa', points: "0 62 62 62 62 0 0 0" })), index.h("g", { key: '2367bb2a0f352c6f9182c9fddd3b6a3eab3fd3bb', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: 'd265f8643ea91dcdef194d07582e3b516960609d', transform: "translate(-302, -975)" }, index.h("g", { key: 'ce3c7606bb9d95bffd0556a3d151ef35b28814ee', transform: "translate(302, 975)" }, index.h("polygon", { key: 'af7c3c21ac726d85d521b09ff55f2a76529ae97f', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), index.h("g", { key: '13046d43c2c6fe73bb9fb97da24a40b6a068f564' }, index.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" }), index.h("polygon", { key: '714427db3379130626bce5c7df190d05afd4f3f6', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), index.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" }), index.h("polygon", { key: '2eb725f13c84b5db12c18d55a6bfb820772bafff', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), index.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" }), index.h("polygon", { key: '481832a7ad184666e28445ba00b032f5be25579a', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), index.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" }), index.h("polygon", { key: '3acdf59fe7528cb8ca70e4544f9c3f25b08ee18a', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), index.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" }), index.h("polygon", { key: 'c751893e0c7b38a65ea0a4e5f6cd99525436b4a7', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), index.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" }), index.h("polygon", { key: '4f671379f8d4f90c97152a8827647c1f35a71964', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), index.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" }), index.h("polygon", { key: 'b8f5e6c5401efe1a6446548adcdc30c775e6a266', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), index.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" }), index.h("polygon", { key: '10ea08dca37173581899e07cdc0a97d9d493945d', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), index.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" })))))));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && index.h("title", { key: 'f63b63cd60930376f64a7a15e9f3c6d5ee741b0f', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'c51782e65754ae035617fb28732823a1ea4b7ac1' }, this.afDesc), index.h("defs", { key: '1ffad888da2788c668415a2b4294e9b9e83be595' }, index.h("polygon", { key: '6fbbe98004c5cf4254e23efc535eb81eef8da93f', points: "0 62 62 62 62 0 0 0" })), index.h("g", { key: 'cc7248ad18a3bc826c4eedbf850c42e18385d583', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { key: 'e80dbd6a5fd97ea2abed626633a71706d92e32cc', transform: "translate(-302, -975)" }, index.h("g", { key: 'b5f1e5ae78fa13fde915046537e4141fa8cca716', transform: "translate(302, 975)" }, index.h("polygon", { key: 'b86f0c31aed24a0f9d02efa3192ae950a19ce91d', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), index.h("g", { key: '42e867469c971291acddacd1885aad0c5156d4d5' }, index.h("path", { key: '06cd03aeaccebd3dc08d5f3e623f1be226ebbd90', d: "M35.3073208,0 L26.6931958,0 C24.7918625,0 23.2496125,1.53297409 23.2496125,3.42574093 L23.2496125,11.9939482 C23.2496125,13.886715 24.7918625,15.4196891 26.6931958,15.4196891 L35.3073208,15.4196891 C37.2086542,15.4196891 38.7496125,13.886715 38.7496125,11.9939482 L38.7496125,3.42574093 C38.7496125,1.53297409 37.2086542,0 35.3073208,0", fill: "currentColor" }), index.h("polygon", { key: '87de0af2cd137153159c66d2d2301778a9582019', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), index.h("path", { key: '0fcebd6cbc5e5b29f36efee24739c53481a14cd0', d: "M12.0573208,0 L3.44319583,0 C1.5418625,0 -0.0003875,1.53297409 -0.0003875,3.42574093 L-0.0003875,11.9939482 C-0.0003875,13.886715 1.5418625,15.4196891 3.44319583,15.4196891 L12.0573208,15.4196891 C13.9586542,15.4196891 15.4996125,13.886715 15.4996125,11.9939482 L15.4996125,3.42574093 C15.4996125,1.53297409 13.9586542,0 12.0573208,0", fill: "currentColor" }), index.h("polygon", { key: 'e670f4df58c5928bbd2004e4d5cf6a3a50d0ec8b', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), index.h("path", { key: '1669f6f834f3ada0b2b0fdff539b325238a15d22', d: "M58.5573208,0 L49.9431958,0 C48.0418625,0 46.4996125,1.53297409 46.4996125,3.42574093 L46.4996125,11.9939482 C46.4996125,13.886715 48.0418625,15.4196891 49.9431958,15.4196891 L58.5573208,15.4196891 C60.4586542,15.4196891 61.9996125,13.886715 61.9996125,11.9939482 L61.9996125,3.42574093 C61.9996125,1.53297409 60.4586542,0 58.5573208,0", fill: "currentColor" }), index.h("polygon", { key: 'ab4ef443685a1eac51f88d34b4282a30c39e89b6', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), index.h("path", { key: '2d4caf2222ea359d0be3f27b64b517bf3c3475d9', d: "M35.3073208,46.5803109 L26.6931958,46.5803109 C24.7918625,46.5803109 23.2496125,48.113285 23.2496125,50.0060518 L23.2496125,58.5742591 C23.2496125,60.4670259 24.7918625,62 26.6931958,62 L35.3073208,62 C37.2086542,62 38.7496125,60.4670259 38.7496125,58.5742591 L38.7496125,50.0060518 C38.7496125,48.113285 37.2086542,46.5803109 35.3073208,46.5803109", fill: "currentColor" }), index.h("polygon", { key: '9eb03da5c3cbd10a155c99030dea35e841be4c17', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), index.h("path", { key: '034a3aa1559d77c20610bc47f49e6ffd4eba85c9', d: "M12.0573208,46.5803109 L3.44319583,46.5803109 C1.5418625,46.5803109 -0.0003875,48.113285 -0.0003875,50.0060518 L-0.0003875,58.5742591 C-0.0003875,60.4670259 1.5418625,62 3.44319583,62 L12.0573208,62 C13.9586542,62 15.4996125,60.4670259 15.4996125,58.5742591 L15.4996125,50.0060518 C15.4996125,48.113285 13.9586542,46.5803109 12.0573208,46.5803109", fill: "currentColor" }), index.h("polygon", { key: 'd82607c06058c8ba5217a6ebb7e91e98a83d4a49', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), index.h("path", { key: '2d515bf6855bed3cb8ffaeaa1099238daa84d0ea', d: "M58.5573208,46.5803109 L49.9431958,46.5803109 C48.0418625,46.5803109 46.4996125,48.113285 46.4996125,50.0060518 L46.4996125,58.5742591 C46.4996125,60.4670259 48.0418625,62 49.9431958,62 L58.5573208,62 C60.4586542,62 61.9996125,60.4670259 61.9996125,58.5742591 L61.9996125,50.0060518 C61.9996125,48.113285 60.4586542,46.5803109 58.5573208,46.5803109", fill: "currentColor" }), index.h("polygon", { key: 'e85f2c57e91425222c6c5f3e997dc2d06c70d1c3', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), index.h("path", { key: 'fbd0d5b5123dc0d902a8b1d824d6dd3de17cf7eb', d: "M35.3073208,23.2901554 L26.6931958,23.2901554 C24.7918625,23.2901554 23.2496125,24.8231295 23.2496125,26.7158964 L23.2496125,35.2841036 C23.2496125,37.1768705 24.7918625,38.7098446 26.6931958,38.7098446 L35.3073208,38.7098446 C37.2086542,38.7098446 38.7496125,37.1768705 38.7496125,35.2841036 L38.7496125,26.7158964 C38.7496125,24.8231295 37.2086542,23.2901554 35.3073208,23.2901554", fill: "currentColor" }), index.h("polygon", { key: 'a44146a18f74075eb09b5114c713c3e0bc544da2', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), index.h("path", { key: '5ad2a986f873e438a5573fa58b566aa84e2da5c4', d: "M12.0573208,23.2901554 L3.44319583,23.2901554 C1.5418625,23.2901554 -0.0003875,24.8231295 -0.0003875,26.7158964 L-0.0003875,35.2841036 C-0.0003875,37.1768705 1.5418625,38.7098446 3.44319583,38.7098446 L12.0573208,38.7098446 C13.9586542,38.7098446 15.4996125,37.1768705 15.4996125,35.2841036 L15.4996125,26.7158964 C15.4996125,24.8231295 13.9586542,23.2901554 12.0573208,23.2901554", fill: "currentColor" }), index.h("polygon", { key: '3876a450e96e622a551e6789042a7ff1d47392e5', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), index.h("path", { key: '86ac02fd318eec1d97516a16b52b75bf380500da', 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;
@@ -2371,11 +2361,11 @@ const IconX = class {
         this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
     }
     render() {
-        return (index.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
+        return (index.h("svg", { key: 'b37ba57e85860e0a50560504d19abae3f9074b86', 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 && index.h("title", { key: '43a1d6c995f701463b8626942f9ba74bbf590391', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'b9e9fec06868fa57363d2fc3af7de658013d5500' }, this.afDesc), index.h("g", { key: 'b54d2c345a9dbdc5059155e5f6866930412d1785', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, index.h("path", { key: '31040e7163a437c4d35fefe71d1dc7c0c029cc0c', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: 'e6e32beacee90cd776cac159369b4195c19c3c94', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '733715351c70082d3648a18d417d2aa3726ddced' }, this.afDesc), index.h("g", { key: 'c734024fc558d2ecbf09f94bfd9debf88f2b1e01', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, index.h("path", { key: '6a548dae43ee06648c18b03b3dcb67e1c704fe7a', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
     }
 };
 IconX.style = DigiIconXStyle0;
@@ -2410,7 +2400,7 @@ const LayoutBlock = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'fed69dbc68c86a1e48b16c2954e9044e102c976d', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === typographyVariation_enum.LayoutBlockContainer.NONE ? (index.h(index.Fragment, null, index.h("slot", null))) : (index.h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, index.h("slot", null)))));
+        return (index.h("div", { key: 'fd12165df25faadfb73a0df452d91805fd784406', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === typographyVariation_enum.LayoutBlockContainer.NONE ? (index.h(index.Fragment, null, index.h("slot", null))) : (index.h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, index.h("slot", null)))));
     }
     static get watchers() { return {
         "afContainer": ["containerChangeHandler"]
@@ -2454,7 +2444,7 @@ const LayoutContainer = class {
         };
     }
     render() {
-        return (index.h("div", { key: '64b3b3ea7da2545fc8d46491b2c6de903b853e40', class: Object.assign({}, this.cssModifiers) }, index.h("slot", { key: 'd4f23bb4362e9edfb3575a7cbdceaaf1e04b68e8' })));
+        return (index.h("div", { key: '0dc19859f25ece31e266ad11bea2af0b1ad0db13', class: Object.assign({}, this.cssModifiers) }, index.h("slot", { key: '36ac6345da26289a63cf0bf8fc2e70ffd2ced85e' })));
     }
     static get watchers() { return {
         "afVariation": ["variationChangeHandler"]
@@ -2543,11 +2533,11 @@ const MediaImage = class {
         };
     }
     render() {
-        return (index.h("host", { key: '0700225082606909705a197d31e633e38ca0061e' }, index.h("div", { key: '446b1d9d42d5953913d03aaa88091af0cb75866c', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
+        return (index.h("host", { key: 'c7b5685291cdeee6fe5993c4b38679f1e790fd51' }, index.h("div", { key: 'ba3a6089b4e98535acff797d8607923bbba6a795', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
                 '--digi--media-image--width': this.afWidth
                     ? `${this.afWidth}px`
                     : null
-            } }, index.h("digi-util-intersection-observer", { key: '1a91202f732bb74d1662ea2cbe4d1f9f8b92210b', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (index.h("div", { key: '1ed01d18e9f561d7c8ff503c5e657389a1eb5331', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), index.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' }))));
+            } }, index.h("digi-util-intersection-observer", { key: '793127f147db9ed2bc71be489ee3fd00499900cd', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (index.h("div", { key: '51eaaba343d34633999395e2a176036fc25bb62f', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), index.h("img", { key: 'adb35f409fcb04301ff476c1ef2bae23537fcbe1', 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"]
@@ -2572,7 +2562,7 @@ const NavigationSidebarButton = class {
         this.afOnToggle.emit(this.isActive);
     }
     render() {
-        return (index.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, index.h("digi-icon-bars", { key: '63777a5cae4260234a8473efc3a2a5c3ee997aa7', slot: "icon" })));
+        return (index.h("digi-button", { key: '30e533fedf4346bf5d1cdddd6eedbda55104e37b', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, index.h("digi-icon-bars", { key: 'f2878d2c219653ca77ad39ccfbef4aaa01d5b226', slot: "icon" })));
     }
 };
 NavigationSidebarButton.style = DigiNavigationSidebarButtonStyle0;
@@ -2738,7 +2728,7 @@ const NavigationVerticalMenu = class {
         };
     }
     render() {
-        return (index.h("nav", { key: '707f9bd95de39cba4ef04b193ededcb3ed554a60', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, index.h("slot", { key: 'd061ffc5128d73222b7c5221655de7ac89b54828' })));
+        return (index.h("nav", { key: '6bfe043a155fec7ca12b329f26f9fe3d88a1ce90', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, index.h("slot", { key: '280aa0dc9656afccd0890d278ed2ade21cd927a0' })));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -2859,24 +2849,24 @@ const NavigationVerticalMenuItem = class {
         }
     }
     render() {
-        return (index.h("host", { key: '49aa08ddb4869607c0e082fe2f191a7d43682e02', class: {
+        return (index.h("host", { key: 'b008de69c96417bd000c4c4fa345910a19d1fc2c', class: {
                 'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                 'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
-            } }, index.h("div", { key: 'd9756b71f2e97881fc219982ffff5b1c5773c469', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (index.h("div", { key: '97bda7e01039ead9ed4183de3872b6e211a4afcd', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, index.h("a", { key: '2230aef6d565381986f006c9d783467a2f212fb4', id: `${this.afId}-link`, href: this.afHref, class: {
+            } }, index.h("div", { key: 'beba2e7303abb687d69c516148ab9cb2ceec6397', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (index.h("div", { key: '131f7f0423cf65d03dd119211697ad3c182cd361', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, index.h("a", { key: '7a5df68c81673e574c1e48ce621a5a00c7e54450', 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) }, index.h("div", { key: '4679ce4fced2a92439b22a30fecc2b12fda75a3e', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: 'e4220f646544acb4b683645828bb1d3cfe962e6e', name: "icon" })), index.h("span", { key: '4871eea272d8c693525e44b6412c5cd8441011d2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: 'c1bcaa36115dc4162e1363d000b0c56ec6c9da71', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: '1726fe5f4d6986202b6a0a8d857cf298c0187b6d', name: "badge" }))), index.h("button", { key: 'f889f0b40a91c3383f7bc4776e315b9f05fb6077', type: "button", id: `${this.afId}-toggle-button`, class: {
+            }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: '4626c8903fe0c30b1899f45b2160da9f864d7154', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: '77b31c7dce3d8dc4180f7a90e17d2370362ee834', name: "icon" })), index.h("span", { key: 'acf8a10408370f2419514443d0ab45081a6dad3f', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: 'd541aa1f6405374b84d042449f02b2883a04a195', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: 'ea14d278ad07c60fea424c76abd28f0504a72468', name: "badge" }))), index.h("button", { key: '2fec0f5b8ce3a490c894a4facc2cb7fd43b1b6a6', 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}` }, index.h("span", { key: 'd2c152b11155990747050e5acc78e0b5b6f50c56', class: "digi-navigation-vertical-menu-item__toggle-icon" }, index.h("span", { key: '96506ad5c333b6435d983ca08dbafc737b6bed65', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (index.h("div", { key: '09118924d7fc105c4c3f874acd9753dcdd5336a7', class: "digi-navigation-vertical-menu-item__inner" }, index.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" }, index.h("span", { key: 'de2993434859e557bc50d2533f3e17dd717a8ae3', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: '8c8ed94ef19e7ad6c1123a398bcc73c9515163c5', name: "icon" })), index.h("span", { key: '4137fee1a296d4125f0d67b8eb5264089a16cdb2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: '80b66cf648e4c8f9ce2dba5c9b1cb3d8a452fd1d', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: '059cded27f0e4fec6dba9799766f9ac6839a3815', name: "badge" })), index.h("span", { key: '0bb64b392dc3faedc7627d779a8f73e87cc827f7', class: "digi-navigation-vertical-menu-item__toggle-icon" }, index.h("span", { key: '5cfaf39da6d8f3cc9377db4f111c046d0c719111' }, this.toggleIcon))))), !this.hasSubnav && (index.h("div", { key: 'bb89a5b1dd0bc2e29a32f913a5bb5de07e53cacf', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (index.h("a", { key: '68bd1309d87a81d0d4d37c601b7cfba140c9e364', 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}` }, index.h("span", { key: '7b8f7eb50850a9cd0b8c4f5bd540ee8db11542fd', class: "digi-navigation-vertical-menu-item__toggle-icon" }, index.h("span", { key: 'c0d9a48dfa22f3010576b0f29c212c9d5a31d44d', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (index.h("div", { key: 'f9af1c1e34a6c52cf26b5c185517b88b2c389f97', class: "digi-navigation-vertical-menu-item__inner" }, index.h("button", { key: '407abc931c07b4dbdb87ef8e53ed8319bd3f30ac', 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" }, index.h("span", { key: '845a6903f28f97e89d6fc62a134233b12f12bc32', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: '7668a487b51aced8e227ea03f98d291a7b372995', name: "icon" })), index.h("span", { key: '6a606039e0c72a0fbd9b5b35cb89bf9b9ad07a2f', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: 'f7f58186c3397e552928e22f06cc39b0ef5c35b5', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: 'e7b18a30518fa3c9689db8639b478f5445e401c9', name: "badge" })), index.h("span", { key: 'f55a20be40e0512b2d7e99832899f2597930160a', class: "digi-navigation-vertical-menu-item__toggle-icon" }, index.h("span", { key: '620ce5c869972cd332c69ccd73433f83f7413b96' }, this.toggleIcon))))), !this.hasSubnav && (index.h("div", { key: '508b9df37b90d0409737bf24a4a81e6e161994e2', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (index.h("a", { key: '4516ff318f441274bac19df6b1807c4e73db64ef', 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) }, index.h("div", { key: '09c92641eaac60d11ffa73fcd72479b06f982239', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: '7bf307c7af01c7e26aed7b0f9df0c0296c073b93', name: "icon" })), index.h("span", { key: '9889e0ed126b1267e74e38d06041bdbf646069e0', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: 'd02acd695ac86a1b833c3cb56dda435ce5adc52b', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: '61810faa0ded36b125b6fc373f21573277c5887c', name: "badge" })))), this.isActive && (index.h("a", { key: '269cc3b0890d2acadaba53ff95a13c03dac7a59c', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
+            }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: '8d87d230fdfc69a962c1d8b5ba0e347f30d160d4', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: '3a76b7bb22241161a93a28b8da2fee4a8bc187cc', name: "icon" })), index.h("span", { key: '22a004383f4e3c8ea4c5cacf814bb4e5cdb32e80', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: 'ac1c1e4d8bf80e3f5dbcd0d2167371da084874e1', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: 'aba9cd8a14fe7d995907ed48e8e7a24581fbbebc', name: "badge" })))), this.isActive && (index.h("a", { key: 'c6e1f5fad0ed55b8cd05dd428fa4bdff6349b5e9', 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) }, index.h("div", { key: 'a0210c47b9d693708b643a7d507f11238250b6eb', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: 'f055e1d5a0d043014b3d328db388d57e4c8830b5', name: "icon" })), index.h("span", { key: 'bfb4e9081287bc48964e5d228a97e13d92b0ee55', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: '926081417f5d2b4315ae1a574a21e61cd8844fd2', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: '7326fa2dd373941428968576f5c024ee4dcb0dc4', name: "badge" })))))))));
+            }, onClick: (e) => this.clickHandler(e) }, index.h("div", { key: 'a75d83b50be5a8880d772b7ad437923c319413c5', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, index.h("slot", { key: '60f589dac1f507138fae09c374523de98831027c', name: "icon" })), index.h("span", { key: '652e47dd7b5a8804cae11c7c5ae87f67a1183632', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), index.h("div", { key: '58bea6f0f43d27d3670080794968c7e12b02293f', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, index.h("slot", { key: '160a3be67b528508619c74f9e5d142efc30b5bcb', name: "badge" })))))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -2957,7 +2947,7 @@ const TitleLogo = class {
         };
     }
     render() {
-        return (index.h("div", { key: '4d21cfa7a3059c4538bb5f6fa47a0d8d1c0c1182', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: '39dd873abfd559823d5d0c88a277b2328dbd1835', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("div", { key: 'a0947125f614676368e66fcbf598ae2204fac7b6', class: "digi-title-logo-symbol" }, index.h("svg", { key: 'bb4f84686aa5bebeb54f28ed5830d1354ca613dc', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, index.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" }))), index.h("div", { key: '77b5dcb0ea016fea68c2e931a2c0386b02df4988', class: "digi-title-logo-name-wrapper" }, index.h("slot", { key: '74d5ffcfa2c12b93d6481ffe4c55352d1dea08c5', name: "logo-one-row" }), index.h("slot", { key: '507bf4855ca57002715eef469a61f65c725f520a', name: "logo-two-rows" }))));
+        return (index.h("div", { key: '3529ae2c761883716e7ef698ea2ce35f70108bb9', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: '5404aac52451d6041e5a6e60d430b6d81a24a63f', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("div", { key: 'f417c914c65d6898d34187a1aa3f31e9c7137bf2', class: "digi-title-logo-symbol" }, index.h("svg", { key: '6d3a73a4b112f93af24d2bee57278380d7f1ab4e', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, index.h("path", { key: 'eee432df3edbb799bc79dd4b47521499ed73ce39', "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" }))), index.h("div", { key: 'd4367443a500da7d0767c1525ca5af1704ff13d7', class: "digi-title-logo-name-wrapper" }, index.h("slot", { key: 'f508b45dc39f72a2ec5626a8bc5d550a61c2a43c', name: "logo-one-row" }), index.h("slot", { key: 'faa09969cd0a8149e58bcf93a065c5956c766477', name: "logo-two-rows" }))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -2977,7 +2967,7 @@ const Typography = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'c88e6cbcee677d822129d9d1362550ccdb416b9d', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, index.h("slot", { key: '77c9dcc0760ad6b743c852b900a82315dc992583' })));
+        return (index.h("div", { key: 'a99d053379cc19d579603d972573477070909937', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, index.h("slot", { key: '74ab273311e46d20480867356728363196e5d0de' })));
     }
 };
 Typography.style = DigiTypographyStyle0;
@@ -3016,7 +3006,7 @@ const UtilBreakpointObserver = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '59950bdecc4b2c75d6f8b32df9172fcb8e517c59' }, index.h("div", { key: 'f4b05fd27069c5e54251021769d5b7cd243eb40a', class: "digi-util-breakpoint-observer" }, index.h("div", { key: 'c4f061b8653523affbdf16373725cd7c28bbc9f1', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), index.h("slot", { key: 'a66d563c46abb265e3018046cf547f7f0fa2163e' }))));
+        return (index.h(index.Host, { key: '2401a348a719b634b60ef6b186da7cf297c16743' }, index.h("div", { key: '06625da48adae31e39f21e78d27987f6a595b808', class: "digi-util-breakpoint-observer" }, index.h("div", { key: 'd925d3ce668b84f45f85666becfd66196979c304', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), index.h("slot", { key: '20f02ba8824f6c6d9c44f417670fc3e19c3a1e4b' }))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -3080,7 +3070,7 @@ const UtilIntersectionObserver = class {
         this._hasIntersected = false;
     }
     render() {
-        return index.h("slot", { key: 'f074fb12e0a7a4a7eb33192ffdac76d08a4b3c10' });
+        return index.h("slot", { key: 'c4676917362d0208334bad5cb2e6043158dffe39' });
     }
     get $el() { return index.getElement(this); }
     static get watchers() { return {
@@ -3159,7 +3149,7 @@ const UtilKeydownHandler = class {
         }
     }
     render() {
-        return index.h("slot", { key: '1fe1d4e4cfc237751e54115d1c42cd366f99da33' });
+        return index.h("slot", { key: 'de87afd79ff43b195340ff92ae7ca0ab178820a7' });
     }
 };