@fkui/vue 6.0.0 → 6.1.0

package/dist/cjs/index.cjs.js

@@ -37,11 +37,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-var es_array_push = {};
+var es_iterator_constructor = {};
 var globalThis_1;
 var hasRequiredGlobalThis;
 function requireGlobalThis() {
@@ -180,13 +176,13 @@ function requireIndexedObject() {
   hasRequiredIndexedObject = 1;
   var uncurryThis = requireFunctionUncurryThis();
   var fails2 = requireFails();
-  var classof = requireClassofRaw();
+  var classof2 = requireClassofRaw();
   var $Object = Object;
   var split = uncurryThis("".split);
   indexedObject = fails2(function() {
     return !$Object("z").propertyIsEnumerable(0);
   }) ? function(it) {
-    return classof(it) === "String" ? split(it, "") : $Object(it);
+    return classof2(it) === "String" ? split(it, "") : $Object(it);
   } : $Object;
   return indexedObject;
 }
@@ -1219,14 +1215,579 @@ function require_export() {
   };
   return _export;
 }
+var anInstance;
+var hasRequiredAnInstance;
+function requireAnInstance() {
+  if (hasRequiredAnInstance) return anInstance;
+  hasRequiredAnInstance = 1;
+  var isPrototypeOf = requireObjectIsPrototypeOf();
+  var $TypeError = TypeError;
+  anInstance = function(it, Prototype) {
+    if (isPrototypeOf(Prototype, it)) return it;
+    throw new $TypeError("Incorrect invocation");
+  };
+  return anInstance;
+}
+var correctPrototypeGetter;
+var hasRequiredCorrectPrototypeGetter;
+function requireCorrectPrototypeGetter() {
+  if (hasRequiredCorrectPrototypeGetter) return correctPrototypeGetter;
+  hasRequiredCorrectPrototypeGetter = 1;
+  var fails2 = requireFails();
+  correctPrototypeGetter = !fails2(function() {
+    function F() {
+    }
+    F.prototype.constructor = null;
+    return Object.getPrototypeOf(new F()) !== F.prototype;
+  });
+  return correctPrototypeGetter;
+}
+var objectGetPrototypeOf;
+var hasRequiredObjectGetPrototypeOf;
+function requireObjectGetPrototypeOf() {
+  if (hasRequiredObjectGetPrototypeOf) return objectGetPrototypeOf;
+  hasRequiredObjectGetPrototypeOf = 1;
+  var hasOwn = requireHasOwnProperty();
+  var isCallable2 = requireIsCallable();
+  var toObject2 = requireToObject();
+  var sharedKey2 = requireSharedKey();
+  var CORRECT_PROTOTYPE_GETTER = requireCorrectPrototypeGetter();
+  var IE_PROTO = sharedKey2("IE_PROTO");
+  var $Object = Object;
+  var ObjectPrototype = $Object.prototype;
+  objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object.getPrototypeOf : function(O) {
+    var object = toObject2(O);
+    if (hasOwn(object, IE_PROTO)) return object[IE_PROTO];
+    var constructor = object.constructor;
+    if (isCallable2(constructor) && object instanceof constructor) {
+      return constructor.prototype;
+    }
+    return object instanceof $Object ? ObjectPrototype : null;
+  };
+  return objectGetPrototypeOf;
+}
+var defineBuiltInAccessor;
+var hasRequiredDefineBuiltInAccessor;
+function requireDefineBuiltInAccessor() {
+  if (hasRequiredDefineBuiltInAccessor) return defineBuiltInAccessor;
+  hasRequiredDefineBuiltInAccessor = 1;
+  var makeBuiltIn2 = requireMakeBuiltIn();
+  var defineProperty = requireObjectDefineProperty();
+  defineBuiltInAccessor = function(target, name, descriptor) {
+    if (descriptor.get) makeBuiltIn2(descriptor.get, name, {
+      getter: true
+    });
+    if (descriptor.set) makeBuiltIn2(descriptor.set, name, {
+      setter: true
+    });
+    return defineProperty.f(target, name, descriptor);
+  };
+  return defineBuiltInAccessor;
+}
+var createProperty;
+var hasRequiredCreateProperty;
+function requireCreateProperty() {
+  if (hasRequiredCreateProperty) return createProperty;
+  hasRequiredCreateProperty = 1;
+  var DESCRIPTORS = requireDescriptors();
+  var definePropertyModule = requireObjectDefineProperty();
+  var createPropertyDescriptor2 = requireCreatePropertyDescriptor();
+  createProperty = function(object, key, value) {
+    if (DESCRIPTORS) definePropertyModule.f(object, key, createPropertyDescriptor2(0, value));
+    else object[key] = value;
+  };
+  return createProperty;
+}
+var objectDefineProperties = {};
+var objectKeys;
+var hasRequiredObjectKeys;
+function requireObjectKeys() {
+  if (hasRequiredObjectKeys) return objectKeys;
+  hasRequiredObjectKeys = 1;
+  var internalObjectKeys = requireObjectKeysInternal();
+  var enumBugKeys2 = requireEnumBugKeys();
+  objectKeys = Object.keys || function keys(O) {
+    return internalObjectKeys(O, enumBugKeys2);
+  };
+  return objectKeys;
+}
+var hasRequiredObjectDefineProperties;
+function requireObjectDefineProperties() {
+  if (hasRequiredObjectDefineProperties) return objectDefineProperties;
+  hasRequiredObjectDefineProperties = 1;
+  var DESCRIPTORS = requireDescriptors();
+  var V8_PROTOTYPE_DEFINE_BUG = requireV8PrototypeDefineBug();
+  var definePropertyModule = requireObjectDefineProperty();
+  var anObject2 = requireAnObject();
+  var toIndexedObject2 = requireToIndexedObject();
+  var objectKeys2 = requireObjectKeys();
+  objectDefineProperties.f = DESCRIPTORS && !V8_PROTOTYPE_DEFINE_BUG ? Object.defineProperties : function defineProperties(O, Properties) {
+    anObject2(O);
+    var props = toIndexedObject2(Properties);
+    var keys = objectKeys2(Properties);
+    var length = keys.length;
+    var index = 0;
+    var key;
+    while (length > index) definePropertyModule.f(O, key = keys[index++], props[key]);
+    return O;
+  };
+  return objectDefineProperties;
+}
+var html;
+var hasRequiredHtml;
+function requireHtml() {
+  if (hasRequiredHtml) return html;
+  hasRequiredHtml = 1;
+  var getBuiltIn2 = requireGetBuiltIn();
+  html = getBuiltIn2("document", "documentElement");
+  return html;
+}
+var objectCreate;
+var hasRequiredObjectCreate;
+function requireObjectCreate() {
+  if (hasRequiredObjectCreate) return objectCreate;
+  hasRequiredObjectCreate = 1;
+  var anObject2 = requireAnObject();
+  var definePropertiesModule = requireObjectDefineProperties();
+  var enumBugKeys2 = requireEnumBugKeys();
+  var hiddenKeys2 = requireHiddenKeys();
+  var html2 = requireHtml();
+  var documentCreateElement2 = requireDocumentCreateElement();
+  var sharedKey2 = requireSharedKey();
+  var GT = ">";
+  var LT = "<";
+  var PROTOTYPE = "prototype";
+  var SCRIPT = "script";
+  var IE_PROTO = sharedKey2("IE_PROTO");
+  var EmptyConstructor = function() {
+  };
+  var scriptTag = function(content) {
+    return LT + SCRIPT + GT + content + LT + "/" + SCRIPT + GT;
+  };
+  var NullProtoObjectViaActiveX = function(activeXDocument2) {
+    activeXDocument2.write(scriptTag(""));
+    activeXDocument2.close();
+    var temp = activeXDocument2.parentWindow.Object;
+    activeXDocument2 = null;
+    return temp;
+  };
+  var NullProtoObjectViaIFrame = function() {
+    var iframe = documentCreateElement2("iframe");
+    var JS = "java" + SCRIPT + ":";
+    var iframeDocument;
+    iframe.style.display = "none";
+    html2.appendChild(iframe);
+    iframe.src = String(JS);
+    iframeDocument = iframe.contentWindow.document;
+    iframeDocument.open();
+    iframeDocument.write(scriptTag("document.F=Object"));
+    iframeDocument.close();
+    return iframeDocument.F;
+  };
+  var activeXDocument;
+  var NullProtoObject = function() {
+    try {
+      activeXDocument = new ActiveXObject("htmlfile");
+    } catch (error) {
+    }
+    NullProtoObject = typeof document != "undefined" ? document.domain && activeXDocument ? NullProtoObjectViaActiveX(activeXDocument) : NullProtoObjectViaIFrame() : NullProtoObjectViaActiveX(activeXDocument);
+    var length = enumBugKeys2.length;
+    while (length--) delete NullProtoObject[PROTOTYPE][enumBugKeys2[length]];
+    return NullProtoObject();
+  };
+  hiddenKeys2[IE_PROTO] = true;
+  objectCreate = Object.create || function create(O, Properties) {
+    var result;
+    if (O !== null) {
+      EmptyConstructor[PROTOTYPE] = anObject2(O);
+      result = new EmptyConstructor();
+      EmptyConstructor[PROTOTYPE] = null;
+      result[IE_PROTO] = O;
+    } else result = NullProtoObject();
+    return Properties === void 0 ? result : definePropertiesModule.f(result, Properties);
+  };
+  return objectCreate;
+}
+var iteratorsCore;
+var hasRequiredIteratorsCore;
+function requireIteratorsCore() {
+  if (hasRequiredIteratorsCore) return iteratorsCore;
+  hasRequiredIteratorsCore = 1;
+  var fails2 = requireFails();
+  var isCallable2 = requireIsCallable();
+  var isObject2 = requireIsObject$1();
+  var create = requireObjectCreate();
+  var getPrototypeOf = requireObjectGetPrototypeOf();
+  var defineBuiltIn2 = requireDefineBuiltIn();
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var IS_PURE = requireIsPure();
+  var ITERATOR = wellKnownSymbol2("iterator");
+  var BUGGY_SAFARI_ITERATORS = false;
+  var IteratorPrototype, PrototypeOfArrayIteratorPrototype, arrayIterator;
+  if ([].keys) {
+    arrayIterator = [].keys();
+    if (!("next" in arrayIterator)) BUGGY_SAFARI_ITERATORS = true;
+    else {
+      PrototypeOfArrayIteratorPrototype = getPrototypeOf(getPrototypeOf(arrayIterator));
+      if (PrototypeOfArrayIteratorPrototype !== Object.prototype) IteratorPrototype = PrototypeOfArrayIteratorPrototype;
+    }
+  }
+  var NEW_ITERATOR_PROTOTYPE = !isObject2(IteratorPrototype) || fails2(function() {
+    var test = {};
+    return IteratorPrototype[ITERATOR].call(test) !== test;
+  });
+  if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype = {};
+  else if (IS_PURE) IteratorPrototype = create(IteratorPrototype);
+  if (!isCallable2(IteratorPrototype[ITERATOR])) {
+    defineBuiltIn2(IteratorPrototype, ITERATOR, function() {
+      return this;
+    });
+  }
+  iteratorsCore = {
+    IteratorPrototype,
+    BUGGY_SAFARI_ITERATORS
+  };
+  return iteratorsCore;
+}
+var hasRequiredEs_iterator_constructor;
+function requireEs_iterator_constructor() {
+  if (hasRequiredEs_iterator_constructor) return es_iterator_constructor;
+  hasRequiredEs_iterator_constructor = 1;
+  var $ = require_export();
+  var globalThis2 = requireGlobalThis();
+  var anInstance2 = requireAnInstance();
+  var anObject2 = requireAnObject();
+  var isCallable2 = requireIsCallable();
+  var getPrototypeOf = requireObjectGetPrototypeOf();
+  var defineBuiltInAccessor2 = requireDefineBuiltInAccessor();
+  var createProperty2 = requireCreateProperty();
+  var fails2 = requireFails();
+  var hasOwn = requireHasOwnProperty();
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var IteratorPrototype = requireIteratorsCore().IteratorPrototype;
+  var DESCRIPTORS = requireDescriptors();
+  var IS_PURE = requireIsPure();
+  var CONSTRUCTOR = "constructor";
+  var ITERATOR = "Iterator";
+  var TO_STRING_TAG = wellKnownSymbol2("toStringTag");
+  var $TypeError = TypeError;
+  var NativeIterator = globalThis2[ITERATOR];
+  var FORCED = IS_PURE || !isCallable2(NativeIterator) || NativeIterator.prototype !== IteratorPrototype || !fails2(function() {
+    NativeIterator({});
+  });
+  var IteratorConstructor = function Iterator() {
+    anInstance2(this, IteratorPrototype);
+    if (getPrototypeOf(this) === IteratorPrototype) throw new $TypeError("Abstract class Iterator not directly constructable");
+  };
+  var defineIteratorPrototypeAccessor = function(key, value) {
+    if (DESCRIPTORS) {
+      defineBuiltInAccessor2(IteratorPrototype, key, {
+        configurable: true,
+        get: function() {
+          return value;
+        },
+        set: function(replacement) {
+          anObject2(this);
+          if (this === IteratorPrototype) throw new $TypeError("You can't redefine this property");
+          if (hasOwn(this, key)) this[key] = replacement;
+          else createProperty2(this, key, replacement);
+        }
+      });
+    } else IteratorPrototype[key] = value;
+  };
+  if (!hasOwn(IteratorPrototype, TO_STRING_TAG)) defineIteratorPrototypeAccessor(TO_STRING_TAG, ITERATOR);
+  if (FORCED || !hasOwn(IteratorPrototype, CONSTRUCTOR) || IteratorPrototype[CONSTRUCTOR] === Object) {
+    defineIteratorPrototypeAccessor(CONSTRUCTOR, IteratorConstructor);
+  }
+  IteratorConstructor.prototype = IteratorPrototype;
+  $({
+    global: true,
+    constructor: true,
+    forced: FORCED
+  }, {
+    Iterator: IteratorConstructor
+  });
+  return es_iterator_constructor;
+}
+requireEs_iterator_constructor();
+var es_iterator_forEach = {};
+var functionUncurryThisClause;
+var hasRequiredFunctionUncurryThisClause;
+function requireFunctionUncurryThisClause() {
+  if (hasRequiredFunctionUncurryThisClause) return functionUncurryThisClause;
+  hasRequiredFunctionUncurryThisClause = 1;
+  var classofRaw2 = requireClassofRaw();
+  var uncurryThis = requireFunctionUncurryThis();
+  functionUncurryThisClause = function(fn2) {
+    if (classofRaw2(fn2) === "Function") return uncurryThis(fn2);
+  };
+  return functionUncurryThisClause;
+}
+var functionBindContext;
+var hasRequiredFunctionBindContext;
+function requireFunctionBindContext() {
+  if (hasRequiredFunctionBindContext) return functionBindContext;
+  hasRequiredFunctionBindContext = 1;
+  var uncurryThis = requireFunctionUncurryThisClause();
+  var aCallable2 = requireACallable();
+  var NATIVE_BIND = requireFunctionBindNative();
+  var bind = uncurryThis(uncurryThis.bind);
+  functionBindContext = function(fn2, that) {
+    aCallable2(fn2);
+    return that === void 0 ? fn2 : NATIVE_BIND ? bind(fn2, that) : function() {
+      return fn2.apply(that, arguments);
+    };
+  };
+  return functionBindContext;
+}
+var iterators;
+var hasRequiredIterators;
+function requireIterators() {
+  if (hasRequiredIterators) return iterators;
+  hasRequiredIterators = 1;
+  iterators = {};
+  return iterators;
+}
+var isArrayIteratorMethod;
+var hasRequiredIsArrayIteratorMethod;
+function requireIsArrayIteratorMethod() {
+  if (hasRequiredIsArrayIteratorMethod) return isArrayIteratorMethod;
+  hasRequiredIsArrayIteratorMethod = 1;
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var Iterators = requireIterators();
+  var ITERATOR = wellKnownSymbol2("iterator");
+  var ArrayPrototype = Array.prototype;
+  isArrayIteratorMethod = function(it) {
+    return it !== void 0 && (Iterators.Array === it || ArrayPrototype[ITERATOR] === it);
+  };
+  return isArrayIteratorMethod;
+}
+var toStringTagSupport;
+var hasRequiredToStringTagSupport;
+function requireToStringTagSupport() {
+  if (hasRequiredToStringTagSupport) return toStringTagSupport;
+  hasRequiredToStringTagSupport = 1;
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var TO_STRING_TAG = wellKnownSymbol2("toStringTag");
+  var test = {};
+  test[TO_STRING_TAG] = "z";
+  toStringTagSupport = String(test) === "[object z]";
+  return toStringTagSupport;
+}
+var classof;
+var hasRequiredClassof;
+function requireClassof() {
+  if (hasRequiredClassof) return classof;
+  hasRequiredClassof = 1;
+  var TO_STRING_TAG_SUPPORT = requireToStringTagSupport();
+  var isCallable2 = requireIsCallable();
+  var classofRaw2 = requireClassofRaw();
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var TO_STRING_TAG = wellKnownSymbol2("toStringTag");
+  var $Object = Object;
+  var CORRECT_ARGUMENTS = classofRaw2(/* @__PURE__ */ function() {
+    return arguments;
+  }()) === "Arguments";
+  var tryGet = function(it, key) {
+    try {
+      return it[key];
+    } catch (error) {
+    }
+  };
+  classof = TO_STRING_TAG_SUPPORT ? classofRaw2 : function(it) {
+    var O, tag, result;
+    return it === void 0 ? "Undefined" : it === null ? "Null" : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == "string" ? tag : CORRECT_ARGUMENTS ? classofRaw2(O) : (result = classofRaw2(O)) === "Object" && isCallable2(O.callee) ? "Arguments" : result;
+  };
+  return classof;
+}
+var getIteratorMethod;
+var hasRequiredGetIteratorMethod;
+function requireGetIteratorMethod() {
+  if (hasRequiredGetIteratorMethod) return getIteratorMethod;
+  hasRequiredGetIteratorMethod = 1;
+  var classof2 = requireClassof();
+  var getMethod2 = requireGetMethod();
+  var isNullOrUndefined2 = requireIsNullOrUndefined();
+  var Iterators = requireIterators();
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var ITERATOR = wellKnownSymbol2("iterator");
+  getIteratorMethod = function(it) {
+    if (!isNullOrUndefined2(it)) return getMethod2(it, ITERATOR) || getMethod2(it, "@@iterator") || Iterators[classof2(it)];
+  };
+  return getIteratorMethod;
+}
+var getIterator;
+var hasRequiredGetIterator;
+function requireGetIterator() {
+  if (hasRequiredGetIterator) return getIterator;
+  hasRequiredGetIterator = 1;
+  var call = requireFunctionCall();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var tryToString2 = requireTryToString();
+  var getIteratorMethod2 = requireGetIteratorMethod();
+  var $TypeError = TypeError;
+  getIterator = function(argument, usingIterator) {
+    var iteratorMethod = arguments.length < 2 ? getIteratorMethod2(argument) : usingIterator;
+    if (aCallable2(iteratorMethod)) return anObject2(call(iteratorMethod, argument));
+    throw new $TypeError(tryToString2(argument) + " is not iterable");
+  };
+  return getIterator;
+}
+var iteratorClose;
+var hasRequiredIteratorClose;
+function requireIteratorClose() {
+  if (hasRequiredIteratorClose) return iteratorClose;
+  hasRequiredIteratorClose = 1;
+  var call = requireFunctionCall();
+  var anObject2 = requireAnObject();
+  var getMethod2 = requireGetMethod();
+  iteratorClose = function(iterator, kind, value) {
+    var innerResult, innerError;
+    anObject2(iterator);
+    try {
+      innerResult = getMethod2(iterator, "return");
+      if (!innerResult) {
+        if (kind === "throw") throw value;
+        return value;
+      }
+      innerResult = call(innerResult, iterator);
+    } catch (error) {
+      innerError = true;
+      innerResult = error;
+    }
+    if (kind === "throw") throw value;
+    if (innerError) throw innerResult;
+    anObject2(innerResult);
+    return value;
+  };
+  return iteratorClose;
+}
+var iterate;
+var hasRequiredIterate;
+function requireIterate() {
+  if (hasRequiredIterate) return iterate;
+  hasRequiredIterate = 1;
+  var bind = requireFunctionBindContext();
+  var call = requireFunctionCall();
+  var anObject2 = requireAnObject();
+  var tryToString2 = requireTryToString();
+  var isArrayIteratorMethod2 = requireIsArrayIteratorMethod();
+  var lengthOfArrayLike2 = requireLengthOfArrayLike();
+  var isPrototypeOf = requireObjectIsPrototypeOf();
+  var getIterator2 = requireGetIterator();
+  var getIteratorMethod2 = requireGetIteratorMethod();
+  var iteratorClose2 = requireIteratorClose();
+  var $TypeError = TypeError;
+  var Result = function(stopped, result) {
+    this.stopped = stopped;
+    this.result = result;
+  };
+  var ResultPrototype = Result.prototype;
+  iterate = function(iterable, unboundFunction, options) {
+    var that = options && options.that;
+    var AS_ENTRIES = !!(options && options.AS_ENTRIES);
+    var IS_RECORD = !!(options && options.IS_RECORD);
+    var IS_ITERATOR = !!(options && options.IS_ITERATOR);
+    var INTERRUPTED = !!(options && options.INTERRUPTED);
+    var fn2 = bind(unboundFunction, that);
+    var iterator, iterFn, index, length, result, next, step;
+    var stop = function(condition) {
+      if (iterator) iteratorClose2(iterator, "normal", condition);
+      return new Result(true, condition);
+    };
+    var callFn = function(value) {
+      if (AS_ENTRIES) {
+        anObject2(value);
+        return INTERRUPTED ? fn2(value[0], value[1], stop) : fn2(value[0], value[1]);
+      }
+      return INTERRUPTED ? fn2(value, stop) : fn2(value);
+    };
+    if (IS_RECORD) {
+      iterator = iterable.iterator;
+    } else if (IS_ITERATOR) {
+      iterator = iterable;
+    } else {
+      iterFn = getIteratorMethod2(iterable);
+      if (!iterFn) throw new $TypeError(tryToString2(iterable) + " is not iterable");
+      if (isArrayIteratorMethod2(iterFn)) {
+        for (index = 0, length = lengthOfArrayLike2(iterable); length > index; index++) {
+          result = callFn(iterable[index]);
+          if (result && isPrototypeOf(ResultPrototype, result)) return result;
+        }
+        return new Result(false);
+      }
+      iterator = getIterator2(iterable, iterFn);
+    }
+    next = IS_RECORD ? iterable.next : iterator.next;
+    while (!(step = call(next, iterator)).done) {
+      try {
+        result = callFn(step.value);
+      } catch (error) {
+        iteratorClose2(iterator, "throw", error);
+      }
+      if (typeof result == "object" && result && isPrototypeOf(ResultPrototype, result)) return result;
+    }
+    return new Result(false);
+  };
+  return iterate;
+}
+var getIteratorDirect;
+var hasRequiredGetIteratorDirect;
+function requireGetIteratorDirect() {
+  if (hasRequiredGetIteratorDirect) return getIteratorDirect;
+  hasRequiredGetIteratorDirect = 1;
+  getIteratorDirect = function(obj) {
+    return {
+      iterator: obj,
+      next: obj.next,
+      done: false
+    };
+  };
+  return getIteratorDirect;
+}
+var hasRequiredEs_iterator_forEach;
+function requireEs_iterator_forEach() {
+  if (hasRequiredEs_iterator_forEach) return es_iterator_forEach;
+  hasRequiredEs_iterator_forEach = 1;
+  var $ = require_export();
+  var iterate2 = requireIterate();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true
+  }, {
+    forEach: function forEach(fn2) {
+      anObject2(this);
+      aCallable2(fn2);
+      var record = getIteratorDirect2(this);
+      var counter = 0;
+      iterate2(record, function(value) {
+        fn2(value, counter++);
+      }, {
+        IS_RECORD: true
+      });
+    }
+  });
+  return es_iterator_forEach;
+}
+requireEs_iterator_forEach();
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var es_array_push = {};
 var isArray;
 var hasRequiredIsArray$1;
 function requireIsArray$1() {
   if (hasRequiredIsArray$1) return isArray;
   hasRequiredIsArray$1 = 1;
-  var classof = requireClassofRaw();
+  var classof2 = requireClassofRaw();
   isArray = Array.isArray || function isArray2(argument) {
-    return classof(argument) === "Array";
+    return classof2(argument) === "Array";
   };
   return isArray;
 }
@@ -1412,7 +1973,7 @@ const _export_sfc = (sfc, props) => {
 };
 const _hoisted_1$U = ["aria-hidden"];
 const _hoisted_2$F = ["xlink:href"];
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps(_ctx.$attrs, {
     focusable: "false",
     class: ["icon", [_ctx.spriteKey, ..._ctx.modifiers]],
@@ -1421,7 +1982,7 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     "xlink:href": _ctx.spriteId
   }, null, 8, _hoisted_2$F)], 16, _hoisted_1$U);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$W]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$R]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -1996,6 +2557,165 @@ function require_mapCacheClear() {
   _mapCacheClear = mapCacheClear;
   return _mapCacheClear;
 }
+var es_iterator_map = {};
+var defineBuiltIns;
+var hasRequiredDefineBuiltIns;
+function requireDefineBuiltIns() {
+  if (hasRequiredDefineBuiltIns) return defineBuiltIns;
+  hasRequiredDefineBuiltIns = 1;
+  var defineBuiltIn2 = requireDefineBuiltIn();
+  defineBuiltIns = function(target, src, options) {
+    for (var key in src) defineBuiltIn2(target, key, src[key], options);
+    return target;
+  };
+  return defineBuiltIns;
+}
+var createIterResultObject;
+var hasRequiredCreateIterResultObject;
+function requireCreateIterResultObject() {
+  if (hasRequiredCreateIterResultObject) return createIterResultObject;
+  hasRequiredCreateIterResultObject = 1;
+  createIterResultObject = function(value, done) {
+    return {
+      value,
+      done
+    };
+  };
+  return createIterResultObject;
+}
+var iteratorCreateProxy;
+var hasRequiredIteratorCreateProxy;
+function requireIteratorCreateProxy() {
+  if (hasRequiredIteratorCreateProxy) return iteratorCreateProxy;
+  hasRequiredIteratorCreateProxy = 1;
+  var call = requireFunctionCall();
+  var create = requireObjectCreate();
+  var createNonEnumerableProperty2 = requireCreateNonEnumerableProperty();
+  var defineBuiltIns2 = requireDefineBuiltIns();
+  var wellKnownSymbol2 = requireWellKnownSymbol();
+  var InternalStateModule = requireInternalState();
+  var getMethod2 = requireGetMethod();
+  var IteratorPrototype = requireIteratorsCore().IteratorPrototype;
+  var createIterResultObject2 = requireCreateIterResultObject();
+  var iteratorClose2 = requireIteratorClose();
+  var TO_STRING_TAG = wellKnownSymbol2("toStringTag");
+  var ITERATOR_HELPER = "IteratorHelper";
+  var WRAP_FOR_VALID_ITERATOR = "WrapForValidIterator";
+  var setInternalState = InternalStateModule.set;
+  var createIteratorProxyPrototype = function(IS_ITERATOR) {
+    var getInternalState = InternalStateModule.getterFor(IS_ITERATOR ? WRAP_FOR_VALID_ITERATOR : ITERATOR_HELPER);
+    return defineBuiltIns2(create(IteratorPrototype), {
+      next: function next() {
+        var state = getInternalState(this);
+        if (IS_ITERATOR) return state.nextHandler();
+        if (state.done) return createIterResultObject2(void 0, true);
+        try {
+          var result = state.nextHandler();
+          return state.returnHandlerResult ? result : createIterResultObject2(result, state.done);
+        } catch (error) {
+          state.done = true;
+          throw error;
+        }
+      },
+      "return": function() {
+        var state = getInternalState(this);
+        var iterator = state.iterator;
+        state.done = true;
+        if (IS_ITERATOR) {
+          var returnMethod = getMethod2(iterator, "return");
+          return returnMethod ? call(returnMethod, iterator) : createIterResultObject2(void 0, true);
+        }
+        if (state.inner) try {
+          iteratorClose2(state.inner.iterator, "normal");
+        } catch (error) {
+          return iteratorClose2(iterator, "throw", error);
+        }
+        if (iterator) iteratorClose2(iterator, "normal");
+        return createIterResultObject2(void 0, true);
+      }
+    });
+  };
+  var WrapForValidIteratorPrototype = createIteratorProxyPrototype(true);
+  var IteratorHelperPrototype = createIteratorProxyPrototype(false);
+  createNonEnumerableProperty2(IteratorHelperPrototype, TO_STRING_TAG, "Iterator Helper");
+  iteratorCreateProxy = function(nextHandler, IS_ITERATOR, RETURN_HANDLER_RESULT) {
+    var IteratorProxy = function Iterator(record, state) {
+      if (state) {
+        state.iterator = record.iterator;
+        state.next = record.next;
+      } else state = record;
+      state.type = IS_ITERATOR ? WRAP_FOR_VALID_ITERATOR : ITERATOR_HELPER;
+      state.returnHandlerResult = !!RETURN_HANDLER_RESULT;
+      state.nextHandler = nextHandler;
+      state.counter = 0;
+      state.done = false;
+      setInternalState(this, state);
+    };
+    IteratorProxy.prototype = IS_ITERATOR ? WrapForValidIteratorPrototype : IteratorHelperPrototype;
+    return IteratorProxy;
+  };
+  return iteratorCreateProxy;
+}
+var callWithSafeIterationClosing;
+var hasRequiredCallWithSafeIterationClosing;
+function requireCallWithSafeIterationClosing() {
+  if (hasRequiredCallWithSafeIterationClosing) return callWithSafeIterationClosing;
+  hasRequiredCallWithSafeIterationClosing = 1;
+  var anObject2 = requireAnObject();
+  var iteratorClose2 = requireIteratorClose();
+  callWithSafeIterationClosing = function(iterator, fn2, value, ENTRIES) {
+    try {
+      return ENTRIES ? fn2(anObject2(value)[0], value[1]) : fn2(value);
+    } catch (error) {
+      iteratorClose2(iterator, "throw", error);
+    }
+  };
+  return callWithSafeIterationClosing;
+}
+var iteratorMap;
+var hasRequiredIteratorMap;
+function requireIteratorMap() {
+  if (hasRequiredIteratorMap) return iteratorMap;
+  hasRequiredIteratorMap = 1;
+  var call = requireFunctionCall();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  var createIteratorProxy = requireIteratorCreateProxy();
+  var callWithSafeIterationClosing2 = requireCallWithSafeIterationClosing();
+  var IteratorProxy = createIteratorProxy(function() {
+    var iterator = this.iterator;
+    var result = anObject2(call(this.next, iterator));
+    var done = this.done = !!result.done;
+    if (!done) return callWithSafeIterationClosing2(iterator, this.mapper, [result.value, this.counter++], true);
+  });
+  iteratorMap = function map(mapper) {
+    anObject2(this);
+    aCallable2(mapper);
+    return new IteratorProxy(getIteratorDirect2(this), {
+      mapper
+    });
+  };
+  return iteratorMap;
+}
+var hasRequiredEs_iterator_map;
+function requireEs_iterator_map() {
+  if (hasRequiredEs_iterator_map) return es_iterator_map;
+  hasRequiredEs_iterator_map = 1;
+  var $ = require_export();
+  var map = requireIteratorMap();
+  var IS_PURE = requireIsPure();
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true,
+    forced: IS_PURE
+  }, {
+    map
+  });
+  return es_iterator_map;
+}
+requireEs_iterator_map();
 var _isKeyable;
 var hasRequired_isKeyable;
 function require_isKeyable() {
@@ -2806,24 +3526,6 @@ function require_equalObjects() {
   return _equalObjects;
 }
 var es_arrayBuffer_detached = {};
-var defineBuiltInAccessor;
-var hasRequiredDefineBuiltInAccessor;
-function requireDefineBuiltInAccessor() {
-  if (hasRequiredDefineBuiltInAccessor) return defineBuiltInAccessor;
-  hasRequiredDefineBuiltInAccessor = 1;
-  var makeBuiltIn2 = requireMakeBuiltIn();
-  var defineProperty = requireObjectDefineProperty();
-  defineBuiltInAccessor = function(target, name, descriptor) {
-    if (descriptor.get) makeBuiltIn2(descriptor.get, name, {
-      getter: true
-    });
-    if (descriptor.set) makeBuiltIn2(descriptor.set, name, {
-      setter: true
-    });
-    return defineProperty.f(target, name, descriptor);
-  };
-  return defineBuiltInAccessor;
-}
 var arrayBufferBasicDetection;
 var hasRequiredArrayBufferBasicDetection;
 function requireArrayBufferBasicDetection() {
@@ -2854,11 +3556,11 @@ function requireArrayBufferByteLength() {
   hasRequiredArrayBufferByteLength = 1;
   var globalThis2 = requireGlobalThis();
   var uncurryThisAccessor = requireFunctionUncurryThisAccessor();
-  var classof = requireClassofRaw();
+  var classof2 = requireClassofRaw();
   var ArrayBuffer2 = globalThis2.ArrayBuffer;
   var TypeError2 = globalThis2.TypeError;
   arrayBufferByteLength = ArrayBuffer2 && uncurryThisAccessor(ArrayBuffer2.prototype, "byteLength", "get") || function(O) {
-    if (classof(O) !== "ArrayBuffer") throw new TypeError2("ArrayBuffer expected");
+    if (classof2(O) !== "ArrayBuffer") throw new TypeError2("ArrayBuffer expected");
     return O.byteLength;
   };
   return arrayBufferByteLength;
@@ -2940,7 +3642,7 @@ function requireEnvironment() {
   hasRequiredEnvironment = 1;
   var globalThis2 = requireGlobalThis();
   var userAgent = requireEnvironmentUserAgent();
-  var classof = requireClassofRaw();
+  var classof2 = requireClassofRaw();
   var userAgentStartsWith = function(string) {
     return userAgent.slice(0, string.length) === string;
   };
@@ -2951,7 +3653,7 @@ function requireEnvironment() {
     if (userAgentStartsWith("Node.js/")) return "NODE";
     if (globalThis2.Bun && typeof Bun.version == "string") return "BUN";
     if (globalThis2.Deno && typeof Deno.version == "object") return "DENO";
-    if (classof(globalThis2.process) === "process") return "NODE";
+    if (classof2(globalThis2.process) === "process") return "NODE";
     if (globalThis2.window && globalThis2.document) return "BROWSER";
     return "REST";
   }();
@@ -3283,15 +3985,46 @@ function requireIsEqual() {
 }
 var isEqualExports = requireIsEqual();
 const isEqual$1 = /* @__PURE__ */ getDefaultExportFromCjs(isEqualExports);
-function itemEquals(item1, item2, compareAttribute) {
-  if (!logic.isSet(item1) || !logic.isSet(item2)) {
-    return false;
-  }
-  if (item1 === item2) {
-    return true;
-  }
-  return item1[compareAttribute] === item2[compareAttribute];
-}
+var es_iterator_find = {};
+var hasRequiredEs_iterator_find;
+function requireEs_iterator_find() {
+  if (hasRequiredEs_iterator_find) return es_iterator_find;
+  hasRequiredEs_iterator_find = 1;
+  var $ = require_export();
+  var iterate2 = requireIterate();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true
+  }, {
+    find: function find(predicate) {
+      anObject2(this);
+      aCallable2(predicate);
+      var record = getIteratorDirect2(this);
+      var counter = 0;
+      return iterate2(record, function(value, stop) {
+        if (predicate(value, counter++)) return stop(value);
+      }, {
+        IS_RECORD: true,
+        INTERRUPTED: true
+      }).result;
+    }
+  });
+  return es_iterator_find;
+}
+requireEs_iterator_find();
+function itemEquals(item1, item2, compareAttribute) {
+  if (!logic.isSet(item1) || !logic.isSet(item2)) {
+    return false;
+  }
+  if (item1 === item2) {
+    return true;
+  }
+  return item1[compareAttribute] === item2[compareAttribute];
+}
 function includeItem(item, itemList, compareAttribute) {
   if (!logic.isSet(item) || !logic.isSet(itemList)) {
     return false;
@@ -3901,7 +4634,7 @@ const _hoisted_10$4 = {
   class: "modal__shelf"
 };
 const _hoisted_11$3 = ["aria-label"];
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.isOpen ? (vue.openBlock(), vue.createElementBlock("div", {
     key: 0,
@@ -3931,7 +4664,7 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
   }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$V]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$Q]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4072,7 +4805,7 @@ const _hoisted_3$v = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_modal = vue.resolveComponent("f-modal");
   return vue.openBlock(), vue.createBlock(_component_f_modal, {
     fullscreen: _ctx.fullscreen,
@@ -4096,7 +4829,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$U]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$P]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
@@ -4175,12 +4908,12 @@ const _sfc_main$17 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["iflex", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$T]]);
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$O]]);
 const _sfc_main$16 = vue.defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
@@ -4228,12 +4961,12 @@ const _sfc_main$16 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["iflex__item", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$S]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$N]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -4312,7 +5045,7 @@ const _hoisted_4$p = ["onClick"];
 const _hoisted_5$k = {
   class: "error-list__link"
 };
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_flex_item = vue.resolveComponent("i-flex-item");
   const _component_i_flex = vue.resolveComponent("i-flex");
@@ -4366,7 +5099,81 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$R]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$M]]);
+var es_iterator_every = {};
+var hasRequiredEs_iterator_every;
+function requireEs_iterator_every() {
+  if (hasRequiredEs_iterator_every) return es_iterator_every;
+  hasRequiredEs_iterator_every = 1;
+  var $ = require_export();
+  var iterate2 = requireIterate();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true
+  }, {
+    every: function every(predicate) {
+      anObject2(this);
+      aCallable2(predicate);
+      var record = getIteratorDirect2(this);
+      var counter = 0;
+      return !iterate2(record, function(value, stop) {
+        if (!predicate(value, counter++)) return stop();
+      }, {
+        IS_RECORD: true,
+        INTERRUPTED: true
+      }).stopped;
+    }
+  });
+  return es_iterator_every;
+}
+requireEs_iterator_every();
+var es_iterator_filter = {};
+var hasRequiredEs_iterator_filter;
+function requireEs_iterator_filter() {
+  if (hasRequiredEs_iterator_filter) return es_iterator_filter;
+  hasRequiredEs_iterator_filter = 1;
+  var $ = require_export();
+  var call = requireFunctionCall();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  var createIteratorProxy = requireIteratorCreateProxy();
+  var callWithSafeIterationClosing2 = requireCallWithSafeIterationClosing();
+  var IS_PURE = requireIsPure();
+  var IteratorProxy = createIteratorProxy(function() {
+    var iterator = this.iterator;
+    var predicate = this.predicate;
+    var next = this.next;
+    var result, done, value;
+    while (true) {
+      result = anObject2(call(next, iterator));
+      done = this.done = !!result.done;
+      if (done) return;
+      value = result.value;
+      if (callWithSafeIterationClosing2(iterator, predicate, [value, this.counter++], true)) return value;
+    }
+  });
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true,
+    forced: IS_PURE
+  }, {
+    filter: function filter2(predicate) {
+      anObject2(this);
+      aCallable2(predicate);
+      return new IteratorProxy(getIteratorDirect2(this), {
+        predicate
+      });
+    }
+  });
+  return es_iterator_filter;
+}
+requireEs_iterator_filter();
 function cleanUpElements(vm) {
   return new Promise((resolve) => {
     window.setTimeout(() => {
@@ -4450,13 +5257,13 @@ const _sfc_main$14 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     onComponentValidity: _cache[0] || (_cache[0] = (...args) => _ctx.onComponentValidity && _ctx.onComponentValidity(...args)),
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [vue.renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$Q]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$L]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
@@ -4608,7 +5415,7 @@ const _hoisted_2$B = {
   tabindex: "-1",
   role: "group"
 };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_error_list = vue.resolveComponent("f-error-list");
   const _component_f_validation_group = vue.resolveComponent("f-validation-group");
   return vue.openBlock(), vue.createBlock(_component_f_validation_group, {
@@ -4634,7 +5441,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$P]]);
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$K]]);
 const _sfc_main$12 = vue.defineComponent({
   name: "FFormModal",
   components: {
@@ -4792,7 +5599,7 @@ const _hoisted_3$t = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_validation_form = vue.resolveComponent("f-validation-form");
   const _component_f_modal = vue.resolveComponent("f-modal");
   return vue.openBlock(), vue.createBlock(_component_f_modal, {
@@ -4828,7 +5635,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$O]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$J]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5201,12 +6008,12 @@ const _sfc_main$11 = vue.defineComponent({
 const _hoisted_1$O = {
   "data-test": "f-error-page"
 };
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, _cache[0] || (_cache[0] = [vue.createElementVNode("h1", null, "Fel", -1), vue.createTextVNode(), vue.createElementVNode("p", null, "Ett fel har uppstått.", -1), vue.createTextVNode(), vue.createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$N]]);
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$I]]);
 const _sfc_main$10 = vue.defineComponent({
   name: "FErrorHandlingApp",
   props: {
@@ -5236,7 +6043,7 @@ const _sfc_main$10 = vue.defineComponent({
     });
   }
 });
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", null, [_ctx.hasError ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.errorComponent), {
     key: 0,
     payload: _ctx.payload
@@ -5246,7 +6053,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$M]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$H]]);
 function isMonthBefore(date2, minDate) {
   return Boolean(minDate && date2.isBefore(minDate.startOfMonth()));
 }
@@ -5415,7 +6222,7 @@ const _hoisted_5$j = ["aria-disabled", "aria-live"];
 const _hoisted_6$f = {
   class: "sr-only"
 };
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [vue.createElementVNode("div", _hoisted_2$z, vue.toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("button", {
     ref: "previousButton",
@@ -5439,7 +6246,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-right"
   }, null, 8, ["class"])], 8, _hoisted_5$j)]);
 }
-const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$L]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$G]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
@@ -5533,23 +6340,26 @@ const _hoisted_3$r = {
 };
 const _hoisted_4$n = ["title"];
 const _hoisted_5$i = {
+  key: 1
+};
+const _hoisted_6$e = {
   key: 0,
   class: "calendar-month__cell calendar-month__cell--week-number",
   "aria-hidden": "true"
 };
-const _hoisted_6$e = ["colspan"];
 const _hoisted_7$c = ["colspan"];
-const _hoisted_8$7 = {
+const _hoisted_8$7 = ["colspan"];
+const _hoisted_9$5 = {
   key: 0,
   "aria-hidden": "true"
 };
-const _hoisted_9$5 = ["colspan"];
-const _hoisted_10$3 = {
+const _hoisted_10$3 = ["colspan"];
+const _hoisted_11$2 = {
   key: 1,
   "aria-hidden": "true"
 };
-const _hoisted_11$2 = ["colspan"];
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_12$2 = ["colspan"];
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("table", {
     class: "calendar-month__table",
     role: "grid",
@@ -5574,19 +6384,20 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("th", {
       key: weekday.name,
       scope: "col",
+      "aria-hidden": "true",
       class: "calendar-month__header-cell"
-    }, [vue.createElementVNode("abbr", {
+    }, [_ctx.showShortWeekdays ? (vue.openBlock(), vue.createElementBlock("abbr", {
+      key: 0,
       title: weekday.name
-    }, vue.toDisplayString(_ctx.showShortWeekdays ? weekday.shortName : weekday.name), 9, _hoisted_4$n)]);
+    }, vue.toDisplayString(weekday.shortName), 9, _hoisted_4$n)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$i, vue.toDisplayString(weekday.name), 1))]);
   }), 128))])]), _cache[23] || (_cache[23] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weeks, (week) => {
     return vue.openBlock(), vue.createElementBlock("tr", {
       key: week.week
-    }, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_5$i, vue.toDisplayString(week.week), 1)) : vue.createCommentVNode("", true), _cache[17] || (_cache[17] = vue.createTextVNode()), _ctx.getDayStartOffset(week.days) ? (vue.openBlock(), vue.createElementBlock("td", {
+    }, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_6$e, vue.toDisplayString(week.week), 1)) : vue.createCommentVNode("", true), _cache[17] || (_cache[17] = vue.createTextVNode()), _ctx.getDayStartOffset(week.days) ? (vue.openBlock(), vue.createElementBlock("td", {
       key: 1,
       class: "calendar-month__cell",
-      colspan: _ctx.getDayStartOffset(week.days),
-      "aria-hidden": "true"
-    }, null, 8, _hoisted_6$e)) : vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day) => {
+      colspan: _ctx.getDayStartOffset(week.days)
+    }, null, 8, _hoisted_7$c)) : vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day) => {
       return vue.openBlock(), vue.createElementBlock("td", {
         key: day.toString(),
         class: "calendar-month__cell",
@@ -5600,18 +6411,18 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
       class: "calendar-month__cell",
       colspan: _ctx.getDayEndOffset(week.days),
       "aria-hidden": "true"
-    }, null, 8, _hoisted_7$c)) : vue.createCommentVNode("", true)]);
-  }), 128)), _cache[20] || (_cache[20] = vue.createTextVNode()), _ctx.weeks.length < 5 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_8$7, [vue.createElementVNode("td", {
+    }, null, 8, _hoisted_8$7)) : vue.createCommentVNode("", true)]);
+  }), 128)), _cache[20] || (_cache[20] = vue.createTextVNode()), _ctx.weeks.length < 5 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_9$5, [vue.createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_9$5)])) : vue.createCommentVNode("", true), _cache[21] || (_cache[21] = vue.createTextVNode()), _ctx.weeks.length < 6 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_10$3, [vue.createElementVNode("td", {
+  }, null, 8, _hoisted_10$3)])) : vue.createCommentVNode("", true), _cache[21] || (_cache[21] = vue.createTextVNode()), _ctx.weeks.length < 6 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_11$2, [vue.createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_11$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$M);
+  }, null, 8, _hoisted_12$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$M);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$K]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$F]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -5726,7 +6537,7 @@ const _sfc_main$Z = vue.defineComponent({
   }
 });
 const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_month_grid = vue.resolveComponent("i-calendar-month-grid");
   return vue.openBlock(), vue.createBlock(_component_i_calendar_month_grid, {
     value: _ctx.modelValue
@@ -5749,7 +6560,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$J]]);
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$E]]);
 const _sfc_main$Y = vue.defineComponent({
   name: "FCalendar",
   components: {
@@ -5804,7 +6615,7 @@ const _sfc_main$Y = vue.defineComponent({
 const _hoisted_1$K = {
   class: "calendar__wrapper"
 };
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = vue.resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = vue.resolveComponent("i-calendar-month");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [vue.createVNode(_component_i_calendar_navbar, {
@@ -5830,7 +6641,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
 }
-const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$I]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$D]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -5920,12 +6731,12 @@ const _hoisted_1$J = {
 const _hoisted_2$x = {
   class: "sr-only"
 };
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("span", {
     class: vue.normalizeClass(_ctx.dayClasses)
   }, [vue.createElementVNode("span", _hoisted_1$J, vue.toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$x, vue.toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$H]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$C]]);
 function useEventListener(target, event, callback) {
   vue.onMounted(() => {
     var _a;
@@ -5939,10 +6750,10 @@ function useEventListener(target, event, callback) {
 function useSlotUtils() {
   const $slots = vue.useSlots();
   return {
-    hasSlot(name) {
+    hasSlot(...args) {
       return hasSlot({
         $slots
-      }, name);
+      }, ...args);
     }
   };
 }
@@ -6102,7 +6913,7 @@ const _sfc_main$V = vue.defineComponent({
     }
   }
 });
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -6114,7 +6925,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$G]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$B]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -6680,7 +7491,7 @@ const _sfc_main$U = vue.defineComponent({
     }
   }
 });
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
     key: 0,
     to: _ctx.teleportTarget,
@@ -6701,7 +7512,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$F]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$A]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -6816,6 +7627,9 @@ const _sfc_main$T = vue.defineComponent({
     },
     errorStyle() {
       return `--i-popup-error-offset: ${this.arrowOffset}px`;
+    },
+    teleportTarget() {
+      return config.teleportTarget;
     }
   },
   watch: {
@@ -6904,11 +7718,11 @@ const _hoisted_1$H = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
     key: 0,
-    to: "body",
+    to: _ctx.teleportTarget,
     disabled: _ctx.teleportDisabled
   }, [vue.createElementVNode("div", {
     ref: "popup",
@@ -6926,9 +7740,9 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createVNode(_component_f_icon, {
     name: "close",
     class: "button__icon"
-  })])], 6)], 512)], 2)], 8, ["disabled"])) : vue.createCommentVNode("", true);
+  })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$E]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$z]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -7459,7 +8273,7 @@ const _hoisted_5$h = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_popup = vue.resolveComponent("i-popup");
   return vue.openBlock(), vue.createBlock(_component_i_popup, {
     class: "ipopupmenu",
@@ -7495,7 +8309,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$D]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$y]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
@@ -7698,13 +8512,13 @@ const _hoisted_1$E = {
   ref: "content",
   "data-test": "animation-content"
 };
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(_ctx.animationClasses),
     style: vue.normalizeStyle(_ctx.heightStyle)
   }, [_ctx.shouldVIf ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [vue.renderSlot(_ctx.$slots, "default")], 512)), [[vue.vShow, _ctx.shouldVShow]]) : vue.createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$C]]);
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$x]]);
 const _sfc_main$P = vue.defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
@@ -7720,13 +8534,13 @@ const _sfc_main$P = vue.defineComponent({
   }
 });
 const _hoisted_1$D = ["href"];
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
   }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$D);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$B]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$w]]);
 function filterOptions(options, filter2, selectMode) {
   if (logic.isEmpty(filter2) || selectMode) {
     return options;
@@ -8344,7 +9158,7 @@ const _hoisted_5$g = {
 const _hoisted_6$d = {
   class: "tooltip__footer"
 };
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [(vue.openBlock(), vue.createBlock(vue.Teleport, {
     disabled: _ctx.iconTarget === null,
@@ -8377,7 +9191,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : vue.createCommentVNode("", true)], 16)], 64);
 }
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$A]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$v]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -8678,7 +9492,7 @@ const _hoisted_9$4 = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("fieldset", {
     id: _ctx.id,
@@ -8715,7 +9529,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass(_ctx.groupContentClass)
   }, [vue.renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$z);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$z]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$u]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
 const _sfc_main$K = vue.defineComponent({
   name: "FCheckboxField",
@@ -8913,7 +9727,7 @@ const _hoisted_4$i = {
   key: 0,
   class: "checkbox__details"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["checkbox", _ctx.disabledClass]),
     onValidity: _cache[2] || (_cache[2] = (...args) => _ctx.onValidity && _ctx.onValidity(...args))
@@ -8943,7 +9757,38 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$q)], 34);
 }
-const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$y]]);
+const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$t]]);
+var es_iterator_some = {};
+var hasRequiredEs_iterator_some;
+function requireEs_iterator_some() {
+  if (hasRequiredEs_iterator_some) return es_iterator_some;
+  hasRequiredEs_iterator_some = 1;
+  var $ = require_export();
+  var iterate2 = requireIterate();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true
+  }, {
+    some: function some(predicate) {
+      anObject2(this);
+      aCallable2(predicate);
+      var record = getIteratorDirect2(this);
+      var counter = 0;
+      return iterate2(record, function(value, stop) {
+        if (predicate(value, counter++)) return stop();
+      }, {
+        IS_RECORD: true,
+        INTERRUPTED: true
+      }).stopped;
+    }
+  });
+  return es_iterator_some;
+}
+requireEs_iterator_some();
 function isContextMenuTextItem(value) {
   return typeof value.key === "string";
 }
@@ -9168,7 +10013,7 @@ const _hoisted_5$e = {
   key: 0,
   class: "contextmenu__separator"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_popup = vue.resolveComponent("i-popup");
   return vue.openBlock(), vue.createBlock(_component_i_popup, {
@@ -9208,7 +10053,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$x]]);
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$s]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -9216,30 +10061,14 @@ var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["NONE"] = 3] = "NONE";
   return Operation2;
 })(Operation || {});
-const _sfc_main$I = vue.defineComponent({
-  name: "FCrudDataset",
-  components: {
-    FFormModal,
-    FConfirmModal,
-    FIcon
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      delete: (item) => {
-        this.deleteItem(item);
-      },
-      modify: (item) => {
-        this.updateItem(item);
-      },
-      registerCallbackAfterItemAdd: (callback) => {
-        this.callbackAfterItemAdd = callback;
-      },
-      registerCallbackBeforeItemDelete: (callback) => {
-        this.callbackBeforeItemDelete = callback;
-      }
-    };
-  },
+const _hoisted_1$w = {
+  class: "crud-dataset"
+};
+const _hoisted_2$o = {
+  key: 0
+};
+const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  __name: "FCrudDataset",
   props: {
     /**
      * The list of items that should be deleted, modified or added to.
@@ -9323,25 +10152,24 @@ const _sfc_main$I = vue.defineComponent({
     }
   },
   emits: ["created", "deleted", "updated", "update:modelValue"],
-  data() {
-    return {
-      result: [],
-      Operation,
-      operation: Operation.NONE,
-      item: null,
-      originalItemToUpdate: null,
-      isFormModalOpen: false,
-      isConfirmModalOpen: false,
-      callbackAfterItemAdd() {
-      },
-      callbackBeforeItemDelete() {
-      }
-    };
-  },
-  computed: {
-    formModalButtons() {
-      const confirmButtonText = this.operation === Operation.ADD ? this.$t("fkui.crud-dataset.modal.confirm.add", "Lägg till") : this.$t("fkui.crud-dataset.modal.confirm.modify", "Spara");
-      const cancelButtonText = this.operation === Operation.ADD ? this.$t("fkui.crud-dataset.modal.cancel.add", "Avbryt") : this.$t("fkui.crud-dataset.modal.cancel.modify", "Avbryt");
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const slots = vue.useSlots();
+    const result = vue.ref([]);
+    const operation = vue.ref(Operation.NONE);
+    const item = vue.ref(null);
+    const originalItemToUpdate = vue.ref(null);
+    const isFormModalOpen = vue.ref(false);
+    const isConfirmModalOpen = vue.ref(false);
+    const callbackAfterItemAdd = vue.ref(() => ({}));
+    const callbackBeforeItemDelete = vue.ref(() => ({}));
+    const props = __props;
+    const emit = __emit;
+    const formModalButtons = vue.computed(() => {
+      const confirmButtonText = operation.value === Operation.ADD ? $t2("fkui.crud-dataset.modal.confirm.add", "Lägg till") : $t2("fkui.crud-dataset.modal.confirm.modify", "Spara");
+      const cancelButtonText = operation.value === Operation.ADD ? $t2("fkui.crud-dataset.modal.cancel.add", "Avbryt") : $t2("fkui.crud-dataset.modal.cancel.modify", "Avbryt");
       return [{
         label: confirmButtonText,
         event: "confirm",
@@ -9353,175 +10181,168 @@ const _sfc_main$I = vue.defineComponent({
         type: "secondary",
         submitButton: false
       }];
-    },
-    confirmDeleteButtons() {
+    });
+    const confirmDeleteButtons = vue.computed(() => {
       return [{
-        label: this.$t("fkui.crud-dataset.modal.confirm.delete", "Ja, ta bort"),
+        label: $t2("fkui.crud-dataset.modal.confirm.delete", "Ja, ta bort"),
         type: "primary",
         event: "confirm"
       }, {
-        label: this.$t("fkui.crud-dataset.modal.cancel.delete", "Nej, avbryt"),
+        label: $t2("fkui.crud-dataset.modal.cancel.delete", "Nej, avbryt"),
         type: "secondary"
       }];
-    },
-    hasAddSlot() {
-      return Boolean(this.$slots.add);
-    },
-    hasDeleteSlot() {
-      return Boolean(this.$slots.delete);
-    },
-    hasModifySlot() {
-      return Boolean(this.$slots.modify);
-    },
-    formModalHeader() {
-      return this.operation === Operation.ADD ? this.addNewModalHeader : this.modifyModalHeader;
-    }
-  },
-  watch: {
-    modelValue: {
-      immediate: true,
-      deep: true,
-      handler(data) {
-        this.result = [...data];
+    });
+    const hasAddSlot = vue.computed(() => {
+      return Boolean(slots.add);
+    });
+    const hasDeleteSlot = vue.computed(() => {
+      return Boolean(slots.delete);
+    });
+    const hasModifySlot = vue.computed(() => {
+      return Boolean(slots.modify);
+    });
+    const formModalHeader = vue.computed(() => {
+      return operation.value === Operation.ADD ? props.addNewModalHeader : props.modifyModalHeader;
+    });
+    vue.provide("delete", deleteItem);
+    vue.provide("modify", updateItem);
+    vue.provide("registerCallbackAfterItemAdd", (callback) => {
+      callbackAfterItemAdd.value = callback;
+    });
+    vue.provide("registerCallbackBeforeItemDelete", (callback) => {
+      callbackBeforeItemDelete.value = callback;
+    });
+    vue.onMounted(() => {
+      if (!hasAddSlot.value && !hasDeleteSlot.value && !hasModifySlot.value) {
+        throw Error("At least one template of the following must be defined. #add, #delete or #modify");
       }
-    }
-  },
-  mounted() {
-    if (!this.hasAddSlot && !this.hasDeleteSlot && !this.hasModifySlot) {
-      throw Error("Atleast one template of the following must be defined. #add, #delete or #modify");
-    }
-  },
-  methods: {
-    createItem() {
-      if (!this.hasAddSlot) {
+    });
+    vue.watch(() => props.modelValue, (data) => {
+      result.value = [...data];
+    }, {
+      immediate: true,
+      deep: true
+    });
+    function createItem() {
+      if (!hasAddSlot.value) {
         throw Error("No template is defined for #add");
       }
-      this.operation = Operation.ADD;
-      this.item = this.beforeCreate ? this.beforeCreate() : {};
-      this.isFormModalOpen = true;
-    },
-    deleteItem(item) {
-      if (!this.hasDeleteSlot) {
+      operation.value = Operation.ADD;
+      item.value = props.beforeCreate ? props.beforeCreate() : {};
+      isFormModalOpen.value = true;
+    }
+    function deleteItem(current) {
+      if (!hasDeleteSlot.value) {
         throw Error("No template is defined for #delete");
       }
-      this.operation = Operation.DELETE;
-      this.item = item;
-      this.isConfirmModalOpen = true;
-    },
-    onDeleteConfirm() {
-      if (!this.item) {
+      operation.value = Operation.DELETE;
+      item.value = current;
+      isConfirmModalOpen.value = true;
+    }
+    function onDeleteConfirm() {
+      if (!item.value) {
         return;
       }
-      this.callbackBeforeItemDelete(this.item);
-      this.result = this.result.filter((item) => item !== this.item);
-      this.$emit("deleted", this.item);
-      this.$emit("update:modelValue", this.result);
-      logic.alertScreenReader(this.$t("fkui.crud-dataset.aria-live.delete", "Raden har tagits bort"), {
+      callbackBeforeItemDelete.value(item.value);
+      result.value = result.value.filter((it) => it !== item.value);
+      emit("deleted", item.value);
+      emit("update:modelValue", result.value);
+      logic.alertScreenReader($t2("fkui.crud-dataset.aria-live.delete", "Raden har tagits bort"), {
         assertive: true
       });
-    },
-    onDeleteClose(e) {
-      this.onModalClose();
-      if (e.reason === "close" && this.onCancel) {
-        this.onCancel();
+    }
+    function onDeleteClose(e) {
+      onModalClose();
+      if (e.reason === "close" && props.onCancel) {
+        props.onCancel();
       }
-    },
-    onModalClose() {
-      this.isFormModalOpen = false;
-      this.isConfirmModalOpen = false;
-    },
-    onFormModalSubmit() {
-      if (!this.item) {
+    }
+    function onModalClose() {
+      isFormModalOpen.value = false;
+      isConfirmModalOpen.value = false;
+    }
+    function onFormModalSubmit() {
+      if (!item.value) {
         return;
       }
-      if (this.operation === Operation.ADD) {
-        this.result.push(this.item);
-        this.$emit("created", this.item);
-        this.$emit("update:modelValue", this.result);
-        this.callbackAfterItemAdd(this.item);
-        logic.alertScreenReader(this.$t("fkui.crud-dataset.aria-live.add", "En rad har lagts till"), {
+      if (operation.value === Operation.ADD) {
+        result.value.push(item.value);
+        emit("created", item.value);
+        emit("update:modelValue", result.value);
+        callbackAfterItemAdd.value(item.value);
+        logic.alertScreenReader($t2("fkui.crud-dataset.aria-live.add", "En rad har lagts till"), {
           assertive: true
         });
-      } else if (this.operation === Operation.MODIFY) {
-        if (this.originalItemToUpdate) {
-          Object.assign(this.originalItemToUpdate, this.item);
+      } else if (operation.value === Operation.MODIFY) {
+        if (originalItemToUpdate.value) {
+          Object.assign(originalItemToUpdate.value, item.value);
         } else {
-          this.originalItemToUpdate = this.item;
+          originalItemToUpdate.value = item.value;
         }
-        this.$emit("updated", this.originalItemToUpdate);
-        this.$emit("update:modelValue", this.result);
-        logic.alertScreenReader(this.$t("fkui.crud-dataset.aria-live.modify", "Raden har ändrats"), {
+        emit("updated", originalItemToUpdate.value);
+        emit("update:modelValue", result.value);
+        logic.alertScreenReader($t2("fkui.crud-dataset.aria-live.modify", "Raden har ändrats"), {
           assertive: true
         });
       }
-      this.isFormModalOpen = false;
-    },
-    updateItem(item) {
-      if (!this.hasModifySlot) {
+      isFormModalOpen.value = false;
+    }
+    function updateItem(current) {
+      if (!hasModifySlot.value) {
         throw Error("No template is defined for #modify");
       }
-      this.operation = Operation.MODIFY;
-      this.originalItemToUpdate = item;
-      this.item = logic.deepClone(item);
-      this.isFormModalOpen = true;
+      operation.value = Operation.MODIFY;
+      originalItemToUpdate.value = current;
+      item.value = logic.deepClone(current);
+      isFormModalOpen.value = true;
     }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [vue.createElementVNode("button", {
+        "data-test": "f-crud-dataset-add-button",
+        type: "button",
+        class: "button button--tertiary crud-dataset__add-button",
+        onClick: _cache[0] || (_cache[0] = ($event) => createItem())
+      }, [vue.createVNode(vue.unref(FIcon), {
+        class: "button__icon",
+        name: "plus"
+      }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "add-button", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createVNode(vue.unref(FFormModal), {
+        "is-open": isFormModalOpen.value,
+        "aria-close-text": vue.unref($t2)("fkui.crud-dataset.modal.close", "Stäng"),
+        buttons: formModalButtons.value,
+        "use-error-list": false,
+        "before-submit": __props.beforeSubmit,
+        "before-validation": __props.beforeValidation,
+        "on-cancel": __props.onCancel,
+        onClose: onModalClose,
+        onCancel: __props.onCancel,
+        onSubmit: onFormModalSubmit
+      }, {
+        header: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(formModalHeader.value), 1)]),
+        "input-text-fields": vue.withCtx(() => [operation.value === vue.unref(Operation).ADD ? vue.renderSlot(_ctx.$slots, "add", vue.normalizeProps(vue.mergeProps({
+          key: 0
+        }, {
+          item: item.value
+        }))) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), operation.value === vue.unref(Operation).MODIFY ? vue.renderSlot(_ctx.$slots, "modify", vue.normalizeProps(vue.mergeProps({
+          key: 1
+        }, {
+          item: item.value
+        }))) : vue.createCommentVNode("", true)]),
+        _: 3
+      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(vue.unref(FConfirmModal), {
+        "is-open": isConfirmModalOpen.value,
+        buttons: confirmDeleteButtons.value,
+        onConfirm: onDeleteConfirm,
+        onClose: onDeleteClose
+      }, {
+        heading: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(__props.deleteModalHeader), 1)]),
+        content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "delete", vue.normalizeProps(vue.guardReactiveProps({
+          item: item.value
+        })))]),
+        _: 3
+      }, 8, ["is-open", "buttons"])]);
+    };
   }
 });
-const _hoisted_1$w = {
-  class: "crud-dataset"
-};
-const _hoisted_2$o = {
-  key: 0
-};
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_icon = vue.resolveComponent("f-icon");
-  const _component_f_form_modal = vue.resolveComponent("f-form-modal");
-  const _component_f_confirm_modal = vue.resolveComponent("f-confirm-modal");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.hasAddSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [vue.createElementVNode("button", {
-    "data-test": "f-crud-dataset-add-button",
-    type: "button",
-    class: "button button--tertiary crud-dataset__add-button",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.createItem())
-  }, [vue.createVNode(_component_f_icon, {
-    class: "button__icon",
-    name: "plus"
-  }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "add-button", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createVNode(_component_f_form_modal, {
-    "is-open": _ctx.isFormModalOpen,
-    "aria-close-text": _ctx.$t("fkui.crud-dataset.modal.close", "Stäng"),
-    buttons: _ctx.formModalButtons,
-    "use-error-list": false,
-    "before-submit": _ctx.beforeSubmit,
-    "before-validation": _ctx.beforeValidation,
-    "on-cancel": _ctx.onCancel,
-    onClose: _ctx.onModalClose,
-    onCancel: _ctx.onCancel,
-    onSubmit: _ctx.onFormModalSubmit
-  }, {
-    header: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(_ctx.formModalHeader), 1)]),
-    "input-text-fields": vue.withCtx(() => [_ctx.operation === _ctx.Operation.ADD ? vue.renderSlot(_ctx.$slots, "add", vue.normalizeProps(vue.mergeProps({
-      key: 0
-    }, {
-      item: _ctx.item
-    }))) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _ctx.operation === _ctx.Operation.MODIFY ? vue.renderSlot(_ctx.$slots, "modify", vue.normalizeProps(vue.mergeProps({
-      key: 1
-    }, {
-      item: _ctx.item
-    }))) : vue.createCommentVNode("", true)]),
-    _: 3
-  }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onClose", "onCancel", "onSubmit"]), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(_component_f_confirm_modal, {
-    "is-open": _ctx.isConfirmModalOpen,
-    buttons: _ctx.confirmDeleteButtons,
-    onConfirm: _ctx.onDeleteConfirm,
-    onClose: _ctx.onDeleteClose
-  }, {
-    heading: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(_ctx.deleteModalHeader), 1)]),
-    content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "delete", vue.normalizeProps(vue.guardReactiveProps({
-      item: _ctx.item
-    })))]),
-    _: 3
-  }, 8, ["is-open", "buttons", "onConfirm", "onClose"])]);
-}
-const FCrudDataset = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$w]]);
 function FCrudDatasetInjected() {
   return {
     delete: vue.inject("delete"),
@@ -9588,7 +10409,7 @@ const _hoisted_1$v = {
   key: 1,
   class: "sr-only"
 };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("button", {
     type: "button",
@@ -9602,7 +10423,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   }, () => [vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1)]) : vue.createCommentVNode("", true)]);
 }
-const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$v]]);
+const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$r]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: vue.inject("registerCallbackAfterItemAdd", () => void 0),
@@ -9827,7 +10648,7 @@ const _sfc_main$G = vue.defineComponent({
     });
   }
 });
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.renderColumns && _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), vue.mergeProps({
     key: 0,
     class: _ctx.classes,
@@ -9839,7 +10660,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
 }
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$u]]);
+const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: vue.inject("sort", () => void 0),
@@ -9904,7 +10725,7 @@ const _hoisted_7$a = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.$slots.tooltip ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [_ctx.hasDefaultSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [vue.createElementVNode("label", {
     class: "label",
@@ -9931,7 +10752,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     name: "error"
   }), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message")])) : vue.createCommentVNode("", true)], 8, _hoisted_6$b));
 }
-const FLabel = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$t]]);
+const FLabel = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$p]]);
 function resolveWidthClass$1(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
@@ -10067,7 +10888,7 @@ const _sfc_main$E = vue.defineComponent({
   }
 });
 const _hoisted_1$t = ["id"];
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = vue.resolveComponent("f-label");
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -10114,7 +10935,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-down"
   })], 2)], 34);
 }
-const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$s]]);
+const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$o]]);
 function resolveWidthClass(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
@@ -10519,7 +11340,7 @@ const _hoisted_7$9 = {
   key: 3,
   class: "text-field__append-inner"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = vue.resolveComponent("f-label");
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_popup_error = vue.resolveComponent("i-popup-error");
@@ -10602,7 +11423,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     onClose: _ctx.onDropdownClose
   }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node", "onSelect", "onClose"])) : vue.createCommentVNode("", true)], 2);
 }
-const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$r]]);
+const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$n]]);
 const _sfc_main$C = vue.defineComponent({
   name: "FEmailTextField",
   components: {
@@ -10722,7 +11543,7 @@ const _sfc_main$C = vue.defineComponent({
 const _hoisted_1$r = {
   key: 0
 };
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_text_field = vue.resolveComponent("f-text-field");
   return vue.openBlock(), vue.createElementBlock("div", null, [vue.createVNode(_component_f_text_field, vue.mergeProps({
     id: _ctx.id,
@@ -10752,7 +11573,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue", "maxlength", "onPaste"])) : vue.createCommentVNode("", true)]);
 }
-const FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$q]]);
+const FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$m]]);
 const _sfc_main$B = vue.defineComponent({
   name: "FPhoneTextField",
   components: {
@@ -10853,7 +11674,7 @@ const _sfc_main$B = vue.defineComponent({
     }
   }
 });
-function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_text_field = vue.resolveComponent("f-text-field");
   return vue.openBlock(), vue.createElementBlock("div", null, [vue.createVNode(_component_f_text_field, vue.mergeProps({
     id: _ctx.id,
@@ -10880,7 +11701,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue", "maxlength"])) : vue.createCommentVNode("", true)]);
 }
-const FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$p]]);
+const FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$l]]);
 const _sfc_main$A = vue.defineComponent({
   name: "FCurrencyTextField",
   extends: FTextField,
@@ -10979,7 +11800,7 @@ const _sfc_main$z = vue.defineComponent({
 const _hoisted_1$q = {
   class: "sr-only"
 };
-function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_f_text_field = vue.resolveComponent("f-text-field");
   return vue.openBlock(), vue.createElementBlock("div", null, [vue.createVNode(_component_f_text_field, vue.mergeProps({
@@ -11029,7 +11850,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     key: "1"
   } : void 0]), 1040, ["id", "maxlength", "model-value", "onChange", "onInput", "onBlur", "onUpdate"])]);
 }
-const FSearchTextField = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$o]]);
+const FSearchTextField = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$k]]);
 const _sfc_main$y = vue.defineComponent({
   name: "FBankAccountNumberTextField",
   extends: FTextField,
@@ -11425,51 +12246,40 @@ function filter(list, filterAttributes, searchString) {
   const searchTerms = searchString.split(/\s+/).map((word) => word.toLocaleLowerCase());
   return list.filter((item) => includesAllSearchTerms(item, filterAttributes, searchTerms));
 }
-const _sfc_main$p = vue.defineComponent({
-  name: "FSortFilterDataset",
-  components: {
-    FSelectField,
-    FTextField,
-    FIcon,
-    IFlex,
-    IFlexItem
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      sort: (attribute, ascending) => {
-        const foundAttribute = this.sortOrders.find((item) => item.attribute === attribute && item.ascending === ascending);
-        if (foundAttribute) {
-          this.sortAttribute = foundAttribute;
-        } else {
-          this.sortAttribute = {
-            attribute: "",
-            ascending: false
-          };
-        }
-        this.sortFilterData();
-        this.$emit("usedSortAttributes", this.sortAttribute);
-      },
-      registerCallbackOnSort: (callback) => {
-        this.tableCallbackOnSort = callback;
-      },
-      registerCallbackOnMount: (callback) => {
-        this.tableCallbackSortableColumns = callback;
-      }
-    };
-  },
-  props: {
-    /**
-     * The data that you wish to sort or filter.
-     */
-    data: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    /**
-     * All the attributes you want to enable sorting for and the corresponding name to display in the dropdown.
-     * Structured as `{attributeName: "Name for dropdown", secondAttributeName: "Name for dropdown"}`
+const _hoisted_1$p = {
+  class: "sort-filter-dataset"
+};
+const _hoisted_2$l = {
+  class: "sort-filter-dataset__search"
+};
+const _hoisted_3$h = {
+  class: "sr-only"
+};
+const _hoisted_4$e = ["title"];
+const _hoisted_5$b = {
+  class: "sr-only"
+};
+const _hoisted_6$9 = {
+  value: {
+    attribute: "",
+    ascending: false
+  }
+};
+const _hoisted_7$8 = ["value"];
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  __name: "FSortFilterDataset",
+  props: {
+    /**
+     * The data that you wish to sort or filter.
+     */
+    data: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    /**
+     * All the attributes you want to enable sorting for and the corresponding name to display in the dropdown.
+     * Structured as `{attributeName: "Name for dropdown", secondAttributeName: "Name for dropdown"}`
      */
     sortableAttributes: {
       type: Object,
@@ -11506,7 +12316,7 @@ const _sfc_main$p = vue.defineComponent({
     placeholderFilter: {
       type: String,
       required: false,
-      default: TranslationMixin.methods.$t("fkui.sort-filter-dataset.placeholder.filter", "Sök")
+      default: logic.TranslationService.provider.translate("fkui.sort-filter-dataset.placeholder.filter", "Sök")
     },
     /**
      * The order the data will be sorted by if defaultSortAttribute has been set.
@@ -11518,243 +12328,237 @@ const _sfc_main$p = vue.defineComponent({
     }
   },
   emits: ["datasetSorted", "usedSortAttributes"],
-  data() {
-    return {
-      searchString: "",
-      sortAttribute: {
-        attribute: "",
-        ascending: false
-      },
-      sortFilterResult: [],
-      tableCallbackOnSort: () => {
-        return;
-      },
-      tableCallbackSortableColumns: () => {
-        return;
-      }
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const searchString = vue.ref("");
+    const sortAttribute = vue.ref({
+      attribute: "",
+      name: "",
+      ascendingName: "",
+      ascending: false,
+      id: 0
+    });
+    const sortFilterResult = vue.ref([]);
+    const debouncedFilterResultset = logic.debounce(filterResultset, 250);
+    let tableCallbackOnSort = () => {
     };
-  },
-  computed: {
-    showClearButton() {
-      return this.searchString.length > 0;
-    },
-    sortOrders() {
+    let tableCallbackSortableColumns = () => {
+    };
+    const props = __props;
+    const emit = __emit;
+    const showClearButton = vue.computed(() => {
+      return searchString.value.length > 0;
+    });
+    const sortOrders = vue.computed(() => {
       const arr = [];
       let id = 0;
-      Object.keys(this.sortableAttributes).forEach((key) => {
+      Object.keys(props.sortableAttributes).forEach((key) => {
         arr.push({
           attribute: key,
-          name: this.sortableAttributes[key],
-          ascendingName: this.$t("fkui.sort-filter-dataset.label.ascending", "stigande"),
+          name: props.sortableAttributes[key],
+          ascendingName: $t2("fkui.sort-filter-dataset.label.ascending", "stigande"),
           ascending: true,
           id: id++
         });
         arr.push({
           attribute: key,
-          name: this.sortableAttributes[key],
-          ascendingName: this.$t("fkui.sort-filter-dataset.label.descending", "fallande"),
+          name: props.sortableAttributes[key],
+          ascendingName: $t2("fkui.sort-filter-dataset.label.descending", "fallande"),
           ascending: false,
           id: id++
         });
       });
       return arr;
-    },
-    filterAttributes() {
-      return Object.keys(this.sortableAttributes);
-    }
-  },
-  watch: {
-    data: {
-      immediate: true,
-      deep: true,
-      handler: function() {
-        if (this.defaultSortAttribute !== "") {
-          const foundAttribute = this.sortOrders.find((item) => item.attribute === this.defaultSortAttribute && item.ascending === this.defaultSortAscending);
-          if (foundAttribute) {
-            this.sortAttribute = foundAttribute;
-          }
+    });
+    const filterAttributes = vue.computed(() => {
+      return Object.keys(props.sortableAttributes);
+    });
+    vue.provide("sort", (attribute, ascending) => {
+      const foundAttribute = sortOrders.value.find((item) => {
+        return item.attribute === attribute && item.ascending === ascending;
+      });
+      if (foundAttribute) {
+        sortAttribute.value = foundAttribute;
+      } else {
+        sortAttribute.value = {
+          attribute: "",
+          ascending: false
+        };
+      }
+      sortFilterData();
+      emit("usedSortAttributes", sortAttribute.value);
+    });
+    vue.provide("registerCallbackOnSort", (callback) => {
+      tableCallbackOnSort = callback;
+    });
+    vue.provide("registerCallbackOnMount", (callback) => {
+      tableCallbackSortableColumns = callback;
+    });
+    vue.onMounted(() => {
+      tableCallbackSortableColumns(Object.keys(props.sortableAttributes));
+    });
+    vue.watch(() => props.data, () => {
+      if (props.defaultSortAttribute !== "") {
+        const foundAttribute = sortOrders.value.find((item) => {
+          return item.attribute === props.defaultSortAttribute && item.ascending === props.defaultSortAscending;
+        });
+        if (foundAttribute) {
+          sortAttribute.value = foundAttribute;
         }
-        this.sortFilterData();
       }
-    }
-  },
-  created() {
-    this.debouncedFilterResultset = logic.debounce(this.filterResultset, 250).bind(this);
-  },
-  mounted() {
-    this.tableCallbackSortableColumns(Object.keys(this.sortableAttributes));
-  },
-  methods: {
-    sortFilterData() {
-      const filteredData = filter(this.data, this.filterAttributes, this.searchString);
-      if (this.sortAttribute.attribute === "") {
-        this.sortFilterResult = filteredData;
+      sortFilterData();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    function sortFilterData() {
+      const filteredData = filter(props.data, filterAttributes.value, searchString.value);
+      if (sortAttribute.value.attribute === "") {
+        sortFilterResult.value = filteredData;
       } else {
-        this.sortFilterResult = sort([...filteredData], this.sortAttribute.attribute, this.sortAttribute.ascending);
+        sortFilterResult.value = sort([...filteredData], sortAttribute.value.attribute, sortAttribute.value.ascending);
       }
-      this.$nextTick(() => {
-        this.tableCallbackOnSort(this.sortAttribute.attribute, this.sortAttribute.ascending);
+      vue.nextTick(() => {
+        tableCallbackOnSort(sortAttribute.value.attribute, sortAttribute.value.ascending);
       });
-      this.$emit("datasetSorted", this.sortFilterResult);
-    },
-    onChangeSortAttribute() {
-      this.sortFilterData();
-      this.$emit("usedSortAttributes", this.sortAttribute);
-    },
-    onSearchInput(event) {
-      this.searchString = event.target.value;
-      this.debouncedFilterResultset();
-    },
-    onClickClearSearch() {
-      this.searchString = "";
-      this.sortFilterData();
-      const input = this.$el.querySelector(".text-field--inline input");
+      emit("datasetSorted", sortFilterResult.value);
+    }
+    function onChangeSortAttribute() {
+      sortFilterData();
+      emit("usedSortAttributes", sortAttribute.value);
+    }
+    function onSearchInput(event) {
+      searchString.value = event.target.value;
+      debouncedFilterResultset();
+    }
+    function onClickClearSearch() {
+      searchString.value = "";
+      sortFilterData();
+      const input = vue.useTemplateRef("search-field").value;
       logic.focus(input);
-    },
-    debouncedFilterResultset() {
-    },
-    filterResultset() {
-      this.sortFilterData();
-      if (this.searchString === "") {
-        logic.alertScreenReader(this.$t("fkui.sort-filter-dataset.aria-live.empty", "Sök redigera Sök tom"));
+    }
+    function filterResultset() {
+      sortFilterData();
+      if (searchString.value === "") {
+        logic.alertScreenReader($t2("fkui.sort-filter-dataset.aria-live.empty", "Sök redigera Sök tom"));
       } else {
-        const searchAriaLive = this.$t("fkui.sort-filter-dataset.aria-live.search", `Din sökning på "{{ search }}" gav {{ result }} träffar.`, {
-          result: this.sortFilterResult.length,
-          search: this.searchString
+        const searchAriaLive = $t2("fkui.sort-filter-dataset.aria-live.search", `Din sökning på "{{ search }}" gav {{ result }} träffar.`, {
+          result: sortFilterResult.value.length,
+          search: searchString.value
         });
         logic.alertScreenReader(searchAriaLive);
       }
     }
-  }
-});
-const _hoisted_1$p = {
-  class: "sort-filter-dataset"
-};
-const _hoisted_2$l = {
-  class: "sort-filter-dataset__search"
-};
-const _hoisted_3$h = {
-  class: "sr-only"
-};
-const _hoisted_4$e = ["title"];
-const _hoisted_5$b = {
-  class: "sr-only"
-};
-const _hoisted_6$9 = {
-  value: {
-    attribute: "",
-    ascending: false
-  }
-};
-const _hoisted_7$8 = ["value"];
-function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_i_flex_item = vue.resolveComponent("i-flex-item");
-  const _component_f_icon = vue.resolveComponent("f-icon");
-  const _component_f_text_field = vue.resolveComponent("f-text-field");
-  const _component_f_select_field = vue.resolveComponent("f-select-field");
-  const _component_i_flex = vue.resolveComponent("i-flex");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [vue.createVNode(_component_i_flex, {
-    collapse: "",
-    gap: "3x",
-    wrap: ""
-  }, {
-    default: vue.withCtx(() => [vue.createVNode(_component_i_flex_item, {
-      shrink: "",
-      align: "center"
-    }, {
-      default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps({
-        slotClass: "sort-filter-dataset__toolbar__header"
-      })))]),
-      _: 3
-    }), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createVNode(_component_i_flex_item, {
-      grow: ""
-    }, {
-      default: vue.withCtx(() => [vue.createVNode(_component_i_flex, {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [vue.createVNode(vue.unref(IFlex), {
         collapse: "",
-        float: "right"
+        gap: "3x",
+        wrap: ""
       }, {
-        default: vue.withCtx(() => [_ctx.showFilter ? (vue.openBlock(), vue.createBlock(_component_i_flex_item, {
-          key: 0,
+        default: vue.withCtx(() => [vue.createVNode(vue.unref(IFlexItem), {
           shrink: "",
           align: "center"
         }, {
-          default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_2$l, [vue.createVNode(_component_f_icon, {
-            name: "search",
-            class: "sort-filter-dataset__search__magnify-icon"
-          }), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createVNode(_component_f_text_field, {
-            modelValue: _ctx.searchString,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchString = $event),
-            inline: "",
-            placeholder: _ctx.placeholderFilter,
-            maxlength: "64",
-            onInput: _ctx.onSearchInput
-          }, {
-            default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$h, vue.toDisplayString(_ctx.placeholderFilter), 1)]),
-            _: 1
-          }, 8, ["modelValue", "placeholder", "onInput"]), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.showClearButton ? (vue.openBlock(), vue.createElementBlock("button", {
-            key: 0,
-            type: "button",
-            class: "button button--discrete sort-filter-dataset__search__close-icon",
-            title: _ctx.$t("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält"),
-            onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClickClearSearch && _ctx.onClickClearSearch(...args))
-          }, [vue.createVNode(_component_f_icon, {
-            name: "close"
-          }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$b, vue.toDisplayString(_ctx.$t("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält")), 1)], 8, _hoisted_4$e)) : vue.createCommentVNode("", true)])]),
-          _: 1
-        })) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.showSort ? (vue.openBlock(), vue.createBlock(_component_i_flex_item, {
-          key: 1,
-          shrink: "",
-          align: "center"
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps({
+            slotClass: "sort-filter-dataset__toolbar__header"
+          })))]),
+          _: 3
+        }), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createVNode(vue.unref(IFlexItem), {
+          grow: ""
         }, {
-          default: vue.withCtx(() => [vue.createVNode(_component_f_select_field, {
-            modelValue: _ctx.sortAttribute,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.sortAttribute = $event),
-            class: "sort-filter-dataset__sort",
-            inline: "",
-            onChange: _ctx.onChangeSortAttribute
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(IFlex), {
+            collapse: "",
+            float: "right"
           }, {
-            label: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.sort-filter-dataset.label.sort", "Sortera på")), 1)]),
-            default: vue.withCtx(() => [_cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("option", _hoisted_6$9, vue.toDisplayString(_ctx.$t("fkui.sort-filter-dataset.label.unsorted", "Välj")), 1), _cache[7] || (_cache[7] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.sortOrders, (sortOrder) => {
-              return vue.openBlock(), vue.createElementBlock("option", {
-                key: sortOrder.id,
-                value: sortOrder
-              }, vue.toDisplayString(sortOrder.name) + " (" + vue.toDisplayString(sortOrder.ascendingName) + ")\n                            ", 9, _hoisted_7$8);
-            }), 128))]),
+            default: vue.withCtx(() => [__props.showFilter ? (vue.openBlock(), vue.createBlock(vue.unref(IFlexItem), {
+              key: 0,
+              shrink: "",
+              align: "center"
+            }, {
+              default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_2$l, [vue.createVNode(vue.unref(FIcon), {
+                name: "search",
+                class: "sort-filter-dataset__search__magnify-icon"
+              }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createVNode(vue.unref(FTextField), {
+                ref: "search-field",
+                modelValue: searchString.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchString.value = $event),
+                inline: "",
+                placeholder: __props.placeholderFilter,
+                maxlength: "64",
+                onInput: onSearchInput
+              }, {
+                default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$h, vue.toDisplayString(__props.placeholderFilter), 1)]),
+                _: 1
+              }, 8, ["modelValue", "placeholder"]), _cache[4] || (_cache[4] = vue.createTextVNode()), showClearButton.value ? (vue.openBlock(), vue.createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: "button button--discrete sort-filter-dataset__search__close-icon",
+                title: vue.unref($t2)("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält"),
+                onClick: onClickClearSearch
+              }, [vue.createVNode(vue.unref(FIcon), {
+                name: "close"
+              }), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$b, vue.toDisplayString(vue.unref($t2)("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält")), 1)], 8, _hoisted_4$e)) : vue.createCommentVNode("", true)])]),
+              _: 1
+            })) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), __props.showSort ? (vue.openBlock(), vue.createBlock(vue.unref(IFlexItem), {
+              key: 1,
+              shrink: "",
+              align: "center"
+            }, {
+              default: vue.withCtx(() => [vue.createVNode(vue.unref(FSelectField), {
+                modelValue: sortAttribute.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => sortAttribute.value = $event),
+                class: "sort-filter-dataset__sort",
+                inline: "",
+                onChange: onChangeSortAttribute
+              }, {
+                label: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.sort-filter-dataset.label.sort", "Sortera på")), 1)]),
+                default: vue.withCtx(() => [_cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("option", _hoisted_6$9, vue.toDisplayString(vue.unref($t2)("fkui.sort-filter-dataset.label.unsorted", "Välj")), 1), _cache[6] || (_cache[6] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sortOrders.value, (sortOrder) => {
+                  return vue.openBlock(), vue.createElementBlock("option", {
+                    key: sortOrder.id,
+                    value: sortOrder
+                  }, vue.toDisplayString(sortOrder.name) + " (" + vue.toDisplayString(sortOrder.ascendingName) + ")\n                            ", 9, _hoisted_7$8);
+                }), 128))]),
+                _: 1
+              }, 8, ["modelValue"])]),
+              _: 1
+            })) : vue.createCommentVNode("", true)]),
             _: 1
-          }, 8, ["modelValue", "onChange"])]),
+          })]),
           _: 1
-        })) : vue.createCommentVNode("", true)]),
-        _: 1
-      })]),
-      _: 1
-    })]),
-    _: 3
-  }), _cache[10] || (_cache[10] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
-    sortFilterResult: _ctx.sortFilterResult
-  })))]);
-}
-const FSortFilterDataset = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$n]]);
-const _sfc_main$o = vue.defineComponent({
-  name: "FDataTable",
-  components: {
-    FIcon
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      addColumn: (column) => {
-        if (column.type === FTableColumnType.ACTION) {
-          throw new Error("Cannot use action column in FDataTable component");
-        }
-        this.columns = addColumn(this.columns, column);
-      },
-      setVisibilityColumn: (id, visible) => {
-        setVisibilityColumn(this.columns, id, visible);
-      },
-      textFieldTableMode: true
+        })]),
+        _: 3
+      }), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+        sortFilterResult: sortFilterResult.value
+      })))]);
     };
+  }
+});
+const _hoisted_1$o = ["tabindex"];
+const _hoisted_2$k = {
+  key: 0
+};
+const _hoisted_3$g = {
+  class: "table__row"
+};
+const _hoisted_4$d = ["innerHTML"];
+const _hoisted_5$a = {
+  key: 1,
+  class: "table__column__description"
+};
+const _hoisted_6$8 = {
+  key: 0
+};
+const _hoisted_7$7 = {
+  key: 1
+};
+const _hoisted_8$5 = ["colspan"];
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
   },
-  inheritAttrs: false,
+  __name: "FDataTable",
   props: {
     /**
      * The rows to be listed.
@@ -11797,67 +12601,80 @@ const _sfc_main$o = vue.defineComponent({
       }
     }
   },
-  setup(props) {
-    vue.provide("renderColumns", vue.computed(() => props.rows.length > 0));
-    return FSortFilterDatasetInjected();
-  },
-  data() {
-    return {
-      columns: []
-    };
-  },
-  computed: {
-    hasCaption() {
-      return hasSlot(this, "caption", {}, {
+  setup(__props) {
+    const $t2 = useTranslate();
+    const {
+      hasSlot: hasSlot2
+    } = useSlotUtils();
+    const {
+      sort: sort2,
+      registerCallbackOnSort,
+      registerCallbackOnMount
+    } = FSortFilterDatasetInjected();
+    const columns = vue.ref([]);
+    const props = __props;
+    const hasCaption = vue.computed(() => {
+      return hasSlot2("caption", {}, {
         stripClasses: []
       });
-    },
-    tableClasses() {
+    });
+    const tableClasses = vue.computed(() => {
       const classes = [];
-      if (this.striped) {
+      if (props.striped) {
         classes.push("table--striped");
       }
       return classes;
-    },
-    isEmpty() {
-      return this.rows.length === 0;
-    },
-    visibleColumns() {
-      return this.columns.filter((col) => col.visible);
-    },
-    wrapperClasses() {
-      return tableScrollClasses(this.scroll);
-    },
-    tabindex() {
-      return this.scroll !== TableScroll.NONE ? 0 : void 0;
-    }
-  },
-  mounted() {
-    this.registerCallbackOnSort(this.callbackOnSort);
-    this.registerCallbackOnMount(this.callbackSortableColumns);
-  },
-  methods: {
-    rowKey(item) {
-      const key = item[this.keyAttribute];
+    });
+    const isEmpty = vue.computed(() => {
+      return props.rows.length === 0;
+    });
+    const visibleColumns = vue.computed(() => {
+      return columns.value.filter((col) => col.visible);
+    });
+    const wrapperClasses = vue.computed(() => {
+      return tableScrollClasses(props.scroll);
+    });
+    const tabindex = vue.computed(() => {
+      return props.scroll !== TableScroll.NONE ? 0 : void 0;
+    });
+    vue.provide("addColumn", (column) => {
+      if (column.type === FTableColumnType.ACTION) {
+        throw new Error("Cannot use action column in FDataTable component");
+      }
+      columns.value = addColumn(columns.value, column);
+    });
+    vue.provide("setVisibilityColumn", (id, visible) => {
+      setVisibilityColumn(columns.value, id, visible);
+    });
+    vue.provide("textFieldTableMode", true);
+    vue.provide("renderColumns", vue.computed(() => {
+      return props.rows.length > 0;
+    }));
+    vue.onMounted(() => {
+      registerCallbackOnSort(callbackOnSort);
+      registerCallbackOnMount(callbackSortableColumns);
+    });
+    function rowKey(item) {
+      const key = item[props.keyAttribute];
       if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${this.keyAttribute}]' is missing in row`);
+        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in row`);
       }
       return String(key);
-    },
-    columnClasses(column) {
+    }
+    function columnClasses(column) {
       const classes = ["table__column", `table__column--${column.type}`, column.size];
       if (column.sortable) {
         classes.push("table__column--sortable");
       }
       return classes;
-    },
-    iconClasses(column) {
+    }
+    function iconClasses2(column) {
       return getSortableIconClasses(column);
-    },
-    iconName(column) {
+    }
+    function iconName(column) {
       return getSortableIconName(column);
-    },
-    onClickColumnHeader(column) {
+    }
+    function onClickColumnHeader(column) {
       if (!column.sortable) {
         return;
       }
@@ -11866,81 +12683,60 @@ const _sfc_main$o = vue.defineComponent({
         columnName = "";
         column.sort = FTableColumnSort.UNSORTED;
       }
-      this.sort(columnName, column.sort !== FTableColumnSort.ASCENDING);
-    },
-    callbackOnSort(columnName, ascending) {
-      updateSortOrder(this.columns, columnName, ascending);
-    },
-    callbackSortableColumns(columnNames) {
-      setSortableColumns(this.columns, columnNames);
-    },
-    escapeNewlines(value) {
+      sort2(columnName, column.sort !== FTableColumnSort.ASCENDING);
+    }
+    function callbackOnSort(columnName, ascending) {
+      updateSortOrder(columns.value, columnName, ascending);
+    }
+    function callbackSortableColumns(columnNames) {
+      setSortableColumns(columns.value, columnNames);
+    }
+    function escapeNewlines(value) {
       return value.replace(/\n/g, "<br/>");
     }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(wrapperClasses.value)
+      }, [vue.createElementVNode("table", vue.mergeProps({
+        class: ["table", tableClasses.value],
+        tabindex: tabindex.value
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$k, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+        return vue.openBlock(), vue.createElementBlock("col", {
+          key: column.id,
+          class: vue.normalizeClass(column.size)
+        }, null, 2);
+      }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
+        return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
+          key: column.id,
+          scope: "col",
+          class: columnClasses(column)
+        }, vue.toHandlers(column.sortable ? {
+          click: () => onClickColumnHeader(column)
+        } : {}, true)), [vue.createElementVNode("span", {
+          innerHTML: escapeNewlines(column.title)
+        }, null, 8, _hoisted_4$d), _cache[0] || (_cache[0] = vue.createTextVNode()), column.sortable ? (vue.openBlock(), vue.createBlock(vue.unref(FIcon), {
+          key: 0,
+          class: vue.normalizeClass(iconClasses2(column)),
+          name: iconName(column)
+        }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
+      }), 128))])]), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [isEmpty.value && columns.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$8, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+        row: {}
+      })))])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$7, [vue.createElementVNode("td", {
+        class: "table__column table__column--action",
+        colspan: columns.value.length
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.rows, (row) => {
+        return vue.openBlock(), vue.createElementBlock("tr", {
+          key: rowKey(row),
+          class: "table__row"
+        }, [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+          ref_for: true
+        }, {
+          row
+        }))]);
+      }), 128))])], 16, _hoisted_1$o)], 2);
+    };
   }
 });
-const _hoisted_1$o = ["tabindex"];
-const _hoisted_2$k = {
-  key: 0
-};
-const _hoisted_3$g = {
-  class: "table__row"
-};
-const _hoisted_4$d = ["innerHTML"];
-const _hoisted_5$a = {
-  key: 1,
-  class: "table__column__description"
-};
-const _hoisted_6$8 = {
-  key: 0
-};
-const _hoisted_7$7 = {
-  key: 1
-};
-const _hoisted_8$5 = ["colspan"];
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(_ctx.wrapperClasses)
-  }, [vue.createElementVNode("table", vue.mergeProps({
-    class: ["table", _ctx.tableClasses],
-    tabindex: _ctx.tabindex
-  }, _ctx.$attrs), [_ctx.hasCaption ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$k, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (column) => {
-    return vue.openBlock(), vue.createElementBlock("col", {
-      key: column.id,
-      class: vue.normalizeClass(column.size)
-    }, null, 2);
-  }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.visibleColumns, (column) => {
-    return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
-      key: column.id,
-      scope: "col",
-      class: _ctx.columnClasses(column)
-    }, vue.toHandlers(column.sortable ? {
-      click: () => _ctx.onClickColumnHeader(column)
-    } : {}, true)), [vue.createElementVNode("span", {
-      innerHTML: _ctx.escapeNewlines(column.title)
-    }, null, 8, _hoisted_4$d), _cache[0] || (_cache[0] = vue.createTextVNode()), column.sortable ? (vue.openBlock(), vue.createBlock(_component_f_icon, {
-      key: 0,
-      class: vue.normalizeClass(_ctx.iconClasses(column)),
-      name: _ctx.iconName(column)
-    }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$a, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
-  }), 128))])]), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [_ctx.isEmpty && _ctx.columns.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$8, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
-    row: {}
-  })))])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$7, [vue.createElementVNode("td", {
-    class: "table__column table__column--action",
-    colspan: _ctx.columns.length
-  }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row) => {
-    return vue.openBlock(), vue.createElementBlock("tr", {
-      key: _ctx.rowKey(row),
-      class: "table__row"
-    }, [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
-      ref_for: true
-    }, {
-      row
-    }))]);
-  }), 128))])], 16, _hoisted_1$o)], 2);
-}
-const FDataTable = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$m]]);
 function isDayEnabled(day, config2) {
   return passesMinDate(day, config2.minDate) && passesMaxDate(day, config2.maxDate) && passesInvalidDates(day, config2.invalidDates) && passesInvalidWeekdays(day, config2.invalidWeekdays);
 }
@@ -12285,7 +13081,7 @@ const _hoisted_3$f = {
 const _hoisted_4$c = {
   class: "datepicker-field__close"
 };
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_f_text_field = vue.resolveComponent("f-text-field");
   const _component_f_calendar_day = vue.resolveComponent("f-calendar-day");
@@ -12355,7 +13151,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
       "min-date": _ctx.minDate,
       "max-date": _ctx.maxDate,
       onClick: _ctx.onSelectCalendarDay,
-      onKeyup: vue.withKeys(vue.withModifiers(_ctx.onKeyupEsc, ["stop"]), ["esc", "native"])
+      onKeyup: vue.withKeys(vue.withModifiers(_ctx.onKeyupEsc, ["stop"]), ["esc"])
     }, {
       default: vue.withCtx(({
         date: date2,
@@ -12381,7 +13177,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["is-open", "anchor", "inline", "onOpen", "onClose"])], 512);
 }
-const FDatepickerField = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$l]]);
+const FDatepickerField = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$j]]);
 function isDialogueTreeEndQuestion(value) {
   return Boolean(value.userData);
 }
@@ -12471,7 +13267,7 @@ const _hoisted_2$i = {
   class: "dialogue-tree__list"
 };
 const _hoisted_3$e = ["onClick"];
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [_ctx.options.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$i, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option, index) => {
     return vue.openBlock(), vue.createElementBlock("li", {
@@ -12491,7 +13287,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     userData: _ctx.userData
   })))]);
 }
-const FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$k]]);
+const FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$i]]);
 const _sfc_main$l = vue.defineComponent({
   name: "FExpandablePanel",
   components: {
@@ -12585,7 +13381,7 @@ const _hoisted_8$4 = {
   key: 0,
   class: "expandable-panel__outside"
 };
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_f_expand = vue.resolveComponent("f-expand");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -12622,7 +13418,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$j]]);
+const FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$h]]);
 const _sfc_main$k = vue.defineComponent({
   name: "FExpandableParagraph",
   components: {
@@ -12724,7 +13520,7 @@ const _hoisted_7$5 = {
   key: 0,
   class: "expandable-paragraph__separator"
 };
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_f_expand = vue.resolveComponent("f-expand");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -12755,7 +13551,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FExpandableParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$i]]);
+const FExpandableParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$g]]);
 const DEFAULT_ICON = "file";
 const iconMap = {
   "image/*": "pic",
@@ -12863,7 +13659,7 @@ const _hoisted_7$4 = {
   key: 0,
   class: "file-item__change-info"
 };
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [vue.createElementVNode("div", _hoisted_2$f, [vue.createElementVNode("a", vue.mergeProps({
     id: _ctx.id,
@@ -12876,7 +13672,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     class: "file-item__separator"
   }, null, -1))]);
 }
-const FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$h]]);
+const FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$f]]);
 const _sfc_main$i = vue.defineComponent({
   name: "FFileSelector",
   components: {
@@ -12943,7 +13739,7 @@ const _hoisted_1$i = {
 };
 const _hoisted_2$e = ["id", "aria-labelledby", "aria-disabled"];
 const _hoisted_3$a = ["id", "for"];
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [vue.createElementVNode("input", vue.mergeProps({
     id: _ctx.id,
@@ -12964,32 +13760,41 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     name: "paper-clip"
   }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
 }
-const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$g]]);
-const keybindings = Object.fromEntries([["Up", focusTrAbove], ["Down", focusTrBelow], ["ArrowUp", focusTrAbove], ["ArrowDown", focusTrBelow], [" ", activateRow], ["Spacebar", activateRow]]);
-function focusTrAbove(current) {
+const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$e]]);
+const keybindings = {
+  Up: focusTrAbove,
+  Down: focusTrBelow,
+  ArrowUp: focusTrAbove,
+  ArrowDown: focusTrBelow,
+  " ": activateRow,
+  Spacebar: activateRow
+};
+function focusTrAbove(table, current) {
+  const tr = table.tr.value;
   if (current > 0) {
-    this.tr[current - 1].focus();
+    tr[current - 1].focus();
   } else {
-    this.tr[this.tr.length - 1].focus();
+    tr[tr.length - 1].focus();
   }
 }
-function focusTrBelow(current) {
-  if (current < this.tr.length - 1) {
-    this.tr[current + 1].focus();
+function focusTrBelow(table, current) {
+  const tr = table.tr.value;
+  if (current < tr.length - 1) {
+    tr[current + 1].focus();
   } else {
-    this.tr[0].focus();
+    tr[0].focus();
   }
 }
-function activateRow(current) {
-  const row = this.rows[current];
-  const element = this.tr[current];
-  this.activate(row, element);
+function activateRow(table, current) {
+  const row = table.rows[current];
+  const element = table.tr.value[current];
+  table.activate(row, element);
 }
-function onKeydown(event, current) {
+function onKeydown(table, event, current) {
   const fn2 = keybindings[event.key];
   if (fn2) {
     event.preventDefault();
-    fn2.call(this, current);
+    fn2(table, current);
   }
 }
 function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit, slots) {
@@ -13053,7 +13858,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     return Boolean(expandableRows(row));
   }
   return {
-    expandedRows,
     isExpandableTable,
     hasExpandableSlot,
     toggleExpanded,
@@ -13065,32 +13869,76 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     hasExpandableContent
   };
 }
-function forceRepaintIE11(target) {
-  if (navigator.userAgent.includes("Trident")) {
-    target.style.display = "none";
-    target.offsetHeight;
-    target.style.removeProperty("display");
-  }
-}
-const _sfc_main$h = vue.defineComponent({
-  name: "FInteractiveTable",
-  components: {
-    FCheckboxField,
-    FIcon
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      addColumn: (column) => {
-        this.columns = addColumn(this.columns, column);
-      },
-      setVisibilityColumn: (id, visible) => {
-        setVisibilityColumn(this.columns, id, visible);
-      },
-      textFieldTableMode: true
-    };
+const _hoisted_1$h = ["role"];
+const _hoisted_2$d = {
+  key: 0
+};
+const _hoisted_3$9 = {
+  key: 0,
+  class: "table__column--shrink"
+};
+const _hoisted_4$8 = {
+  key: 1,
+  class: "table__column--shrink"
+};
+const _hoisted_5$6 = {
+  class: "table__row"
+};
+const _hoisted_6$4 = {
+  key: 0,
+  scope: "col"
+};
+const _hoisted_7$3 = {
+  class: "sr-only"
+};
+const _hoisted_8$3 = {
+  key: 1,
+  scope: "col"
+};
+const _hoisted_9$3 = {
+  class: "sr-only"
+};
+const _hoisted_10$2 = ["innerHTML"];
+const _hoisted_11$1 = {
+  key: 1,
+  class: "table__column__description"
+};
+const _hoisted_12$1 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
+const _hoisted_13 = {
+  key: 0
+};
+const _hoisted_14 = {
+  key: 0,
+  class: "table__expand-icon"
+};
+const _hoisted_15 = {
+  key: 1,
+  class: "table__column--selectable"
+};
+const _hoisted_16 = {
+  class: "table__input"
+};
+const _hoisted_17 = {
+  key: 0,
+  class: "sr-only"
+};
+const _hoisted_18 = {
+  key: 0,
+  class: "table__column--placeholder"
+};
+const _hoisted_19 = ["colspan"];
+const _hoisted_20 = {
+  key: 0
+};
+const _hoisted_21 = {
+  key: 1
+};
+const _hoisted_22 = ["colspan"];
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
   },
-  inheritAttrs: false,
+  __name: "FInteractiveTable",
   props: {
     /**
      * The rows to be listed.
@@ -13187,437 +14035,376 @@ const _sfc_main$h = vue.defineComponent({
       default: () => void 0
     }
   },
-  emits: [
-    "change",
-    "click",
-    "unselect",
-    "update:modelValue",
-    "update:active",
-    "select",
-    /**
-     * Emitted when row is expanded.
-     *
-     * @event expand
-     * @param row
-     * @type {ListItem}
-     */
-    "expand",
-    /**
-     * Emitted when row is collapsed.
-     *
-     * @event collapse
-     * @param row
-     * @type {ListItem}
-     */
-    "collapse"
-  ],
-  setup(props, context) {
-    vue.provide("renderColumns", vue.computed(() => props.rows.length > 0));
-    const sortFilterDatasetInjected = FSortFilterDatasetInjected();
-    const activateItemInjected = ActivateItemInjected();
-    const expandableTable = useExpandableTable(props.expandableAttribute, props.keyAttribute, props.expandableDescribedby, context.emit, context.slots);
-    return {
-      ...sortFilterDatasetInjected,
-      ...activateItemInjected,
-      ...expandableTable
-    };
-  },
-  data() {
-    return {
-      activeRow: void 0,
-      columns: [],
-      selectedRows: [],
-      tr: [],
-      tbodyKey: 0
-    };
-  },
-  computed: {
-    hasCaption() {
-      return hasSlot(this, "caption", {}, {
+  emits: ["change", "click", "unselect", "update:modelValue", "update:active", "select", "expand", "collapse"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const slots = vue.useSlots();
+    const {
+      hasSlot: hasSlot2
+    } = useSlotUtils();
+    const {
+      sort: sort2,
+      registerCallbackOnSort,
+      registerCallbackOnMount
+    } = FSortFilterDatasetInjected();
+    const {
+      registerCallbackAfterItemAdd,
+      registerCallbackBeforeItemDelete
+    } = ActivateItemInjected();
+    const activeRow = vue.ref(void 0);
+    const columns = vue.ref([]);
+    const selectedRows = vue.ref([]);
+    const tr = vue.shallowRef([]);
+    const tbodyKey = vue.ref(0);
+    const props = __props;
+    const emit = __emit;
+    const expandableTable = useExpandableTable(props.expandableAttribute, props.keyAttribute, props.expandableDescribedby, emit, slots);
+    const {
+      isExpandableTable,
+      hasExpandableSlot,
+      toggleExpanded,
+      isExpanded,
+      rowAriaExpanded,
+      expandableRowClasses,
+      getExpandableDescribedby,
+      expandableRows,
+      hasExpandableContent
+    } = expandableTable;
+    const hasCaption = vue.computed(() => {
+      return hasSlot2("caption", {}, {
         stripClasses: []
       });
-    },
-    hasCheckboxDescription() {
-      const firstRow = this.rows[0];
-      return hasSlot(this, "checkbox-description", {
+    });
+    const hasCheckboxDescription = vue.computed(() => {
+      const firstRow = props.rows[0];
+      return hasSlot2("checkbox-description", {
         row: firstRow
       });
-    },
-    isEmpty() {
-      return this.rows.length === 0;
-    },
-    visibleColumns() {
-      return this.columns.filter((col) => col.visible);
-    },
-    tableClasses() {
+    });
+    const isEmpty = vue.computed(() => {
+      return props.rows.length === 0;
+    });
+    const visibleColumns = vue.computed(() => {
+      return columns.value.filter((col) => col.visible);
+    });
+    const tableClasses = vue.computed(() => {
       const classes = [];
-      if (this.selectable) {
+      if (props.selectable) {
         classes.push("table--selectable");
       }
-      if (this.hover) {
+      if (props.hover) {
         classes.push("table--hover");
       }
       return classes;
-    },
-    tableRole() {
-      return this.isExpandableTable ? "treegrid" : "grid";
-    },
-    wrapperClasses() {
-      return tableScrollClasses(this.scroll);
-    },
-    nbOfColumns() {
-      let columnCount = this.visibleColumns.length;
-      if (this.selectable) {
+    });
+    const tableRole = vue.computed(() => {
+      return isExpandableTable.value ? "treegrid" : "grid";
+    });
+    const wrapperClasses = vue.computed(() => {
+      return tableScrollClasses(props.scroll);
+    });
+    const nbOfColumns = vue.computed(() => {
+      let columnCount = visibleColumns.value.length;
+      if (props.selectable) {
         columnCount++;
       }
-      if (this.isExpandableTable) {
+      if (isExpandableTable.value) {
         columnCount++;
       }
       return columnCount;
-    }
-  },
-  watch: {
-    rows: {
-      immediate: true,
-      deep: true,
-      handler: function() {
-        if (this.modelValue) {
-          this.selectedRows = this.modelValue.filter((row) => {
-            return includeItem(row, this.rows, this.keyAttribute);
-          });
-        }
-      }
-    },
-    active: {
-      immediate: true,
-      handler: function() {
-        this.updateActiveRowFromVModel();
+    });
+    vue.provide("addColumn", (column) => {
+      columns.value = addColumn(columns.value, column);
+    });
+    vue.provide("setVisibilityColumn", (id, visible) => {
+      setVisibilityColumn(columns.value, id, visible);
+    });
+    vue.provide("textFieldTableMode", true);
+    vue.provide("renderColumns", vue.computed(() => props.rows.length > 0));
+    vue.watch(() => props.rows, () => {
+      if (props.modelValue) {
+        selectedRows.value = props.modelValue.filter((row) => {
+          return includeItem(row, props.rows, props.keyAttribute);
+        });
       }
-    },
-    showActive: {
+    }, {
       immediate: true,
-      handler: function(val) {
-        if (!val) {
-          this.tbodyKey ^= 1;
-        }
-      }
-    }
-  },
-  updated() {
-    const tbodyElement = this.$refs["tbodyElement"];
-    const trElements = [].slice.call(tbodyElement.children);
-    const trInteractableElements = trElements.filter((tr) => {
-      return tr.tabIndex === 0;
+      deep: true
     });
-    this.tr = trInteractableElements;
-  },
-  mounted() {
-    this.registerCallbackOnSort(this.callbackOnSort);
-    this.registerCallbackOnMount(this.callbackSortableColumns);
-    this.registerCallbackAfterItemAdd(this.callbackAfterItemAdd);
-    this.registerCallbackBeforeItemDelete(this.callbackBeforeItemDelete);
-  },
-  methods: {
-    isActive(row) {
-      if (!this.showActive) {
-        return false;
-      }
-      return itemEquals(row, this.activeRow, this.keyAttribute);
-    },
-    isSelected(row) {
-      return includeItem(row, this.selectedRows, this.keyAttribute);
-    },
-    onKeydownExpandable(event, index) {
-      if (event.key === " " || event.key === "Spacebar") {
-        event.preventDefault();
-        return;
-      }
-      onKeydown.call(this, event, index);
-    },
-    onKeydown(event, index) {
-      onKeydown.call(this, event, index);
-    },
-    onClick(event, row) {
-      const {
-        target
-      } = event;
-      const isRelevant = ["TD", "TH"].includes(target.nodeName);
-      if (isRelevant) {
-        const parent = target.parentElement;
-        this.activate(row, parent);
-      }
-    },
-    activate(row, tr) {
-      this.$emit("click", row);
-      if (this.isExpandableTable && this.hasExpandableContent(row)) {
-        this.toggleExpanded(row);
-      }
-      if (!itemEquals(row, this.activeRow, this.keyAttribute)) {
-        this.$emit("change", row);
-        this.setActiveRow(row);
-        if (tr) {
-          tr.focus();
-          const td = tr.children[0];
-          forceRepaintIE11(td);
-        }
+    vue.watch(() => props.active, () => {
+      updateActiveRowFromVModel();
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.showActive, (val) => {
+      if (!val) {
+        tbodyKey.value ^= 1;
       }
-    },
-    rowDescription(row) {
-      const slot = this.$slots["row-description"];
-      return renderSlotText(slot, {
-        row
+    }, {
+      immediate: true
+    });
+    function updateTr(tbodyElement) {
+      const trElements = [].slice.call(tbodyElement.children);
+      const trInteractableElements = trElements.filter((tr2) => {
+        return tr2.tabIndex === 0;
       });
-    },
-    onSelect(row) {
-      if (includeItem(row, this.selectedRows, this.keyAttribute)) {
-        this.selectedRows = this.selectedRows.filter((i) => !itemEquals(i, row, this.keyAttribute));
-        this.$emit("unselect", row);
-      } else {
-        this.selectedRows.push(row);
-        this.$emit("select", row);
-      }
-      this.updateVModelWithSelectedRows();
-      this.$forceUpdate();
-    },
-    updateVModelWithSelectedRows() {
-      if (this.modelValue) {
-        this.$emit("update:modelValue", this.selectedRows);
-      }
-    },
-    rowClasses(row, index) {
-      const active = this.isActive(row) ? ["table__row--active"] : [];
-      const selected = this.isSelected(row) ? ["table__row--selected"] : [];
-      const isExpandableRow = this.isExpandableTable && this.hasExpandableContent(row);
-      const expandable = isExpandableRow ? ["table__row--expandable"] : [];
-      const expanded = this.isExpanded(row) ? ["table__row--expanded-border"] : [];
-      const striped = this.striped && index % 2 !== 0 ? ["table__row--striped"] : [];
-      return ["table__row", ...active, ...selected, ...striped, ...expandable, ...expanded];
-    },
-    rowKey(row) {
-      const key = row[this.keyAttribute];
-      if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${this.keyAttribute}]' is missing in row`);
-      }
-      return String(key);
-    },
-    columnClasses(column) {
-      const sortable = column.sortable ? ["table__column--sortable"] : [];
-      return ["table__column", `table__column--${column.type}`, ...sortable, column.size];
-    },
-    iconClasses(column) {
-      return getSortableIconClasses(column);
-    },
-    iconName(column) {
-      return getSortableIconName(column);
-    },
-    onClickColumnHeader(column) {
-      if (!column.sortable) {
-        return;
-      }
-      let columnName = column.name;
-      if (column.sort === FTableColumnSort.DESCENDING) {
-        columnName = "";
-        column.sort = FTableColumnSort.UNSORTED;
-      }
-      this.sort(columnName, column.sort !== FTableColumnSort.ASCENDING);
-    },
-    callbackOnSort(columnName, ascending) {
-      updateSortOrder(this.columns, columnName, ascending);
-    },
-    callbackSortableColumns(columnNames) {
-      setSortableColumns(this.columns, columnNames);
-    },
-    callbackAfterItemAdd(item) {
-      this.activate(item, null);
-    },
-    callbackBeforeItemDelete(item) {
-      if (this.rows.length === 0) {
-        return;
+      tr.value = trInteractableElements;
+    }
+    vue.onUpdated(() => {
+      const tbodyElement = vue.useTemplateRef("tbodyElement");
+      if (tbodyElement.value) {
+        updateTr(tbodyElement.value);
       }
-      let targetIndex = this.rows.indexOf(item) - 1;
-      if (targetIndex < 0 && this.rows.length > 1) {
-        targetIndex = 1;
-      } else if (targetIndex < 0) {
-        targetIndex = 0;
+    });
+    vue.onMounted(() => {
+      const tbodyElement = vue.useTemplateRef("tbodyElement");
+      if (tbodyElement.value) {
+        updateTr(tbodyElement.value);
+      }
+      registerCallbackOnSort(callbackOnSort);
+      registerCallbackOnMount(callbackSortableColumns);
+      registerCallbackAfterItemAdd(callbackAfterItemAdd);
+      registerCallbackBeforeItemDelete(callbackBeforeItemDelete);
+    });
+    function forceRepaintIE11(target) {
+      if (navigator.userAgent.includes("Trident")) {
+        target.style.display = "none";
+        target.offsetHeight;
+        target.style.removeProperty("display");
       }
-      this.activate(this.rows[targetIndex], this.tr[targetIndex]);
-    },
-    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);
+    }
+    function isActive(row) {
+      if (!props.showActive) {
+        return false;
       }
-    },
-    setActiveRow(row) {
-      this.activeRow = row;
-      this.$emit("update:active", this.activeRow);
+      return itemEquals(row, activeRow.value, props.keyAttribute);
     }
-  }
-});
-const _hoisted_1$h = ["role"];
-const _hoisted_2$d = {
-  key: 0
-};
-const _hoisted_3$9 = {
-  key: 0,
-  class: "table__column--shrink"
-};
-const _hoisted_4$8 = {
-  key: 1,
-  class: "table__column--shrink"
-};
-const _hoisted_5$6 = {
-  class: "table__row"
-};
-const _hoisted_6$4 = {
-  key: 0,
-  scope: "col"
-};
-const _hoisted_7$3 = {
-  class: "sr-only"
-};
-const _hoisted_8$3 = {
-  key: 1,
-  scope: "col"
-};
-const _hoisted_9$3 = {
-  class: "sr-only"
-};
-const _hoisted_10$2 = ["innerHTML"];
-const _hoisted_11$1 = {
-  key: 1,
-  class: "table__column__description"
-};
-const _hoisted_12$1 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
-const _hoisted_13 = {
-  key: 0
-};
-const _hoisted_14 = {
-  key: 0,
-  class: "table__expand-icon"
-};
-const _hoisted_15 = {
-  key: 1,
-  class: "table__column--selectable"
-};
-const _hoisted_16 = {
-  class: "table__input"
-};
-const _hoisted_17 = {
-  key: 0,
-  class: "sr-only"
-};
-const _hoisted_18 = {
-  key: 0,
-  class: "table__column--placeholder"
-};
-const _hoisted_19 = ["colspan"];
-const _hoisted_20 = {
-  key: 0
-};
-const _hoisted_21 = {
-  key: 1
-};
-const _hoisted_22 = ["colspan"];
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_icon = vue.resolveComponent("f-icon");
-  const _component_f_checkbox_field = vue.resolveComponent("f-checkbox-field");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(_ctx.wrapperClasses)
-  }, [vue.createElementVNode("table", vue.mergeProps({
-    class: ["table", _ctx.tableClasses],
-    role: _ctx.tableRole
-  }, _ctx.$attrs), [_ctx.hasCaption ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$d, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (column) => {
-    return vue.openBlock(), vue.createElementBlock("col", {
-      key: column.id,
-      class: vue.normalizeClass(column.size)
-    }, null, 2);
-  }), 128))]), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_5$6, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$4, [vue.createElementVNode("span", _hoisted_7$3, vue.toDisplayString(_ctx.$t("fkui.interactive-table.select", "Expandera")), 1)])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_8$3, [vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(_ctx.$t("fkui.interactive-table.select", "Markera")), 1)])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.visibleColumns, (column) => {
-    return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
-      key: column.id,
-      scope: "col",
-      class: _ctx.columnClasses(column)
-    }, vue.toHandlers(column.sortable ? {
-      click: () => _ctx.onClickColumnHeader(column)
-    } : {}, true)), [vue.createElementVNode("span", {
-      innerHTML: _ctx.escapeNewlines(column.title)
-    }, null, 8, _hoisted_10$2), _cache[2] || (_cache[2] = vue.createTextVNode()), column.sortable ? (vue.openBlock(), vue.createBlock(_component_f_icon, {
-      key: 0,
-      class: vue.normalizeClass(_ctx.iconClasses(column)),
-      name: _ctx.iconName(column)
-    }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
-  }), 128))])]), _cache[17] || (_cache[17] = vue.createTextVNode()), (vue.openBlock(), vue.createElementBlock("tbody", {
-    ref: "tbodyElement",
-    key: _ctx.tbodyKey
-  }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, index) => {
-    return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-      key: _ctx.rowKey(row)
-    }, [vue.createElementVNode("tr", {
-      class: vue.normalizeClass(_ctx.rowClasses(row, index)),
-      "aria-label": _ctx.rowDescription(row),
-      "aria-expanded": _ctx.rowAriaExpanded(row),
-      "aria-level": _ctx.isExpandableTable ? 1 : void 0,
-      "aria-describedby": _ctx.getExpandableDescribedby(row),
-      tabindex: "0",
-      onKeydown: vue.withModifiers(($event) => _ctx.onKeydown($event, index), ["self"]),
-      onClick: ($event) => _ctx.onClick($event, row, index)
-    }, [_ctx.isExpandableTable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_13, [_ctx.hasExpandableContent(row) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [vue.createVNode(_component_f_icon, {
-      name: "arrow-right",
-      rotate: _ctx.isExpanded(row) ? "270" : "90"
-    }, null, 8, ["rotate"])])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_15, [vue.createElementVNode("div", _hoisted_16, [vue.createVNode(_component_f_checkbox_field, {
-      value: true,
-      "model-value": _ctx.isSelected(row),
-      onClick: vue.withModifiers(($event) => _ctx.onSelect(row), ["self"])
-    }, {
-      default: vue.withCtx(() => [_ctx.hasCheckboxDescription ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_17, [vue.renderSlot(_ctx.$slots, "checkbox-description", vue.mergeProps({
-        ref_for: true
-      }, {
+    function isSelected(row) {
+      return includeItem(row, selectedRows.value, props.keyAttribute);
+    }
+    function onKeydown$1(event, index) {
+      onKeydown({
+        rows: props.rows,
+        tr,
+        activate
+      }, event, index);
+    }
+    function onClick(event, row) {
+      const {
+        target
+      } = event;
+      const isRelevant = ["TD", "TH"].includes(target.nodeName);
+      if (isRelevant) {
+        const parent = target.parentElement;
+        activate(row, parent);
+      }
+    }
+    function activate(row, tr2) {
+      emit("click", row);
+      if (isExpandableTable.value && hasExpandableContent(row)) {
+        toggleExpanded(row);
+      }
+      if (!itemEquals(row, activeRow.value, props.keyAttribute)) {
+        emit("change", row);
+        setActiveRow(row);
+        if (tr2) {
+          tr2.focus();
+          const td = tr2.children[0];
+          forceRepaintIE11(td);
+        }
+      }
+    }
+    function rowDescription(row) {
+      const slot = slots["row-description"];
+      return renderSlotText(slot, {
         row
-      }))])) : vue.createCommentVNode("", true)]),
-      _: 2
-    }, 1032, ["model-value", "onClick"])])])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
-      ref_for: true
-    }, {
-      row
-    }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = vue.createTextVNode()), _ctx.isExpandableTable && _ctx.hasExpandableContent(row) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
-      key: 0
-    }, vue.renderList(_ctx.expandableRows(row), (expandableRow, expandableIndex) => {
-      return vue.openBlock(), vue.createElementBlock("tr", {
-        key: _ctx.rowKey(expandableRow),
-        "aria-level": "2",
-        class: vue.normalizeClass(_ctx.expandableRowClasses(row, expandableIndex))
-      }, [_cache[8] || (_cache[8] = vue.createElementVNode("td", {
-        class: "table__column--placeholder"
-      }, null, -1)), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18)) : vue.createCommentVNode("", true), _cache[10] || (_cache[10] = vue.createTextVNode()), !_ctx.hasExpandableSlot ? vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
-        key: 1,
-        ref_for: true
-      }, {
-        row: expandableRow
-      })) : (vue.openBlock(), vue.createElementBlock("td", {
-        key: 2,
-        class: "table__column table__column--indented",
-        colspan: _ctx.columns.length
-      }, [vue.renderSlot(_ctx.$slots, "expandable", vue.mergeProps({
-        ref_for: true
-      }, {
-        expandableRow,
-        parentRow: row
-      }))], 8, _hoisted_19))], 2);
-    }), 128)) : vue.createCommentVNode("", true)], 64);
-  }), 128)), _cache[13] || (_cache[13] = vue.createTextVNode()), _ctx.isEmpty && _ctx.columns.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_20, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
-    row: {}
-  })))])) : vue.createCommentVNode("", true), _cache[14] || (_cache[14] = vue.createTextVNode()), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [vue.createElementVNode("td", {
-    class: "table__column table__column--action",
-    colspan: _ctx.nbOfColumns
-  }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
-    row: {}
-  })))])) : vue.createCommentVNode("", true)]))], 16, _hoisted_1$h)], 2);
-}
-const FInteractiveTable = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$f]]);
+      });
+    }
+    function onSelect(row) {
+      var _a, _b;
+      if (includeItem(row, selectedRows.value, props.keyAttribute)) {
+        selectedRows.value = selectedRows.value.filter((i) => !itemEquals(i, row, props.keyAttribute));
+        emit("unselect", row);
+      } else {
+        selectedRows.value.push(row);
+        emit("select", row);
+      }
+      updateVModelWithSelectedRows();
+      (_b = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$forceUpdate();
+    }
+    function updateVModelWithSelectedRows() {
+      if (props.modelValue) {
+        emit("update:modelValue", selectedRows.value);
+      }
+    }
+    function rowClasses(row, index) {
+      const active = isActive(row) ? ["table__row--active"] : [];
+      const selected = isSelected(row) ? ["table__row--selected"] : [];
+      const isExpandableRow = isExpandableTable.value && hasExpandableContent(row);
+      const expandable = isExpandableRow ? ["table__row--expandable"] : [];
+      const expanded = isExpanded(row) ? ["table__row--expanded-border"] : [];
+      const striped = props.striped && index % 2 !== 0 ? ["table__row--striped"] : [];
+      return ["table__row", ...active, ...selected, ...striped, ...expandable, ...expanded];
+    }
+    function rowKey(row) {
+      const key = row[props.keyAttribute];
+      if (typeof key === "undefined") {
+        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in row`);
+      }
+      return String(key);
+    }
+    function columnClasses(column) {
+      const sortable = column.sortable ? ["table__column--sortable"] : [];
+      return ["table__column", `table__column--${column.type}`, ...sortable, column.size];
+    }
+    function iconClasses2(column) {
+      return getSortableIconClasses(column);
+    }
+    function iconName(column) {
+      return getSortableIconName(column);
+    }
+    function onClickColumnHeader(column) {
+      if (!column.sortable) {
+        return;
+      }
+      let columnName = column.name;
+      if (column.sort === FTableColumnSort.DESCENDING) {
+        columnName = "";
+        column.sort = FTableColumnSort.UNSORTED;
+      }
+      sort2(columnName, column.sort !== FTableColumnSort.ASCENDING);
+    }
+    function callbackOnSort(columnName, ascending) {
+      updateSortOrder(columns.value, columnName, ascending);
+    }
+    function callbackSortableColumns(columnNames) {
+      setSortableColumns(columns.value, columnNames);
+    }
+    function callbackAfterItemAdd(item) {
+      activate(item, null);
+    }
+    function callbackBeforeItemDelete(item) {
+      if (props.rows.length === 0) {
+        return;
+      }
+      let targetIndex = props.rows.indexOf(item) - 1;
+      if (targetIndex < 0 && props.rows.length > 1) {
+        targetIndex = 1;
+      } else if (targetIndex < 0) {
+        targetIndex = 0;
+      }
+      activate(props.rows[targetIndex], tr.value[targetIndex]);
+    }
+    function escapeNewlines(value) {
+      return value.replace(/\n/g, "<br/>");
+    }
+    function updateActiveRowFromVModel() {
+      if (props.active === void 0) {
+        setActiveRow(void 0);
+      } else if (!itemEquals(props.active, activeRow.value, props.keyAttribute)) {
+        setActiveRow(props.active);
+      }
+    }
+    function setActiveRow(row) {
+      activeRow.value = row;
+      emit("update:active", activeRow.value);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(wrapperClasses.value)
+      }, [vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.createElementVNode("table", vue.mergeProps({
+        class: ["table", tableClasses.value],
+        role: tableRole.value
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$d, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+        return vue.openBlock(), vue.createElementBlock("col", {
+          key: column.id,
+          class: vue.normalizeClass(column.size)
+        }, null, 2);
+      }), 128))]), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_5$6, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$4, [vue.createElementVNode("span", _hoisted_7$3, vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.select", "Expandera")), 1)])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_8$3, [vue.createElementVNode("span", _hoisted_9$3, vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.select", "Markera")), 1)])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
+        return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
+          key: column.id,
+          scope: "col",
+          class: columnClasses(column)
+        }, vue.toHandlers(column.sortable ? {
+          click: () => onClickColumnHeader(column)
+        } : {}, true)), [vue.createElementVNode("span", {
+          innerHTML: escapeNewlines(column.title)
+        }, null, 8, _hoisted_10$2), _cache[2] || (_cache[2] = vue.createTextVNode()), column.sortable ? (vue.openBlock(), vue.createBlock(vue.unref(FIcon), {
+          key: 0,
+          class: vue.normalizeClass(iconClasses2(column)),
+          name: iconName(column)
+        }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
+      }), 128))])]), _cache[17] || (_cache[17] = vue.createTextVNode()), (vue.openBlock(), vue.createElementBlock("tbody", {
+        ref: "tbodyElement",
+        key: tbodyKey.value
+      }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.rows, (row, index) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          key: rowKey(row)
+        }, [vue.createElementVNode("tr", {
+          class: vue.normalizeClass(rowClasses(row, index)),
+          "aria-label": rowDescription(row),
+          "aria-expanded": vue.unref(rowAriaExpanded)(row),
+          "aria-level": vue.unref(isExpandableTable) ? 1 : void 0,
+          "aria-describedby": vue.unref(getExpandableDescribedby)(row),
+          tabindex: "0",
+          onKeydown: vue.withModifiers(($event) => onKeydown$1($event, index), ["self"]),
+          onClick: ($event) => onClick($event, row)
+        }, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_13, [vue.unref(hasExpandableContent)(row) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [vue.createVNode(vue.unref(FIcon), {
+          name: "arrow-right",
+          rotate: vue.unref(isExpanded)(row) ? "270" : "90"
+        }, null, 8, ["rotate"])])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_15, [vue.createElementVNode("div", _hoisted_16, [vue.createVNode(vue.unref(FCheckboxField), {
+          value: true,
+          "model-value": isSelected(row),
+          onClick: vue.withModifiers(($event) => onSelect(row), ["self"])
+        }, {
+          default: vue.withCtx(() => [hasCheckboxDescription.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_17, [vue.renderSlot(_ctx.$slots, "checkbox-description", vue.mergeProps({
+            ref_for: true
+          }, {
+            row
+          }))])) : vue.createCommentVNode("", true)]),
+          _: 2
+        }, 1032, ["model-value", "onClick"])])])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+          ref_for: true
+        }, {
+          row
+        }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = vue.createTextVNode()), vue.unref(isExpandableTable) && vue.unref(hasExpandableContent)(row) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+          key: 0
+        }, vue.renderList(vue.unref(expandableRows)(row), (expandableRow, expandableIndex) => {
+          return vue.openBlock(), vue.createElementBlock("tr", {
+            key: rowKey(expandableRow),
+            "aria-level": "2",
+            class: vue.normalizeClass(vue.unref(expandableRowClasses)(row, expandableIndex))
+          }, [_cache[8] || (_cache[8] = vue.createElementVNode("td", {
+            class: "table__column--placeholder"
+          }, null, -1)), _cache[9] || (_cache[9] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18)) : vue.createCommentVNode("", true), _cache[10] || (_cache[10] = vue.createTextVNode()), !vue.unref(hasExpandableSlot) ? vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+            key: 1,
+            ref_for: true
+          }, {
+            row: expandableRow
+          })) : (vue.openBlock(), vue.createElementBlock("td", {
+            key: 2,
+            class: "table__column table__column--indented",
+            colspan: columns.value.length
+          }, [vue.renderSlot(_ctx.$slots, "expandable", vue.mergeProps({
+            ref_for: true
+          }, {
+            expandableRow,
+            parentRow: row
+          }))], 8, _hoisted_19))], 2);
+        }), 128)) : vue.createCommentVNode("", true)], 64);
+      }), 128)), _cache[13] || (_cache[13] = vue.createTextVNode()), isEmpty.value && columns.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_20, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+        row: {}
+      })))])) : vue.createCommentVNode("", true), _cache[14] || (_cache[14] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_21, [vue.createElementVNode("td", {
+        class: "table__column table__column--action",
+        colspan: nbOfColumns.value
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
+        row: {}
+      })))])) : vue.createCommentVNode("", true)]))], 16, _hoisted_1$h)], 2);
+    };
+  }
+});
 const _sfc_main$g = vue.defineComponent({
   name: "FLayoutApplicationTemplate",
   computed: {
@@ -13662,12 +14449,12 @@ const _hoisted_5$5 = {
   key: 0,
   class: "layout-application-template__footer"
 };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [_ctx.showHeader || _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$c, [_ctx.showHeader ? vue.renderSlot(_ctx.$slots, "header", {
     key: 0
   }) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_3$8, [vue.renderSlot(_ctx.$slots, "top-navigation")])) : vue.createCommentVNode("", true)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("main", _hoisted_4$7, [vue.renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.showFooter ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$5, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)], 512)]);
 }
-const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$e]]);
+const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
   if (target === null) {
     return {};
@@ -13864,7 +14651,7 @@ const _hoisted_4$6 = {
   key: 1,
   class: "layout-navigation__navigation__inner--minimized"
 };
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [vue.createElementVNode("nav", {
     id: "layout-navigation__navigation",
@@ -13915,7 +14702,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     style: vue.normalizeStyle(_ctx.primaryStyle)
   }, [vue.renderSlot(_ctx.$slots, "default")], 6)]);
 }
-const FLayoutLeftPanel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$d]]);
+const FLayoutLeftPanel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$c]]);
 class FRightPanelServiceImpl {
   constructor() {
     _defineProperty(this, "focusedElementBeforeOpenining", null);
@@ -14068,7 +14855,7 @@ const _hoisted_1$e = {
 const _hoisted_2$a = {
   class: "layout-secondary__secondary__inner"
 };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [vue.createElementVNode("div", {
     id: "layout-secondary__primary",
@@ -14107,13 +14894,34 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])], 6)])], 4)) : vue.createCommentVNode("", true)]);
 }
-const FLayoutRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$c]]);
-const _sfc_main$d = vue.defineComponent({
-  name: "FList",
-  components: {
-    FCheckboxField
-  },
-  mixins: [TranslationMixin],
+const FLayoutRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$b]]);
+const _hoisted_1$d = {
+  key: 0,
+  class: "list"
+};
+const _hoisted_2$9 = {
+  key: 0,
+  class: "list__item"
+};
+const _hoisted_3$6 = {
+  class: "list__item__itempane"
+};
+const _hoisted_4$5 = ["tabindex"];
+const _hoisted_5$4 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
+const _hoisted_6$3 = ["onClick"];
+const _hoisted_7$2 = {
+  class: "list__item__selectpane__input"
+};
+const _hoisted_8$2 = ["id"];
+const _hoisted_9$2 = {
+  key: 0,
+  class: "list__item"
+};
+const _hoisted_10$1 = {
+  class: "list__item__itempane"
+};
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  __name: "FList",
   props: {
     /**
      * The items to be listed.
@@ -14173,273 +14981,234 @@ const _sfc_main$d = vue.defineComponent({
       default: () => logic.ElementIdService.generateElementId()
     }
   },
-  emits: ["change", "click", "unselect", "update:modelValue", "select", "update:active"],
-  setup() {
-    return ActivateItemInjected();
-  },
-  data() {
-    return {
-      selectedItems: [],
-      activeItem: void 0
-    };
-  },
-  computed: {
-    isEmpty() {
-      return this.items.length === 0;
-    },
-    ariaActiveDescendant() {
-      return this.activeItem ? this.getItemId(this.activeItem) : void 0;
-    }
-  },
-  watch: {
-    items: {
+  emits: ["change", "click", "select", "unselect", "update:active", "update:modelValue"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const slots = vue.useSlots();
+    const {
+      registerCallbackAfterItemAdd,
+      registerCallbackBeforeItemDelete
+    } = ActivateItemInjected();
+    const selectedItems = vue.ref([]);
+    const activeItem = vue.ref(void 0);
+    const ulElement = vue.ref();
+    const props = __props;
+    const emit = __emit;
+    const isEmpty = vue.computed(() => {
+      return props.items.length === 0;
+    });
+    vue.watch(() => props.items, () => {
+      updateSelectedItemsFromVModel();
+    }, {
       deep: true,
-      immediate: true,
-      handler: function() {
-        this.updateSelectedItemsFromVModel();
-      }
-    },
-    modelValue: {
+      immediate: true
+    });
+    vue.watch(() => props.modelValue, () => {
+      updateSelectedItemsFromVModel();
+    }, {
       deep: true,
-      immediate: true,
-      handler: function() {
-        this.updateSelectedItemsFromVModel();
-      }
-    },
-    active: {
-      immediate: true,
-      handler: function() {
-        this.updateActiveItemFromVModel();
-      }
-    }
-  },
-  mounted() {
-    if (this.selectable && this.checkbox) {
-      if (!this.$slots["screenreader"]) {
-        throw Error('Slot "screenreader" is required when having "selectable" & "checkbox" option.');
+      immediate: true
+    });
+    vue.watch(() => props.active, () => {
+      updateActiveItemFromVModel();
+    }, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      if (props.selectable && props.checkbox) {
+        if (!slots["screenreader"]) {
+          throw Error('Slot "screenreader" is required when having "selectable" & "checkbox" option.');
+        }
+        registerCallbackAfterItemAdd(callbackAfterItemAdd);
+        registerCallbackBeforeItemDelete(callbackBeforeItemDelete);
       }
-      this.registerCallbackAfterItemAdd(this.callbackAfterItemAdd);
-      this.registerCallbackBeforeItemDelete(this.callbackBeforeItemDelete);
+    });
+    function getLiElements() {
+      const element = getElementFromVueRef(ulElement.value);
+      return Array.from(element.children);
     }
-  },
-  methods: {
-    getLiElements() {
-      const ulElement = getElementFromVueRef(this.$refs["ulElement"]);
-      return Array.from(ulElement.children);
-    },
-    itemKey(item) {
-      const key = item[this.keyAttribute];
+    function itemKey(item) {
+      const key = item[props.keyAttribute];
       if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${this.keyAttribute}]' is missing in item`);
+        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in item`);
       }
       return String(key);
-    },
-    isSelected(item) {
-      return includeItem(item, this.selectedItems, this.keyAttribute);
-    },
-    itemClasses(item) {
+    }
+    function isSelected(item) {
+      return includeItem(item, selectedItems.value, props.keyAttribute);
+    }
+    function itemClasses(item) {
       return {
-        "list__item--selected": this.isSelected(item),
-        "list__item--active": this.isActive(item)
+        "list__item--selected": isSelected(item),
+        "list__item--active": isActive(item)
       };
-    },
-    getAriaSelected(item) {
-      return String(itemEquals(this.activeItem, item, this.keyAttribute));
-    },
-    onSelect(item) {
-      if (includeItem(item, this.selectedItems, this.keyAttribute)) {
-        this.selectedItems = this.selectedItems.filter((i) => !itemEquals(i, item, this.keyAttribute));
-        this.$emit("unselect", item);
+    }
+    function onSelect(item) {
+      var _a, _b;
+      if (includeItem(item, selectedItems.value, props.keyAttribute)) {
+        selectedItems.value = selectedItems.value.filter((i) => !itemEquals(i, item, props.keyAttribute));
+        emit("unselect", item);
       } else {
-        this.selectedItems.push(item);
-        this.$emit("select", item);
+        selectedItems.value.push(item);
+        emit("select", item);
       }
-      this.updateVModelWithSelectedItems();
-      this.$forceUpdate();
-    },
-    setActiveItem(item) {
-      this.$emit("click", item);
-      if (!itemEquals(item, this.activeItem, this.keyAttribute)) {
-        this.$emit("change", item);
-        this.activeItem = item;
-        this.$emit("update:active", this.activeItem);
+      updateVModelWithSelectedItems();
+      (_b = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$forceUpdate();
+    }
+    function setActiveItem(item) {
+      emit("click", item);
+      if (!itemEquals(item, activeItem.value, props.keyAttribute)) {
+        emit("change", item);
+        activeItem.value = item;
+        emit("update:active", activeItem.value);
       }
-    },
-    onItemClick(event, index, item) {
-      this.setActiveItem(item);
-    },
-    updateVModelWithSelectedItems() {
-      if (this.modelValue) {
-        this.$emit("update:modelValue", this.selectedItems);
+    }
+    function onItemClick(event, index, item) {
+      setActiveItem(item);
+    }
+    function updateVModelWithSelectedItems() {
+      if (props.modelValue) {
+        emit("update:modelValue", selectedItems.value);
       }
-    },
-    updateSelectedItemsFromVModel() {
-      if (Array.isArray(this.modelValue)) {
-        this.selectedItems = this.modelValue.filter((item) => {
-          return includeItem(item, this.items, this.keyAttribute);
+    }
+    function updateSelectedItemsFromVModel() {
+      if (Array.isArray(props.modelValue)) {
+        selectedItems.value = props.modelValue.filter((item) => {
+          return includeItem(item, props.items, props.keyAttribute);
         });
       } else {
-        this.selectedItems = [];
+        selectedItems.value = [];
       }
-    },
-    updateActiveItemFromVModel() {
-      if (this.active === void 0) {
-        this.activeItem = void 0;
-      } else if (!itemEquals(this.active, this.activeItem, this.keyAttribute)) {
-        this.activeItem = this.active;
+    }
+    function updateActiveItemFromVModel() {
+      if (props.active === void 0) {
+        activeItem.value = void 0;
+      } else if (!itemEquals(props.active, activeItem.value, props.keyAttribute)) {
+        activeItem.value = props.active;
       }
-    },
-    onItemKeyDown(event, item) {
+    }
+    function onItemKeyDown(event, item) {
       switch (event.key) {
         case "Up":
         case "Down":
         case "ArrowUp":
         case "ArrowDown":
           event.preventDefault();
-          handleKeyboardFocusNavigation(event.key, event.target, this.getLiElements());
+          handleKeyboardFocusNavigation(event.key, event.target, getLiElements());
           break;
         case " ":
         case "Spacebar":
           event.preventDefault();
-          this.setActiveItem(item);
+          setActiveItem(item);
           break;
       }
-    },
-    // Unique id to connect aria-labelledby with readonly label
-    getAriaLabelledbyId(item) {
-      return `${this.elementId}_${this.itemKey(item)}`;
-    },
-    // Unique id to connect aria-labelledby with readonly label
-    getItemId(item) {
-      return `${this.elementId}_item_${this.itemKey(item)}`;
-    },
-    // Focus effect is done with box-shadow.
-    // By setting position to relative the
-    // item and box-shadow is drawn with a higher z-index,
-    // thus no focus border under other list items.
-    onItemFocus(event) {
+    }
+    function getAriaLabelledbyId(item) {
+      return `${props.elementId}_${itemKey(item)}`;
+    }
+    function getItemId(item) {
+      return `${props.elementId}_item_${itemKey(item)}`;
+    }
+    function onItemFocus(event) {
       if (event && event.target) {
         event.target.style.position = "relative";
       }
-    },
-    onItemBlur(event) {
+    }
+    function onItemBlur(event) {
       if (event && event.target) {
         event.target.style.position = "static";
       }
-    },
-    callbackAfterItemAdd(item) {
-      this.setActiveItem(item);
-    },
-    callbackBeforeItemDelete(item) {
-      if (this.items.length === 0) {
+    }
+    function callbackAfterItemAdd(item) {
+      setActiveItem(item);
+    }
+    function callbackBeforeItemDelete(item) {
+      if (props.items.length === 0) {
         return;
       }
-      let targetIndex = this.items.indexOf(item) - 1;
-      if (targetIndex < 0 && this.items.length > 1) {
+      let targetIndex = props.items.indexOf(item) - 1;
+      if (targetIndex < 0 && props.items.length > 1) {
         targetIndex = 1;
       } else if (targetIndex < 0) {
         targetIndex = 0;
       }
-      this.setActiveItem(this.items[targetIndex]);
-      if (this.getLiElements()[targetIndex]) {
-        this.getLiElements()[targetIndex].focus();
+      setActiveItem(props.items[targetIndex]);
+      const targetElement = getLiElements()[targetIndex];
+      if (targetElement) {
+        targetElement.focus();
       }
-    },
-    isActive(item) {
-      return this.checkbox && itemEquals(this.activeItem, item, this.keyAttribute);
     }
+    function isActive(item) {
+      return props.checkbox && itemEquals(activeItem.value, item, props.keyAttribute);
+    }
+    return (_ctx, _cache) => {
+      return !__props.selectable ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$d, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+        return vue.openBlock(), vue.createElementBlock("li", {
+          key: itemKey(item),
+          class: "list__item"
+        }, [vue.createElementVNode("div", {
+          ref_for: true,
+          ref: "listItemPanes",
+          class: "list__item__itempane"
+        }, [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+          ref_for: true
+        }, {
+          item
+        }))], 512)]);
+      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$9, [vue.createElementVNode("div", _hoisted_3$6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
+        key: 1,
+        ref_key: "ulElement",
+        ref: ulElement,
+        class: "list list--hover",
+        tabindex: __props.checkbox ? 0 : void 0
+      }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index) => {
+        return vue.openBlock(), vue.createElementBlock("li", {
+          id: getItemId(item),
+          key: itemKey(item),
+          "aria-labelledby": getItemId(item),
+          class: vue.normalizeClass([itemClasses(item), "list__item"]),
+          tabindex: __props.checkbox ? 0 : void 0,
+          onKeydown: vue.withModifiers(($event) => onItemKeyDown($event, item), ["self"]),
+          onFocus: vue.withModifiers(onItemFocus, ["self"]),
+          onBlur: vue.withModifiers(onItemBlur, ["self"])
+        }, [__props.checkbox ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "list__item__selectpane",
+          onClick: vue.withModifiers(($event) => onSelect(item), ["self"])
+        }, [vue.createElementVNode("div", _hoisted_7$2, [vue.createVNode(vue.unref(FCheckboxField), {
+          value: true,
+          "model-value": isSelected(item),
+          onClick: vue.withModifiers(($event) => onSelect(item), ["self"])
+        }, {
+          default: vue.withCtx(() => [vue.createElementVNode("span", {
+            id: getAriaLabelledbyId(item),
+            class: "sr-only"
+          }, [vue.renderSlot(_ctx.$slots, "screenreader", vue.mergeProps({
+            ref_for: true
+          }, {
+            item
+          }))], 8, _hoisted_8$2)]),
+          _: 2
+        }, 1032, ["model-value", "onClick"])])], 8, _hoisted_6$3)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.checkbox ? "div" : "a"), {
+          ref_for: true,
+          ref: "listItemPanes",
+          href: !__props.checkbox ? "javascript:" : void 0,
+          class: "list__item__itempane",
+          onClick: ($event) => onItemClick($event, index, item)
+        }, {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
+            ref_for: true
+          }, {
+            item
+          }))]),
+          _: 2
+        }, 1032, ["href", "onClick"]))], 42, _hoisted_5$4);
+      }), 128)), _cache[2] || (_cache[2] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$2, [vue.createElementVNode("div", _hoisted_10$1, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)], 8, _hoisted_4$5));
+    };
   }
 });
-const _hoisted_1$d = {
-  key: 0,
-  class: "list"
-};
-const _hoisted_2$9 = {
-  key: 0,
-  class: "list__item"
-};
-const _hoisted_3$6 = {
-  class: "list__item__itempane"
-};
-const _hoisted_4$5 = ["tabindex"];
-const _hoisted_5$4 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
-const _hoisted_6$3 = ["onClick"];
-const _hoisted_7$2 = {
-  class: "list__item__selectpane__input"
-};
-const _hoisted_8$2 = ["id"];
-const _hoisted_9$2 = {
-  key: 0,
-  class: "list__item"
-};
-const _hoisted_10$1 = {
-  class: "list__item__itempane"
-};
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_checkbox_field = vue.resolveComponent("f-checkbox-field");
-  return !_ctx.selectable ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$d, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
-    return vue.openBlock(), vue.createElementBlock("li", {
-      key: _ctx.itemKey(item),
-      class: "list__item"
-    }, [vue.createElementVNode("div", {
-      ref_for: true,
-      ref: "listItemPanes",
-      class: "list__item__itempane"
-    }, [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
-      ref_for: true
-    }, {
-      item
-    }))], 512)]);
-  }), 128)), _cache[2] || (_cache[2] = vue.createTextVNode()), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$9, [vue.createElementVNode("div", _hoisted_3$6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(_ctx.$t("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
-    key: 1,
-    ref: "ulElement",
-    class: "list list--hover",
-    tabindex: _ctx.checkbox ? 0 : void 0
-  }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
-    return vue.openBlock(), vue.createElementBlock("li", {
-      id: _ctx.getItemId(item),
-      key: _ctx.itemKey(item),
-      "aria-labelledby": _ctx.getItemId(item),
-      class: vue.normalizeClass([_ctx.itemClasses(item), "list__item"]),
-      tabindex: _ctx.checkbox ? 0 : void 0,
-      onKeydown: vue.withModifiers(($event) => _ctx.onItemKeyDown($event, item), ["self"]),
-      onFocus: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onItemFocus && _ctx.onItemFocus(...args), ["self"])),
-      onBlur: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.onItemBlur && _ctx.onItemBlur(...args), ["self"]))
-    }, [_ctx.checkbox ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 0,
-      class: "list__item__selectpane",
-      onClick: vue.withModifiers(($event) => _ctx.onSelect(item), ["self"])
-    }, [vue.createElementVNode("div", _hoisted_7$2, [vue.createVNode(_component_f_checkbox_field, {
-      value: true,
-      "model-value": _ctx.isSelected(item),
-      onClick: vue.withModifiers(($event) => _ctx.onSelect(item), ["self"])
-    }, {
-      default: vue.withCtx(() => [vue.createElementVNode("span", {
-        id: _ctx.getAriaLabelledbyId(item),
-        class: "sr-only"
-      }, [vue.renderSlot(_ctx.$slots, "screenreader", vue.mergeProps({
-        ref_for: true
-      }, {
-        item
-      }))], 8, _hoisted_8$2)]),
-      _: 2
-    }, 1032, ["model-value", "onClick"])])], 8, _hoisted_6$3)) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.checkbox ? "div" : "a"), {
-      ref_for: true,
-      ref: "listItemPanes",
-      href: !_ctx.checkbox ? "javascript:" : void 0,
-      class: "list__item__itempane",
-      onClick: ($event) => _ctx.onItemClick($event, index, item)
-    }, {
-      default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", vue.mergeProps({
-        ref_for: true
-      }, {
-        item
-      }))]),
-      _: 2
-    }, 1032, ["href", "onClick"]))], 42, _hoisted_5$4);
-  }), 128)), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$2, [vue.createElementVNode("div", _hoisted_10$1, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(_ctx.$t("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)], 8, _hoisted_4$5));
-}
-const FList = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$b]]);
 const _sfc_main$c = vue.defineComponent({
   name: "FLoader",
   mixins: [TranslationMixin],
@@ -16516,10 +17285,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "wizard-step-body",
       onSubmit: _ctx.onSubmit
     }, {
-      "error-message": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
-        stepNumber: _ctx.stepNumber,
-        totalSteps: _ctx.totalSteps
-      })), () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.errorlist.title", "Oj, du har glömt att fylla i något. Gå till:")), 1)])]),
+      "error-message": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.errorlist.title", "Oj, du har glömt att fylla i något. Gå till:")), 1)])]),
       default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default"), _cache[14] || (_cache[14] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10, [vue.createElementVNode("button", {
         "data-test": "submit-button",
         "data-disabled": _ctx.ignoreClick ? "true" : "false",
@@ -16537,7 +17303,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: "button button--secondary button-group__item button--large",
         onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onCancel && _ctx.onCancel(...args))
-      }, [vue.renderSlot(_ctx.$slots, "cancel-button-text", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.button.cancel.text", "Avbryt")), 1)])])])]),
+      }, [vue.renderSlot(_ctx.$slots, "cancel-button-text", vue.normalizeProps(vue.guardReactiveProps({
+        stepNumber: _ctx.stepNumber,
+        totalSteps: _ctx.totalSteps
+      })), () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.wizard-step.button.cancel.text", "Avbryt")), 1)])])])]),
       _: 3
     }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit"])]),
     _: 3
@@ -16560,9 +17329,9 @@ exports.FClearingnumberTextField = _sfc_main$w;
 exports.FConfirmModal = FConfirmModal;
 exports.FContextMenu = FContextMenu;
 exports.FCrudButton = FCrudButton;
-exports.FCrudDataset = FCrudDataset;
+exports.FCrudDataset = _sfc_main$I;
 exports.FCurrencyTextField = _sfc_main$A;
-exports.FDataTable = FDataTable;
+exports.FDataTable = _sfc_main$o;
 exports.FDatepickerField = FDatepickerField;
 exports.FDialogueTree = FDialogueTree;
 exports.FEmailTextField = FEmailTextField;
@@ -16577,14 +17346,14 @@ exports.FFileSelector = FFileSelector;
 exports.FFormModal = FFormModal;
 exports.FFormModalAction = FValidationFormAction;
 exports.FIcon = FIcon;
-exports.FInteractiveTable = FInteractiveTable;
+exports.FInteractiveTable = _sfc_main$h;
 exports.FKUIConfigButtonOrder = FKUIConfigButtonOrder;
 exports.FLabel = FLabel;
 exports.FLayoutApplicationTemplate = FLayoutApplicationTemplate;
 exports.FLayoutLeftPanel = FLayoutLeftPanel;
 exports.FLayoutRightPanel = FLayoutRightPanel;
 exports.FLayoutRightPanelService = FLayoutRightPanelService;
-exports.FList = FList;
+exports.FList = _sfc_main$d;
 exports.FLoader = FLoader;
 exports.FLogo = _sfc_main$b;
 exports.FMessageBox = FMessageBox;
@@ -16604,7 +17373,7 @@ exports.FProgressbar = _sfc_main$5;
 exports.FRadioField = FRadioField;
 exports.FSearchTextField = FSearchTextField;
 exports.FSelectField = FSelectField;
-exports.FSortFilterDataset = FSortFilterDataset;
+exports.FSortFilterDataset = _sfc_main$p;
 exports.FSortFilterDatasetInjected = FSortFilterDatasetInjected;
 exports.FStaticField = FStaticField;
 exports.FTableColumn = FTableColumn;