@fkui/vue 5.45.0 → 5.46.0

package/dist/esm/index.esm.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, isVNode, Comment, createApp, resolveComponent, withKeys, createCommentVNode, toDisplayString, createVNode, createBlock, withCtx, Fragment, renderList, withModifiers, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, normalizeProps, guardReactiveProps, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, ref, unref, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, toRefs } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, isVNode, Comment, createApp, resolveComponent, withKeys, createCommentVNode, toDisplayString, createVNode, createBlock, withCtx, Fragment, renderList, withModifiers, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, toRefs } from "vue";
 import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, pushFocus, findTabbableElements, popFocus, scrollTo, Reference, documentOrderComparator, ValidationService, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, formatNumber, parseNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, formatPersonnummer, parsePersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, focusFirst, saveFocus, addFocusListener, removeFocusListener, restoreFocus, DomUtils } from "@fkui/logic";
 import { getWeekdayNamings, groupByWeek, FDate, DateFormat } from "@fkui/date";
 const statuses = ["default", "warning", "error", "success", "info"];
@@ -5530,6 +5530,9 @@ const _sfc_main$12 = defineComponent({
     };
   },
   computed: {
+    ariaLabel() {
+      return `${this.value.monthName} ${this.value.year}`;
+    },
     totalCols() {
       return this.hideWeekNumbers ? 7 : 8;
     },
@@ -5571,50 +5574,43 @@ const _sfc_main$12 = defineComponent({
     }
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$O = ["aria-label"];
+const _hoisted_2$A = {
   key: 0,
   class: "calendar-month__col--week"
 };
-const _hoisted_2$A = {
-  role: "presentation"
-};
 const _hoisted_3$s = {
-  role: "presentation"
-};
-const _hoisted_4$n = {
   key: 0,
   scope: "col",
   "aria-hidden": "true",
   class: "calendar-month__header-cell"
 };
-const _hoisted_5$i = ["title"];
-const _hoisted_6$e = {
-  role: "presentation"
-};
-const _hoisted_7$d = {
+const _hoisted_4$n = ["title"];
+const _hoisted_5$i = {
   key: 0,
   class: "calendar-month__cell calendar-month__cell--week-number",
   "aria-hidden": "true"
 };
-const _hoisted_8$8 = ["colspan"];
-const _hoisted_9$5 = ["colspan"];
-const _hoisted_10$3 = {
+const _hoisted_6$e = ["colspan"];
+const _hoisted_7$d = ["colspan"];
+const _hoisted_8$8 = {
   key: 0,
   "aria-hidden": "true"
 };
-const _hoisted_11$2 = ["colspan"];
-const _hoisted_12$2 = {
+const _hoisted_9$5 = ["colspan"];
+const _hoisted_10$3 = {
   key: 1,
   "aria-hidden": "true"
 };
-const _hoisted_13$1 = ["colspan"];
+const _hoisted_11$2 = ["colspan"];
 function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("table", {
     class: "calendar-month__table",
-    role: "application",
+    role: "grid",
+    "aria-label": _ctx.ariaLabel,
     onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusin && _ctx.onFocusin(...args)),
     onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusout && _ctx.onFocusout(...args))
-  }, [createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("col", _hoisted_1$O)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _cache[3] || (_cache[3] = createElementVNode("col", {
+  }, [createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("col", _hoisted_2$A)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _cache[3] || (_cache[3] = createElementVNode("col", {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[4] || (_cache[4] = createTextVNode()), _cache[5] || (_cache[5] = createElementVNode("col", {
     class: "calendar-month__col--day"
@@ -5628,26 +5624,23 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[14] || (_cache[14] = createTextVNode()), _cache[15] || (_cache[15] = createElementVNode("col", {
     class: "calendar-month__col--day"
-  }, null, -1))]), _cache[22] || (_cache[22] = createTextVNode()), createElementVNode("thead", _hoisted_2$A, [createElementVNode("tr", _hoisted_3$s, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_4$n)) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekdays, (weekday) => {
+  }, null, -1))]), _cache[22] || (_cache[22] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_3$s)) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekdays, (weekday) => {
     return openBlock(), createElementBlock("th", {
       key: weekday.name,
       scope: "col",
-      role: "presentation",
       class: "calendar-month__header-cell"
     }, [createElementVNode("abbr", {
-      "aria-hidden": "true",
       title: weekday.name
-    }, toDisplayString(_ctx.showShortWeekdays ? weekday.shortName : weekday.name), 9, _hoisted_5$i)]);
-  }), 128))])]), _cache[23] || (_cache[23] = createTextVNode()), createElementVNode("tbody", _hoisted_6$e, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weeks, (week) => {
+    }, toDisplayString(_ctx.showShortWeekdays ? weekday.shortName : weekday.name), 9, _hoisted_4$n)]);
+  }), 128))])]), _cache[23] || (_cache[23] = createTextVNode()), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weeks, (week) => {
     return openBlock(), createElementBlock("tr", {
-      key: week.week,
-      role: "presentation"
-    }, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("td", _hoisted_7$d, toDisplayString(week.week), 1)) : createCommentVNode("", true), _cache[17] || (_cache[17] = createTextVNode()), _ctx.getDayStartOffset(week.days) ? (openBlock(), createElementBlock("td", {
+      key: week.week
+    }, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("td", _hoisted_5$i, toDisplayString(week.week), 1)) : createCommentVNode("", true), _cache[17] || (_cache[17] = createTextVNode()), _ctx.getDayStartOffset(week.days) ? (openBlock(), createElementBlock("td", {
       key: 1,
       class: "calendar-month__cell",
       colspan: _ctx.getDayStartOffset(week.days),
       "aria-hidden": "true"
-    }, null, 8, _hoisted_8$8)) : createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day) => {
+    }, null, 8, _hoisted_6$e)) : createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day) => {
       return openBlock(), createElementBlock("td", {
         key: day.toString(),
         class: "calendar-month__cell",
@@ -5661,16 +5654,16 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
       class: "calendar-month__cell",
       colspan: _ctx.getDayEndOffset(week.days),
       "aria-hidden": "true"
-    }, null, 8, _hoisted_9$5)) : createCommentVNode("", true)]);
-  }), 128)), _cache[20] || (_cache[20] = createTextVNode()), _ctx.weeks.length < 5 ? (openBlock(), createElementBlock("tr", _hoisted_10$3, [createElementVNode("td", {
+    }, null, 8, _hoisted_7$d)) : createCommentVNode("", true)]);
+  }), 128)), _cache[20] || (_cache[20] = createTextVNode()), _ctx.weeks.length < 5 ? (openBlock(), createElementBlock("tr", _hoisted_8$8, [createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_11$2)])) : createCommentVNode("", true), _cache[21] || (_cache[21] = createTextVNode()), _ctx.weeks.length < 6 ? (openBlock(), createElementBlock("tr", _hoisted_12$2, [createElementVNode("td", {
+  }, null, 8, _hoisted_9$5)])) : createCommentVNode("", true), _cache[21] || (_cache[21] = createTextVNode()), _ctx.weeks.length < 6 ? (openBlock(), createElementBlock("tr", _hoisted_10$3, [createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_13$1)])) : createCommentVNode("", true)])], 32);
+  }, null, 8, _hoisted_11$2)])) : createCommentVNode("", true)])], 40, _hoisted_1$O);
 }
 const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$Q]]);
 const DayStep = {
@@ -5743,6 +5736,11 @@ const _sfc_main$11 = defineComponent({
       this.$emit("click", date);
     },
     async onKeydownDay(date, event) {
+      if (event.code === "Enter" || event.code === "Space") {
+        event.preventDefault();
+        this.$emit("click", date);
+        return;
+      }
       if (!isDayStepKey(event)) {
         return;
       }
@@ -5790,13 +5788,13 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(({
       date
-    }) => [createElementVNode("button", {
+    }) => [createElementVNode("div", {
       ref: date.toString(),
+      role: "gridcell",
       class: "calendar-month__button",
       "data-test": "select-day-button",
       "data-date": date.toString(),
       tabindex: _ctx.getTabindex(date),
-      type: "button",
       onClick: withModifiers(($event) => _ctx.onClickDay(date), ["stop", "prevent"]),
       onKeydown: ($event) => _ctx.onKeydownDay(date, $event)
     }, [renderSlot(_ctx.$slots, "default", {
@@ -6004,9 +6002,7 @@ function useSlotUtils() {
     }
   };
 }
-const _hoisted_1$K = {
-  class: "card card--default"
-};
+const _hoisted_1$K = ["id"];
 const _hoisted_2$y = {
   key: 0,
   class: "card__header"
@@ -6020,16 +6016,91 @@ const _hoisted_4$m = {
 };
 const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "FCard",
+  props: {
+    /**
+     * Element to focus on when card is invalid. Set when using validation.
+     */
+    focusRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    /**
+     * Optional id (generated by default).
+     */
+    id: {
+      type: String,
+      required: false,
+      default: () => ElementIdService.generateElementId()
+    }
+  },
   setup(__props) {
     const {
       hasSlot: hasSlot2
     } = useSlotUtils();
+    const validationMessage = ref("");
+    const hasError = ref(false);
+    const isMounted = ref(false);
     const hasHeaderSlot = computed(() => hasSlot2("header"));
     const hasFooterSlot = computed(() => hasSlot2("footer"));
+    const cardClass = computed(() => `card card--${hasError.value ? "error" : "default"}`);
+    const props = __props;
+    onMounted(() => isMounted.value = true);
+    async function onValidity({
+      detail
+    }) {
+      if (!isMounted.value) {
+        return;
+      }
+      if (!props.focusRef) {
+        throw new Error("Element to focus on when card is invalid (`focusRef`) is required when using card validation.");
+      }
+      const focusElementId = props.focusRef.id;
+      if (!focusElementId) {
+        throw new Error("An id must be set on the card's focus element.");
+      }
+      hasError.value = !detail.isValid;
+      validationMessage.value = detail.validationMessage;
+      dispatchComponentValidityEvent(props.focusRef, {
+        ...detail,
+        errorMessage: validationMessage.value,
+        focusElementId
+      });
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$K, [hasHeaderSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$y, [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
+      return openBlock(), createElementBlock("div", {
+        id: __props.id,
+        class: normalizeClass(cardClass.value),
+        onValidity
+      }, [hasHeaderSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$y, [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
         headingSlotClass: "card__header-label"
-      })))])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("div", _hoisted_3$r, [renderSlot(_ctx.$slots, "default")]), _cache[1] || (_cache[1] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)]);
+      })))])) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "error-message", normalizeProps(guardReactiveProps({
+        hasError: hasError.value,
+        validationMessage: validationMessage.value
+      })), () => [hasError.value ? (openBlock(), createBlock(unref(IFlex), {
+        key: 0,
+        gap: "1x",
+        class: "card__error-message"
+      }, {
+        default: withCtx(() => [createVNode(unref(IFlexItem), {
+          shrink: "",
+          align: "center"
+        }, {
+          default: withCtx(() => [createVNode(unref(FIcon), {
+            name: "error"
+          })]),
+          _: 1
+        }), _cache[0] || (_cache[0] = createTextVNode()), createVNode(unref(IFlexItem), {
+          grow: ""
+        }, {
+          default: withCtx(() => [createTextVNode(toDisplayString(validationMessage.value), 1)]),
+          _: 1
+        })]),
+        _: 1
+      })) : createCommentVNode("", true)]), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$r, [renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
+        hasError: hasError.value,
+        validationMessage: validationMessage.value
+      })))])) : createCommentVNode("", true)], 42, _hoisted_1$K);
     };
   }
 });
@@ -9815,7 +9886,16 @@ const _sfc_main$J = defineComponent({
     }
   },
   setup() {
-    return FTableInjected();
+    const {
+      renderColumns,
+      setVisibilityColumn: setVisibilityColumn2,
+      addColumn: addColumn2
+    } = FTableInjected();
+    return {
+      renderColumns,
+      setVisibilityColumn: setVisibilityColumn2,
+      addColumn: addColumn2
+    };
   },
   computed: {
     classes() {
@@ -13719,10 +13799,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     const expanded = isExpanded(row) ? [] : ["table__expandable-row--collapsed"];
     return ["table__expandable-row", ...border, ...expanded];
   }
-  function expandableColumnClasses(column, index) {
-    const indented = index === 0 ? ["table__column--indented"] : [];
-    return ["table__column", `table__column--${column.type}`, column.size, ...indented];
-  }
   function getExpandableDescribedby(row) {
     if (!isExpandableTable) {
       return void 0;
@@ -13756,7 +13832,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     isExpanded,
     rowAriaExpanded,
     expandableRowClasses,
-    expandableColumnClasses,
     getExpandableDescribedby,
     expandableRows,
     hasExpandableContent
@@ -13866,6 +13941,22 @@ const _sfc_main$g = defineComponent({
       type: Array,
       required: false,
       default: void 0
+    },
+    /**
+     * Enable showing the active row.
+     */
+    showActive: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * V-model will bind to value containing the current active row.
+     */
+    active: {
+      type: Object,
+      required: false,
+      default: () => void 0
     }
   },
   emits: [
@@ -13874,6 +13965,7 @@ const _sfc_main$g = defineComponent({
     "update",
     "unselect",
     "update:modelValue",
+    "update:active",
     "select",
     /**
      * Emitted when row is expanded.
@@ -13908,7 +14000,8 @@ const _sfc_main$g = defineComponent({
       activeRow: void 0,
       columns: [],
       selectedRows: [],
-      tr: []
+      tr: [],
+      tbodyKey: 0
     };
   },
   computed: {
@@ -13946,7 +14039,7 @@ const _sfc_main$g = defineComponent({
       return tableScrollClasses(this.scroll);
     },
     nbOfColumns() {
-      let columnCount = this.columns.length;
+      let columnCount = this.visibleColumns.length;
       if (this.selectable) {
         columnCount++;
       }
@@ -13967,6 +14060,20 @@ const _sfc_main$g = defineComponent({
           });
         }
       }
+    },
+    active: {
+      immediate: true,
+      handler: function() {
+        this.updateActiveRowFromVModel();
+      }
+    },
+    showActive: {
+      immediate: true,
+      handler: function(val) {
+        if (!val) {
+          this.tbodyKey ^= 1;
+        }
+      }
     }
   },
   updated() {
@@ -13985,6 +14092,9 @@ const _sfc_main$g = defineComponent({
   },
   methods: {
     isActive(row) {
+      if (!this.showActive) {
+        return false;
+      }
       return itemEquals(row, this.activeRow, this.keyAttribute);
     },
     isSelected(row) {
@@ -14017,7 +14127,7 @@ const _sfc_main$g = defineComponent({
       }
       if (!itemEquals(row, this.activeRow, this.keyAttribute)) {
         this.$emit("change", row);
-        this.activeRow = row;
+        this.setActiveRow(row);
         if (tr) {
           tr.focus();
           const td = tr.children[0];
@@ -14108,6 +14218,17 @@ const _sfc_main$g = defineComponent({
     },
     escapeNewlines(value) {
       return value.replace(/\n/g, "<br/>");
+    },
+    updateActiveRowFromVModel() {
+      if (this.active === void 0) {
+        this.setActiveRow(void 0);
+      } else if (!itemEquals(this.active, this.activeRow, this.keyAttribute)) {
+        this.setActiveRow(this.active);
+      }
+    },
+    setActiveRow(row) {
+      this.activeRow = row;
+      this.$emit("update:active", this.activeRow);
     }
   }
 });
@@ -14145,40 +14266,37 @@ const _hoisted_11$1 = {
   key: 1,
   class: "table__column__description"
 };
-const _hoisted_12$1 = {
-  ref: "tbodyElement"
-};
-const _hoisted_13 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
-const _hoisted_14 = {
+const _hoisted_12$1 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
+const _hoisted_13 = {
   key: 0
 };
-const _hoisted_15 = {
+const _hoisted_14 = {
   key: 0,
   class: "table__expand-icon"
 };
-const _hoisted_16 = {
+const _hoisted_15 = {
   key: 1,
   class: "table__column--selectable"
 };
-const _hoisted_17 = {
+const _hoisted_16 = {
   class: "table__input"
 };
-const _hoisted_18 = {
+const _hoisted_17 = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_19 = {
+const _hoisted_18 = {
   key: 0,
-  class: "table__column--selectable"
+  class: "table__column--placeholder"
 };
-const _hoisted_20 = ["colspan"];
-const _hoisted_21 = {
+const _hoisted_19 = ["colspan"];
+const _hoisted_20 = {
   key: 0
 };
-const _hoisted_22 = {
+const _hoisted_21 = {
   key: 1
 };
-const _hoisted_23 = ["colspan"];
+const _hoisted_22 = ["colspan"];
 function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_f_checkbox_field = resolveComponent("f-checkbox-field");
@@ -14187,12 +14305,12 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("table", mergeProps({
     class: ["table", _ctx.tableClasses],
     role: _ctx.tableRole
-  }, _ctx.$attrs), [_ctx.hasCaption ? (openBlock(), createElementBlock("caption", _hoisted_2$d, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[14] || (_cache[14] = createTextVNode()), createElementVNode("colgroup", null, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("col", _hoisted_3$9)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column) => {
+  }, _ctx.$attrs), [_ctx.hasCaption ? (openBlock(), createElementBlock("caption", _hoisted_2$d, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("col", _hoisted_3$9)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column) => {
     return openBlock(), createElementBlock("col", {
       key: column.id,
       class: normalizeClass(column.size)
     }, null, 2);
-  }), 128))]), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_5$6, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("th", _hoisted_6$4, [createElementVNode("span", _hoisted_7$4, toDisplayString(_ctx.$t("fkui.interactive-table.select", "Expandera")), 1)])) : createCommentVNode("", true), _cache[4] || (_cache[4] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("th", _hoisted_8$4, [createElementVNode("span", _hoisted_9$3, toDisplayString(_ctx.$t("fkui.interactive-table.select", "Markera")), 1)])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleColumns, (column) => {
+  }), 128))]), _cache[16] || (_cache[16] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_5$6, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("th", _hoisted_6$4, [createElementVNode("span", _hoisted_7$4, toDisplayString(_ctx.$t("fkui.interactive-table.select", "Expandera")), 1)])) : createCommentVNode("", true), _cache[4] || (_cache[4] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("th", _hoisted_8$4, [createElementVNode("span", _hoisted_9$3, toDisplayString(_ctx.$t("fkui.interactive-table.select", "Markera")), 1)])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleColumns, (column) => {
     return openBlock(), createElementBlock("th", mergeProps({
       key: column.id,
       scope: "col",
@@ -14206,7 +14324,10 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.iconClasses(column)),
       name: _ctx.iconName(column)
     }, null, 8, ["class", "name"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), column.description ? (openBlock(), createElementBlock("span", _hoisted_11$1, toDisplayString(column.description), 1)) : createCommentVNode("", true)], 16);
-  }), 128))])]), _cache[16] || (_cache[16] = createTextVNode()), createElementVNode("tbody", _hoisted_12$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (row, index) => {
+  }), 128))])]), _cache[17] || (_cache[17] = createTextVNode()), (openBlock(), createElementBlock("tbody", {
+    ref: "tbodyElement",
+    key: _ctx.tbodyKey
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (row, index) => {
     return openBlock(), createElementBlock(Fragment, {
       key: _ctx.rowKey(row)
     }, [createElementVNode("tr", {
@@ -14218,15 +14339,15 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       tabindex: "0",
       onKeydown: withModifiers(($event) => _ctx.onKeydown($event, index), ["self"]),
       onClick: ($event) => _ctx.onClick($event, row, index)
-    }, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("td", _hoisted_14, [_ctx.hasExpandableContent(row) ? (openBlock(), createElementBlock("div", _hoisted_15, [createVNode(_component_f_icon, {
+    }, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("td", _hoisted_13, [_ctx.hasExpandableContent(row) ? (openBlock(), createElementBlock("div", _hoisted_14, [createVNode(_component_f_icon, {
       name: "arrow-right",
       rotate: _ctx.isExpanded(row) ? "270" : "90"
-    }, null, 8, ["rotate"])])) : createCommentVNode("", true)])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_16, [createElementVNode("div", _hoisted_17, [createVNode(_component_f_checkbox_field, {
+    }, null, 8, ["rotate"])])) : createCommentVNode("", true)])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_15, [createElementVNode("div", _hoisted_16, [createVNode(_component_f_checkbox_field, {
       value: true,
       "model-value": _ctx.isSelected(row),
       onClick: withModifiers(($event) => _ctx.onSelect(row), ["self"])
     }, {
-      default: withCtx(() => [_ctx.hasCheckboxDescription ? (openBlock(), createElementBlock("span", _hoisted_18, [renderSlot(_ctx.$slots, "checkbox-description", mergeProps({
+      default: withCtx(() => [_ctx.hasCheckboxDescription ? (openBlock(), createElementBlock("span", _hoisted_17, [renderSlot(_ctx.$slots, "checkbox-description", mergeProps({
         ref_for: true
       }, {
         row
@@ -14236,21 +14357,21 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       ref_for: true
     }, {
       row
-    }))], 42, _hoisted_13), _cache[11] || (_cache[11] = createTextVNode()), _ctx.isExpandableTable && _ctx.hasExpandableContent(row) ? (openBlock(true), createElementBlock(Fragment, {
+    }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = createTextVNode()), _ctx.isExpandableTable && _ctx.hasExpandableContent(row) ? (openBlock(true), createElementBlock(Fragment, {
       key: 0
     }, renderList(_ctx.expandableRows(row), (expandableRow, expandableIndex) => {
       return openBlock(), createElementBlock("tr", {
         key: _ctx.rowKey(expandableRow),
         "aria-level": "2",
         class: normalizeClass(_ctx.expandableRowClasses(row, expandableIndex))
-      }, [_cache[8] || (_cache[8] = createElementVNode("td", null, null, -1)), _cache[9] || (_cache[9] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_19)) : createCommentVNode("", true), _cache[10] || (_cache[10] = createTextVNode()), !_ctx.hasExpandableSlot ? (openBlock(true), createElementBlock(Fragment, {
-        key: 1
-      }, renderList(_ctx.columns, (column, columnIndex) => {
-        return openBlock(), createElementBlock("td", {
-          key: `${_ctx.rowKey(expandableRow)}${column.name}`,
-          class: normalizeClass(_ctx.expandableColumnClasses(column, columnIndex))
-        }, toDisplayString(expandableRow[column.name]), 3);
-      }), 128)) : (openBlock(), createElementBlock("td", {
+      }, [_cache[8] || (_cache[8] = createElementVNode("td", {
+        class: "table__column--placeholder"
+      }, null, -1)), _cache[9] || (_cache[9] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_18)) : createCommentVNode("", true), _cache[10] || (_cache[10] = createTextVNode()), !_ctx.hasExpandableSlot ? renderSlot(_ctx.$slots, "default", mergeProps({
+        key: 1,
+        ref_for: true
+      }, {
+        row: expandableRow
+      })) : (openBlock(), createElementBlock("td", {
         key: 2,
         class: "table__column table__column--indented",
         colspan: _ctx.columns.length
@@ -14259,14 +14380,16 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         expandableRow,
         parentRow: row
-      }))], 8, _hoisted_20))], 2);
+      }))], 8, _hoisted_19))], 2);
     }), 128)) : createCommentVNode("", true)], 64);
-  }), 128)), _cache[12] || (_cache[12] = createTextVNode()), _ctx.isEmpty && _ctx.columns.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_21, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+  }), 128)), _cache[13] || (_cache[13] = createTextVNode()), _ctx.isEmpty && _ctx.columns.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_20, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
     row: {}
-  })))])) : createCommentVNode("", true), _cache[13] || (_cache[13] = createTextVNode()), _ctx.isEmpty ? (openBlock(), createElementBlock("tr", _hoisted_22, [createElementVNode("td", {
+  })))])) : createCommentVNode("", true), _cache[14] || (_cache[14] = createTextVNode()), _ctx.isEmpty ? (openBlock(), createElementBlock("tr", _hoisted_21, [createElementVNode("td", {
     class: "table__column table__column--action",
     colspan: _ctx.nbOfColumns
-  }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_23)])) : createCommentVNode("", true)], 512)], 16, _hoisted_1$f)], 2);
+  }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = createTextVNode()), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+    row: {}
+  })))])) : createCommentVNode("", true)]))], 16, _hoisted_1$f)], 2);
 }
 const FInteractiveTable = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 const _sfc_main$f = defineComponent({
@@ -17000,6 +17123,20 @@ const _sfc_main = defineComponent({
         });
       }
       DomUtils.focus(headerElement);
+    },
+    beforeNextWrapper() {
+      return this.beforeNext({
+        key: this.step.key,
+        stepNumber: this.stepNumber,
+        totalSteps: this.totalSteps
+      });
+    },
+    beforeValidationWrapper() {
+      return this.beforeValidation({
+        key: this.step.key,
+        stepNumber: this.stepNumber,
+        totalSteps: this.totalSteps
+      });
     }
   }
 });
@@ -17115,19 +17252,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [createVNode(_component_f_validation_form, {
       id: _ctx.formId,
-      "before-submit": _ctx.beforeNext,
-      "before-validation": _ctx.beforeValidation,
+      "before-submit": _ctx.beforeNextWrapper,
+      "before-validation": _ctx.beforeValidationWrapper,
       "use-error-list": _ctx.useErrorList,
       class: "wizard-step-body",
       onSubmit: _ctx.onSubmit
     }, {
-      "error-message": withCtx(() => [renderSlot(_ctx.$slots, "error-message", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.wizard-step.errorlist.title", "Oj, du har glömt att fylla i något. Gå till:")), 1)])]),
+      "error-message": withCtx(() => [renderSlot(_ctx.$slots, "error-message", normalizeProps(guardReactiveProps({
+        stepNumber: _ctx.stepNumber,
+        totalSteps: _ctx.totalSteps
+      })), () => [createTextVNode(toDisplayString(_ctx.$t("fkui.wizard-step.errorlist.title", "Oj, du har glömt att fylla i något. Gå till:")), 1)])]),
       default: withCtx(() => [renderSlot(_ctx.$slots, "default"), _cache[14] || (_cache[14] = createTextVNode()), createElementVNode("div", _hoisted_10, [createElementVNode("button", {
         "data-test": "submit-button",
         "data-disabled": _ctx.ignoreClick ? "true" : "false",
         type: "submit",
         class: "button button--primary button-group__item button--large"
-      }, [renderSlot(_ctx.$slots, "next-button-text", {}, () => [_ctx.isFinalStep ? (openBlock(), createElementBlock(Fragment, {
+      }, [renderSlot(_ctx.$slots, "next-button-text", normalizeProps(guardReactiveProps({
+        stepNumber: _ctx.stepNumber,
+        totalSteps: _ctx.totalSteps
+      })), () => [_ctx.isFinalStep ? (openBlock(), createElementBlock(Fragment, {
         key: 0
       }, [createTextVNode(toDisplayString(_ctx.$t("fkui.wizard-step.button.next.text-final", "Gå vidare och granska")), 1)], 64)) : (openBlock(), createElementBlock(Fragment, {
         key: 1