@designsystem-se/af 39.2.1-beta.darkmode.2 → 39.2.2

package/components/digi-badge-notification.js

@@ -1,4 +1,4 @@
-import { B as BadgeNotification, d as defineCustomElement$1 } from './p-CcgW0fwO.js';
+import { B as BadgeNotification, d as defineCustomElement$1 } from './p-DDdKfPB2.js';
 
 const DigiBadgeNotification = BadgeNotification;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-badge-status.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-Djy8gvgO.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-0pTevzmo.js';
 import { a as BadgeStatusType, B as BadgeStatusSize, b as BadgeStatusVariation } from './p-C0A-p3cU.js';
 
-const badgeStatusCss = () => `.sc-digi-badge-status-h{--digi--badge-status--color--primary:var(--digi--color--text--secondary);--digi--badge-status--color--secondary:var(--digi--color--text--primary-stay);--digi--badge-status--background-color--approved--primary:var(--digi--color--background--sentiment--success--secondary);--digi--badge-status--background-color--approved--secondary:var(--digi--color--background--sentiment--success--tertiary);--digi--badge-status--background-color--denied--primary:var(--digi--color--background--sentiment--error--secondary);--digi--badge-status--background-color--denied--secondary:var(--digi--color--background--sentiment--error--tertiary);--digi--badge-status--background-color--missing--primary:var(--digi--color--background--sentiment--warning--secondary);--digi--badge-status--background-color--missing--secondary:var(--digi--color--background--sentiment--warning--tertiary);--digi--badge-status--color--missing:var(--digi--color--text--primary);--digi--badge-status--background-color--prompt--primary:var(--digi--color--background--sentiment--info--secondary);--digi--badge-status--background-color--prompt--secondary:var(--digi--color--background--sentiment--info--tertiary);--digi--badge-status--background-color--beta--primary:var(--digi--color--background--sentiment--beta--primary);--digi--badge-status--background-color--beta--secondary:var(--digi--color--background--sentiment--beta--secondary);--digi--badge-status--background-color--neutral--primary:var(--digi--color--background--sentiment--neutral--primary);--digi--badge-status--background-color--neutral--secondary:var(--digi--color--background--sentiment--neutral--secondary)}.sc-digi-badge-status-h .digi-badge-status.sc-digi-badge-status{display:inline-flex;align-items:center;height:1.5rem;border-radius:var(--digi--global--border-radius--base);padding-left:0.5rem;padding-right:0.5rem;font-size:var(--digi--global--typography--font-size--small);font-weight:600;border-width:var(--digi--border-width--secondary);border-style:solid;border-color:transparent;color:var(--COLOR);background-color:var(--BACKGROUND-COLOR);box-sizing:border-box}.sc-digi-badge-status-h .digi-badge-status--approved--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--approved--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--denied--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--denied--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--secondary);--COLOR:var(digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--missing--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--primary);--COLOR:var(--digi--color--text--primary-stay)}.sc-digi-badge-status-h .digi-badge-status--missing--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--prompt--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--prompt--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--beta--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--beta--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--neutral--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--neutral--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status__text.sc-digi-badge-status{text-align:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-badge-status-h .digi-badge-status--small.sc-digi-badge-status{height:1.25rem;padding-left:0.4375rem;padding-right:0.4375rem;font-size:var(--digi--global--typography--font-size--smaller)}`;
+const badgeStatusCss = () => `.sc-digi-badge-status-h{--digi--badge-status--color--primary:var(--digi--color--text--secondary);--digi--badge-status--color--secondary:var(--digi--color--text--primary);--digi--badge-status--background-color--approved--primary:var(--digi--color--background--sentiment--success--secondary);--digi--badge-status--background-color--approved--secondary:var(--digi--color--background--sentiment--success--tertiary);--digi--badge-status--background-color--denied--primary:var(--digi--color--background--sentiment--error--secondary);--digi--badge-status--background-color--denied--secondary:var(--digi--color--background--sentiment--error--tertiary);--digi--badge-status--background-color--missing--primary:var(--digi--color--background--sentiment--warning--secondary);--digi--badge-status--background-color--missing--secondary:var(--digi--color--background--sentiment--warning--tertiary);--digi--badge-status--color--missing:var(--digi--color--text--primary);--digi--badge-status--background-color--prompt--primary:var(--digi--color--background--sentiment--info--secondary);--digi--badge-status--background-color--prompt--secondary:var(--digi--color--background--sentiment--info--tertiary);--digi--badge-status--background-color--beta--primary:var(--digi--color--background--sentiment--beta--primary);--digi--badge-status--background-color--beta--secondary:var(--digi--color--background--sentiment--beta--secondary);--digi--badge-status--background-color--neutral--primary:var(--digi--color--background--sentiment--neutral--primary);--digi--badge-status--background-color--neutral--secondary:var(--digi--color--background--sentiment--neutral--secondary)}.sc-digi-badge-status-h .digi-badge-status.sc-digi-badge-status{display:inline-flex;align-items:center;height:1.5rem;border-radius:var(--digi--global--border-radius--base);padding-left:0.5rem;padding-right:0.5rem;font-size:var(--digi--global--typography--font-size--small);font-weight:600;border-width:var(--digi--border-width--secondary);border-style:solid;border-color:transparent;color:var(--COLOR);background-color:var(--BACKGROUND-COLOR);box-sizing:border-box}.sc-digi-badge-status-h .digi-badge-status--approved--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--approved--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--denied--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--denied--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--secondary);--COLOR:var(digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--missing--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--primary);--COLOR:var(--digi--grayscale-900)}.sc-digi-badge-status-h .digi-badge-status--missing--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--prompt--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--prompt--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--beta--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--beta--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--neutral--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--neutral--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status__text.sc-digi-badge-status{text-align:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-badge-status-h .digi-badge-status--small.sc-digi-badge-status{height:1.25rem;padding-left:0.4375rem;padding-right:0.4375rem;font-size:var(--digi--global--typography--font-size--smaller)}`;
 
 const BadgeStatus = /*@__PURE__*/ proxyCustomElement(class BadgeStatus extends H {
     constructor(registerHost) {

package/components/digi-bar-chart.js

@@ -1,15 +1,16 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-Djy8gvgO.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-0pTevzmo.js';
 import { o as ordinal, i as initRange, r as range, s as select, a as axisLeft, l as linear, b as axisBottom, m as max, p as polyInOut, c as min, d as linear$1 } from './p-lPbx4RHH.js';
 import { _ as _t } from './p-DsO1BTml.js';
 import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { l as logger } from './p-DdB9j8uV.js';
 import { B as BarChartVariation } from './p-DPeoHh1J.js';
-import { d as defineCustomElement$8 } from './p-Bz9OGJ1g.js';
-import { d as defineCustomElement$7 } from './p-Da96smAB.js';
-import { d as defineCustomElement$6 } from './p-DMFX-zQ_.js';
-import { d as defineCustomElement$5 } from './p-CkVHCYXo.js';
-import { d as defineCustomElement$4 } from './p-BbGk6Njd.js';
-import { d as defineCustomElement$3 } from './p-C4-Ci3sp.js';
-import { d as defineCustomElement$2 } from './p-CEUkTabv.js';
+import { d as defineCustomElement$8 } from './p-BxG1tqmk.js';
+import { d as defineCustomElement$7 } from './p-1kIXcBRD.js';
+import { d as defineCustomElement$6 } from './p-Cn6V9H9D.js';
+import { d as defineCustomElement$5 } from './p-Br3uVgA1.js';
+import { d as defineCustomElement$4 } from './p-C2LUp3Td.js';
+import { d as defineCustomElement$3 } from './p-C1wkAzXH.js';
+import { d as defineCustomElement$2 } from './p-B85a4tNl.js';
 
 function band() {
   var scale = ordinal().unknown(undefined),
@@ -91,7 +92,7 @@ function band() {
   return initRange.apply(rescale(), arguments);
 }
 
-const barChartCss = () => `.sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0;--MARGIN--BODY:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}`;
+const barChartCss = () => `.sc-digi-bar-chart-h{height:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0;--MARGIN--BODY:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}`;
 
 const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     constructor(registerHost) {
@@ -264,6 +265,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         };
         // Resizing chart while loading
         this.loadingResize = () => {
+            if (!this.barSelection || !this.xScale)
+                return;
             const newHeight = this.setDims();
             this.barChartContainer.attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
             this.margin.right =
@@ -525,6 +528,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             return toReturn;
         };
         this.adjustBarSize = () => {
+            if (!this.barSelection)
+                return;
             this.barSelection
                 .selectAll('.bar')
                 .attr('x', this.xFunction)
@@ -957,13 +962,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             this.initBarText();
         };
         // Removes resize observer for chart and inits table
-        this.activateTable = (event) => {
+        this.activateTable = () => {
             this.closeTooltip();
             this.barChartObserver.disconnect();
             this.status.innerHTML = '<p>Visas som tabell</p>';
             select(this.host).select('.tableButton').style('display', 'none');
             select(this.host).select('.chartButton').style('display', null);
-            event.target.nextSibling.lastChild.focus();
+            this.focusHostButton('.chartButton');
             const duration = 150;
             this.svg
                 .attr('opacity', 1)
@@ -994,11 +999,11 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 .style('opacity', 0);
         };
         // Removes observer and calls init functions for line chart
-        this.reInitChart = (event) => {
+        this.reInitChart = () => {
             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();
+            this.focusHostButton('.tableButton');
             const table = select(this.tableDiv);
             const duration = 150;
             table
@@ -1024,14 +1029,33 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             });
         };
     }
-    afChartDataUpdate(data) {
-        if ((typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0) ||
-            (typeof data !== 'string' && Object.keys(data).length > 0)) {
-            if (typeof data != 'string')
-                this.chartData = data;
-            else
-                this.chartData = JSON.parse(data);
-            this.series = this.chartData.data.series.map((serie) => serie.title);
+    afChartDataUpdate() {
+        const data = this.afChartData;
+        // Angular/React can connect the element before afChartData is set.
+        if (data == null || data === '') {
+            this.mappedData = this.reshapeData();
+            return;
+        }
+        try {
+            let parsed;
+            if (typeof data === 'string') {
+                parsed = JSON.parse(data);
+            }
+            else if (typeof data === 'object') {
+                parsed = data;
+            }
+            else {
+                this.mappedData = this.reshapeData();
+                return;
+            }
+            if (parsed && Object.keys(parsed).length > 0) {
+                this.chartData = parsed;
+                this.series = this.chartData.data.series.map((serie) => serie.title);
+            }
+        }
+        catch (_a) {
+            logger.warn(`Invalid JSON in "af-chart-data" attribute`, this.hostElement);
+            return;
         }
         this.mappedData = this.reshapeData();
         // checking for width of each tick
@@ -1042,6 +1066,17 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
         if (this.dataWidth > 1)
             this.barGap = 1;
     }
+    hasChartData() {
+        return !!this.chartData && Object.keys(this.chartData).length > 0;
+    }
+    focusHostButton(selector) {
+        var _a, _b;
+        const host = this.host;
+        const button = (_b = (_a = host === null || host === void 0 ? void 0 : host.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.querySelector('button')) !== null && _b !== void 0 ? _b : host === null || host === void 0 ? void 0 : host.querySelector(selector);
+        if (button && typeof button.focus === 'function') {
+            button.focus();
+        }
+    }
     initSvg() {
         var _a, _b, _c, _d, _e, _f, _g;
         // Fetch number formatting
@@ -1603,10 +1638,25 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
                 Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)));
     }
     componentWillLoad() {
-        this.afChartDataUpdate(this.afChartData);
+        this.afChartDataUpdate();
+        // Angular attaches the host first and binds `[afChartData]` on the next
+        // frame (Stencil 4.36+). @Watch skips that first assignment, so if chart
+        // data is not here yet, wait one frame. React/vanilla that already set
+        // the prop skip the delay.
+        if (!this.hasChartData()) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.afChartDataUpdate();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
-        if (!this.chartData || Object.keys(this.chartData).length === 0) {
+        if (!this.hasChartData()) {
+            this.afChartDataUpdate();
+        }
+        if (!this.hasChartData()) {
             this.loading = true;
             return this.initEmpty();
         }
@@ -1625,7 +1675,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
     }
     componentDidUpdate() {
         if (this.tableDiv.style['display'] != 'block' &&
-            Object.keys(this.chartData).length === 0) {
+            !this.hasChartData()) {
             // Disconnect old barchartobserver while doing resizing
             this.barChartObserver.disconnect();
             return this.loadingState();
@@ -1705,7 +1755,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
             if (this.chartData.infoText)
                 heading = `${heading}<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this.chartData.infoText}</span>`;
         }
-        return (h(Host, { key: 'cb70095467051cf1142891bc63694623e707d92f', ref: (el) => (this.host = el) }, h("svg", { key: 'c040fe2f27d9a5e3de1471fe7e4d853757f6a754', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '17fd52f2cac5a3225e097aee80e8dc1a99909840' }, h("pattern", { key: '2940e729359dad1acc4635363cd5a8f3ee4d8ea1', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '4b47d41ea9f4699a4bcc7b0f04d00b8bbd124946', width: "8", height: "8", fill: "white" }), h("line", { key: 'd5c3a32fb715a5271a784771d9812ea599390fc3', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '8038bb4d62fd87a118e0bcf4e750165eed48f789', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: 'b1247b7d27e73836c7b5a05fb77a872e89853d3b', width: "8", height: "8", fill: "white" }), h("line", { key: '14265bcba469f08b890654315a86d6278271d64d', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '4069999fd742795379f093c83c00cca488b6139c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: 'c525ae39e05acf3e7522f1b92feffdfe5221e528', width: "8", height: "8", fill: "white" }), h("line", { key: 'fa183e0678f6f3794e094b97975fe96955b49e0a', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'b6e46d7f4701775a177b02a98f46ca40308e9938', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '88d49833d43776a2bc23d7f73bb8cc9442350634', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '75e2ef09c3f9f91a08b3596d02ad308b244586bb', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '7712b56f991bb5214aa3bebb9e380221156b6bbf', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b9d442ea0b62303c2bf1018651ce3206063f3b35', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '260c432d04f8ea00216cd485b5ec3a29df4b4db1', slot: "icon" }), "Visa diagram"), h("div", { key: 'a7fd6276b5738e9cf040f0e9b99e983b27ec25cf', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '705ec9e3931b91009ff565bbd8f4ba300bd8dbd7', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '242fd5b7afba36df00aa7fb256bd8578712d25e7', class: "chartTooltip", id: this.afId }, h("div", { key: '6417cc30962396164fe4840ecfef62c4ef7591d6', class: "tooltipHead" }, h("digi-icon-x", { key: 'dc4edb442bfb342fbdb64b06e70f1e19ccc5ffb1', class: "tooltipClose" })), h("div", { key: 'da625c879d4c0eebffa02193dc36d794c755b768', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'a003a616c2ee8b848d402b38009261539ebf0c50', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '44a6db8daa836ccf910aafd6fd996f153c337bf4', class: "legend" })), h("div", { key: 'a872281035f2799fe8aa9128a953d0c5d9f6b2cc', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (h(Host, { key: '003845ddc03e2027721d5e75c82816faae5bde63', ref: (el) => (this.host = el) }, h("svg", { key: '054049009c8618211f9009961d238992c3d03c0e', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: '16f32628ffd79e24b66e749666eccd6ae283a5b8' }, h("pattern", { key: '8aa5e0923086f740eeb02d71690ed16086205b0a', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '237569e79095a4a7c084aa91fd637dfbe385ca8b', width: "8", height: "8", fill: "white" }), h("line", { key: '6edeac6a60cef51561c8fd803b2e277b19b740bf', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'bd40402b6fd33d50fc4dca709380108fe054f74c', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: 'a5dcf48112b024982f3410bc51eb05002c8c8dcc', width: "8", height: "8", fill: "white" }), h("line", { key: 'b76b6ae15b8a0ee9c37c28bf3f66613c9df1e9b8', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: 'ef4782b914f2599424d5f3e6715cb69c4f0e4728', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("rect", { key: '6501ba8a46f53b6c3309486d0795d348a8ec1fff', width: "8", height: "8", fill: "white" }), h("line", { key: 'b184212878587e1e15ebf40a472333851270b287', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '02b5c9c63c327995f9603ffc84ab0455137ff43d', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'd8944066ab1a86ed71af7de4a018ef422cea75e9', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6bc1e5870432720980fc8dad25abc5f2cb474daf', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5a8b44b3a201b4866b89fc4328ff0b46ac47c6e1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'cd0d60a025d5fa0e62cb5f6a322cf3f97c0bd02e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '8f4e4f1bdabffd7ffd1532453b534a823ef65006', slot: "icon" }), "Visa diagram"), h("div", { key: '22535e8bfb69f96152e61295019d463cb69b70c3', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: '55e25140585469497ec501cd133cfc710bb88b43', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '4d8cd2eb832770f94fdff5eec2f084e4ba5c96b8', class: "chartTooltip", id: this.afId }, h("div", { key: 'b805b20b746ce940ae5c20ef34898c3409cffecd', class: "tooltipHead" }, h("digi-icon-x", { key: 'c162d2b1e6e7aafddf0ac194705b436a5b02b392', class: "tooltipClose" })), h("div", { key: 'cdc876d4c88f50c7d95c22f4d0f683c2a5564235', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '8cb986f7466fdb42f6dc840c1371b25978ae4c66', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '6761a567c03c8ade4206fb89cf9e7bd792c36e71', class: "legend" })), h("div", { key: 'ac251b6078602f9319447cfaa6444f0129e46c0f', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/digi-button.js

@@ -1,4 +1,4 @@
-import { B as Button, d as defineCustomElement$1 } from './p-Bz9OGJ1g.js';
+import { B as Button, d as defineCustomElement$1 } from './p-BxG1tqmk.js';
 
 const DigiButton = Button;
 const defineCustomElement = defineCustomElement$1;