@designsystem-se/af 39.2.1 → 39.2.2

package/hydrate/index.js

@@ -10907,7 +10907,7 @@ const _t = Object.assign(Object.assign({}, common), { calendar,
     progressList,
     time });
 
-const calendarCss = () => `.sc-digi-calendar-h{--digi--calendar--display:inline-block;--digi--calendar--header--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--header--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--header--display:flex;--digi--calendar--header--align-items:center;--digi--calendar--header--justify-content:space-between;--digi--calendar--header--text-align:center;--digi--calendar--header--button--padding:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--calendar--header--button--background:transparent;--digi--calendar--header--button--box-shadow:none;--digi--calendar--header--button--background--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--table--border-spacing:0;--digi--calendar--table--border-collapse:collapse;--digi--calendar--table--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--table--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--table-header--padding:var(--digi--gutter--larger) 0;--digi--calendar--table-header--font-weight-normal:var(--digi--typography--body--font-weight--desktop);--digi--calendar--date--border-color:none;--digi--calendar--date--box-shadow:none;--digi--calendar--date--background-color:var(--digi--color--background--interactive--default--secondary);--digi--calendar--date--background-color--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--padding:var(--digi--gutter--large);--digi--calendar--date--color:var(--digi--color--text--primary);--digi--calendar--date--focused--background-color:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--today--circle-border:2px solid var(--digi--color--marking--indication--secondary);--digi--calendar--date--today--circle-margin:10%;--digi--calendar--date--selected--color:var(--digi--color--text--interactive--secondary);--digi--calendar--date--selected--background-color:var(--digi--color--background--interactive--selected--primary);--digi--calendar--date--not-selectable-strike--color:var(--digi--color--marking--indication--tertiary);--digi--calendar--week--font-style:italic;--digi--calendar--week--font-size:var(--digi--global--typography--font-size--small);--digi--calendar--week--border-color:var(--digi--color--divider--primary);--digi--calendar--week--border-width:var(--digi--border-width--primary)}.sc-digi-calendar-h .digi-calendar.sc-digi-calendar{display:var(--digi--calendar--display);background:var(--digi--calendar--header--button--background);padding:0px 1px 3px 1px;overflow:hidden;max-width:23.4375rem}.sc-digi-calendar-h .digi-calendar--hide.sc-digi-calendar{--digi--calendar--display:none}.sc-digi-calendar-h .digi-calendar__header.sc-digi-calendar{display:var(--digi--calendar--header--display);align-items:var(--digi--calendar--header--align-items);justify-content:var(--digi--calendar--header--justify-content);text-align:var(--digi--calendar--header--text-align);font-size:var(--digi--global--typography--font-size--base);font-family:var(--digi--calendar--header--font-family);font-weight:var(--digi--calendar--header--font-weight)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar{display:inherit;justify-content:center;margin:0 auto}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:first-child{margin-right:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:last-child{width:5rem}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar select.sc-digi-calendar{padding-inline-end:2rem}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar{flex:auto;display:inherit;align-items:inherit;justify-content:inherit}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-name.sc-digi-calendar{padding-inline:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar{font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--digi--calendar--date--color);display:flex;align-items:center;background:var(--digi--calendar--header--button--background);border:var(--digi--calendar--date--box-shadow);padding:var(--digi--calendar--header--button--padding)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:last-child{border-radius:0 4px 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:first-child{border-radius:4px 0 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible:not(.digi-calendar__date--not-selectable),.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:active:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(     --digi--calendar--header--button--background--hover   );text-decoration:underline;cursor:pointer}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(       --digi--calendar--header--button--background--hover     );text-decoration:underline;cursor:pointer}}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__table.sc-digi-calendar{border-collapse:var(--digi--calendar--table--border-collapse);border-spacing:var(--digi--calendar--table--border-spacing);font-family:var(--digi--calendar--table--font-family);table-layout:fixed;margin-bottom:var(--digi--margin--medium)}.sc-digi-calendar-h .digi-calendar__table-header-week.sc-digi-calendar{font-style:italic;padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table-header--font-weight-normal);width:50px}.sc-digi-calendar-h .digi-calendar__table-header.sc-digi-calendar{padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table--font-weight);width:46px}.sc-digi-calendar-h .digi-calendar__td-week.sc-digi-calendar{border-right:var(--digi--calendar--week--border-width) solid var(--digi--calendar--week--border-color)}.sc-digi-calendar-h .digi-calendar__td.sc-digi-calendar{text-align:right}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar{font-style:var(--digi--calendar--week--font-style);font-size:var(--digi--calendar--week--font-size);display:table-cell;text-align:center}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar:hover{cursor:default}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar{position:relative;padding:var(--digi--calendar--date--padding);color:var(--digi--calendar--date--color);background-color:var(--digi--calendar--date--background-color);border-color:var(--digi--calendar--date--border-color);border-radius:var(--digi--border-radius--secondary);font-family:inherit;font-size:inherit;font-weight:inherit;text-align:center;border:none;width:44px;height:44px}.sc-digi-calendar-h .digi-calendar__date--disabled.sc-digi-calendar{--digi--calendar--date--color:transparent;pointer-events:none}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar{position:relative}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar::after{display:block;content:" ";position:absolute;top:var(--digi--calendar--date--today--circle-margin);bottom:var(--digi--calendar--date--today--circle-margin);left:var(--digi--calendar--date--today--circle-margin);right:var(--digi--calendar--date--today--circle-margin);border:var(--digi--calendar--date--today--circle-border);border-radius:50%}.sc-digi-calendar-h .digi-calendar__date--today.digi-calendar__date--selected.sc-digi-calendar::after{border-color:var(--digi--color--icon--secondary)}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){cursor:pointer}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable):not(.digi-calendar__date--selected){--digi--calendar--date--box-shadow:var(--digi--calendar--date--box-shadow--hover);--digi--calendar--date--background-color:var(--digi--calendar--date--background-color--hover)}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable) span.sc-digi-calendar{text-decoration:underline}}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color);--digi--calendar--date--color:var(--digi--calendar--date--selected--color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover span.sc-digi-calendar{text-decoration:none}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar{cursor:not-allowed}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar::after{display:block;content:" ";width:0px;height:100%;border:1px solid #757575;transform:rotate(-45deg);position:absolute;top:0%;left:50%}.sc-digi-calendar-h .digi-calendar__date--focused.sc-digi-calendar:focus-visible:not(.digi-calendar__date--selected):not(.digi-calendar__date--not-selectable){--digi--calendar--date--background-color:var(--digi--calendar--date--focused--background-color);outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-s digi-form-label{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}`;
+const calendarCss = () => `.sc-digi-calendar-h{--digi--calendar--display:inline-block;--digi--calendar--header--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--header--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--header--display:flex;--digi--calendar--header--align-items:center;--digi--calendar--header--justify-content:space-between;--digi--calendar--header--text-align:center;--digi--calendar--header--button--padding:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--calendar--header--button--background:transparent;--digi--calendar--header--button--box-shadow:none;--digi--calendar--header--button--background--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--table--border-spacing:0;--digi--calendar--table--border-collapse:collapse;--digi--calendar--table--font-family:var(--digi--global--typography--font-family--default);--digi--calendar--table--font-weight:var(--digi--global--typography--font-weight--semibold);--digi--calendar--table-header--padding:var(--digi--gutter--larger) 0;--digi--calendar--table-header--font-weight-normal:var(--digi--typography--body--font-weight--desktop);--digi--calendar--date--border-color:none;--digi--calendar--date--box-shadow:none;--digi--calendar--date--background-color:var(--digi--color--background--interactive--default--secondary);--digi--calendar--date--background-color--hover:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--padding:var(--digi--gutter--large);--digi--calendar--date--color:var(--digi--color--text--primary);--digi--calendar--date--focused--background-color:var(--digi--color--background--interactive--hover--secondary);--digi--calendar--date--today--circle-border:2px solid var(--digi--color--marking--indication--secondary);--digi--calendar--date--today--circle-margin:10%;--digi--calendar--date--selected--color:var(--digi--color--text--interactive--secondary);--digi--calendar--date--selected--background-color:var(--digi--color--background--interactive--selected--primary);--digi--calendar--date--not-selectable-strike--color:var(--digi--color--marking--indication--tertiary);--digi--calendar--week--font-style:italic;--digi--calendar--week--font-size:var(--digi--global--typography--font-size--small);--digi--calendar--week--border-color:var(--digi--color--divider--primary);--digi--calendar--week--border-width:var(--digi--border-width--primary)}.sc-digi-calendar-h .digi-calendar.sc-digi-calendar{display:var(--digi--calendar--display);background:var(--digi--calendar--header--button--background);padding:0px 1px 3px 1px;overflow:hidden;max-width:23.4375rem}.sc-digi-calendar-h .digi-calendar--hide.sc-digi-calendar{--digi--calendar--display:none}.sc-digi-calendar-h .digi-calendar__header.sc-digi-calendar{display:var(--digi--calendar--header--display);align-items:var(--digi--calendar--header--align-items);justify-content:var(--digi--calendar--header--justify-content);text-align:var(--digi--calendar--header--text-align);font-size:var(--digi--global--typography--font-size--base);font-family:var(--digi--calendar--header--font-family);font-weight:var(--digi--calendar--header--font-weight)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar{display:inherit;justify-content:center;margin:0 auto}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:first-child{margin-right:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar:last-child{width:5rem}.sc-digi-calendar-h .digi-calendar__header--year-select.sc-digi-calendar digi-form-select.sc-digi-calendar select.sc-digi-calendar{padding-inline-end:2rem}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar{flex:auto;display:inherit;align-items:inherit;justify-content:inherit}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-name.sc-digi-calendar{padding-inline:var(--digi--padding--smaller)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar{font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--digi--calendar--date--color);display:flex;align-items:center;background:var(--digi--calendar--header--button--background);border:var(--digi--calendar--date--box-shadow);padding:var(--digi--calendar--header--button--padding)}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:last-child{border-radius:0 4px 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:first-child{border-radius:4px 0 0 0}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible:not(.digi-calendar__date--not-selectable),.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:active:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(--digi--calendar--header--button--background--hover);text-decoration:underline;cursor:pointer}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){--digi--calendar--header--button--background:var(--digi--calendar--header--button--background--hover);text-decoration:underline;cursor:pointer}}.sc-digi-calendar-h .digi-calendar__header--month-step.sc-digi-calendar .digi-calendar__month-select-button.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__table.sc-digi-calendar{border-collapse:var(--digi--calendar--table--border-collapse);border-spacing:var(--digi--calendar--table--border-spacing);font-family:var(--digi--calendar--table--font-family);table-layout:fixed;margin-bottom:var(--digi--margin--medium)}.sc-digi-calendar-h .digi-calendar__table.sc-digi-calendar th.sc-digi-calendar{text-align:center}.sc-digi-calendar-h .digi-calendar__table-header-week.sc-digi-calendar{font-style:italic;padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table-header--font-weight-normal);width:50px}.sc-digi-calendar-h .digi-calendar__table-header.sc-digi-calendar{padding:var(--digi--calendar--table-header--padding);font-weight:var(--digi--calendar--table--font-weight);width:46px}.sc-digi-calendar-h .digi-calendar__td-week.sc-digi-calendar{border-right:var(--digi--calendar--week--border-width) solid var(--digi--calendar--week--border-color)}.sc-digi-calendar-h .digi-calendar__td.sc-digi-calendar{text-align:right}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar{font-style:var(--digi--calendar--week--font-style);font-size:var(--digi--calendar--week--font-size);display:table-cell;text-align:center}.sc-digi-calendar-h .digi-calendar__date--week-number.sc-digi-calendar:hover{cursor:default}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar{position:relative;padding:var(--digi--calendar--date--padding);color:var(--digi--calendar--date--color);background-color:var(--digi--calendar--date--background-color);border-color:var(--digi--calendar--date--border-color);border-radius:var(--digi--border-radius--secondary);font-family:inherit;font-size:inherit;font-weight:inherit;text-align:center;border:none;width:44px;height:44px}.sc-digi-calendar-h .digi-calendar__date--disabled.sc-digi-calendar{--digi--calendar--date--color:transparent;pointer-events:none}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar{position:relative}.sc-digi-calendar-h .digi-calendar__date--today.sc-digi-calendar::after{display:block;content:" ";position:absolute;top:var(--digi--calendar--date--today--circle-margin);bottom:var(--digi--calendar--date--today--circle-margin);left:var(--digi--calendar--date--today--circle-margin);right:var(--digi--calendar--date--today--circle-margin);border:var(--digi--calendar--date--today--circle-border);border-radius:50%}.sc-digi-calendar-h .digi-calendar__date--today.digi-calendar__date--selected.sc-digi-calendar::after{border-color:var(--digi--color--icon--secondary)}@media (any-hover: hover){.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable){cursor:pointer}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable):not(.digi-calendar__date--selected){--digi--calendar--date--box-shadow:var(--digi--calendar--date--box-shadow--hover);--digi--calendar--date--background-color:var(--digi--calendar--date--background-color--hover)}.sc-digi-calendar-h .digi-calendar__date.sc-digi-calendar:hover:not(.digi-calendar__date--not-selectable) span.sc-digi-calendar{text-decoration:underline}}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color);--digi--calendar--date--color:var(--digi--calendar--date--selected--color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover{--digi--calendar--date--background-color:var(--digi--calendar--date--selected--background-color)}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:hover span.sc-digi-calendar{text-decoration:none}.sc-digi-calendar-h .digi-calendar__date--selected.sc-digi-calendar:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar{cursor:not-allowed}.sc-digi-calendar-h .digi-calendar__date--not-selectable.sc-digi-calendar::after{display:block;content:" ";width:0px;height:100%;border:1px solid #757575;transform:rotate(-45deg);position:absolute;top:0%;left:50%}.sc-digi-calendar-h .digi-calendar__date--focused.sc-digi-calendar:focus-visible:not(.digi-calendar__date--selected):not(.digi-calendar__date--not-selectable){--digi--calendar--date--background-color:var(--digi--calendar--date--focused--background-color);outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-calendar-s digi-form-label{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}`;
 
 /**
  * @swedishName Kalender
@@ -13285,7 +13285,30 @@ class CalendarWeekView {
         this.weekDays = [...newDates];
     }
     afDatesUpdate() {
-        const dateList = [...JSON.parse(this.afDates)];
+        // Angular/React can connect the element before afDates is set.
+        if (this.afDates == null || this.afDates === '') {
+            return;
+        }
+        const hadDates = this.dates.length > 0;
+        let dateList;
+        try {
+            if (Array.isArray(this.afDates)) {
+                dateList = [...this.afDates];
+            }
+            else if (typeof this.afDates === 'string') {
+                dateList = JSON.parse(this.afDates);
+            }
+            else {
+                return;
+            }
+        }
+        catch (_a) {
+            logger.warn(`Invalid JSON in "af-dates" attribute`, this.hostElement);
+            return;
+        }
+        if (!Array.isArray(dateList)) {
+            return;
+        }
         this.dates = [
             ...dateList.sort((a, b) => {
                 const c = new Date(a);
@@ -13293,6 +13316,9 @@ class CalendarWeekView {
                 return this.getTime(c) - this.getTime(d);
             })
         ];
+        if (!hadDates && this.dates.length > 0) {
+            this.initDates();
+        }
     }
     /**
      * Kan användas för att manuellt sätta om det aktiva datumet. Formatet måste vara 'yyyy-MM-dd'.
@@ -13316,6 +13342,9 @@ class CalendarWeekView {
         this.afOnWeekChange.emit('next');
     }
     initDates() {
+        if (this.dates.length === 0) {
+            return;
+        }
         this.minDate = new Date(this.dates[0]);
         this.maxDate = new Date(this.dates[this.dates.length - 1]);
         this.selectedDate = format$1(new Date(this.dates[0]), 'yyyy-MM-dd', {
@@ -13327,9 +13356,23 @@ class CalendarWeekView {
     }
     componentWillLoad() {
         this.afDatesUpdate();
-        this.initDates();
+        // Angular attaches the host first and binds `[afDates]` on the next frame
+        // (Stencil 4.36+). @Watch skips that first assignment, so if dates are not
+        // here yet, wait one frame. React/vanilla that already set the prop skip
+        // the delay.
+        if (this.dates.length === 0) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.afDatesUpdate();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
+        if (this.dates.length === 0) {
+            this.afDatesUpdate();
+        }
         this.afOnReady.emit();
     }
     get prevWeekText() {
@@ -13353,7 +13396,7 @@ class CalendarWeekView {
                 format$1(new Date(lastDate), 'MMMM yyyy', { locale: locale$1 });
     }
     render() {
-        return (hAsync("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, hAsync("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, hAsync("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, hAsync("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, hAsync("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, hAsync(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, hAsync("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), hAsync("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), hAsync("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
+        return (hAsync("div", { key: '44d49828a7f43a1f3943aaf0af4139f402844bf0', class: "digi-calendar-week-view" }, hAsync("nav", { key: '44ba98a7c433077c2c11c55b150a5cc2f1d38ac2', class: "digi-calendar-week-view__timepicker" }, hAsync("div", { key: '160ce73dc293abd69193c2b1750c9fd7400b8804', class: "digi-calendar-week-view__dates" }, hAsync("div", { key: '2d60245978d9c7615f3ff5ec7b9d8d628e16f843', class: "digi-calendar-week-view__flex" }, hAsync("digi-typography", { key: '23a1c94d0575061951f67f46782144de52e5e662' }, hAsync(this.afHeadingLevel, { key: 'a183705a035f4d3d57ced74920221f40bbe6019f', role: "status", class: "digi-calendar-week-view__heading" }, hAsync("span", { key: '147910745991716f3557491c6e6aa702f479e8c7', class: "digi-calendar-week-view__month" }, this.currentMonth), hAsync("span", { key: '0d91367cd6066a2b35349edd0ff93e20b5326f04', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), hAsync("ul", { key: 'fdff670cf241e05920e19e0ce6e601b62ae9a3f0', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
             const date = format$1(new Date(dateItem), 'd', {
                 locale: locale$1
             });
@@ -13373,16 +13416,17 @@ class CalendarWeekView {
                 } }, day), hAsync("span", { class: "digi-calendar-week-view__date-button-date" }, date), hAsync("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), hAsync("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
+        })))), hAsync("digi-button", { key: 'dbae5227d0316a5a67febc7de83b1c4c5cfc1044', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, hAsync("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), hAsync("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, hAsync("digi-icon-chevron-left", { key: '65d0f656a0d35911d39f9b8e9ade224be54d4371', slot: "icon" }), this.prevWeekText), hAsync("digi-button", { key: '68d9b3d6c929d0185f412add980a542b3c86fbb2', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, hAsync("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), hAsync("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, hAsync("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, hAsync("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
+            }, "af-variation": "secondary" }, hAsync("digi-icon-chevron-right", { key: 'a9e688f815a5053aa709cfeb9359131f73df21c0', slot: "icon-secondary" }), this.nextWeekText)), hAsync("div", { key: '7d1073f6cd1982fda2ce7dcb60532c94bd1d0634', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, hAsync("digi-typography", { key: 'db7ce0ca80485df1e4ae67200f2cd90cc80938d5' }, hAsync("slot", { key: 'f08f447ae89612dfcea56c638024220bc29e7914' })))));
     }
+    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "selectedDate": [{
                 "selectedDateChangeHandler": 0
@@ -18860,14 +18904,14 @@ class ChartLine {
             });
         };
         // Removes resize observer for chart and inits table
-        this.activateTable = (event) => {
+        this.activateTable = () => {
             this.closeTooltip();
             this.lineChartObserver.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);
-            event.target.nextSibling.lastChild.focus();
+            this.focusHostButton('.chartButton');
             const duration = 150;
             this._svg
                 .attr('opacity', 1)
@@ -18898,12 +18942,12 @@ class ChartLine {
             this.setTableDimensions();
         };
         // Removes observer and calls init functions for line chart
-        this.reInitChart = (event) => {
+        this.reInitChart = () => {
             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');
-            event.target.previousSibling.lastChild.focus();
+            this.focusHostButton('.tableButton');
             const table = select(this._tableDiv);
             table
                 .style('opacity', 1)
@@ -18930,15 +18974,40 @@ class ChartLine {
     }
     afChartDataUpdate() {
         const data = this.afChartData;
-        if (typeof data === 'object') {
-            this._chartData = Object.assign({}, data);
+        // Angular/React can connect the element before afChartData is set.
+        if (data == null || data === '') {
+            return;
+        }
+        try {
+            if (typeof data === 'object') {
+                this._chartData = Object.assign({}, data);
+            }
+            else if (typeof data === 'string') {
+                this._chartData = JSON.parse(data);
+            }
+            else {
+                return;
+            }
+        }
+        catch (_a) {
+            logger.warn(`Invalid JSON in "af-chart-data" attribute`, this.element);
             return;
         }
-        this._chartData = JSON.parse(data);
         // Making deep copy of this
         if (this._chartData.data)
             this._coreSeries = JSON.parse(JSON.stringify(this._chartData.data.series));
     }
+    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() {
         this.margin.bottom =
             Number(window
@@ -19402,9 +19471,24 @@ class ChartLine {
     }
     componentWillLoad() {
         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 (Object.keys(this._chartData).length === 0)
+        if (!this.hasChartData()) {
+            this.afChartDataUpdate();
+        }
+        if (!this.hasChartData())
             return this.initEmpty();
         // clearing selection
         this._selectedLines = [];
@@ -19420,7 +19504,7 @@ class ChartLine {
         this._prevHeight = select(this._titleDiv).style('height');
     }
     componentDidUpdate() {
-        if (Object.keys(this._chartData).length === 0)
+        if (!this.hasChartData())
             return this.loadingState();
         // clearing selection
         this._selectedLines = [];
@@ -19577,11 +19661,13 @@ class ChartLine {
     }
     render() {
         let heading = '';
-        if (!this._chartData.subTitle)
-            heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
-        else
-            heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (hAsync("host", { key: 'a21c09ee91ccabf90f91d2344d301d26710f9a60', ref: (el) => (this._host = el) }, hAsync("div", { key: 'c97af6a0bbc28675a19c843a3c355b35397e5804', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, hAsync("digi-typography", { key: '76085c6924fd317d4a281e93ca4623b85f0fb867', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '241e30b3094e8eea86c7c24bb2a90f67ea04ef6f', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '5cc0d03d40d076481d14d0478390b131cdaa61f7', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '241d3e97b9a21f556b3e46cebc63c77ce106d26c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: 'f0a5c78bc5e04db994559f2ce1a13c0e7285c36d', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'f7ebab0f90d1a9f9a306470c93ccaaaf0461a9a7', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), hAsync("div", { key: '75672c02d61a14741348dc183782df71f3a4db19', class: "chartTooltip", id: this.afId }, hAsync("div", { key: 'b4e03381d825d68af2bdbf859458896c639b6559', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '1301ab00ff3818e0940e69f17aa09b296c04a86c', class: "close" }), ' '), hAsync("div", { key: 'eb01d362db4495c0a3d4396ad4c71c2a952114ad', class: "tooltipBody" })), hAsync("div", { key: 'accd6776d3db14c662ff84b2e826f6cf713ff38d', class: "chart", ref: (el) => (this._chartDiv = el) }), hAsync("div", { key: '507dfba00c88d5b371fd8304053b9b7762506d25', class: "legend", ref: (el) => (this._legendDiv = el) }), hAsync("div", { key: 'cb3fc091c6a557bfd62e8f7d59863e973da0ee53', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        if (this._chartData) {
+            if (!this._chartData.subTitle)
+                heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
+            else
+                heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
+        }
+        return (hAsync("host", { key: '93603df9b78fcce8b5735b4a874f879cf7b2326e', ref: (el) => (this._host = el) }, hAsync("div", { key: '094a790864b72bbb9a802b461db06ce312c627c8', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, hAsync("digi-typography", { key: '5f4bd51fdfef816b0e127d1177c60f8310952173', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '8ae72950c5cf052ed71c2ba4e91b254b8d36cfd0', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, hAsync("digi-icon-table", { key: '750f1b621eb0a1a54ec810aa63624237bd98f9ea', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: '1cf33daaaa8adf9c5352286d6172d7c258098c29', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, hAsync("digi-icon-chart", { key: '9dce5df1a96d4b818597854f7ee238fefda2c686', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '204f5824b2f34b3a1a1401ed4434e1fcb16a2549', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), hAsync("div", { key: 'b164f59f1c741db5493af57510eab2987cabefc6', class: "chartTooltip", id: this.afId }, hAsync("div", { key: 'e84bf8a85a745977006d50f296d1afee2ee35698', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '77bcd0342c828dbcbe020a9ffefe4ae6f3086572', class: "close" }), ' '), hAsync("div", { key: '330f69a58082f72b528095ef49a2371fc8b0d8e5', class: "tooltipBody" })), hAsync("div", { key: '62eb27ac8f184476d50332344711ca381e8adf59', class: "chart", ref: (el) => (this._chartDiv = el) }), hAsync("div", { key: 'ad70790d3a2fd5851c4351e41f2436a34169a819', class: "legend", ref: (el) => (this._legendDiv = el) }), hAsync("div", { key: '30d4791a9b808555f03d1830aaec0221c1bc3b37', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -36204,14 +36290,10 @@ class NavigationTablist {
         }
     }
     syncPanels() {
-        // side-effect
-        if (this.panelsRef != null) {
-            const panels = this.panelsRef.querySelectorAll(':scope>digi-tablist-panel');
-            for (let i = 0; i < panels.length; i++) {
-                const panel = panels[i];
-                const showPanel = panel.tab === this.tabs[this.activeTab].id;
-                panel.isVisible = showPanel;
-            }
+        var _a;
+        const activeId = (_a = this.tabs[this.activeTab]) === null || _a === void 0 ? void 0 : _a.id;
+        for (const panel of this.getSlottedPanels()) {
+            panel.isVisible = panel.tab === activeId;
         }
     }
     handleTabPropChange(tabId) {
@@ -36242,6 +36324,11 @@ class NavigationTablist {
         this.windowTab = tabIdx;
     }
     setupTabs(tabs) {
+        // Angular/React can connect the element before afTabs is set.
+        if (tabs == null || tabs === '') {
+            return;
+        }
+        const hadTabs = this.tabs.length > 0;
         if (typeof tabs === 'string') {
             this.tabs = JSON.parse(tabs);
         }
@@ -36251,6 +36338,13 @@ class NavigationTablist {
         else {
             throw new Error('Invalid format or no tabs supplied');
         }
+        if (!hadTabs) {
+            this.setupInitialTab();
+        }
+        this.syncPanels();
+    }
+    getSlottedPanels() {
+        return Array.from(this.hostElement.querySelectorAll('digi-tablist-panel')).filter((panel) => panel.closest('digi-tablist') === this.hostElement);
     }
     setActiveTabById(id) {
         const tabIdx = this.tabs.findIndex((tab) => tab.id === id);
@@ -36318,9 +36412,23 @@ class NavigationTablist {
     componentWillLoad() {
         this.setupTabs(this.afTabs);
         this.setupInitialTab();
+        // Angular attaches the host first and binds `[afTabs]` on the next frame
+        // (Stencil 4.36+). @Watch skips that first assignment, so if tabs are not
+        // here yet, wait one frame. React/vanilla that already set the prop skip
+        // the delay.
+        if (this.tabs.length === 0) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.setupTabs(this.afTabs);
+                    this.setupInitialTab();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
         var _a, _b, _c;
+        this.setupTabs(this.afTabs);
         // Also listen to window resize for viewport zoom changes
         if (window) {
             window.addEventListener('resize', this.handleResize, { passive: true });
@@ -36342,14 +36450,14 @@ class NavigationTablist {
             cancelAnimationFrame(this._requestAnimationFrame);
     }
     render() {
-        return (hAsync(Host, { key: '8bdab05cd034b9940aefcb9f38b16d09b6f0b0c7' }, hAsync("div", { key: '2d2266a9600dcc5817130ed4ece38868779e0b69', class: {
+        return (hAsync(Host, { key: 'b2d71ff4b3f2c2fa22feffbc298360c1b3202b1d' }, hAsync("div", { key: 'df48ffc9fdabfca380675c7232af5fef80c445b9', class: {
                 'digi-tablist': true,
                 'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
                 'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
-            } }, hAsync("div", { key: 'a96cd5d9a2eec5b2b52f0d1a00b2810c28e8d4bd', class: "control-wrapper", style: {
+            } }, hAsync("div", { key: '797f70a00aa1e3dd8a3b54d43808b9515259723c', class: "control-wrapper", style: {
                 left: '0',
                 visibility: this.showPrev ? 'visible' : 'hidden'
-            } }, hAsync("button", { key: '7a9810781c300bd44aa7ce3f3f76f651b1799023', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, hAsync("digi-icon-chevron-left", { key: '8f65c019aa2a60f8d10025c147ad2448d30cdf1d' }))), hAsync("div", { key: '7be08fe744f17f71fab7358d63d010f17e5c977d', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
+            } }, hAsync("button", { key: '415237740bc65dd5cfdb0e57eb44307c9d838670', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, hAsync("digi-icon-chevron-left", { key: '59f2d43ba38c7d4ebdd85a575b2e89c0fec62381' }))), hAsync("div", { key: '01602338cbd7a63f48cdcf541629e76bac46dd4c', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
             const focusable = tab.id === this.tabs[this.selectedTab].id;
             const isActive = tab.id === this.tabs[this.activeTab].id;
             const Icon = `digi-icon-${tab.icon}`;
@@ -36358,11 +36466,12 @@ class NavigationTablist {
                     'digi-tab': true,
                     'is-active': isActive
                 }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, hAsync("div", { class: "content-wrapper" }, hAsync("span", { class: "tablist-content" }, tab.icon && hAsync(Icon, { "aria-hidden": "true" }), hAsync("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (hAsync("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), hAsync("div", { class: "indicator" }))));
-        })), hAsync("div", { key: 'b79ea56eb945fe5c4b2e34529d8b1985018ac46c', class: "control-wrapper", style: {
+        })), hAsync("div", { key: 'db28ea61c349d7aaf057e84b607c4f851b3f6712', class: "control-wrapper", style: {
                 right: '0',
                 visibility: this.showNext ? 'visible' : 'hidden'
-            } }, hAsync("button", { key: '3d581fe07f9591f21fef85e700259d3b44332631', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, hAsync("digi-icon-chevron-right", { key: '1f3a564d4eff7851ad13901c492e663c5c43d384' })))), hAsync("div", { key: '2cd9aa7d409b36395febee9dfd26eb6e82b02f35', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, hAsync("slot", { key: 'b9f82031b00032dfb1df2358546a8a35934033a0' }))));
+            } }, hAsync("button", { key: '83513f2d64cc0578155d305f21dfb1ca4a412cc6', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, hAsync("digi-icon-chevron-right", { key: '9263e864c21ea5358f301214fbadda6ed7d3c74a' })))), hAsync("div", { key: '205efbbb3aab40f51f9f85f8d74a4026970c7144', role: "presentation" }, hAsync("slot", { key: 'e753d718f852072745f5c2a49f6189fb62f3645b', onSlotchange: () => this.syncPanels() }))));
     }
+    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "activeTab": [{
                 "syncPanels": 0
@@ -36491,16 +36600,28 @@ class NavigationVerticalMenu {
         }
     }
     componentWillLoad() {
-        this.getListItems();
-        this.initNav();
-        this.setLevelClass();
+        this.syncNav();
+        // Angular attaches the host first and slots children on the next frame
+        // (Stencil 4.36+). React/vanilla that already have slotted nodes skip
+        // the delay. Do not warn here — Angular/React may still be projecting.
+        if (!this.hostElement.children.length) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.syncNav();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
         this.initCurrentActiveLevel();
         this.afOnReady.emit();
     }
     componentWillUpdate() {
-        this.getListItems();
+        this.syncNav();
+    }
+    syncNav(options) {
+        this.getListItems(options);
         this.initNav();
         this.setLevelClass();
     }
@@ -36550,12 +36671,12 @@ class NavigationVerticalMenu {
         }
     }
     setLevelClass() {
-        this.hostElement
-            .querySelector('ul')
-            .classList.remove('primary', 'secondary');
-        this.hostElement
-            .querySelector('ul')
-            .classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
+        const rootList = this.hostElement.querySelector('ul');
+        if (!rootList) {
+            return;
+        }
+        rootList.classList.remove('primary', 'secondary');
+        rootList.classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
     }
     initNav() {
         const $ul = this.hostElement.querySelectorAll('ul');
@@ -36568,10 +36689,12 @@ class NavigationVerticalMenu {
         this.initNav();
         this.setClasses(e);
     }
-    getListItems() {
+    getListItems(options) {
         const menuItems = this.hostElement.children;
         if (!menuItems || menuItems.length <= 0) {
-            logger.warn(`The slot contains no children elements.`, this.hostElement);
+            if (options === null || options === void 0 ? void 0 : options.warnIfEmpty) {
+                logger.warn(`The slot contains no children elements.`, this.hostElement);
+            }
             return;
         }
         this.listItems = [...Array.from(menuItems)].map((filter) => {
@@ -36590,7 +36713,7 @@ class NavigationVerticalMenu {
         };
     }
     render() {
-        return (hAsync("nav", { key: '0c7b96501a70d813b8d8f5b8014dc420d472f4a9', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, hAsync("slot", { key: '2b5d92cada1cde5bb5155257be77a584c2e708ec' })));
+        return (hAsync("nav", { key: 'df2239de80363247c33eadf6995331a74a40966f', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, hAsync("slot", { key: 'dc2e22c2cfd00786964855ea3bc2b7271879510c', onSlotchange: () => this.syncNav() })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return navigationVerticalMenuCss(); }
@@ -39698,7 +39821,7 @@ class UtilResizeObserver {
     }; }
 }
 
-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}`;
 
 /**
  *
@@ -39874,6 +39997,8 @@ class barChart {
         };
         // 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 =
@@ -40135,6 +40260,8 @@ class barChart {
             return toReturn;
         };
         this.adjustBarSize = () => {
+            if (!this.barSelection)
+                return;
             this.barSelection
                 .selectAll('.bar')
                 .attr('x', this.xFunction)
@@ -40567,13 +40694,13 @@ class barChart {
             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)
@@ -40604,11 +40731,11 @@ class barChart {
                 .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
@@ -40634,14 +40761,33 @@ class barChart {
             });
         };
     }
-    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
@@ -40652,6 +40798,17 @@ class barChart {
         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
@@ -41213,10 +41370,25 @@ class barChart {
                 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();
         }
@@ -41235,7 +41407,7 @@ class barChart {
     }
     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();
@@ -41315,7 +41487,7 @@ class barChart {
             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 (hAsync(Host, { key: 'cb70095467051cf1142891bc63694623e707d92f', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'c040fe2f27d9a5e3de1471fe7e4d853757f6a754', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '17fd52f2cac5a3225e097aee80e8dc1a99909840' }, hAsync("pattern", { key: '2940e729359dad1acc4635363cd5a8f3ee4d8ea1', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("rect", { key: '4b47d41ea9f4699a4bcc7b0f04d00b8bbd124946', width: "8", height: "8", fill: "white" }), hAsync("line", { key: 'd5c3a32fb715a5271a784771d9812ea599390fc3', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '8038bb4d62fd87a118e0bcf4e750165eed48f789', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("rect", { key: 'b1247b7d27e73836c7b5a05fb77a872e89853d3b', width: "8", height: "8", fill: "white" }), hAsync("line", { key: '14265bcba469f08b890654315a86d6278271d64d', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '4069999fd742795379f093c83c00cca488b6139c', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("rect", { key: 'c525ae39e05acf3e7522f1b92feffdfe5221e528', width: "8", height: "8", fill: "white" }), hAsync("line", { key: 'fa183e0678f6f3794e094b97975fe96955b49e0a', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'b6e46d7f4701775a177b02a98f46ca40308e9938', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '88d49833d43776a2bc23d7f73bb8cc9442350634', class: "chartTitle", innerHTML: heading }), hAsync("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() : ''}` }, hAsync("digi-icon-table", { key: '7712b56f991bb5214aa3bebb9e380221156b6bbf', slot: "icon" }), "Visa tabell"), hAsync("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() : ''}` }, hAsync("digi-icon-chart", { key: '260c432d04f8ea00216cd485b5ec3a29df4b4db1', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'a7fd6276b5738e9cf040f0e9b99e983b27ec25cf', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '705ec9e3931b91009ff565bbd8f4ba300bd8dbd7', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '242fd5b7afba36df00aa7fb256bd8578712d25e7', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '6417cc30962396164fe4840ecfef62c4ef7591d6', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'dc4edb442bfb342fbdb64b06e70f1e19ccc5ffb1', class: "tooltipClose" })), hAsync("div", { key: 'da625c879d4c0eebffa02193dc36d794c755b768', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: 'a003a616c2ee8b848d402b38009261539ebf0c50', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '44a6db8daa836ccf910aafd6fd996f153c337bf4', class: "legend" })), hAsync("div", { key: 'a872281035f2799fe8aa9128a953d0c5d9f6b2cc', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
+        return (hAsync(Host, { key: '003845ddc03e2027721d5e75c82816faae5bde63', ref: (el) => (this.host = el) }, hAsync("svg", { key: '054049009c8618211f9009961d238992c3d03c0e', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: '16f32628ffd79e24b66e749666eccd6ae283a5b8' }, hAsync("pattern", { key: '8aa5e0923086f740eeb02d71690ed16086205b0a', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("rect", { key: '237569e79095a4a7c084aa91fd637dfbe385ca8b', width: "8", height: "8", fill: "white" }), hAsync("line", { key: '6edeac6a60cef51561c8fd803b2e277b19b740bf', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: 'bd40402b6fd33d50fc4dca709380108fe054f74c', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("rect", { key: 'a5dcf48112b024982f3410bc51eb05002c8c8dcc', width: "8", height: "8", fill: "white" }), hAsync("line", { key: 'b76b6ae15b8a0ee9c37c28bf3f66613c9df1e9b8', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: 'ef4782b914f2599424d5f3e6715cb69c4f0e4728', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("rect", { key: '6501ba8a46f53b6c3309486d0795d348a8ec1fff', width: "8", height: "8", fill: "white" }), hAsync("line", { key: 'b184212878587e1e15ebf40a472333851270b287', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '02b5c9c63c327995f9603ffc84ab0455137ff43d', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: 'd8944066ab1a86ed71af7de4a018ef422cea75e9', class: "chartTitle", innerHTML: heading }), hAsync("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() : ''}` }, hAsync("digi-icon-table", { key: '5a8b44b3a201b4866b89fc4328ff0b46ac47c6e1', slot: "icon" }), "Visa tabell"), hAsync("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() : ''}` }, hAsync("digi-icon-chart", { key: '8f4e4f1bdabffd7ffd1532453b534a823ef65006', slot: "icon" }), "Visa diagram"), hAsync("div", { key: '22535e8bfb69f96152e61295019d463cb69b70c3', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: '55e25140585469497ec501cd133cfc710bb88b43', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '4d8cd2eb832770f94fdff5eec2f084e4ba5c96b8', class: "chartTooltip", id: this.afId }, hAsync("div", { key: 'b805b20b746ce940ae5c20ef34898c3409cffecd', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'c162d2b1e6e7aafddf0ac194705b436a5b02b392', class: "tooltipClose" })), hAsync("div", { key: 'cdc876d4c88f50c7d95c22f4d0f683c2a5564235', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '8cb986f7466fdb42f6dc840c1371b25978ae4c66', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '6761a567c03c8ade4206fb89cf9e7bd792c36e71', class: "legend" })), hAsync("div", { key: 'ac251b6078602f9319447cfaa6444f0129e46c0f', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {