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

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

@@ -130,20 +130,21 @@ function band() {
   return initRange.apply(rescale(), arguments);
 }
 
-const barChartCss = ".sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{box-sizing:border-box;position:absolute;background-color:rgba(250, 250, 250, 0.98);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;font-size:0.875rem;display:none}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{--digi--icon--color:black;cursor:pointer;margin-top:-5px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar{height:10px;width:10px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-track,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-thumb,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
+const 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 .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.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 .close.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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         // States
-        this._loading = false;
-        this._placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
+        this.loading = false;
+        this.placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
         // Width of data at each tick, if we have two data series that have values att same tick, this will be 2 for example. defaults to 1;
         this.dataWidth = 1;
+        // Bar gap when using multiple bars for each point, this will be doubled, since it is applied on both bars
         this.barGap = 0;
-        this._dims = {};
-        this._margin = {
+        this.dims = {};
+        this.margin = {
             bottom: 0,
             top: 6,
             left: 5,
@@ -154,7 +155,7 @@ const barChart = class {
         this.yTickSize = 0;
         this.xTickSize = 5;
         // Width of the largets X-tick-value
-        this._tickWidth = 1;
+        this.tickWidth = 1;
         // Transition
         this.defaultDuration = 400;
         // Text and formats
@@ -163,137 +164,234 @@ const barChart = class {
         // Observer for watching size changes when in line chart mode
         this.barChartObserver = new ResizeObserver((entries) => {
             entries.forEach(() => {
-                if (this._loading)
+                if (this.loading)
                     return this.loadingResize();
                 this.resize();
             });
         });
-        // Observer for watching size changes when in table mode
-        this.tableObserver = new ResizeObserver((entries) => {
-            entries.forEach(() => {
-                select(this._legendDiv).style('width', this._dims.width + 'px');
-                this.resizeTable();
+        this.highlightBars = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .attr('fill', (barData) => this.colorFunction(barData.serie))
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (barData.serie === serie)
+                    return this.colorFunction(barData.serie);
+                else {
+                    if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                        return 'url(#prognosisInactive)';
+                    }
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+                }
             });
-        });
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        this.resetBarColor = () => {
+            this.barChartContainer.selectAll('.bar').transition('color').duration(150).attr('fill', (barData) => this.colorFunction(barData.serie));
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', 1);
+            if (this.chartData.data.averageLine) {
+                this.barChartContainer.selectAll('.averageLine').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                    .style('filter', 'contrast(0.5)');
+                /*       this.barChartContainer.selectAll('.averageLineText').transition('avgLine').style('mix-blend-mode', 'plus-lighter')
+                        .style('filter', 'contrast(0.5)'); */
+            }
+        };
+        this.highlightAverageLine = (serie) => {
+            this.barChartContainer.selectAll('.bar')
+                .transition('color')
+                .duration(150)
+                .attr('fill', (barData) => {
+                var _a;
+                if (((_a = this.chartData.meta) === null || _a === void 0 ? void 0 : _a.prognosisPattern) && this.series.indexOf(barData.serie) > 0) {
+                    return 'url(#prognosisInactive)';
+                }
+                else
+                    return this.evalColorVar('--digi--color--background--secondary-accent');
+            });
+            this.barChartContainer.selectAll('.averageLine').transition('avgLine')
+                .duration(150).style('mix-blend-mode', null).style('filter', null);
+            /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
+                  .duration(150).style('mix-blend-mode', null).style('filter', null) */
+            select(this.legendDiv).selectAll('.legendChip').transition('colorLegend').duration(150).style('opacity', (title) => title === serie ? 1 : 0.25);
+        };
+        // Sets and resizespositions the average line
+        this.averageLine = () => {
+            if (!this.chartData.data.averageLine)
+                return;
+            const avLineGroup = this.barChartContainer.select('.interactiveElements').selectAll('.averageLineGroup').data([this.chartData.data.averageLine]).join('g').attr('class', 'averageLineGroup');
+            /*     avLineGroup.selectAll('.averageLineText')
+                  .data(d => [d])
+                  .join('text')
+                  .attr('class', 'averageLineText')
+                  .text(d => d.text)
+                  .attr('x', this.xScale.range()[0])
+                  .attr('y', (d) => this.yScale(d.value))
+                  .attr('dy', -2)
+                  .attr('font-size', this.fontSize)
+                  .attr('fill', 'var(--digi--color--infographic--lineart)')
+                  .style('mix-blend-mode', 'plus-lighter')
+                  .style('filter', 'contrast(0.5)'); */
+            avLineGroup.selectAll('.averageLine')
+                .data(d => [d.value])
+                .join('line')
+                .attr('class', 'averageLine')
+                .attr('x1', this.xScale.range()[0])
+                .attr('y1', (d) => this.yScale(d))
+                .attr('x2', this.xScale.range()[1])
+                .attr('y2', (d) => this.yScale(d))
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '12, 7')
+                .attr('stroke-linecap', 'round')
+                .style('mix-blend-mode', 'plus-lighter')
+                .style('filter', 'contrast(0.5)')
+                .style('pointer-events', 'none');
+        };
         // Resizing chart while loading
         this.loadingResize = () => {
             const newHeight = this.setDims();
             this.setMargins(true);
-            this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
-            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-            this._margin.right =
-                this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+            this.svg.attr('width', this.dims.width).attr('height', this.dims.height);
+            this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+            this.margin.right =
+                this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                     this.yTickSize +
                     this.tickPadding;
             // If there is a new height
             if (newHeight) {
                 // Update y-axis with potentially new height (might want to do a check here)
                 this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.range([
-                        this._margin.top,
-                        this._dims.height - this._margin.bottom
+                    ? this.yScale.range([
+                        this.margin.top,
+                        this.dims.height - this.margin.bottom
                     ])
-                    : this._yScale.range([
-                        this._dims.height - this._margin.bottom,
-                        this._margin.top
+                    : this.yScale.range([
+                        this.dims.height - this.margin.bottom,
+                        this.margin.top
                     ]);
-                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+                this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
             }
             // Update x-axis with new width
-            this._xScale.range([
+            this.xScale.range([
                 0,
-                this._dims.width - this._margin.right - this._margin.left
+                this.dims.width - this.margin.right - this.margin.left
             ]);
-            this._barSelection
+            this.barSelection
                 .attr('x', this.xFunction)
                 .attr('width', this.widthFunction);
             this.setValueTicks();
         };
+        this.highlightBarGroup = (_event, datum) => {
+            if (typeof datum === 'string') {
+                const barGroupID = '#' + this.barGroupID(datum);
+                this.barChartContainer.select(barGroupID).selectAll('.bar').transition('color')
+                    .duration(20)
+                    .attr('fill', (d) => {
+                    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);
+                });
+            }
+        };
+        this.unHighlightBarGroup = () => {
+            this.barSelection.selectAll('.bar').transition('color')
+                .duration(100)
+                .attr('fill', (d) => {
+                return this.colorFunction(d.serie);
+            });
+        };
         // Adding click listener for tool tip text
         this.setTickInteraction = () => {
             if (this.afVariation === BarChartVariation.Horizontal) {
-                this._yAxisHandle
+                this.yAxisHandle
                     .selectAll('text')
                     .style('cursor', 'pointer')
                     .on('click', this.openTooltip)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut);
+                    .on('mouseenter', this.highlightBarGroup)
+                    .on('mouseleave', this.unHighlightBarGroup);
             }
             else {
-                this._xAxisHandle
+                this.xAxisHandle
                     .selectAll('text')
                     .style('cursor', 'pointer')
                     .on('click', this.openTooltip)
-                    .on('mouseenter', this.hover)
-                    .on('mouseleave', this.hoverOut);
+                    .on('mouseenter', this.highlightBarGroup)
+                    .on('mouseleave', this.unHighlightBarGroup);
             }
         };
         // Setting Y-scale
         this.setYScale = (empty) => {
             var _a, _b, _c;
             if (this.afVariation == BarChartVariation.Horizontal) {
-                this._yScale = band(empty
+                this.yScale = band(empty
                     ? ['0', '1', '2', '3', '4', '5', '6', '7']
-                    : this._chartData.data.xValueNames, [this._margin.top, this._dims.height - this._margin.bottom])
+                    : this.chartData.data.xValueNames, [this.margin.top, this.dims.height - this.margin.bottom])
                     .paddingOuter(0.1)
                     .paddingInner(0.1);
-                this._yAxis = axisLeft(this._yScale);
+                this.yAxis = axisLeft(this.yScale);
             }
             else {
-                this._yScale = linear()
-                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
-                    .nice(((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
-                    ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
+                this.yScale = linear()
+                    .domain(empty ? [0, 10] : [this.minVal, this.maxVal])
+                    .nice(((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
+                    ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
                     : 3);
-                this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
+                this.yScale.range([
+                    this.dims.height - this.margin.bottom,
+                    this.margin.top
                 ]);
-                this._yAxis = axisLeft(this._yScale);
+                this.yAxis = axisLeft(this.yScale);
             }
         };
         // Setting X-Scale
         this.setXScale = (empty) => {
             // Horizontal
             if (this.afVariation == BarChartVariation.Horizontal) {
-                this._xScale = linear()
-                    .domain(empty ? [0, 10] : [this._minVal, this._maxVal])
+                this.xScale = linear()
+                    .domain(empty ? [0, 10] : [this.minVal, this.maxVal])
                     .nice(3);
-                this._margin.right =
-                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                this.margin.right =
+                    this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                         this.yTickSize +
                         this.tickPadding;
-                this._xScale.range([
+                this.xScale.range([
                     0,
-                    this._dims.width - this._margin.right - this._margin.left
+                    this.dims.width - this.margin.right - this.margin.left
                 ]);
                 // Initializing actual axis
-                this._xAxis = axisBottom(this._xScale);
-                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
+                this.xAxis = axisBottom(this.xScale);
+                this.tickWidth = this.getLargestText(this.xScale.ticks().map((tick) => tick.toLocaleString()));
             }
             else {
                 // Vertical
-                this._xScale = band()
-                    .domain(empty ? this._placeholderTicks : this._chartData.data.xValueNames)
-                    .range([0, this._dims.width - this._margin.right - this._margin.left])
+                this.xScale = band()
+                    .domain(empty ? this.placeholderTicks : this.chartData.data.xValueNames)
+                    .range([0, this.dims.width - this.margin.right - this.margin.left])
                     .paddingOuter(0.1)
                     .paddingInner(0.1);
-                this._xAxis = axisBottom(this._xScale);
+                this.xAxis = axisBottom(this.xScale);
             }
         };
         // Stores all tick text sizes in an indexable array
         this.tickSizes = () => {
             // Initializing tick size array
-            this._namedTickSizes = [];
-            this._ellipsisSize = this.getTextSize('...');
-            if (this._chartData && this._chartData.data) {
-                for (let i = 0; i < this._chartData.data.xValueNames.length; i++) {
-                    this._namedTickSizes.push(Math.ceil(this.getTextSize(this._chartData.data.xValueNames[i])));
+            this.namedTickSizes = [];
+            this.ellipsisSize = this.getTextSize('...');
+            if (this.chartData && this.chartData.data) {
+                for (let i = 0; i < this.chartData.data.xValueNames.length; i++) {
+                    this.namedTickSizes.push(Math.ceil(this.getTextSize(this.chartData.data.xValueNames[i])));
                 }
             }
         };
+        this.barGroupID = (key) => {
+            return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
+        };
         this.updateBars = (fromLoading) => {
-            this._barChartContainer
+            this.barChartContainer
                 .selectAll('.barGroup')
                 .data(this.mappedData)
                 .join((enter) => {
@@ -301,7 +399,7 @@ const barChart = class {
                 const tempSelection = enter
                     .append('g')
                     .attr('class', 'barGroup')
-                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'));
+                    .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
                 tempSelection
                     .append('rect')
                     .attr('class', 'bar')
@@ -309,16 +407,16 @@ const barChart = class {
                     .attr('ry', 4)
                     .attr('rx', 4)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._dims.height - this._margin.bottom)
+                    ? this.yScale(d.key)
+                    : this.dims.height - this.margin.bottom)
                     .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
                     ? 2
-                    : this._xScale(d.key))
+                    : this.xScale(d.key))
                     .attr('width', () => this.afVariation === BarChartVariation.Horizontal
                     ? 0
-                    : this._xScale.bandwidth())
+                    : this.xScale.bandwidth())
                     .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.bandwidth()
+                    ? this.yScale.bandwidth()
                     : 0)
                     .on('mouseenter', this.hover)
                     .on('mouseleave', this.hoverOut)
@@ -330,7 +428,7 @@ const barChart = class {
                     .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))
+                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')
@@ -341,32 +439,32 @@ const barChart = class {
                     .attr('text-anchor', 'end')
                     .style('pointer-events', 'none')
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                    : this._dims.height - this._margin.bottom)
+                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                    : this.dims.height - this.margin.bottom)
                     .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
                     ? 2
-                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
                     .transition()
                     .duration(this.defaultDuration)
                     .ease(polyInOut)
                     .attr('font-size', this.fontSize)
                     .attr('font-weight', '600')
                     .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                    ? this.xScale(d.value)
+                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                    : this._yScale(d.value))
+                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                    : this.yScale(d.value))
                     .attr('text-anchor', (d) => {
                     if (this.afVariation === BarChartVariation.Vertical)
                         return 'middle';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
                         ? 'start'
                         : 'end';
                 })
                     .attr('dx', (d) => {
                     if (this.afVariation === BarChartVariation.Horizontal)
-                        return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        return this.xScale(d.value) < d.len + this.tickPadding * 2
                             ? this.tickPadding
                             : -this.tickPadding;
                     return 0;
@@ -374,7 +472,7 @@ const barChart = class {
                     .attr('fill', (d) => {
                     if (this.afVariation === BarChartVariation.Vertical)
                         return 'black';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
                         ? 'black'
                         : 'white';
                 })
@@ -387,12 +485,12 @@ const barChart = class {
                         ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
                         : 0;
                     const interpolatedValue = interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this._numberFormat));
+                    return (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, '_'));
+                update.attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''));
                 // Mouse interaction to updated loading bars
                 if (fromLoading) {
                     update
@@ -402,11 +500,11 @@ const barChart = class {
                         .on('click', this.openTooltip)
                         .attr('x', this.xFunction)
                         .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale(d.key)
-                        : this._dims.height - this._margin.bottom)
+                        ? this.yScale(d.key)
+                        : this.dims.height - this.margin.bottom)
                         .attr('width', this.widthFunction)
                         .attr('height', () => this.afVariation === BarChartVariation.Horizontal
-                        ? this._yScale.bandwidth()
+                        ? this.yScale.bandwidth()
                         : 0)
                         .attr('fill', '#00005a')
                         .transition()
@@ -414,7 +512,7 @@ const barChart = class {
                         .ease(polyInOut)
                         .attr('y', this.yFunction)
                         .attr('height', this.heightFunction)
-                        .on('end', () => this.barChartObserver.observe(this._chartDiv)); // Reset barchartObserver
+                        .on('end', () => this.barChartObserver.observe(this.chartDiv)); // Reset barchartObserver
                 }
                 else {
                     update
@@ -430,28 +528,28 @@ const barChart = class {
                 }
                 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'; })
+                    .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; })
                     .transition()
                     .duration(this.defaultDuration)
                     .ease(polyInOut)
                     .attr('font-size', this.fontSize)
                     .attr('font-weight', '600')
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                    : this._yScale(d.value))
+                    ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                    : this.yScale(d.value))
                     .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._xScale(d.value)
-                    : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                    ? this.xScale(d.value)
+                    : this.xScale(d.key) + this.xScale.bandwidth() / 2)
                     .attr('text-anchor', (d) => {
                     if (this.afVariation === BarChartVariation.Vertical)
                         return 'middle';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
                         ? 'start'
                         : 'end';
                 })
                     .attr('dx', (d) => {
                     if (this.afVariation === BarChartVariation.Horizontal)
-                        return this._xScale(d.value) < d.len + this.tickPadding * 2
+                        return this.xScale(d.value) < d.len + this.tickPadding * 2
                             ? this.tickPadding
                             : -this.tickPadding;
                     return 0;
@@ -459,7 +557,7 @@ const barChart = class {
                     .attr('fill', (d) => {
                     if (this.afVariation === BarChartVariation.Vertical)
                         return 'black';
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
                         ? 'black'
                         : 'white';
                 })
@@ -472,27 +570,27 @@ const barChart = class {
                         ? parseFloat(nodelist[i].textContent.replace(/\s/g, ''))
                         : 0;
                     const interpolatedValue = interpolate(oldnum, d.value);
-                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this._numberFormat));
+                    return (t) => (nodelist[i].textContent = parseInt(interpolatedValue(t)).toLocaleString(undefined, this.numberFormat));
                 });
             }, (exit) => exit.remove());
-            this._barSelection = this._barChartContainer.selectAll('rect');
-            this._textSelection = this._barChartContainer.selectAll('.barText');
+            this.barSelection = this.barChartContainer.selectAll('rect');
+            this.textSelection = this.barChartContainer.selectAll('.barText');
         };
         // Setting position of text according to bar size
         this.adjustBarText = () => {
             var _a, _b;
-            if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+            if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
                 return;
-            this._textSelection
+            this.textSelection
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-                : this._yScale(d.value))
+                ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+                : this.yScale(d.value))
                 .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._xScale(d.value)
-                : this._xScale(d.key) + this._xScale.bandwidth() / 2)
+                ? this.xScale(d.value)
+                : this.xScale(d.key) + this.xScale.bandwidth() / 2)
                 .attr('dx', (d) => {
                 if (this.afVariation === BarChartVariation.Horizontal)
-                    return this._xScale(d.value) < d.len + this.tickPadding * 2
+                    return this.xScale(d.value) < d.len + this.tickPadding * 2
                         ? this.tickPadding
                         : -this.tickPadding;
                 return 0;
@@ -500,26 +598,26 @@ const barChart = class {
                 .attr('fill', (d) => {
                 if (this.afVariation === BarChartVariation.Vertical)
                     return 'black';
-                return this._xScale(d.value) < d.len + this.tickPadding * 2
+                return this.xScale(d.value) < d.len + this.tickPadding * 2
                     ? 'black'
                     : 'white';
             })
                 .attr('text-anchor', (d) => {
                 if (this.afVariation === BarChartVariation.Vertical)
                     return 'middle';
-                return this._xScale(d.value) < d.len + this.tickPadding * 2
+                return this.xScale(d.value) < d.len + this.tickPadding * 2
                     ? 'start'
                     : 'end';
             });
         };
         this.reshapeData = () => {
             const toReturn = [];
-            if (this._loading) {
-                this._placeholderTicks.forEach((key) => {
+            if (this.loading || !this.chartData) {
+                this.placeholderTicks.forEach((key) => {
                     const tick = { key: key, series: [] };
                     tick.series.push({
                         key: key,
-                        serie: '',
+                        serie: 'loading',
                         value: Math.floor(Math.random() * (9 - 2 + 1) + 2),
                         len: 0
                     });
@@ -527,154 +625,177 @@ 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 = () => {
-            this._barSelection.selectAll('.bar')
+            this.barSelection.selectAll('.bar')
                 .attr('x', this.xFunction)
                 .attr('y', this.yFunction)
                 .attr('width', this.widthFunction)
                 .attr('height', this.heightFunction);
         };
+        this.evalColorVar = (colorVar) => {
+            return getComputedStyle(document.documentElement)
+                .getPropertyValue(colorVar)
+                .trim()
+                .toLocaleLowerCase();
+        };
         // Handling x positioning of bars
         this.xFunction = (d, i) => {
             return this.afVariation === BarChartVariation.Horizontal
-                ? (d.value > 0 ? this._xScale(0) : this._xScale(d.value))
-                : this._xScale(d.key) + ((this._xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
+                ? (d.value > 0 ? this.xScale(0) : this.xScale(d.value))
+                : this.xScale(d.key) + ((this.xScale.bandwidth() / this.dataWidth) * i + (this.barGap * i));
         };
         // Handling y positioning of bars
         this.yFunction = (d, i) => {
             if (!d.value)
                 return 0;
             return this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key) + ((this._yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
-                : (d.value < 0 ? this._yScale(0) : this._yScale(d.value));
+                ? this.yScale(d.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
+                : (d.value < 0 ? this.yScale(0) : this.yScale(d.value));
         };
         // Handling height for bars
         this.heightFunction = (d) => {
             if (!d.value)
                 return 0;
             return this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.bandwidth() / this.dataWidth - (this.barGap)
-                : (d.value < 0 ? this._yScale(d.value) - this._yScale(0) : this._yScale(0) - this._yScale(d.value));
+                ? this.yScale.bandwidth() / this.dataWidth - (this.barGap)
+                : (d.value < 0 ? this.yScale(d.value) - this.yScale(0) : this.yScale(0) - this.yScale(d.value));
         };
         // Handling width for bars
         this.widthFunction = (d) => {
             return this.afVariation === BarChartVariation.Horizontal
-                ? Math.abs(this._xScale(0) - this._xScale(d.value))
-                : this._xScale.bandwidth() / this.dataWidth - (this.barGap);
-        };
-        // Resize table
-        this.resizeTable = () => {
-            this.setDims();
-            this.setTableDimensions();
+                ? Math.abs(this.xScale(0) - this.xScale(d.value))
+                : this.xScale.bandwidth() / this.dataWidth - (this.barGap);
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
             // Get title dimensions
-            const tempTitle = select(this._titleDiv).node().getBoundingClientRect(), tempLegend = select(this._legendDiv).node().getBoundingClientRect();
-            const prevHeight = this._dims.height;
+            const tempTitle = select(this.titleDiv).node().getBoundingClientRect(), tempLegend = select(this.legendDiv).node().getBoundingClientRect();
+            const prevHeight = this.dims.height;
             if (!onlyHeight)
-                this._dims = select(this._chartDiv).node().getBoundingClientRect();
-            this._dims.height =
-                this._maxHeight - tempLegend.height - tempTitle.height - 1.75 * this._rem;
-            return prevHeight != this._dims.height;
+                this.dims = select(this.chartDiv).node().getBoundingClientRect();
+            this.dims.height =
+                this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
+            return prevHeight != this.dims.height;
         };
         // Setting margins given text size
         this.setMargins = (fromLoading) => {
             var _a;
-            this._pixelSize =
+            this.pixelSize =
                 Number(window
                     .getComputedStyle(document.body)
                     .getPropertyValue('font-size')
                     .match(/\d+/)[0]) * Number(this.fontSize.replace(/[^\d.]|\.(?=.*\.)/g, ''));
             // Getting the longest word, assuming it will also be the widest in terms of pixels
             if (this.afVariation === BarChartVariation.Horizontal) {
-                const left = ((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data) &&
-                    this.getLargestText(this._chartData.data.xValueNames)
-                    ? this.getLargestText(this._chartData.data.xValueNames)
+                const left = ((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data) &&
+                    this.getLargestText(this.chartData.data.xValueNames)
+                    ? this.getLargestText(this.chartData.data.xValueNames)
                     : 0;
-                this._margin.left = left;
+                this.margin.left = left;
+                this.margin.bottom = this.pixelSize + this.tickPadding + this.xTickSize;
             }
-            else
-                this._margin.left = this.getLargestText(fromLoading
+            else {
+                this.margin.left = this.getLargestText(fromLoading
                     ? ['0', '10']
                     : [
-                        this._minVal ? this._tempScale[0].toLocaleString() : '0',
-                        this._maxVal ? this._tempScale[1].toLocaleString() : '10'
+                        this.minVal ? this.tempScale[0].toLocaleString() : '0',
+                        this.maxVal ? this.tempScale[1].toLocaleString() : '10'
                     ]);
-            if (this._margin.left > this._dims.width / 4) {
-                this._margin.left = Math.floor(this._dims.width / 4);
-                this._margin.ellipsis = true;
+                this.margin.bottom = this.pixelSize;
+            }
+            if (this.margin.left > this.dims.width / 4) {
+                this.margin.left = Math.floor(this.dims.width / 4);
+                this.margin.ellipsis = true;
             }
             else
-                this._margin.ellipsis = false;
-            this._margin.bottom = this._pixelSize + this.tickPadding + this.xTickSize;
+                this.margin.ellipsis = false;
         };
         // Adjusting y-ticks
         this.setNamedTicks = (transition = false) => {
             if (this.afVariation == BarChartVariation.Horizontal) {
                 if (!transition) {
-                    this._yAxisHandle
+                    this.yAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
-                        .call(this._yAxis
+                        .call(this.yAxis
                         .tickPadding(this.tickPadding)
                         .tickSize(this.yTickSize)
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
-                        if (!this._margin.ellipsis)
+                        if (!this.margin.ellipsis)
                             return d.toLocaleString();
                         // Adding ellipsis to text
-                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
-                        const mSize = this._margin.left;
+                        const size = this.namedTickSizes[i] + this.tickPadding + this.yTickSize;
+                        const mSize = this.margin.left;
                         if (size < mSize)
                             return d.toLocaleString();
-                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
+                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length), 3)) + '...');
                         let adjustment = 0;
                         if (newSize > mSize) {
                             adjustment = Math.ceil((newSize - mSize) / (size / d.length));
                         }
                         // Slicing the text up, saving atleast 3 characters
                         return (d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length) - adjustment, 3))
                             .trim() + '...');
                     }));
                 }
                 else {
-                    this._yAxisHandle
+                    this.yAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
                         .transition()
                         .duration(this.defaultDuration)
-                        .call(this._yAxis
+                        .call(this.yAxis
                         .tickPadding(this.tickPadding)
                         .tickSize(this.yTickSize)
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
-                        if (!this._margin.ellipsis)
+                        if (!this.margin.ellipsis)
                             return d;
                         // Adding ellipsis to text
-                        const size = this._namedTickSizes[i] + this.tickPadding + this.yTickSize;
-                        const mSize = this._margin.left;
+                        const size = this.namedTickSizes[i] + this.tickPadding + this.yTickSize;
+                        const mSize = this.margin.left;
                         if (size < mSize)
                             return d;
                         const newSize = this.getTextSize(d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3))
+                            .slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length), 3))
                             .trim() + '...');
                         let adjustment = 0;
                         if (newSize > mSize) {
@@ -682,26 +803,26 @@ const barChart = class {
                         }
                         // Slicing the text up, saving atleast 3 characters
                         return (d
-                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .slice(0, Math.max(Math.floor((mSize / (size + this.ellipsisSize)) * d.length) - adjustment, 3))
                             .trim() + '...');
                     }));
                 }
             }
             else {
                 //Calculating every n:th text to show
-                let nTh = Math.round(this._chartData.data.xValues.length /
-                    ((this._dims.width - this._margin.left - this._margin.right) / 90 - 1));
-                if (Math.floor(this._chartData.data.xValues.length / nTh) < 4) {
-                    nTh = Math.round(this._chartData.data.xValues.length / 4);
+                let nTh = Math.max(Math.round(this.chartData.data.xValues.length /
+                    ((this.dims.width - this.margin.left - this.margin.right) / 90 - 1)), 1);
+                if (Math.floor(this.chartData.data.xValues.length / nTh) < 4) {
+                    nTh = Math.round(this.chartData.data.xValues.length / 4);
                 }
-                const allowedWidth = (this._dims.width - this._margin.left - this._margin.right) /
-                    Math.floor(this._chartData.data.xValues.length / nTh + 1);
+                const allowedWidth = (this.dims.width - this.margin.left - this.margin.right) /
+                    Math.floor(this.chartData.data.xValues.length / nTh + 1);
                 if (!transition) {
-                    this._xAxisHandle
+                    this.xAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
-                        .call(this._xAxis
-                        .tickValues(this._xScale.domain().filter((...[, i]) => {
+                        .call(this.xAxis
+                        .tickValues(this.xScale.domain().filter((...[, i]) => {
                         if (i == 0)
                             return true;
                         else {
@@ -713,23 +834,23 @@ const barChart = class {
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
                         const index = i * nTh;
-                        if (this._namedTickSizes[index] < allowedWidth)
+                        if (this.namedTickSizes[index] < allowedWidth)
                             return d;
                         return (d.slice(0, Math.max(Math.floor((allowedWidth /
-                            (this._namedTickSizes[index] +
-                                this._ellipsisSize +
+                            (this.namedTickSizes[index] +
+                                this.ellipsisSize +
                                 5)) *
                             d.length), 3)) + '...');
                     }));
                 }
                 else {
-                    this._xAxisHandle
+                    this.xAxisHandle
                         .style('font-size', this.fontSize)
                         .style('font-family', 'Open Sans')
                         .transition()
                         .duration(this.defaultDuration)
-                        .call(this._xAxis
-                        .tickValues(this._xScale.domain().filter((...[, i]) => {
+                        .call(this.xAxis
+                        .tickValues(this.xScale.domain().filter((...[, i]) => {
                         if (i == 0)
                             return true;
                         else {
@@ -741,11 +862,11 @@ const barChart = class {
                         .tickSizeOuter(0)
                         .tickFormat((d, i) => {
                         const index = i * nTh;
-                        if (this._namedTickSizes[index] < allowedWidth)
+                        if (this.namedTickSizes[index] < allowedWidth)
                             return d;
                         return (d.slice(0, Math.max(Math.floor((allowedWidth /
-                            (this._namedTickSizes[index] +
-                                this._ellipsisSize +
+                            (this.namedTickSizes[index] +
+                                this.ellipsisSize +
                                 5)) *
                             d.length), 3)) + '...');
                     }));
@@ -755,30 +876,30 @@ const barChart = class {
         // Positioning the ticks of the value bearing axis
         this.setValueTicks = (transition = false) => {
             var _a, _b;
-            if (((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) && ((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.meta.hideXAxis)) {
+            if (((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) && ((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.meta.hideXAxis)) {
                 this.afVariation === BarChartVariation.Horizontal
-                    ? this._xAxisHandle.attr('display', 'none')
-                    : this._yAxisHandle.attr('display', 'none');
+                    ? this.xAxisHandle.attr('display', 'none')
+                    : this.yAxisHandle.attr('display', 'none');
                 return;
             }
             let toCall, tickSize, handle;
             if (this.afVariation === BarChartVariation.Horizontal) {
-                this._xAxisHandle.attr('display', null);
-                toCall = this._xAxis;
-                tickSize = -(this._dims.height - this._margin.top - this._margin.bottom);
-                handle = this._xAxisHandle;
+                this.xAxisHandle.attr('display', null);
+                toCall = this.xAxis;
+                tickSize = -(this.dims.height - this.margin.top - this.margin.bottom);
+                handle = this.xAxisHandle;
             }
             else {
-                this._yAxisHandle.attr('display', null);
-                toCall = this._yAxis;
-                tickSize = -(this._dims.width - this._margin.left - this._margin.right);
-                handle = this._yAxisHandle;
+                this.yAxisHandle.attr('display', null);
+                toCall = this.yAxis;
+                tickSize = -(this.dims.width - this.margin.left - this.margin.right);
+                handle = this.yAxisHandle;
             }
             // Computing the amount of ticks to show
-            const ticks = Math.min(Math.floor((this._dims.width - this._margin.left - this._margin.right) /
-                (this._tickWidth + this.xTickSize)) - 2, this.afVariation == BarChartVariation.Horizontal
-                ? this._xScale.ticks().length
-                : this._yScale.ticks().length);
+            const ticks = Math.min(Math.floor((this.dims.width - this.margin.left - this.margin.right) /
+                (this.tickWidth + this.xTickSize)) - 2, this.afVariation == BarChartVariation.Horizontal
+                ? this.xScale.ticks().length
+                : this.yScale.ticks().length);
             if (!transition) {
                 handle
                     .style('font-size', this.fontSize)
@@ -809,124 +930,162 @@ const barChart = class {
             }
             handle.selectAll('line').attr('stroke', 'lightgray');
             if (this.afVariation === BarChartVariation.Vertical)
-                this._yAxisHandle.select('.domain').attr('display', 'none');
+                this.yAxisHandle.select('.domain').attr('display', 'none');
         };
         // Highlight bar
         this.hover = (event) => {
             select(event.target)
-                .transition('hover')
+                .transition('color')
                 .duration(20)
-                .attr('fill', (d) => event.target.tagName === 'rect'
-                ? `hsl(from ${this.colorFunction(d.serie)} h s calc(l + 10))`
-                : 'var(--digi--color--background--interactive--hover--tertiary)');
+                .attr('fill', (d) => {
+                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
         this.hoverOut = (event) => {
             select(event.target)
-                .transition('hover')
+                .transition('color')
                 .duration(this.defaultDuration)
                 .attr('fill', (d) => event.target.tagName === 'rect' ? this.colorFunction(d.serie) : '#333333');
         };
         this.openTooltip = (...[, d]) => {
             // If type is string, the user has clicked on a y-axis tick
             if (typeof d === 'string') {
-                this._tooltipData = this._barChartContainer
-                    .select(`#barGroup${d.replace(/[^A-Z0-9]+/gi, '_')}`)
+                this.tooltipData = this.barChartContainer
+                    .select(`#${this.barGroupID(d)}`)
                     .datum();
             }
             else
-                this._tooltipData = d;
-            const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
-                .select(this._tooltipHeading)
-                .style('margin', '0 0.75rem 0 0 ')
-                .style('font-weight', 500)
-                .html(this._tooltipData.key);
+                this.tooltipData = d;
+            const tooltipBody = this.tooltip.select('.tooltipBody');
+            this.tooltip
+                .select('.tooltipHeading')
+                .html(this.tooltipData.key);
             tooltipBody
                 .selectAll('div')
-                .data([this._tooltipData])
+                .data(this.tooltipData.series ? this.tooltipData.series : [this.tooltipData])
                 .join('div')
                 .style('display', 'flex')
                 .style('flex-direction', 'row')
                 .style('flex-wrap', 'nowrap')
                 .style('white-space', 'nowrap')
                 .style('justify-content', 'space-between')
-                .html((d) => d.value.toLocaleString());
-            this._tooltip.style('display', 'flex');
-            this.positionTooltip(this._tooltipData);
+                .style('margin', '0.25rem 0')
+                .html((d) => {
+                return `<span>${d.serie}: <b style="font-weight:600;">${d.value.toLocaleString(undefined, this.numberFormat)}</b></span>`;
+            });
+            this.tooltip.style('visibility', 'visible');
+            this.positionTooltip(this.tooltipData);
         };
         this.closeTooltip = () => {
-            this._tooltip.style('display', 'none');
+            this.tooltip.style('visibility', 'hidden');
         };
         // Positions tooltip in horizontal mode
         this.positionTooltip = (data) => {
-            const width = this._tooltip.node().getBoundingClientRect().width;
-            const height = this._tooltip.node().getBoundingClientRect().height + 8;
-            const diff = this._xScale(data.value) / 2 - width / 2;
-            if (this.afVariation === BarChartVariation.Horizontal) {
-                this._tooltip
-                    .style('transform', `translate(${this._margin.left + this.tickPadding + Math.max(diff, -4)}px, ${this._yScale(data.key) + this._yScale.bandwidth() + this._yScale.paddingInner() * this._yScale.bandwidth()}px )`)
-                    .style('max-width', this._xScale.range()[1] + 'px');
-                this._tooltip
-                    .select('digi-icon-caret-up')
-                    .style('position', 'absolute')
-                    .style('--digi--icon--color', 'white')
-                    .style('top', '-11px')
-                    .style('left', '0')
-                    .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this._xScale(data.value) / 2}px,0)`);
+            var _a;
+            const width = this.tooltip.node().getBoundingClientRect().width;
+            // Single bar
+            if ('serie' in data) {
+                if (this.afVariation === BarChartVariation.Horizontal) {
+                    const diff = this.xScale(data.value) / 2 - width / 2;
+                    this.tooltip
+                        .style('transform', `translate(${this.margin.left + this.tickPadding + Math.max(diff, -4)}px, ${this.yScale(data.key) + this.yScale.bandwidth() + this.yScale.paddingInner() * this.yScale.bandwidth()}px )`)
+                        .style('max-width', this.xScale.range()[1] + 'px');
+                    this.tooltip
+                        .select('digi-icon-caret-up')
+                        .style('position', 'absolute')
+                        .style('top', '-12px')
+                        .style('left', '0')
+                        .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
+                }
+                else {
+                    const index = (_a = this.mappedData.find(xPoint => xPoint.key === data.key)) === null || _a === void 0 ? void 0 : _a.series.findIndex(serie => serie.serie === data.serie);
+                    const barIndex = ((this.xScale.bandwidth() / this.dataWidth) * (index ? index + 1 : 1)) - (this.xScale.bandwidth() / this.dataWidth) / 2;
+                    // This should be where the x-axis starts
+                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
+                    // Creating adjustment for tooltip to not appear outside of chart
+                    const spaceToSVGEdge = 5;
+                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (this.xScale(data.key) + xStart + barIndex + width / 2) ? (((this.xScale(data.key) + xStart + barIndex + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
+                    this.tooltip
+                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + barIndex}px - ${50 + inlineAdjustment}%), calc(-100% + ${(data.value > 0 ? this.yScale(data.value) : this.yScale(0)) - 2}px) )`);
+                    this.tooltip
+                        .select('digi-icon-caret-down')
+                        .style('position', 'absolute')
+                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
+                        .style('bottom', '-12px');
+                }
             }
             else {
-                this._tooltip
-                    .style('transform', `translate(${this._margin.left + this.tickPadding + this._xScale(data.key) + this._xScale.bandwidth() / 2 - width / 2}px, ${this._yScale(data.value) - height}px )`)
-                    .style('max-width', this._xScale.range()[1] + 'px');
-                this._tooltip
-                    .select('digi-icon-caret-down')
-                    .style('position', 'absolute')
-                    .style('--digi--icon--color', 'white')
-                    .style('left', '0')
-                    .style('bottom', '-11px')
-                    .style('transform', `translate(${width / 2 - 6}px,0)`);
+                if (this.afVariation === BarChartVariation.Horizontal) {
+                    console.log('helloo');
+                }
+                else {
+                    const xStart = this.margin.left + this.tickPadding + this.yTickSize;
+                    const translatePoint = this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2;
+                    const yMax = max(data.series.map(elem => elem.value));
+                    // Creating adjustment for tooltip to not appear outside of chart
+                    const spaceToSVGEdge = 5;
+                    const inlineAdjustment = (this.dims.width - spaceToSVGEdge) < (translatePoint + width / 2) ? (((translatePoint + width / 2) - (this.dims.width - spaceToSVGEdge)) / width) * 100 : 0;
+                    this.tooltip
+                        .style('transform', `translate( calc(${this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2}px - ${50 + inlineAdjustment}%), calc(-100% + ${this.yScale(yMax && yMax > 0 ? yMax : 0) - 1}px) )`);
+                    this.tooltip
+                        .select('digi-icon-caret-down')
+                        .style('position', 'absolute')
+                        .style('left', `calc(${50 + inlineAdjustment}% - 6px)`)
+                        .style('bottom', '-12px');
+                }
             }
         };
         // Once texts has fully loaded, we can recompute some sizes
         this.recomputeTextSize = () => {
             var _a, _b;
             if (this.afVariation == BarChartVariation.Horizontal)
-                this._tickWidth = this.getLargestText(this._xScale.ticks().map((tick) => tick.toLocaleString()));
+                this.tickWidth = this.getLargestText(this.xScale.ticks().map((tick) => tick.toLocaleString()));
             this.tickSizes();
-            this._barChartContainer.selectAll('.barGroup').data(this.mappedData);
-            if ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
-                this._textSelection.remove();
+            this.barChartContainer.selectAll('.barGroup').data(this.mappedData);
+            if ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels)
+                this.textSelection.remove();
             this.initBarText();
         };
         // Removes resize observer for chart and inits table
         this.activateTable = (event) => {
             this.closeTooltip();
             this.barChartObserver.disconnect();
-            this.tableObserver.observe(this._chartDiv);
-            this._status.innerHTML = '<p>Visas som tabell</p>';
-            select(this._host).select('.tableButton').style('display', 'none');
-            select(this._host).select('.chartButton').style('display', null);
+            this.status.innerHTML = '<p>Visas som tabell</p>';
+            select(this.host).select('.tableButton').style('display', 'none');
+            select(this.host).select('.chartButton').style('display', null);
             event.target.nextSibling.lastChild.focus();
             const duration = 150;
-            this._svg
+            this.svg
                 .attr('opacity', 1)
                 .transition('fadeout')
                 .duration(duration)
                 .attr('opacity', 0)
                 .on('end', () => {
-                this._svg.remove();
-                this._legendDiv.style['display'] = 'none';
-                this._tableDiv.style['display'] = 'block';
+                this.svg.remove();
+                select(this.legendDiv).select('.legend').selectAll('.legendChip').remove();
+                this.legendDiv.style['display'] = 'none';
+                this.tableDiv.style['display'] = 'block';
                 this.setTableContent();
                 this.setTableDimensions();
-                select(this._tableDiv)
+                select(this.tableDiv)
                     .style('opacity', 0)
                     .transition('fadein')
                     .duration(duration)
                     .style('opacity', 1);
+                this.chartDiv.style['display'] = 'none';
             });
-            select(this._legendDiv)
+            select(this.legendDiv)
                 .style('opacity', 1)
                 .transition('fadeout')
                 .duration(duration)
@@ -934,12 +1093,12 @@ const barChart = class {
         };
         // Removes observer and calls init functions for line chart
         this.reInitChart = (event) => {
-            this.tableObserver.disconnect();
-            this._status.innerHTML = '<p>Visas som diagram</p>';
-            select(this._host).select('.tableButton').style('display', null);
-            select(this._host).select('.chartButton').style('display', 'none');
+            this.status.innerHTML = '<p>Visas som diagram</p>';
+            select(this.host).select('.tableButton').style('display', null);
+            select(this.host).select('.chartButton').style('display', 'none');
             event.target.previousSibling.lastChild.focus();
-            const table = select(this._tableDiv);
+            const table = select(this.tableDiv);
+            const duration = 150;
             table
                 .style('opacity', 1)
                 .transition()
@@ -947,12 +1106,19 @@ const barChart = class {
                 .style('opacity', 0)
                 .on('end', () => {
                 table.style('display', 'none');
+                this.chartDiv.style['display'] = 'flex';
+                this.legendDiv.style['display'] = 'grid';
                 this.initChain();
-                this._svg
+                this.svg
                     .attr('opacity', 0)
                     .transition()
-                    .duration(150)
+                    .duration(duration)
                     .attr('opacity', 1);
+                select(this.legendDiv)
+                    .style('opacity', 0)
+                    .transition('fadeout')
+                    .duration(duration)
+                    .style('opacity', 1);
             });
         };
         this.afVariation = BarChartVariation.Vertical;
@@ -962,9 +1128,10 @@ const barChart = class {
     }
     afChartDataUpdate(data) {
         if (typeof data != 'string')
-            this._chartData = data;
+            this.chartData = data;
         else
-            this._chartData = JSON.parse(data);
+            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) => {
@@ -977,69 +1144,113 @@ const barChart = class {
     initSvg() {
         var _a, _b, _c, _d, _e, _f, _g;
         // Fetch number formatting
-        this._numberFormat = {
-            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
-            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
+        this.numberFormat = {
+            maximumSignificantDigits: (_c = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
+            notation: ((_f = (_e = (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
                 ? 'compact'
                 : 'standard'
         };
-        select(this._chartDiv).select('svg').remove();
-        this._maxHeight = (_g = select(this._host)
+        select(this.chartDiv).select('.chartSVG').remove();
+        this.maxHeight = (_g = select(this.host)
             .node()
             .parentNode) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height;
-        this.barChartObserver.observe(this._chartDiv);
+        this.barChartObserver.observe(this.chartDiv);
         // Getting rem-size
-        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        this.setMinMax();
+        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setDims();
+        this.setMinMax();
         this.setMargins();
         // Appending svg
-        this._svg = select(this._chartDiv)
+        this.svg = select(this.chartDiv)
             .append('svg')
+            .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
             .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
-            : 'Stapeldiagram');
-        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
+            : 'Stapeldiagram')
+            .attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
+    }
+    initLegend() {
+        const rectSize = 18;
+        const legendData = this.chartData.data.series.map(serie => serie.title);
+        if (this.chartData.data.averageLine)
+            legendData.push(this.chartData.data.averageLine.text);
+        const legendChips = select(this.legendDiv).select('.legend')
+            .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
+            .selectAll('.legendChip')
+            .data(legendData)
+            .join('div')
+            .attr('class', 'legendChip')
+            .style('display', 'flex')
+            .style('flex-direction', 'row')
+            .style('align-items', 'center')
+            .style('gap', '0.25rem')
+            .style('cursor', 'default')
+            .on('mouseenter', (_event, serie) => this.highlightBars(serie))
+            .on('mouseleave', this.resetBarColor);
+        legendChips.append('svg')
+            .attr('width', rectSize)
+            .attr('height', rectSize)
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', rectSize)
+            .attr('height', rectSize)
+            .attr('rx', 4)
+            .attr('ry', 4)
+            .attr('fill', (title) => this.colorFunction(title));
+        legendChips.append('span').style('text-wrap', 'nowrap').text((d) => d);
+        if (this.chartData.data.averageLine) {
+            const averageLine = legendChips.filter(':last-child')
+                .on('mouseenter', (_event, serie) => this.highlightAverageLine(serie));
+            const miniSVG = averageLine
+                .select('svg')
+                .attr('width', rectSize * 2);
+            miniSVG.select('rect').remove();
+            miniSVG.append('line')
+                .attr('x1', 1)
+                .attr('x2', rectSize * 2 - 1)
+                .attr('y1', rectSize / 2 + 1)
+                .attr('y2', rectSize / 2 + 1)
+                .attr('stroke', 'var(--digi--color--infographic--lineart)')
+                .attr('stroke-linecap', 'round')
+                .attr('stroke-dasharray', '12, 7');
+        }
     }
     initToolTip() {
         // Getting handle for tooltip
-        this._tooltip = select('#' + this.afId);
-        this._tooltip.select('.close').on('click', this.closeTooltip);
-        this._tooltipHeading =
-            'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1); // increment heading level by one
+        this.tooltip = select('#' + this.afId);
+        this.tooltip.select('.close').on('click', this.closeTooltip);
         // Add heading placeholder for heading
-        this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading)
+        this.tooltip
+            .select('.tooltipHead')
+            .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
             .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
             .style('font-size', '1rem')
-            .style('margin', '0 0.75rem')
+            .style('margin', '0 0.75rem 0.5rem 0 ')
             .style('font-weight', '500');
+        this.tooltip.style('visibility', 'hidden');
     }
     initEmpty() {
-        select(this._chartDiv).select('svg').remove();
-        this._maxHeight = select(this._host)
+        select(this.chartDiv).select('svg').remove();
+        this.maxHeight = select(this.host)
             .node()
             .parentNode.getBoundingClientRect().height;
-        this.barChartObserver.observe(this._chartDiv);
+        this.barChartObserver.observe(this.chartDiv);
         // Getting rem-size
-        this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        //this.setMinMax();
-        this.setDims();
+        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setMargins();
         // Appending svg
-        this._svg = select(this._chartDiv)
+        this.svg = select(this.chartDiv)
             .append('svg')
             .attr('aria-hidden', true)
             .attr('role', 'img')
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
             : 'Stapeldiagram');
-        this._svg.attr('width', this._dims.width).attr('height', this._dims.height);
         // Hide unusable components
-        select(this._titleDiv)
+        select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         this.initYAxis(true);
@@ -1047,62 +1258,60 @@ const barChart = class {
         this.loadingState(true);
     }
     loadingState(empty) {
-        this._loading = true;
+        this.loading = true;
         // close potentially open tooltip
-        if (this._tooltip)
+        if (this.tooltip)
             this.closeTooltip();
-        select(this._host).select('.tableButton').style('display', 'none');
+        select(this.host).select('.tableButton').style('display', 'none');
         const newHeight = this.setDims();
         this.transitionTitle();
-        this._xAxisHandle.selectAll('.tick').remove();
-        this._xAxisHandle.select('path').remove();
-        this._svg
+        this.xAxisHandle.selectAll('.tick').remove();
+        this.xAxisHandle.select('path').remove();
+        this.svg
             .transition()
             .duration(400)
-            .attr('width', this._dims.width)
-            .attr('height', this._dims.height)
-            .attr('aria-label', this._chartData && this._chartData.title
-            ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            .attr('aria-label', this.chartData && this.chartData.title
+            ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
             : 'Stapeldiagram');
         this.setMargins(true);
-        select(this._titleDiv)
+        select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${_t.loading}...`);
         // Waiting with observing for changes until transition to regular bars is complete
-        this._barChartContainer
+        this.barChartContainer
             .transition('position')
             .duration(this.defaultDuration)
             .ease(polyInOut)
-            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+            .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
         // If there is a new height
         if (newHeight) {
             // Update y-axis with potentially new height (might want to do a check here)
             this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.range([
-                    this._margin.top,
-                    this._dims.height - this._margin.bottom
+                ? this.yScale.range([
+                    this.margin.top,
+                    this.dims.height - this.margin.bottom
                 ])
-                : this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
+                : this.yScale.range([
+                    this.dims.height - this.margin.bottom,
+                    this.margin.top
                 ]);
-            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         const animateBars = () => {
-            this._barChartContainer.selectAll('.barGroup').remove();
-            this._barSelection = this._barChartContainer
+            this.barChartContainer.selectAll('.barGroup').remove();
+            this.barSelection = this.barChartContainer
                 .selectAll('barGroup')
                 .data(this.mappedData)
                 .join('g')
                 .attr('class', 'barGroup')
-                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_'))
+                .attr('id', (d) => 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, ''))
                 .append('rect')
                 .attr('class', 'bar')
                 .style('cursor', 'pointer');
-            this._barSelection
+            this.barSelection
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
+                ? this.yScale(d.key)
+                : this.dims.height - this.margin.bottom)
                 .attr('x', this.xFunction)
                 .attr('ry', 4)
                 .attr('rx', 4)
@@ -1114,29 +1323,29 @@ const barChart = class {
                 .delay((...[, i]) => i * 150)
                 .attr('y', this.yFunction)
                 .attr('height', this.heightFunction);
-            this._barSelection
+            this.barSelection
                 .transition()
                 .duration(400)
                 .ease(linear$1)
                 .delay((...[, i]) => i * 150 + 400)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
+                ? this.yScale(d.key)
+                : this.dims.height - this.margin.bottom)
                 .attr('height', () => 0)
                 .on('end', (...[, i]) => {
-                if (i === this._placeholderTicks.length - 1)
+                if (i === this.placeholderTicks.length - 1)
                     animateBars();
             });
         };
         const flattenBars = () => {
-            this._barChartContainer
+            this.barChartContainer
                 .selectAll('rect')
                 .transition()
                 .duration(200)
                 .ease(linear$1)
                 .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale(d.key)
-                : this._dims.height - this._margin.bottom)
+                ? this.yScale(d.key)
+                : this.dims.height - this.margin.bottom)
                 .attr('height', () => 0)
                 .on('end', (...[, i]) => {
                 if (i != 0)
@@ -1144,7 +1353,7 @@ const barChart = class {
                 this.setYScale(true);
                 this.setValueTicks();
                 this.setXScale(true);
-                this.barChartObserver.observe(this._chartDiv);
+                this.barChartObserver.observe(this.chartDiv);
                 animateBars();
             });
         };
@@ -1154,20 +1363,20 @@ const barChart = class {
             flattenBars();
     }
     transitionTitle() {
-        const height = select(this._titleDiv).style('height');
-        select(this._titleDiv)
-            .style('height', this._prevHeight)
+        const height = select(this.titleDiv).style('height');
+        select(this.titleDiv)
+            .style('height', this.prevHeight)
             .transition('adjust')
             .duration(400)
             .style('height', height)
-            .on('end', () => select(this._titleDiv).style('height', null));
+            .on('end', () => select(this.titleDiv).style('height', null));
     }
     initYAxis(empty) {
         this.setYScale(empty);
-        this._barChartContainer = this._svg
+        this.barChartContainer = this.svg
             .append('g')
-            .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        this._yAxisHandle = this._barChartContainer.append('g');
+            .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+        this.yAxisHandle = this.barChartContainer.append('g');
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.tickSizes();
             this.setNamedTicks();
@@ -1179,31 +1388,31 @@ const barChart = class {
     // Sets the largest and smallest value from series 0, Should only be used when not loading
     setMinMax() {
         var _a, _b, _c, _d, _e, _f, _g;
-        const max$1 = max((_a = this._chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
-            ? max((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
+        const max$1 = max((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
+            ? max((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
             : 0;
-        const min$1 = min([0, min((_c = this._chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
-            ? min([0, min((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
+        const min$1 = min([0, min((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
+            ? min([0, min((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
             : 0;
-        this._maxVal = max$1;
-        this._minVal = min$1;
-        this._tempScale = linear()
-            .domain([this._minVal, this._maxVal])
-            .nice(((_f = (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
-            ? (_g = this._chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
+        this.maxVal = max$1;
+        this.minVal = min$1;
+        this.tempScale = linear()
+            .domain([this.minVal, this.maxVal])
+            .nice(((_f = (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
+            ? (_g = this.chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
             : 3)
             .domain();
     }
     // Setting up x-axis, getting margin.right in this function
     initXAxis(empty) {
         this.setXScale(empty);
-        this._xAxisHandle = this._barChartContainer
+        this.xAxisHandle = this.barChartContainer
             .append('g')
-            .attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            .attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         if (this.afVariation === BarChartVariation.Horizontal) {
             this.setValueTicks();
             // Removing first tick, because it aligns with y-axis domain
-            //this._xAxisHandle.select('.tick').select('line').remove();
+            //this.xAxisHandle.select('.tick').select('line').remove();
         }
         else {
             if (!empty) {
@@ -1215,15 +1424,16 @@ const barChart = class {
     }
     // Initializing bars, can only handle one series of bars for now
     initBars() {
-        this._barSelection = this._barChartContainer
+        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) => {
-            return 'barGroup' + d.key.replace(/[^A-Z0-9]+/gi, '_');
-        });
-        this._barSelection.selectAll('.barGroup')
+            .attr('id', (d) => this.barGroupID(d.key));
+        this.barSelection.selectAll('.barGroup')
             .data((d) => {
             return d.series;
         })
@@ -1243,53 +1453,55 @@ const barChart = class {
     }
     initBarText() {
         var _a, _b;
-        if (!((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
+        if (!((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels))
             return;
-        this._textSelection = this._barChartContainer
+        this.textSelection = this.barChartContainer
             .selectAll('.barGroup')
             .append('text');
-        this._textSelection
+        this.textSelection
             .text((d) => {
-            return d.value ? d.value.toLocaleString(undefined, this._numberFormat) : undefined;
+            return d.value ? d.value.toLocaleString(undefined, this.numberFormat) : undefined;
         })
             .attr('class', 'barText')
             .attr('font-size', this.fontSize)
             .attr('font-weight', '600')
             .attr('text-anchor', 'end')
             .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._yScale(d.key) + this._yScale.bandwidth() / 2
-            : this._yScale(d.value))
+            ? this.yScale(d.key) + this.yScale.bandwidth() / 2
+            : this.yScale(d.value))
             .attr('x', (d) => this.afVariation === BarChartVariation.Horizontal
-            ? this._xScale(d)
-            : this._xScale(d.key) + this._xScale.bandwidth())
+            ? this.xScale(d)
+            : this.xScale(d.key) + this.xScale.bandwidth())
             .attr('dy', () => this.afVariation == BarChartVariation.Horizontal ? '0.35em' : '-0.25em')
             .style('pointer-events', 'none')
-            .style('display', () => { var _a, _b; return ((_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; });
+            .style('display', () => { var _a, _b; return ((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.valueLabels) ? null : 'none'; });
         this.adjustBarText();
     }
     initChain() {
         this.initSvg();
+        this.initLegend();
         this.initToolTip();
         this.initYAxis();
         this.initXAxis();
         this.initBars();
+        this.averageLine();
         this.initBarText();
     }
     async updateChain() {
         var _a, _b, _c, _d, _e, _f;
         // Fetch number formatting
-        this._numberFormat = {
-            maximumSignificantDigits: (_c = (_b = (_a = this._chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
-            notation: ((_f = (_e = (_d = this._chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
+        this.numberFormat = {
+            maximumSignificantDigits: (_c = (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.labelProperties) === null || _c === void 0 ? void 0 : _c.significantDigits,
+            notation: ((_f = (_e = (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.labelProperties) === null || _f === void 0 ? void 0 : _f.shortHand)
                 ? 'compact'
                 : 'standard'
         };
-        if (this._tooltip)
+        if (this.tooltip)
             this.closeTooltip();
         // Check whether we are in table mode or not
-        if (this._tableDiv.style['display'] == 'block') {
-            if (!this._chartData.title) {
-                select(this._titleDiv)
+        if (this.tableDiv.style['display'] == 'block') {
+            if (!this.chartData.title) {
+                select(this.titleDiv)
                     .select(this.afHeadingLevel)
                     .html(`${_t.loading}...`);
             }
@@ -1301,9 +1513,9 @@ const barChart = class {
         }
         else {
             // displaying legend again
-            if (this._loading) {
-                select(this._host).select('.tableButton').style('display', null);
-                select(this._legendDiv).style('display', null);
+            if (this.loading) {
+                select(this.host).select('.tableButton').style('display', null);
+                select(this.legendDiv).style('display', null);
                 this.initToolTip();
             }
             // Disconnect resize observer while adjusting things
@@ -1311,73 +1523,69 @@ const barChart = class {
             this.setMinMax();
             const newHeight = this.setDims();
             this.transitionTitle();
-            this._svg
-                .transition()
-                .duration(400)
-                .attr('width', this._dims.width)
-                .attr('height', this._dims.height)
-                .attr('aria-label', this._chartData && this._chartData.title
-                ? 'Stapeldiagram om ' + this._chartData.title.toLowerCase()
+            this.svg
+                .attr('aria-label', this.chartData && this.chartData.title
+                ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
                 : 'Stapeldiagram');
             this.setMargins();
             // Waiting with observing for changes until transition to regular bars is complete
-            this._barChartContainer
+            this.barChartContainer
                 .transition('position')
                 .duration(this.defaultDuration)
                 .ease(polyInOut)
-                .attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-            if (!this._loading)
-                this._barChartContainer.on('end', () => this.barChartObserver.observe(this._chartDiv));
+                .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+            if (!this.loading)
+                this.barChartContainer.on('end', () => this.barChartObserver.observe(this.chartDiv));
             // If there is a new height
             if (newHeight) {
                 // Update y-axis with potentially new height (might want to do a check here)
                 this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale.range([
-                        this._margin.top,
-                        this._dims.height - this._margin.bottom
+                    ? this.yScale.range([
+                        this.margin.top,
+                        this.dims.height - this.margin.bottom
                     ])
-                    : this._yScale.range([
-                        this._dims.height - this._margin.bottom,
-                        this._margin.top
+                    : this.yScale.range([
+                        this.dims.height - this.margin.bottom,
+                        this.margin.top
                     ]);
-                this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+                this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
             }
             this.tickSizes();
             this.setYScale();
             this.setXScale();
             this.setTickInteraction();
-            this._tickWidth = this.getLargestText(this.afVariation == BarChartVariation.Horizontal
-                ? this._xScale.ticks().map((tick) => tick.toLocaleString())
-                : this._yScale.ticks().map((tick) => tick.toLocaleString()));
+            this.tickWidth = this.getLargestText(this.afVariation == BarChartVariation.Horizontal
+                ? this.xScale.ticks().map((tick) => tick.toLocaleString())
+                : this.yScale.ticks().map((tick) => tick.toLocaleString()));
             this.setValueTicks(true);
-            if (this._loading) {
-                select(this._legendDiv)
+            if (this.loading) {
+                select(this.legendDiv)
                     .style('opacity', 0)
                     .transition()
                     .duration(400)
                     .ease(polyInOut)
                     .style('opacity', 1);
-                this._margin.right =
-                    this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+                this.margin.right =
+                    this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                         this.yTickSize +
                         this.tickPadding;
                 // Update x-axis with new width
-                this._xScale.range([
+                this.xScale.range([
                     0,
-                    this._dims.width - this._margin.right - this._margin.left
+                    this.dims.width - this.margin.right - this.margin.left
                 ]);
                 this.setNamedTicks(true);
                 // Stop animation
-                this._barSelection.selectAll('.barGroup').on('end', null);
-                this._loading = false;
-                this._barSelection
+                this.barSelection.selectAll('.barGroup').on('end', null);
+                this.loading = false;
+                this.barSelection
                     .transition()
                     .duration(this.defaultDuration)
                     .attr('y', (d) => this.afVariation === BarChartVariation.Horizontal
-                    ? this._yScale(d.key)
-                    : this._dims.height - this._margin.bottom)
+                    ? this.yScale(d.key)
+                    : this.dims.height - this.margin.bottom)
                     .attr('height', () => 0)
-                    .on('end', (...[, i]) => i === this._placeholderTicks.length - 1
+                    .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
                     ? this.updateBars(true)
                     : null);
                 this.setTickInteraction();
@@ -1391,52 +1599,58 @@ const barChart = class {
     }
     // Getting correct color given index or name of data serie
     colorFunction(input) {
-        if (typeof input === 'number')
-            return `var(${this.colorPalettes[input]})`;
+        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 `var(${this.colorPalettes[index]})`;
+            const index = this.chartData.data.series.findIndex((serie) => serie.title === input);
+            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 `var(${this.colorPalettes[0]})`;
+                return this.evalColorVar(this.colorPalettes[0]);
         }
     }
     // Resizing bar chart
     resize() {
-        var _a;
         const newHeight = this.setDims();
-        this.setMargins();
-        (_a = this._svg) === null || _a === void 0 ? void 0 : _a.attr('width', this._dims.width).attr('height', this._dims.height);
-        this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
-        this._margin.right =
-            this.getTextSize(this._xScale.domain()[1].toLocaleString()) / 2 +
+        //this.setMargins();
+        this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
+        this.margin.right =
+            this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
                 this.yTickSize +
                 this.tickPadding;
         // If there is a new height
         if (newHeight) {
             // Update y-axis with potentially new height (might want to do a check here)
             this.afVariation === BarChartVariation.Horizontal
-                ? this._yScale.range([
-                    this._margin.top,
-                    this._dims.height - this._margin.bottom
+                ? this.yScale.range([
+                    this.margin.top,
+                    this.dims.height - this.margin.bottom
                 ])
-                : this._yScale.range([
-                    this._dims.height - this._margin.bottom,
-                    this._margin.top
+                : this.yScale.range([
+                    this.dims.height - this.margin.bottom,
+                    this.margin.top
                 ]);
-            this._xAxisHandle.attr('transform', `translate(0,${this._dims.height - this._margin.bottom})`);
+            this.xAxisHandle.attr('transform', `translate(0,${this.dims.height - this.margin.bottom})`);
         }
         // Update x-axis with new width
-        this._xScale.range([
+        this.xScale.range([
             0,
-            this._dims.width - this._margin.right - this._margin.left
+            this.dims.width - this.margin.right - this.margin.left
         ]);
         this.setNamedTicks();
         this.setValueTicks();
+        this.setTickInteraction();
+        this.averageLine();
         this.adjustBarSize();
         this.adjustBarText();
-        if (this._tooltipData)
-            this.positionTooltip(this._tooltipData);
+        if (this.tooltip.style('visibility') !== 'hidden')
+            this.positionTooltip(this.tooltipData);
     }
     // Returns the longest text from an array of strings
     getLargestText(array) {
@@ -1449,30 +1663,33 @@ const barChart = class {
         });
         return width;
     }
+    adjustColor(color, amount) {
+        return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
+    }
     componentWillLoad() {
         this.afChartDataUpdate(this.afChartData);
     }
     componentDidLoad() {
-        if (!this._chartData || Object.keys(this._chartData).length === 0) {
-            this._loading = true;
+        if (!this.chartData || Object.keys(this.chartData).length === 0) {
+            this.loading = true;
             return this.initEmpty();
         }
         this.initChain();
         document.fonts.ready.then(() => {
             this.recomputeTextSize();
             this.setNamedTicks();
-            this._barChartContainer.attr('transform', `translate(${this._margin.left + this.tickPadding + this.yTickSize},0)`);
+            this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
         });
     }
     disconnectedCallback() {
         this.barChartObserver.disconnect();
     }
     componentWillUpdate() {
-        this._prevHeight = select(this._titleDiv).style('height');
+        this.prevHeight = select(this.titleDiv).style('height');
     }
     componentDidUpdate() {
-        if (this._tableDiv.style['display'] != 'block' &&
-            Object.keys(this._chartData).length === 0) {
+        if (this.tableDiv.style['display'] != 'block' &&
+            Object.keys(this.chartData).length === 0) {
             // Disconnect old barchartobserver while doing resizing
             this.barChartObserver.disconnect();
             return this.loadingState();
@@ -1489,7 +1706,7 @@ const barChart = class {
     // Returns pixelwidth of text given the current fontSize (costly function using .each)
     getTextSize(text) {
         const textWidth = [];
-        const svg = select(this._chartDiv).append('svg');
+        const svg = select(this.chartDiv).append('svg');
         svg
             .selectAll('dummyText')
             .data([text])
@@ -1504,21 +1721,18 @@ const barChart = class {
         svg.remove().exit();
         return textWidth[0];
     }
-    // Setting table content from this._chartData
+    // Setting table content from this.chartData
     setTableContent() {
-        this._tableDiv.innerHTML = `<digi-table af-size="small" af-variation="primary"> <table><caption>${this._chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
+        this.tableDiv.innerHTML = `<digi-table af-size="small" style="width:100%" af-variation="primary"> <table><caption>${this.chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
     }
     setTableDimensions() {
-        const table = select(this._tableDiv);
-        table
-            // The last value is for compensating the padding set on the table element, changing padding in css, will need change in these two lines
-            .style('height', this._dims.height + 'px');
-        table.style('width', this._dims.width - this._rem * 0.65 + 'px');
+        const table = select(this.tableDiv);
+        table.style('display', 'flex').style('height', '100%').style('width', '100%');
     }
     // Extracting all headings from data and returning a string with <th>-elements with headings
     headings() {
-        let headingsString = `<th scope="col">${this._chartData.x}</th>`;
-        this._chartData.data.series.forEach((elem) => {
+        let headingsString = `<th scope="col">${this.chartData.x}</th>`;
+        this.chartData.data.series.forEach((elem) => {
             headingsString = headingsString.concat(`<th scope="col">${elem.title}</th>`);
         });
         return headingsString;
@@ -1526,13 +1740,13 @@ const barChart = class {
     // Building the table body
     tableBody() {
         let body = '';
-        if (this._chartData && this._chartData.data) {
-            const loopable = this._chartData.data.xValueNames
-                ? this._chartData.data.xValueNames
-                : this._chartData.data.xValues;
+        if (this.chartData && this.chartData.data) {
+            const loopable = this.chartData.data.xValueNames
+                ? this.chartData.data.xValueNames
+                : this.chartData.data.xValues;
             loopable.forEach((elem, index) => {
                 let cells = '';
-                this._chartData.data.series.forEach((serie) => {
+                this.chartData.data.series.forEach((serie) => {
                     cells = cells.concat(`<td>${serie.yValues[index] != null ? serie.yValues[index].toLocaleString() : '-'}</td>`);
                 });
                 body = body.concat(`<tr><th scope='row'>${elem}${cells}</th></tr>`);
@@ -1544,18 +1758,18 @@ const barChart = class {
         var _a, _b, _c, _d, _e;
         // Setting header
         let heading = '';
-        if (this._chartData) {
-            if (!this._chartData.subTitle)
-                heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
+        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>`;
+                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>`;
+                    heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${(_a = this.chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
+				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span></p>`;
             }
         }
-        return (h(Host, { key: 'a1e4aaa788766d54c691e95b7e70932b0e7d2b05', ref: (el) => (this._host = el) }, h("div", { key: '2fac926d196acaa20ab5f438968e3c98c08dd104', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '16d8cbd0f03a2a2d24d3366ab1b3eaed797dd361', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '22a93add4a7f1ea3965ce496f2b5cbf488b01314', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '152938d206dc00e2fb88b52d332960cbeda2c045', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '66db213ee1c4cb169c7c257853a15a468bf2a83e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'ac4b8adad6ace97f50591cd39b8b0082d067f069', slot: "icon" }), "Visa diagram"), h("div", { key: 'b28e00a40b5c1a2919146ec4815f23a14fdfac50', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '63f80744faa1d4b3d7d62bece3b5c446eda3ae7b', class: "chartTooltip", id: this.afId }, h("div", { key: '8c9fa9388b9bfc071c4a594275159eb36a8ec43b', class: "tooltipBody" }), h("digi-icon-x", { key: '252d12a937e5276381fa40ec3bb4e77c259da9c1', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '9b70433c310882bd0a06784ca1fa21c5b2dd9e52', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '459e38448e29eea1fa7a10de7f3f1f06b6404eab', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'cc655054cb3c3688c75060ebbdf6c3f8ea4ad712', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '54667697f174d4094b521c81dc772b599c262c29', ref: (el) => (this.host = el) }, h("svg", { key: 'df7e852f09b0c7b142154024444a8cc694b3a34a', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '036603fe008473d87dac2c97e7d4106aca962cc6' }, h("pattern", { key: '4d69d72862f411f0c1d115613ef21b449467a8cf', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '75f26f0b57f83546f5b0a788f14be2daebe4c1f9', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '93a47ceac0fb59103486e974e63325b31672e89d', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '90e8ca1a698db50f0711ede271c6d5357fb26c42', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: 'cc034a851b624f5c2107b15f29d63a224601e0c9', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '248034ecb86d548ceafe837341dabbae07b6c753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '51b7a0e2f9ff0f85d3abde08ab3f3cf346cdd4aa', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '880b7b7a2fde8eccbd4c24878cc7b3b9b9c6497a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'f374ae56dc6d13906d27bbb76fba63128bc6b704', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '3c8dcd209ffd76fb97cdb14232996136ff3a0387', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '89e5a3a838efd0e2c21abb88141e7e455c1c5b7a', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '8c3debb222d5079506dee4f9cdacf85128ead251', slot: "icon" }), "Visa diagram"), h("div", { key: '0c1916ce68d02ab2b567ed20ea25c17076497aaf', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '143cc5ecbc3bbf3d085eb0426bca9b3bf66ecc7b', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: 'eabbfd6c62996ae237014bd0e4754fb857e0f518', class: "chartTooltip", id: this.afId }, h("div", { key: '97c7c2e479acb9a6f4658768870c1484baa59f01', class: "tooltipHead" }, h("digi-icon-x", { key: 'ec08ba3c764cb66ed0ecac0afdd6b4d16bc84b84', class: "close" })), h("div", { key: '6d80b2cb7bf94c492eaed42a80a8252394fe92b9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7a22b0e07deb81e3e566f60e5e8e2d2f3056a2a2', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '40d906b37ea0a69cb7fcfe310e612e8a5cba2928', class: "legend" })), h("div", { key: '24802d1363812b9d50bd98216f36c7c3f44856d2', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -1767,7 +1981,7 @@ const Header = class {
         return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" })), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
-        return (h("header", { key: '541675d708db44efd16a09721b27dcbbe44e2724', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '419fba070dc583e81ad3ce29a88581ca736fe656', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '679370ad7ccfde35f14549e63cbdc35b35024ac0', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '072768a2e0754f294fa2617828c533f8c426fb40', class: "digi-header__border" }), h("slot", { key: 'ecf54055fbee49802ecf188a36a4868416e948f2', name: "header-navigation" }))));
+        return (h("header", { key: '1fde33690866be488eb23959e3e76f31a91f2ab3', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '0588ccb62902be24a2f4153877eae225677f1863', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '20a3a21170f52093b9b9e42df4d8106175d15de2', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: 'de8922c8b23cc80abd5f124a97f8ffde66a7cf73', class: "digi-header__border" }), h("slot", { key: '21682884e8264b02ae2dea84c028c4ec4ee61ee4', name: "header-navigation" }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -1875,7 +2089,7 @@ const NavigationAvatar = class {
         if (this.afShowPlaceholderImage) {
             this.afHideImage = true;
         }
-        return (h("div", { key: 'c6a31dcf973d0838e6fcc15c46df3367a7ffbf05', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'd89ff3dd87bad2f574c9dc2332ab01cca92f14f7', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: '578c4845722980eef2dcdd089e34bd74552f1c12', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'a607c3b7d8adad5e099348c2f934c11f6ca90f72' }, h("title", { key: 'e7bcf18ab68a3747bdfb67cd0099f361e1bdfc9b' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: 'd89f15f40ac637eb8b5a469580fa99949f6e496b', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '0fd876bc2059fbbafc6c676721ab72121721262b', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: '01a97ee947331bd9baf206bbc9dc2325c53f9015' }, h("title", { key: '2f96d6322af1e8926371a5971300fc229db60217' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'a56cb66e622b3eb8979b90fe33f051bf35a0a937' })));
+        return (h("div", { key: 'd92a2c1a9352fd2a56df7cbad6a6c3f2c68caecd', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'b9aecc4059a8e69b946c54c74371c1804f699a25', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: 'dc6b66cab7b8bdb46060123130627289a6d8b12b', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'b893994829ece85bebe5fbc168724b36c54da5e3' }, h("title", { key: '2d00431f10f5d1c4bcad4b8cec60cee95763c78f' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: '3e7abd2b59568800b56b31aa055e34ac7e8407ea', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '1fc58de76baf36c2591fec08e10ef90daa1701e8', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: '69221a6797b1c8c96a11ee8d8654a6aeee5a8d53' }, h("title", { key: 'abea1ff5fae414ae81323a3d47348ffcc58aeb36' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'f129fa9f48732c2dc0fae65c76f90315d53ee8ee' })));
     }
 };
 NavigationAvatar.style = DigiHeaderAvatarStyle0;
@@ -2042,10 +2256,10 @@ const HeaderNavigation = class {
         };
     }
     render() {
-        return (h("div", { key: 'a2645e18fa313178d65cd9a82ccee2e5121e9d15', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '78532433a10d7b25f84ffab92c17edd0d89c1eda', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: '318e69263ceba3cea1b2b5284953ea219641d3bb', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: 'bd4916bbdd14c6587ca283b0df6d70bdaf5f28e7' }, this.isMobile && (h("div", { key: '551a7f881618137861e3b4a40b66d9e4f835fa3c', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: 'bb011ce31ad95e5ad4a78a1ef71344d11f61f310', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
+        return (h("div", { key: '20ee5ecde5a57ddcb5b387b48811975ce324e7e2', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '52ed2d9ec166e385acc7f7166bb049cfb258418a', onAfOnChange: (e) => (this.isMobile =
+                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: 'ab0e0ff9224086bdc3e4ece7f0fb751062999451', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '62bbc4e6b08a9eaa271b1ef06e1decf8c4de0455' }, this.isMobile && (h("div", { key: 'c7b685db77ec70425fb28416934457c1d3fff844', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: 'a6034a2d893e78c373e04e9a84c79fd8e43ab5f9', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
                 this._wrapper = el;
-            } }, this.isMobile && (h("digi-button", { key: '29de9286c4d31a0fa82eff4eb433cec6e207daaa', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: '3cd3af6909b727e1545c5feb74ea4a67f6cac73f', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
+            } }, this.isMobile && (h("digi-button", { key: '125bacb20ca6ee684a4972df754e404333341668', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: '05bbb20a4b57c4976fbcd36af4a723cf1c6db373', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -2069,7 +2283,7 @@ const HeaderNavigationItem = class {
         };
     }
     render() {
-        return (h("div", { key: 'f70697deec493a88ae225787e33c9781c892b1b5', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: 'de6147b23d7be7aa68d51e293db9ecb9e2fd4d3e' }), h("div", { key: '3ebd2fe503efff9bab1ebf460cb60bcb8e9c878f', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
+        return (h("div", { key: '36bef41cd9174f120643146eca6033c435240747', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: '2b9a054a7a852a1ac6c48cfb8ce79564fc39236f' }), h("div", { key: '2d3600551c948df806486ddaa1326137cf40b74a', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
     }
 };
 HeaderNavigationItem.style = DigiHeaderNavigationItemStyle0;
@@ -2083,9 +2297,9 @@ const HeaderNotification = class {
         this.afNotificationAmount = undefined;
     }
     render() {
-        return (h("div", { key: '95f98008df9604a1d8d3f99abc0ebd37ec4b149e', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (h("span", { key: '7de1e2584744df0aa1f1481a1bae8f6b50ac70a0', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
+        return (h("div", { key: 'b871eb5455115ed11f41ec63e9ccf3b430a54a78', class: "digi-header-notification" }, this.afNotificationAmount > 0 && (h("span", { key: '8274d842bd908fc8c69dc0bcbf87c1e1c612a22a', class: "digi-header-notification__number" }, this.afNotificationAmount < 100
             ? this.afNotificationAmount
-            : '+99')), h("slot", { key: 'a44dd632a78363088c6fdb97a6c8707a70dc69cf' })));
+            : '+99')), h("slot", { key: '773b37898e58d0b6195dbe4997bce3bfc4d71552' })));
     }
 };
 HeaderNotification.style = DigiHeaderNotificationStyle0;
@@ -2103,11 +2317,11 @@ const IconBars = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '36a3ded67ee1a01a4a513828ce2b73c846fd7351', class: "digi-icon-bars", width: "22", height: "26", viewBox: "0 0 22 26", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'bef6f5ee77c771511fb0d3cf38aaaf5bca86dfcb', class: "digi-icon-bars", width: "22", height: "26", viewBox: "0 0 22 26", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined }, this.afTitle && h("title", { key: '9631d73ea1db8ac75396394848cabdba52c6e2e1', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7e3a7d1c4a552919ec9eb62e89c1f5471a8cc85c' }, this.afDesc), h("path", { key: '2e98ef9ec07d1dda018df2c892a900c4618ddcfc', class: "digi-icon-bars__shape", d: "M0.8,6.9h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,3.4,0,3.7,0,4.2v2C0,6.6,0.4,6.9,0.8,6.9z M0.8,14.8 h20.4c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8C0.4,11.2,0,11.6,0,12v2C0,14.4,0.4,14.8,0.8,14.8z M0.8,22.6h20.4 c0.4,0,0.8-0.4,0.8-0.8v-2c0-0.4-0.4-0.8-0.8-0.8H0.8c-0.4,0-0.8,0.4-0.8,0.8v2C0,22.3,0.4,22.6,0.8,22.6z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined }, this.afTitle && h("title", { key: '82730161077f91880da35f1bf8f271b4a69e2934', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '903aaa31e517a038af7b6163487191d2812b29b7' }, this.afDesc), h("path", { key: '061743c536636d040cac99dbbb833bc353f0bd33', 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;
@@ -2125,11 +2339,11 @@ const IconBellFilled = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '202db166f12c76f609cef4402c95629990b1c8c7', class: "digi-icon-bell-filled", width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '90a72380ab2d3627daa59e71261e2e6510b5f50e', class: "digi-icon-bell-filled", width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: 'd4b7ca9ac73539939bb93adb3ff98bdbcc0a9f3b', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '09e5c4bb3c96cec014925777ed94e0687087302f' }, this.afDesc), h("path", { key: '1973f1e388dbda11e49f73bb78f9b57a310ed289', class: "digi-icon-bell-filled__shape", d: "M23.555833,48 C26.8859842,48 29.5872534,45.3140625 29.5872534,42 L17.5244126,42 C17.5244126,45.3140625 20.2256818,48 23.555833,48 Z M43.8639093,33.9646875 C42.0423204,32.0184375 38.6339126,29.090625 38.6339126,19.5 C38.6339126,12.215625 33.4972582,6.384375 26.5710718,4.95375 L26.5710718,3 C26.5710718,1.3434375 25.2209086,0 23.555833,0 C21.8907574,0 20.5405942,1.3434375 20.5405942,3 L20.5405942,4.95375 C13.6144078,6.384375 8.47775338,12.215625 8.47775338,19.5 C8.47775338,29.090625 5.06934557,32.0184375 3.24775666,33.9646875 C2.68204582,34.569375 2.43124734,35.2921875 2.43589641,36 C2.44633297,37.5375 3.65978272,39 5.4625146,39 L41.6491514,39 C43.4518833,39 44.6662759,37.5375 44.6757696,36 C44.6804187,35.2921875 44.4296202,34.5684375 43.8639093,33.9646875 L43.8639093,33.9646875 Z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '395960b7e86c99c6887996917a9d0896c21154a6', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'fc6442bca1b2958566ccfa9f9d31e70c46a2664e' }, this.afDesc), h("path", { key: '7e4718de53f168925d01a7abb8e6c74e8e31d065', 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;
@@ -2147,11 +2361,11 @@ const IconCaretDown = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '076122c58ff6050a1e284cfe4459c526e5b6bb94', class: "digi-icon-caret-down", width: "12", height: "6", viewBox: "0 0 12 6", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '143ce7c45e8fbf23ad43ca1f8d4eb2b76606098f', class: "digi-icon-caret-down", width: "12", height: "6", viewBox: "0 0 12 6", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: 'c11d1fbca067166db12a18b35fa9d36c7131e34e', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'eec49821572ad40f84afcee5650877c8338d3812' }, this.afDesc), h("path", { key: 'e4473f7f7152ff2263f80768dadc5ad6ac330a6c', class: "digi-icon-caret-down__shape", d: "M11.777.198A.608.608 0 0112 .667c0 .18-.074.336-.223.468l-5.25 4.667A.768.768 0 016 6a.768.768 0 01-.527-.198L.223 1.135A.608.608 0 010 .667C0 .487.074.33.223.197A.768.768 0 01.75 0h10.5c.203 0 .379.066.527.198z", fill: "currentColor", "fill-rule": "evenodd" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '7529f00fd56a2c435658086e91a28558e67d808f', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'a9858acd14974af565295e5f0a1b427fe5614fc4' }, this.afDesc), h("path", { key: 'df3f1870dccbe9db3ca1e505327fd4ff673e9534', 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;
@@ -2169,11 +2383,11 @@ const IconCaretUp = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: 'e9ace2c9103fdaf105f3b827d963f37c7a0da692', class: "digi-icon-caret-up", width: "12", height: "7", viewBox: "0 0 12 7", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '0e7768c8ed4771629ca2b76024d0f3355f2fe898', class: "digi-icon-caret-up", width: "12", height: "7", viewBox: "0 0 12 7", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '06f4956a61d900ac2ecd6f3d7e73364e084286c6', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'bb69acfc464160dc580771ad56724b5cda76f6f3' }, this.afDesc), h("path", { key: '918ba79b8ef4a7ad38da77411b12c2a4a074d977', class: "digi-icon-caret-up__shape", d: "M11.777 5.65A.608.608 0 0112 6.12c0 .18-.074.337-.223.469a.768.768 0 01-.527.198H.75a.768.768 0 01-.527-.198A.608.608 0 010 6.119c0-.18.074-.337.223-.469L5.473.984A.768.768 0 016 .786c.203 0 .379.066.527.198l5.25 4.666z", fill: "currentColor", "fill-rule": "evenodd" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: 'a1ad68b01ad2dfe162a6f54d413d51163bfcdf51', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'ab1879003512d02a348d8ffae20e38d44b9593b7' }, this.afDesc), h("path", { key: '0047dcfd13655849563c61d6901d4212915e7bc3', 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;
@@ -2191,11 +2405,11 @@ const IconChart = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '6607ae220e7df0da4e33d6e26989b0a081c9b36c', width: "56", height: "62", viewBox: "0 0 56 62", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '537c643d0a02cc36f8f0fefe04ca2b1b804b614f', width: "56", height: "62", viewBox: "0 0 56 62", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined }, h("title", { key: 'a5a9ef19879689bc5d73b96a8e4d5e3e3648d6a5' }, "Chart"), this.afTitle && h("title", { key: 'e6e5af46d4d34bb3b0dcdc2c8704d483a9ed46c9', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '6ff565844d5a595fd83767019670556bc453544a' }, this.afDesc), h("defs", { key: 'a1e2c022806ba193089e6f0d9f5af8767a7d228c' }, h("polygon", { key: '2b0d108004fc3f5aabbcf9336cfc570a9c1f0bb3', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("polygon", { key: '5399f0ed9826b3b6d9d456dbb642e1a1567d092e', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), h("g", { key: 'ed893c950447790359d41eb049fa27d3072e4550', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '4b5f626b6fd84c24288d4ca2282bb4f77cc66f09', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, h("g", { key: 'd80584e04fc9647d5f3754c3c0f110d8159ae81a', transform: "translate(1013.063248, 823.768116)" }, h("g", { key: '865b38e62f958368b9b0c8bee661f8ad65d937d5', id: "Group", transform: "translate(-0.000000, 0.000000)" }, h("path", { key: 'de78d7a368a954e05a35f86279ebe64dd7e6bb5f', d: "M11.2871933,17.0724638 L3.19179715,17.0724638 C1.47642907,17.0724638 0.0891563449,18.5157634 0.0891563449,20.3004089 L0,39.003939 C0,40.7885845 1.38727273,42.2318841 3.1026408,42.2318841 L11.1980369,42.2318841 C12.913405,42.2318841 14.3006777,40.7885845 14.3006777,39.003939 L14.3898341,20.3004089 C14.3898341,18.5157634 12.9989951,17.0724638 11.2871933,17.0724638", id: "Fill-1", fill: "currentColor" }), h("path", { key: '9becb04f53bc8e2204057bcc91011748e91d7f49', d: "M31.292107,11.2318841 L23.077661,11.2318841 C21.3370669,11.2318841 19.9293931,12.6247 19.9293931,14.3469222 L19.8389256,39.1168459 C19.8389256,40.8354877 21.2465994,42.2318841 22.9871935,42.2318841 L31.2016396,42.2318841 C32.9422337,42.2318841 34.3499075,40.8354877 34.3499075,39.1168459 L34.4403749,14.3469222 C34.4403749,12.6247 33.0290824,11.2318841 31.292107,11.2318841", id: "Fill-3", fill: "currentColor" }), h("path", { key: '630d629de95cab01e5c6c12fcdf6db1370cfbcbb', d: "M51.0899571,0 L43.0444095,0 C41.339604,0 39.9608736,1.42791855 39.9608736,3.19354534 L39.7836589,39.0420095 C39.7836589,40.8039655 41.1659336,42.2318841 42.8671948,42.2318841 L50.9162867,42.2318841 C52.6175479,42.2318841 53.9962783,40.8039655 53.9962783,39.0420095 L54.173493,3.19354534 C54.173493,1.42791855 52.7912183,0 51.0899571,0", id: "Fill-6", fill: "currentColor" }), h("polygon", { key: 'f4840f517fa75e69552904a8a745af9685f8ef48', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("g", { key: '0c3ddc574e29a0933b9927ccbbccaf7896346181', id: "Clip-4" }), h("polygon", { key: '6003bdc26f9a47f8907ad2483067eb97fa47125a', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), h("g", { key: '58b7a6de68a0a2e9b513434c02ef2ceb9746f708', id: "Clip-9" }), h("path", { key: '17cc4e34e2e1c2d4065d65665c2cd2de4d1cac7c', d: "M2.64246183,-0.393115942 L24.287738,-0.393115942 C24.783165,-0.393115942 25.2716142,-0.501190406 25.7216852,-0.713736852 L51.853716,-12.8829215 C53.6086441,-13.6970825 54.3936517,-15.8297519 53.5981773,-17.6454029 C52.8027029,-19.4610539 50.7372607,-20.2680099 48.9858215,-19.4466439 L23.5376196,-7.59808021 L2.64246183,-7.59808021 C0.716576525,-7.59808021 -0.846460828,-5.98777069 -0.846460828,-3.99559807 C-0.846460828,-2.00342546 0.716576525,-0.393115942 2.64246183,-0.393115942", id: "Fill-8", fill: "currentColor", mask: "url(#mask-4)" })))))));
+                    : undefined }, h("title", { key: 'd0cd28d1c0cb4dfe9cc396f4c2a22360a76b587e' }, "Chart"), this.afTitle && h("title", { key: 'ce68117e20a4f688ff43776242157b045933e6dd', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'a13eeddb991ff14b5b85f239ea4eecb1d3f9269c' }, this.afDesc), h("defs", { key: '374252777f65f92d6cb379ef7bca83452a1074dc' }, h("polygon", { key: 'd4cf1297c14577cd2c577cfa64774ae5bc50b5c2', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("polygon", { key: 'e7cfd612c48cc8d781e03505f1ec0e517df9691e', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" })), h("g", { key: '78fe0cf804122a6ef0c772883276661533022610', id: "Ikonguide", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'c1455a2c43f5744d164f2c78502b93b4c844b47d', transform: "translate(-1012.000000, -804.000000)", id: "Chart" }, h("g", { key: '2febe3b3fdabe7922b69656ccbd961e05f1f976a', transform: "translate(1013.063248, 823.768116)" }, h("g", { key: '94140cc2a33101eb9628b3848fe61a1b90bf12ed', id: "Group", transform: "translate(-0.000000, 0.000000)" }, h("path", { key: '9cbbd7368665cc2db5faebdc2bc2cc2e94fca7bc', d: "M11.2871933,17.0724638 L3.19179715,17.0724638 C1.47642907,17.0724638 0.0891563449,18.5157634 0.0891563449,20.3004089 L0,39.003939 C0,40.7885845 1.38727273,42.2318841 3.1026408,42.2318841 L11.1980369,42.2318841 C12.913405,42.2318841 14.3006777,40.7885845 14.3006777,39.003939 L14.3898341,20.3004089 C14.3898341,18.5157634 12.9989951,17.0724638 11.2871933,17.0724638", id: "Fill-1", fill: "currentColor" }), h("path", { key: '2429843041e03087e3d9d5384fdfba97717de9fa', d: "M31.292107,11.2318841 L23.077661,11.2318841 C21.3370669,11.2318841 19.9293931,12.6247 19.9293931,14.3469222 L19.8389256,39.1168459 C19.8389256,40.8354877 21.2465994,42.2318841 22.9871935,42.2318841 L31.2016396,42.2318841 C32.9422337,42.2318841 34.3499075,40.8354877 34.3499075,39.1168459 L34.4403749,14.3469222 C34.4403749,12.6247 33.0290824,11.2318841 31.292107,11.2318841", id: "Fill-3", fill: "currentColor" }), h("path", { key: '5525dc19d994d517baa265081e25a4bb6b9764dd', d: "M51.0899571,0 L43.0444095,0 C41.339604,0 39.9608736,1.42791855 39.9608736,3.19354534 L39.7836589,39.0420095 C39.7836589,40.8039655 41.1659336,42.2318841 42.8671948,42.2318841 L50.9162867,42.2318841 C52.6175479,42.2318841 53.9962783,40.8039655 53.9962783,39.0420095 L54.173493,3.19354534 C54.173493,1.42791855 52.7912183,0 51.0899571,0", id: "Fill-6", fill: "currentColor" }), h("polygon", { key: 'ef18f585393c925d806796366f3a6e4735a1fcd1', id: "path-1", points: "19.8389256 11.2318841 34.4403749 11.2318841 34.4403749 42.2318841 19.8389256 42.2318841" }), h("g", { key: '7fa1d9559f3ea34d5ebb74233b473548a82ec0d0', id: "Clip-4" }), h("polygon", { key: '0931d1895249735f64e4212536d47a0d74981674', id: "path-3", points: "-0.846460828 -19.7681159 53.908974 -19.7681159 53.908974 -0.393115942 -0.846460828 -0.393115942" }), h("g", { key: '165f6da7b27ad6cfe1e3fd6ecbde8224ac031e72', id: "Clip-9" }), h("path", { key: '87beed782a382cd37652638d14d80b142b75da3d', 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;
@@ -2213,11 +2427,11 @@ const IconMinus = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '16bcc71cfe986f9a11017261c24ec4bd2667fe59', class: "digi-icon-minus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '26919827944eac76fbb7fc3e1687f4f8688fd206', class: "digi-icon-minus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '047e1f072e32a8ff127fd348360896ec40b9ca45', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '2bf5112ca0dc1f6b2277beced4d9e76c484a48e1' }, this.afDesc), h("path", { key: '006ee074160f1513300129da5a8b17ce447835fb', class: "digi-icon-minus__shape", d: "M21.2,13c0,0.7-0.5,1.2-1.2,1.2H2c-0.7,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2H20C20.7,11.8,21.2,12.4,21.2,13z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '2f875914f3cd4b08be16d48fe7cdb9bca0549bbb', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7d6f49a82b4565886ff9d47e16dbe144bf8cedfd' }, this.afDesc), h("path", { key: 'eae47756fc85eadc5be8a20f78e8b8ad69a99d17', 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;
@@ -2235,11 +2449,11 @@ const IconPlus = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '245e229f5cec7671f37f5500cfb7212ebced6d61', class: "digi-icon-plus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '5f13fb6dbea898cf4f6fe5931a5fa5a8c50b30ff', class: "digi-icon-plus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '3cb67defae09e9fdf28aa5272237b42e05d1139c', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7820f81f821aa310abdcc02e5c1eabffa37f933a' }, this.afDesc), h("path", { key: '5596c5b4ca49f77d18d638c65c3f656492d1d15f', class: "digi-icon-plus__shape", d: "M21.6,13c0,0.7-0.5,1.2-1.2,1.2h-7.9V22c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2v-7.9H2.3c-0.7,0-1.2-0.5-1.2-1.2 c0-0.6,0.5-1.2,1.2-1.2h7.9V4c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v7.9h7.9C21.1,11.8,21.6,12.4,21.6,13z", fill: "currentColor", "fill-rule": "nonzero" })));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '8404f13f05faa0f9b1cdc624d85a38aecc4b73fc', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'b2318c8ce9f2a989527ea17fca314bdc3cf5450f' }, this.afDesc), h("path", { key: 'e14ae8b688178d1a0023f5afde1eef8a70f8e68a', 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;
@@ -2257,11 +2471,11 @@ const IconTable = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '2b15475968f010d4d9b38757d76310a0da35f9aa', class: "digi-icon-table", width: "62px", height: "62px", viewBox: "0 0 62 62", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: '78e1ea08e567124021c44722f3fa1751ee0b02ce', class: "digi-icon-table", width: "62px", height: "62px", viewBox: "0 0 62 62", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && h("title", { key: '4d6f0e438a5e0815b93ae7d3c78108bfec3f5f06', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'e61d74161f5c064226f0024eee36d8873f79fe20' }, this.afDesc), h("defs", { key: '0cec891b39f0d976d433b03cbb67827bfe5b079b' }, h("polygon", { key: '519dc3fcc3c88f79639f4de0ff9cfa4ad859c377', points: "0 62 62 62 62 0 0 0" })), h("g", { key: '71db465acf6cb6e9584f681d734582875a92b78f', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '33b2c9ac1ec24ea5c99e473e803376b84fa8a697', transform: "translate(-302, -975)" }, h("g", { key: '84aad1a7cbfb1e00b9fe6d09d6f391c6d9e3a253', transform: "translate(302, 975)" }, h("polygon", { key: 'fdaea81b52a89b1569ab4fe419bfce0bf63149cc', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), h("g", { key: 'c702ec7d878464f96670a7bf5c648ae03046432f' }, h("path", { key: 'fdf06acb2a51a798edd82c8fe4ddb05e89ffd72a', d: "M35.3073208,0 L26.6931958,0 C24.7918625,0 23.2496125,1.53297409 23.2496125,3.42574093 L23.2496125,11.9939482 C23.2496125,13.886715 24.7918625,15.4196891 26.6931958,15.4196891 L35.3073208,15.4196891 C37.2086542,15.4196891 38.7496125,13.886715 38.7496125,11.9939482 L38.7496125,3.42574093 C38.7496125,1.53297409 37.2086542,0 35.3073208,0", fill: "currentColor" }), h("polygon", { key: 'f32aeb62af7d6f2f555cdb6400b15acab99a526f', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), h("path", { key: 'b719764d7969126f69e5ffe8d66c6604f3678666', d: "M12.0573208,0 L3.44319583,0 C1.5418625,0 -0.0003875,1.53297409 -0.0003875,3.42574093 L-0.0003875,11.9939482 C-0.0003875,13.886715 1.5418625,15.4196891 3.44319583,15.4196891 L12.0573208,15.4196891 C13.9586542,15.4196891 15.4996125,13.886715 15.4996125,11.9939482 L15.4996125,3.42574093 C15.4996125,1.53297409 13.9586542,0 12.0573208,0", fill: "currentColor" }), h("polygon", { key: 'f478c28306a90a3a20ec5d165ae61c528144f5cf', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), h("path", { key: '32ecd42b5a7bac68784083a536a13eb8432142d6', d: "M58.5573208,0 L49.9431958,0 C48.0418625,0 46.4996125,1.53297409 46.4996125,3.42574093 L46.4996125,11.9939482 C46.4996125,13.886715 48.0418625,15.4196891 49.9431958,15.4196891 L58.5573208,15.4196891 C60.4586542,15.4196891 61.9996125,13.886715 61.9996125,11.9939482 L61.9996125,3.42574093 C61.9996125,1.53297409 60.4586542,0 58.5573208,0", fill: "currentColor" }), h("polygon", { key: '4adc770bd26975b7f26853960784938d22aa22de', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), h("path", { key: '0fea261e3e830db49452ea4f8c1d51de61baa3e5', d: "M35.3073208,46.5803109 L26.6931958,46.5803109 C24.7918625,46.5803109 23.2496125,48.113285 23.2496125,50.0060518 L23.2496125,58.5742591 C23.2496125,60.4670259 24.7918625,62 26.6931958,62 L35.3073208,62 C37.2086542,62 38.7496125,60.4670259 38.7496125,58.5742591 L38.7496125,50.0060518 C38.7496125,48.113285 37.2086542,46.5803109 35.3073208,46.5803109", fill: "currentColor" }), h("polygon", { key: 'aefe51986871cdcca194a2aab635c2d10a4b0df9', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), h("path", { key: 'b301aca5e4016a8f2576ccf4d35d820042297d3b', d: "M12.0573208,46.5803109 L3.44319583,46.5803109 C1.5418625,46.5803109 -0.0003875,48.113285 -0.0003875,50.0060518 L-0.0003875,58.5742591 C-0.0003875,60.4670259 1.5418625,62 3.44319583,62 L12.0573208,62 C13.9586542,62 15.4996125,60.4670259 15.4996125,58.5742591 L15.4996125,50.0060518 C15.4996125,48.113285 13.9586542,46.5803109 12.0573208,46.5803109", fill: "currentColor" }), h("polygon", { key: 'f7c37e92ce4923c69f18f9ee7bfcf024f6edca68', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), h("path", { key: '92b5ade4dcfee263d5c6705f0e61d497de95b127', d: "M58.5573208,46.5803109 L49.9431958,46.5803109 C48.0418625,46.5803109 46.4996125,48.113285 46.4996125,50.0060518 L46.4996125,58.5742591 C46.4996125,60.4670259 48.0418625,62 49.9431958,62 L58.5573208,62 C60.4586542,62 61.9996125,60.4670259 61.9996125,58.5742591 L61.9996125,50.0060518 C61.9996125,48.113285 60.4586542,46.5803109 58.5573208,46.5803109", fill: "currentColor" }), h("polygon", { key: '18efdfef14982ce32fa049ed6f4291547d69d57f', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), h("path", { key: 'd9650db05e8113d593266abd6b6ca24ec3d47c53', d: "M35.3073208,23.2901554 L26.6931958,23.2901554 C24.7918625,23.2901554 23.2496125,24.8231295 23.2496125,26.7158964 L23.2496125,35.2841036 C23.2496125,37.1768705 24.7918625,38.7098446 26.6931958,38.7098446 L35.3073208,38.7098446 C37.2086542,38.7098446 38.7496125,37.1768705 38.7496125,35.2841036 L38.7496125,26.7158964 C38.7496125,24.8231295 37.2086542,23.2901554 35.3073208,23.2901554", fill: "currentColor" }), h("polygon", { key: 'a867951d8eb353eb1e0b71914d90c835a7a09062', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), h("path", { key: 'e8bbdaf46e54616c09c59183e1d54a6a47d17532', d: "M12.0573208,23.2901554 L3.44319583,23.2901554 C1.5418625,23.2901554 -0.0003875,24.8231295 -0.0003875,26.7158964 L-0.0003875,35.2841036 C-0.0003875,37.1768705 1.5418625,38.7098446 3.44319583,38.7098446 L12.0573208,38.7098446 C13.9586542,38.7098446 15.4996125,37.1768705 15.4996125,35.2841036 L15.4996125,26.7158964 C15.4996125,24.8231295 13.9586542,23.2901554 12.0573208,23.2901554", fill: "currentColor" }), h("polygon", { key: 'e726b28b6c68eef9436a978b653e04815248c269', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), h("path", { key: '3664a2121e9bbf427652fa17e81c7f5e3f34f422', d: "M58.5573208,23.2901554 L49.9431958,23.2901554 C48.0418625,23.2901554 46.4996125,24.8231295 46.4996125,26.7158964 L46.4996125,35.2841036 C46.4996125,37.1768705 48.0418625,38.7098446 49.9431958,38.7098446 L58.5573208,38.7098446 C60.4586542,38.7098446 61.9996125,37.1768705 61.9996125,35.2841036 L61.9996125,26.7158964 C61.9996125,24.8231295 60.4586542,23.2901554 58.5573208,23.2901554", fill: "currentColor" })))))));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, this.afTitle && h("title", { key: '4b2ee8c5728db7cba1614d45bf05a4b982b7e9c5', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '4ac0442ca7a474293d65022afd6c4abc6639446d' }, this.afDesc), h("defs", { key: 'f1dc8d67f4c44facd0d6b807b4047277a0145aea' }, h("polygon", { key: '5191ea2621ef806c335b3afc75681317f703dc40', points: "0 62 62 62 62 0 0 0" })), h("g", { key: '9aaebf40c0a0136b563f8b9a57ccf19f4be74943', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '0d3331de7a5c1e100420b87292519a3cc8ba16c5', transform: "translate(-302, -975)" }, h("g", { key: 'f1e280b71c9c717a9ad2ba776d799dc93685924a', transform: "translate(302, 975)" }, h("polygon", { key: 'fe1810b628cf5789cb045615b97735c055fe9116', fill: "currentColor", points: "29.6502083 9.05264249 32.3497917 9.05264249 32.3497917 6.36704663 29.6502083 6.36704663" }), h("g", { key: '5cdee5a38ffbc2512fbaa510748a5c0775501cd7' }, h("path", { key: 'dcfabe36e9192f9b44ca5ac3dc0fbe2135db7f97', d: "M35.3073208,0 L26.6931958,0 C24.7918625,0 23.2496125,1.53297409 23.2496125,3.42574093 L23.2496125,11.9939482 C23.2496125,13.886715 24.7918625,15.4196891 26.6931958,15.4196891 L35.3073208,15.4196891 C37.2086542,15.4196891 38.7496125,13.886715 38.7496125,11.9939482 L38.7496125,3.42574093 C38.7496125,1.53297409 37.2086542,0 35.3073208,0", fill: "currentColor" }), h("polygon", { key: '58129cf271414a17a547454c656dfbce9a8bbf33', fill: "currentColor", points: "6.40020833 9.05264249 9.09979167 9.05264249 9.09979167 6.36704663 6.40020833 6.36704663" }), h("path", { key: 'cbcb4dd7a867cb261374f88d732928d3f424ca3f', d: "M12.0573208,0 L3.44319583,0 C1.5418625,0 -0.0003875,1.53297409 -0.0003875,3.42574093 L-0.0003875,11.9939482 C-0.0003875,13.886715 1.5418625,15.4196891 3.44319583,15.4196891 L12.0573208,15.4196891 C13.9586542,15.4196891 15.4996125,13.886715 15.4996125,11.9939482 L15.4996125,3.42574093 C15.4996125,1.53297409 13.9586542,0 12.0573208,0", fill: "currentColor" }), h("polygon", { key: '39741d356c60c592e528ebd28339f7be2466e586', fill: "currentColor", points: "52.9002083 9.05264249 55.5997917 9.05264249 55.5997917 6.36704663 52.9002083 6.36704663" }), h("path", { key: 'b713cdff0623c6046b8c357c09d55b8021c0aa77', d: "M58.5573208,0 L49.9431958,0 C48.0418625,0 46.4996125,1.53297409 46.4996125,3.42574093 L46.4996125,11.9939482 C46.4996125,13.886715 48.0418625,15.4196891 49.9431958,15.4196891 L58.5573208,15.4196891 C60.4586542,15.4196891 61.9996125,13.886715 61.9996125,11.9939482 L61.9996125,3.42574093 C61.9996125,1.53297409 60.4586542,0 58.5573208,0", fill: "currentColor" }), h("polygon", { key: '86a85bf2233e4013d5f9c7c0423e185e504f28cd', fill: "currentColor", points: "29.6502083 55.6329534 32.3497917 55.6329534 32.3497917 52.9473575 29.6502083 52.9473575" }), h("path", { key: '3f18ab2751b9661e66d55d6f6012315029d87954', d: "M35.3073208,46.5803109 L26.6931958,46.5803109 C24.7918625,46.5803109 23.2496125,48.113285 23.2496125,50.0060518 L23.2496125,58.5742591 C23.2496125,60.4670259 24.7918625,62 26.6931958,62 L35.3073208,62 C37.2086542,62 38.7496125,60.4670259 38.7496125,58.5742591 L38.7496125,50.0060518 C38.7496125,48.113285 37.2086542,46.5803109 35.3073208,46.5803109", fill: "currentColor" }), h("polygon", { key: '8bcb6ac577cc12116c1b2fa4eb9fcc9f26f842f1', fill: "currentColor", points: "6.40020833 55.6329534 9.09979167 55.6329534 9.09979167 52.9473575 6.40020833 52.9473575" }), h("path", { key: '1ae2754a5d91c703c9d4de6f8da73d164c3a49e4', d: "M12.0573208,46.5803109 L3.44319583,46.5803109 C1.5418625,46.5803109 -0.0003875,48.113285 -0.0003875,50.0060518 L-0.0003875,58.5742591 C-0.0003875,60.4670259 1.5418625,62 3.44319583,62 L12.0573208,62 C13.9586542,62 15.4996125,60.4670259 15.4996125,58.5742591 L15.4996125,50.0060518 C15.4996125,48.113285 13.9586542,46.5803109 12.0573208,46.5803109", fill: "currentColor" }), h("polygon", { key: '48edbca1ea605c22bb59e9f99cbdaf5d82d71e82', fill: "currentColor", points: "52.9002083 55.6329534 55.5997917 55.6329534 55.5997917 52.9473575 52.9002083 52.9473575" }), h("path", { key: '4f370adc7a2c8d20be3d98efde9e06f8d0b4fadb', d: "M58.5573208,46.5803109 L49.9431958,46.5803109 C48.0418625,46.5803109 46.4996125,48.113285 46.4996125,50.0060518 L46.4996125,58.5742591 C46.4996125,60.4670259 48.0418625,62 49.9431958,62 L58.5573208,62 C60.4586542,62 61.9996125,60.4670259 61.9996125,58.5742591 L61.9996125,50.0060518 C61.9996125,48.113285 60.4586542,46.5803109 58.5573208,46.5803109", fill: "currentColor" }), h("polygon", { key: '4ceb3d298fa9baece16a78629afc70e40cfd4910', fill: "currentColor", points: "29.6502083 32.3427979 32.3497917 32.3427979 32.3497917 29.6572021 29.6502083 29.6572021" }), h("path", { key: '6da2f0700a4b8d58cc2930d30b71438b45c0e1f8', d: "M35.3073208,23.2901554 L26.6931958,23.2901554 C24.7918625,23.2901554 23.2496125,24.8231295 23.2496125,26.7158964 L23.2496125,35.2841036 C23.2496125,37.1768705 24.7918625,38.7098446 26.6931958,38.7098446 L35.3073208,38.7098446 C37.2086542,38.7098446 38.7496125,37.1768705 38.7496125,35.2841036 L38.7496125,26.7158964 C38.7496125,24.8231295 37.2086542,23.2901554 35.3073208,23.2901554", fill: "currentColor" }), h("polygon", { key: '3035c9bbbae0c6d6b094dfefa196a96ec7613441', fill: "currentColor", points: "6.40020833 32.3427979 9.09979167 32.3427979 9.09979167 29.6572021 6.40020833 29.6572021" }), h("path", { key: '769aa20647571e765d34ba02e9fea15dc4675f30', d: "M12.0573208,23.2901554 L3.44319583,23.2901554 C1.5418625,23.2901554 -0.0003875,24.8231295 -0.0003875,26.7158964 L-0.0003875,35.2841036 C-0.0003875,37.1768705 1.5418625,38.7098446 3.44319583,38.7098446 L12.0573208,38.7098446 C13.9586542,38.7098446 15.4996125,37.1768705 15.4996125,35.2841036 L15.4996125,26.7158964 C15.4996125,24.8231295 13.9586542,23.2901554 12.0573208,23.2901554", fill: "currentColor" }), h("polygon", { key: 'f1673edb2a74afaf64698697bd78e5f62d2aebf2', fill: "currentColor", points: "52.9002083 32.3427979 55.5997917 32.3427979 55.5997917 29.6572021 52.9002083 29.6572021" }), h("path", { key: '3da2d384a5d86340fc058a6eb2a9864a70a5c0e2', 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;
@@ -2279,11 +2493,11 @@ const IconX = class {
         this.titleId = randomIdGenerator('icontitle');
     }
     render() {
-        return (h("svg", { key: '6e61c4e863c5d212771b7084db33b89d7d9598ee', class: "digi-icon-x", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+        return (h("svg", { key: 'f08bf884ed64347f389aac73ffde12d94ebefa03', class: "digi-icon-x", width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
                 ? this.afSvgAriaLabelledby
                 : this.afTitle
                     ? this.titleId
-                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '5cb35a0cc148b0af375625e1fd6c458889c0ac81', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '092097471c2f6584eb0c3eb79fe2c9ae2edc181d' }, this.afDesc), h("g", { key: 'c3bf528af06f4858a42f930b14e66702e463f00c', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, h("path", { key: '70643cda1f046f7761d70d20dda9ea52f7a62131', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '79100790569cf89f7e66b0b1ccdbe223f7adba6e', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '5426aea323409d08ad3b3615dbeae8864deb4352' }, this.afDesc), h("g", { key: 'ed225b9507ffd6dcb48418b82c979f357f5ba566', class: "digi-icon-x__shape", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "square" }, h("path", { key: 'b7ff387d316a1cedf57946a27936eac590d80fd5', d: "M2 2l7.986 7.986M9.986 2L2 9.986" }))));
     }
 };
 IconX.style = DigiIconXStyle0;
@@ -2318,7 +2532,7 @@ const LayoutBlock = class {
         };
     }
     render() {
-        return (h("div", { key: '66cafb951595d804b9f6621553416fe6fb97536e', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === LayoutBlockContainer.NONE ? (h(Fragment, null, h("slot", null))) : (h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, h("slot", null)))));
+        return (h("div", { key: '4f60428c8b9d42ad916ca5112121cc8f9f2e04b6', class: Object.assign({ 'digi-layout-block': true }, this.cssModifiers) }, this._container === LayoutBlockContainer.NONE ? (h(Fragment, null, h("slot", null))) : (h("digi-layout-container", { afVariation: this._container, "af-vertical-padding": this.afVerticalPadding, "af-margin-top": this.afMarginTop, "af-margin-bottom": this.afMarginBottom }, h("slot", null)))));
     }
     static get watchers() { return {
         "afContainer": ["containerChangeHandler"]
@@ -2362,7 +2576,7 @@ const LayoutContainer = class {
         };
     }
     render() {
-        return (h("div", { key: '7e97262e534353f37db571b77dc5401043afa76f', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: '8bf28d6b937194b2bb25684f5b3abcc1828f77ec' })));
+        return (h("div", { key: '5ff028ab3d09d71a5c5de4a4e88d50b3f17f367f', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: '56ee75891bfd6f55909841bc4acdf57b867dc235' })));
     }
     static get watchers() { return {
         "afVariation": ["variationChangeHandler"]
@@ -2451,11 +2665,11 @@ const MediaImage = class {
         };
     }
     render() {
-        return (h("host", { key: 'e12a7121e8ec91455dc32e83e9566d8de794596e' }, h("div", { key: 'ac7b584f5320abb6d275262c005318b8deeb3c8e', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
+        return (h("host", { key: '9cfb435b346ea2c850e9ad1c8623d1372e194b12' }, h("div", { key: 'c81e1c86fcc1457924cdb05d03c2a2d3f3fcca97', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
                 '--digi--media-image--width': this.afWidth
                     ? `${this.afWidth}px`
                     : null
-            } }, h("digi-util-intersection-observer", { key: 'cab10af769a1edd794e8d1a14bb61cbe6d334c33', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (h("div", { key: 'c64bf7722ce2f68c2541b318851fd1c6e0029f03', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), h("img", { key: '8a3a904a353f69a1b923ed400bea0afebce1c4c6', class: "digi-media-image__image", onLoad: (e) => this.loadHandler(e), src: this.src, alt: this.afAlt, "aria-label": this.afAriaLabel, height: this.afHeight, srcset: this.srcset, title: this.afTitle, width: this.afWidth, loading: this.afUnlazy ? 'eager' : 'lazy' }))));
+            } }, h("digi-util-intersection-observer", { key: '3cec484d599d030b923983294d1e49643acfb98e', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (h("div", { key: 'be09f16a35bde1db6b0ef7f9bf62553761b5c1ff', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), h("img", { key: '22c705fa7866f99f741e0c852d319b57d37145a3', 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"]
@@ -2480,7 +2694,7 @@ const NavigationSidebarButton = class {
         this.afOnToggle.emit(this.isActive);
     }
     render() {
-        return (h("digi-button", { key: '0cc1e3d42d54053ba6a73a8658eff13b5e13fc61', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '7c66cf2c35fd66b18e850e54b857e352069c87c8', slot: "icon" })));
+        return (h("digi-button", { key: 'ebfd163ec7bde3817ff97b83d7300df6962f0261', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '1ffc8c89027d2f6b06edb412d1b64becdb1a9437', slot: "icon" })));
     }
 };
 NavigationSidebarButton.style = DigiNavigationSidebarButtonStyle0;
@@ -2646,7 +2860,7 @@ const NavigationVerticalMenu = class {
         };
     }
     render() {
-        return (h("nav", { key: '09adacd9e3d3b39226148431bd8ac025f3b6d5d4', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '87c7454dfb753c4df6b0c8aa5a41633ad3463ca4' })));
+        return (h("nav", { key: '2215782cbec68d4c6a02068576c9ddedb64c8530', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: 'f9ed700f21284c69b969b42fb6f12b1623b1185a' })));
     }
     get hostElement() { return getElement(this); }
 };
@@ -2767,24 +2981,24 @@ const NavigationVerticalMenuItem = class {
         }
     }
     render() {
-        return (h("host", { key: 'b466ce9111a5e0dac19daf8903a753c78eb5a0a0', class: {
+        return (h("host", { key: '4034a13fcdb1057df5b88815be9eb37dba601a87', class: {
                 'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                 'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
-            } }, h("div", { key: '55ecf36a90033235cfa8f4394773e868549ae78a', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '788d539b5b090a9af9d6f8667ad1d8d6136af245', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: 'd5c04026c5c25445b8cae01c0a0809839bc7b03b', id: `${this.afId}-link`, href: this.afHref, class: {
+            } }, h("div", { key: '4980f784e2c75e6f0acec17e5af2c395b884b8db', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '335b03a7123d65c6ce8f247136a37ceae32f6798', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '713f3ddab78e64abb6045008f2d773f7f0e2f8ba', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__has-subnav': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive,
                 'digi-navigation-vertical-menu-item__link--expanded': this.activeSubnav
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '8f5f0e788d6441ed9c945603ae135ba35f95e556', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '63bd8733d523416d8fdea6498d7af8d8ad5c2737', name: "icon" })), h("span", { key: '47a4175a5a6d9ceb79c494f1fb696b5e73b50ff2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'a99a1a1b19bb755809f68b10ed3e3ed57c6990ed', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '24a3bc5e91bd52454c7d3bac518c95b541748097', name: "badge" }))), h("button", { key: 'e77f10a770377161f2a1eaab942331acf8664c0c', type: "button", id: `${this.afId}-toggle-button`, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'c20202f05ab4b8e9b23fcd89613f30e88e3b66d7', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '699126ccd002240e5bf13905ed2b1d03805230a4', name: "icon" })), h("span", { key: '0fd8bfe80480ac6dd299c7b9419e0f87dd4d8227', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '4576c36918ebead122134139f586e9be47d0273d', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '3320ebac27d8ce208e469d40083699d4596ea9f0', name: "badge" }))), h("button", { key: 'ec9ee669f4db79f4f98d06492f37b8f7ff338330', type: "button", id: `${this.afId}-toggle-button`, class: {
                 'digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--toggle': true,
                 'digi-navigation-vertical-menu-item__button--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: 'ba7281a9f65c7775bb4c80b8c60f41518a6e2506', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'd9bffd289a04e26e0f18b03ec337081f754da342', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '4f705d7bf6fcda106628ca60aac33b7a1d6a5c32', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '60951bd35331a6d121ad4dea6c1bbdf1c6fe18aa', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '7475bc63e5282040083ea78ed6c69b16eed03c48', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '0e8c0ad4839f3386e293ff0b56d6fcf8218ef4ca', name: "icon" })), h("span", { key: '09a30d103f70fcaf1c2d2733371bfd80a3e89cb3', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '2b4df3150e64e6a26abb802e6a3edc40b3925a32', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'bbf167346ad3aaa9475be0af73cef02bc1488f4a', name: "badge" })), h("span", { key: 'ee3545bd40e6770dcb0b11b8a4b19b47f6abcc60', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'e1b81b7a54def3cc7b69c4461370444cb8a42f1e' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: 'f42c85f453bf38d14f21d99f9ef4ccc82cd14c43', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: 'f3db75b42c7f9c59b97287efdc5a7b9e25bdddb1', id: `${this.afId}-link`, href: this.afHref, class: {
+            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: '010519c486d071b2e80e70a6aba7cf3bab97b329', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'f922fc7be5bb789ac411bd2ba5eb63ac64a15fed', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '45c9d0ae0a1073ae11d5b29b0e5d6d303a4eea83', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '28d8337697b6c2796d86841b87a0b9a11d3eb539', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: 'd94f4e8b85c0be6a8f282086bce352b3a6eccc5a', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '3245aea52c63c01c6ed2b60b67539b44a5a12d55', name: "icon" })), h("span", { key: '0ec740d571391b45270be0a81df9e87c4cb2cd27', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'e7ecbe1b97debc26c4f33788a0cd8948e794d2de', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '87561faf7d006134c879bbb2ecccb20d35cbcc40', name: "badge" })), h("span", { key: '230dfc05b2c0c3ad64feddc308c1ae7f2b80bd16', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'c563c4c3de12113cbc83af4566e971f141477dd3' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '3899bdf29953349f5f705c2bb7eecab4602ecaf8', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: 'fb90be5417c3cb76174fe59dbde17b6f20776f4e', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'a11026077ffb74925488f1e84a00ea35fa2708c5', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '498b31c99a2064a5f5861a776ac4591e9e8fe868', name: "icon" })), h("span", { key: '551fc9b44157817dd60d1a0d65bea2d4f505ff8d', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '98b9083a6c9a5970883771cb111504cfc0adc36a', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'f4ecb70745f7102ac6f6d0a1921349a9d7efdfbf', name: "badge" })))), this.isActive && (h("a", { key: '59e0478351aaa62f1b7988d4ba623a295b325f35', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'f04416cc6c14114834bfaed522546fc77c84a9ed', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '28b5934e236acf522fc243eca1fbb896cf30d389', name: "icon" })), h("span", { key: 'ef064f03fb347b35c571f923c8c105fd897b3294', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'a3d4eb270f45123648944157f937ea28feb7e258', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'fe65ca6f1d00579765ce8a6550d6583c7772ad1d', name: "badge" })))), this.isActive && (h("a", { key: '439489e2388a2eaca7509749763c423e58dbff91', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'dfd18536c7e5b0acaf4dcc23e2734841efee94d7', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '9c478aed7b2b39d04e196d29c74d3ddb39d5feb6', name: "icon" })), h("span", { key: '1e9f35bde837c753b65c85d83e3226e8e61c7bcf', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '663279bcdd5959c795124b015086ea85d2706847', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '492b55cedb0248ef16b2e41e55bcd41a4e22c600', name: "badge" })))))))));
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'c37a3158554cc3496e43aa8e57bd07eb72201fd3', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'ac4617afe1bbf5510ceb7533553099ac855dcf7a', name: "icon" })), h("span", { key: '4cfa666a58ee43c67d5232839f9457a4181974b5', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '49d931e36fe2a43249cb69ea0a19086a335ef0e3', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'd76c01d73407d8264932808df69547f7dc352a6b', name: "badge" })))))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -2865,7 +3079,7 @@ const TitleLogo = class {
         };
     }
     render() {
-        return (h("div", { key: '682388427086c76a9abb42f7cd307bbbd1f85515', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '21702025ddd9cb57f8ef0722ef82c3bb1a800771', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'b61c478c0c97cd09eefea16144861ef66cdd5add', class: "digi-title-logo-symbol" }, h("svg", { key: 'ab5c1765934dfb7d3d4c1d8435e011c729b4e055', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: 'cc9bf81bf4dee33ba7a6d0a83014c233c96bff65', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '184a1438f63168d9ac66f64b051b5709266bffcc', class: "digi-title-logo-name-wrapper" }, h("slot", { key: 'f79f53a1307bedbdcb6959f1eb394e2378fad2ef', name: "logo-one-row" }), h("slot", { key: '7343c9a47863f42368e240da59ef7626dc812cf3', name: "logo-two-rows" }))));
+        return (h("div", { key: '776d1ba17ce9f24ece25ed6f1f2528e3ae5a64e2', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '8201fc140d3aa7bfa7acaae2072951751f604f8b', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'b8f09d2272ed959cae038f25b2050386e5584bf4', class: "digi-title-logo-symbol" }, h("svg", { key: '3af2c2419b035bd2e228a9acf3f039638a82b26d', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: '562b1b6d22d1b2b438f6e48b21bf7a98a3b0a32b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '47758a4ff3d7661ca130c1f6e70f706b60e59cc0', class: "digi-title-logo-name-wrapper" }, h("slot", { key: 'fc2a4b750091c4e5a8efdb16fb978d945626f0ba', name: "logo-one-row" }), h("slot", { key: '1250d720df8b80bf2b114cd95790039be8335a5e', name: "logo-two-rows" }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -2885,7 +3099,7 @@ const Typography = class {
         };
     }
     render() {
-        return (h("div", { key: '5db67ad20bda5f5523f8ecb2d4dab10b78c5f2e6', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, h("slot", { key: '4950037182ec2f186c0c14b38027ce3e9906f45f' })));
+        return (h("div", { key: 'c2b9b76abeff5d4f45d8841e7d748b747e985534', class: Object.assign({ 'digi-typography': true }, this.cssModifiers) }, h("slot", { key: 'd1f57634bc23c7e2b0c70c7620ada023796bea44' })));
     }
 };
 Typography.style = DigiTypographyStyle0;
@@ -2924,7 +3138,7 @@ const UtilBreakpointObserver = class {
         }
     }
     render() {
-        return (h(Host, { key: '9cf20d195bb4948df361742378c96edda7a0a8b0' }, h("div", { key: '1e89fa7a92ba17cf37d366a677f0ca94075dbc1f', class: "digi-util-breakpoint-observer" }, h("div", { key: '349561395422d7849f8e987fbd88bab1887def6f', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), h("slot", { key: '99542e2edbff718dffd480f76d98985092c8893a' }))));
+        return (h(Host, { key: '1bf96336017e1cde539c6e3052ef1713a3b4dba1' }, h("div", { key: 'a27cdafe003d9ea0dc6ae1e835beb9be4f220668', class: "digi-util-breakpoint-observer" }, h("div", { key: '1f6b04b187a97efd64da61d1bcb1a824b343336b', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), h("slot", { key: '67603f4f2832820c4ceea5592fe4b50be88ea7fe' }))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -2988,7 +3202,7 @@ const UtilIntersectionObserver = class {
         this._hasIntersected = false;
     }
     render() {
-        return h("slot", { key: '4f16e3af503f72ac9638c557348b429eea6ad784' });
+        return h("slot", { key: '93927cf4e9ba5053bfb64a6a8cb2aa9172a6481c' });
     }
     get $el() { return getElement(this); }
     static get watchers() { return {
@@ -3067,7 +3281,7 @@ const UtilKeydownHandler = class {
         }
     }
     render() {
-        return h("slot", { key: 'b7e41652ee0661acd8970f626e94d6e80bf89223' });
+        return h("slot", { key: '807fb9ade1831ce31ff901f15bb28825085926e1' });
     }
 };