@fkui/vue-labs 6.17.0 → 6.18.0

package/dist/cjs/index.cjs.js

@@ -2268,7 +2268,7 @@ const validators = [hoursMinutesValidator, greaterThanTimeValidator, lessThanTim
 for (const validator of validators) {
   logic.ValidationService.registerValidator(validator);
 }
-const _sfc_main = vue.defineComponent({
+const _sfc_main$a = vue.defineComponent({
   name: "XTimeTextField",
   extends: vue$1.FTextField,
   mixins: [vue$1.TranslationMixin],
@@ -2302,10 +2302,1711 @@ const _sfc_main = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
+var es_array_push = {};
+var isArray;
+var hasRequiredIsArray;
+function requireIsArray() {
+  if (hasRequiredIsArray) return isArray;
+  hasRequiredIsArray = 1;
+  var classof2 = requireClassofRaw();
+  isArray = Array.isArray || function isArray2(argument) {
+    return classof2(argument) === "Array";
+  };
+  return isArray;
+}
+var arraySetLength;
+var hasRequiredArraySetLength;
+function requireArraySetLength() {
+  if (hasRequiredArraySetLength) return arraySetLength;
+  hasRequiredArraySetLength = 1;
+  var DESCRIPTORS = requireDescriptors();
+  var isArray2 = requireIsArray();
+  var $TypeError = TypeError;
+  var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+  var SILENT_ON_NON_WRITABLE_LENGTH_SET = DESCRIPTORS && !(function() {
+    if (this !== void 0) return true;
+    try {
+      Object.defineProperty([], "length", {
+        writable: false
+      }).length = 1;
+    } catch (error) {
+      return error instanceof TypeError;
+    }
+  })();
+  arraySetLength = SILENT_ON_NON_WRITABLE_LENGTH_SET ? function(O, length) {
+    if (isArray2(O) && !getOwnPropertyDescriptor(O, "length").writable) {
+      throw new $TypeError("Cannot set read only .length");
+    }
+    return O.length = length;
+  } : function(O, length) {
+    return O.length = length;
+  };
+  return arraySetLength;
+}
+var doesNotExceedSafeInteger;
+var hasRequiredDoesNotExceedSafeInteger;
+function requireDoesNotExceedSafeInteger() {
+  if (hasRequiredDoesNotExceedSafeInteger) return doesNotExceedSafeInteger;
+  hasRequiredDoesNotExceedSafeInteger = 1;
+  var $TypeError = TypeError;
+  var MAX_SAFE_INTEGER = 9007199254740991;
+  doesNotExceedSafeInteger = function(it) {
+    if (it > MAX_SAFE_INTEGER) throw $TypeError("Maximum allowed index exceeded");
+    return it;
+  };
+  return doesNotExceedSafeInteger;
+}
+var hasRequiredEs_array_push;
+function requireEs_array_push() {
+  if (hasRequiredEs_array_push) return es_array_push;
+  hasRequiredEs_array_push = 1;
+  var $ = require_export();
+  var toObject2 = requireToObject();
+  var lengthOfArrayLike2 = requireLengthOfArrayLike();
+  var setArrayLength = requireArraySetLength();
+  var doesNotExceedSafeInteger2 = requireDoesNotExceedSafeInteger();
+  var fails2 = requireFails();
+  var INCORRECT_TO_LENGTH = fails2(function() {
+    return [].push.call({
+      length: 4294967296
+    }, 1) !== 4294967297;
+  });
+  var properErrorOnNonWritableLength = function() {
+    try {
+      Object.defineProperty([], "length", {
+        writable: false
+      }).push();
+    } catch (error) {
+      return error instanceof TypeError;
+    }
+  };
+  var FORCED = INCORRECT_TO_LENGTH || !properErrorOnNonWritableLength();
+  $({
+    target: "Array",
+    proto: true,
+    arity: 1,
+    forced: FORCED
+  }, {
+    // eslint-disable-next-line no-unused-vars -- required for `.length`
+    push: function push(item) {
+      var O = toObject2(this);
+      var len = lengthOfArrayLike2(O);
+      var argCount = arguments.length;
+      doesNotExceedSafeInteger2(len + argCount);
+      for (var i = 0; i < argCount; i++) {
+        O[len] = arguments[i];
+        len++;
+      }
+      setArrayLength(O, len);
+      return len;
+    }
+  });
+  return es_array_push;
+}
+requireEs_array_push();
+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 call = requireFunctionCall();
+  var iterate2 = requireIterate();
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  var iteratorClose2 = requireIteratorClose();
+  var iteratorHelperWithoutClosingOnEarlyError2 = requireIteratorHelperWithoutClosingOnEarlyError();
+  var someWithoutClosingOnEarlyError = iteratorHelperWithoutClosingOnEarlyError2("some", TypeError);
+  $({
+    target: "Iterator",
+    proto: true,
+    real: true,
+    forced: someWithoutClosingOnEarlyError
+  }, {
+    some: function some(predicate) {
+      anObject2(this);
+      try {
+        aCallable2(predicate);
+      } catch (error) {
+        iteratorClose2(this, "throw", error);
+      }
+      if (someWithoutClosingOnEarlyError) return call(someWithoutClosingOnEarlyError, this, 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();
+const internalKey = vue$1.getInternalKey();
+const navKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+let prevCellIndex = void 0;
+function rowKey(row) {
+  return String(row[internalKey]);
+}
+function walk(array, visit, childKey, level = 1) {
+  for (const item of array) {
+    const visitChildren = visit(item, level);
+    if (visitChildren && childKey && item[childKey]) {
+      walk(item[childKey], visit, childKey, level + 1);
+    }
+  }
+}
+function getRowIndexes(rows, expandableAttribute) {
+  const array = [];
+  walk(rows, (row) => {
+    array.push(String(row[internalKey]));
+    return true;
+  }, expandableAttribute);
+  return array;
+}
+function getCellTarget(tableElement, rowIndex, cellIndex) {
+  return tableElement.rows[rowIndex].cells[cellIndex];
+}
+function isTd(element) {
+  return element !== null && element.cellIndex !== void 0;
+}
+function getTr(td) {
+  return td.parentElement;
+}
+function getTable(tr) {
+  return tr.closest("table");
+}
+function getLastRowIndex(tableElement) {
+  return tableElement.rows.length - 1;
+}
+function getLastCellIndex(tableElement) {
+  return tableElement.rows[0].cells.length - 1;
+}
+function getVerticalNavIndex(table, from, to) {
+  const target = {
+    ...to
+  };
+  const currentMax = table.rows[from.row].cells.length - 1;
+  const targetMax = table.rows[to.row].cells.length - 1;
+  if (prevCellIndex && currentMax < targetMax) {
+    target.cell = prevCellIndex;
+    prevCellIndex = void 0;
+  } else {
+    target.cell = targetMax < from.cell ? targetMax : from.cell;
+  }
+  if (targetMax < from.cell) {
+    prevCellIndex = from.cell;
+  }
+  return target;
+}
+function navigate(e, table, from, last) {
+  if (from.row === void 0 || from.cell === void 0 || last.row === void 0 || last.cell === void 0) {
+    return;
+  }
+  if (!navKeys.includes(e.code)) {
+    return;
+  }
+  e.preventDefault();
+  if (e.code === "ArrowLeft") {
+    if (from.cell === 0) {
+      return;
+    }
+    prevCellIndex = void 0;
+    return {
+      row: from.row,
+      cell: from.cell - 1
+    };
+  }
+  if (e.code === "ArrowRight") {
+    if (from.cell === last.cell) {
+      return;
+    }
+    const lastCellIndex = table.rows[from.row].cells.length - 1;
+    if (lastCellIndex <= from.cell) {
+      return;
+    }
+    prevCellIndex = void 0;
+    return {
+      row: from.row,
+      cell: from.cell + 1
+    };
+  }
+  if (e.code === "ArrowUp") {
+    if (from.row === 0) {
+      return;
+    }
+    const to = {
+      row: from.row - 1,
+      cell: from.cell
+    };
+    return getVerticalNavIndex(table, from, to);
+  }
+  if (e.code === "ArrowDown") {
+    if (from.row === last.row) {
+      return;
+    }
+    const to = {
+      row: from.row + 1,
+      cell: from.cell
+    };
+    return getVerticalNavIndex(table, from, to);
+  }
+  if (e.code === "Home") {
+    if (e.ctrlKey) {
+      return {
+        row: 1,
+        cell: 0
+      };
+    } else {
+      return {
+        row: from.row,
+        cell: 0
+      };
+    }
+  }
+  if (e.code === "End") {
+    if (e.ctrlKey) {
+      return {
+        row: last.row,
+        cell: table.rows[last.row].cells.length - 1
+      };
+    } else {
+      return {
+        row: from.row,
+        cell: table.rows[from.row].cells.length - 1
+      };
+    }
+  }
+}
+function getMetaRows(keyedRows, expandedKeys, expandableAttribute) {
+  const rowIndexes = getRowIndexes(keyedRows);
+  const array = [];
+  walk(keyedRows, (row, level) => {
+    const isExpandable = Boolean(expandableAttribute && row[expandableAttribute]);
+    const isExpanded = isExpandable && expandedKeys.includes(rowKey(row));
+    array.push({
+      key: rowKey(row),
+      row,
+      rowIndex: rowIndexes.indexOf(rowKey(row)) + 1,
+      level: expandableAttribute ? level : void 0,
+      isExpandable,
+      isExpanded
+    });
+    return isExpanded;
+  }, expandableAttribute);
+  return array;
+}
+function getTd(element) {
+  if (isTd(element)) {
+    return element;
+  } else {
+    const closest = element.closest("td");
+    if (!closest) {
+      throw new Error("expected td parent");
+    }
+    return closest;
+  }
+}
+function setDefaultCellTarget(table) {
+  const target = getCellTarget(table, 1, 0);
+  dispatchActivateCellEvent(target, {
+    focus: false
+  });
+  return target;
+}
+function maybeNavigateToCell(e) {
+  let newCellTarget = e.target;
+  const td = getTd(e.target);
+  const tr = getTr(td);
+  const table = getTable(tr);
+  const fromIndex = {
+    row: tr.rowIndex,
+    cell: td.cellIndex
+  };
+  const lastIndex = {
+    row: getLastRowIndex(table),
+    cell: getLastCellIndex(table)
+  };
+  const navigateTo = navigate(e, table, fromIndex, lastIndex);
+  if (navigateTo) {
+    newCellTarget = getCellTarget(table, navigateTo.row, navigateTo.cell);
+    dispatchActivateCellEvent(newCellTarget, {
+      focus: true
+    });
+  }
+}
+function dispatchActivateCellEvent(element, detail) {
+  element.dispatchEvent(new CustomEvent("table-activate-cell", {
+    detail
+  }));
+}
+function stopEdit(element, reason) {
+  const td = getTd(element);
+  const tr = getTr(td);
+  const table = getTable(tr);
+  const rowIndex = tr.rowIndex;
+  const cellIndex = td.cellIndex;
+  const lastRowIndex = getLastRowIndex(table);
+  const lastCellIndex = getLastCellIndex(table);
+  let newCellTarget = td;
+  switch (reason) {
+    case "enter": {
+      if (rowIndex !== lastRowIndex) {
+        newCellTarget = getCellTarget(table, rowIndex + 1, cellIndex);
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      } else {
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      }
+      break;
+    }
+    case "escape": {
+      dispatchActivateCellEvent(newCellTarget, {
+        focus: true
+      });
+      break;
+    }
+    case "tab": {
+      if (cellIndex === lastCellIndex && rowIndex === lastRowIndex) {
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      } else if (cellIndex === lastCellIndex) {
+        newCellTarget = getCellTarget(table, rowIndex + 1, 0);
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      } else {
+        newCellTarget = getCellTarget(table, rowIndex, cellIndex + 1);
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      }
+      break;
+    }
+    case "shift-tab": {
+      if (cellIndex === 0 && rowIndex === 1) {
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      } else if (cellIndex === 0) {
+        newCellTarget = getCellTarget(table, rowIndex - 1, 0);
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      } else {
+        newCellTarget = getCellTarget(table, rowIndex, cellIndex - 1);
+        dispatchActivateCellEvent(newCellTarget, {
+          focus: true
+        });
+      }
+      break;
+    }
+    case "blur": {
+      console.log("stopEdit", "blur");
+      break;
+    }
+    default: {
+      throw new Error(`invalid stop edit reason: ${reason}`);
+    }
+  }
+  return newCellTarget;
+}
+const _hoisted_1$8 = {
+  key: 0,
+  class: "table-ng__row"
+};
+const _hoisted_2$4 = {
+  key: 0,
+  tabindex: "-1",
+  class: "table-ng__column"
+};
+const _hoisted_3$2 = ["aria-level"];
+const _hoisted_4$1 = {
+  key: 0,
+  tabindex: "-1"
+};
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableRow",
+  props: {
+    renderHeader: {
+      type: Boolean,
+      default: false
+    },
+    rowKey: {
+      default: ""
+    },
+    ariaLevel: {
+      default: () => void 0
+    },
+    isTreegrid: {
+      type: Boolean,
+      default: false
+    },
+    isExpandable: {
+      type: Boolean,
+      default: false
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["toggle"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const emit = __emit;
+    vue.provide("renderHeader", __props.renderHeader);
+    const toggleIcon = vue.computed(() => __props.isExpanded ? "arrow-down" : "arrow-right");
+    return (_ctx, _cache) => {
+      return _ctx.renderHeader ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$8, [_ctx.isTreegrid ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$4)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")])) : (vue.openBlock(), vue.createElementBlock("tr", {
+        key: 1,
+        class: "table-ng__row",
+        "aria-level": _ctx.ariaLevel
+      }, [_ctx.isTreegrid ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        key: 0
+      }, [_ctx.isExpandable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_4$1, [vue.createElementVNode("button", {
+        "aria-label": "toggle",
+        type: "button",
+        class: vue.normalizeClass(["expander", `level-${_ctx.ariaLevel}`]),
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle", _ctx.rowKey))
+      }, [vue.createVNode(vue.unref(vue$1.FIcon), {
+        class: "button__icon",
+        name: toggleIcon.value
+      }, null, 8, ["name"])], 2)])) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        class: vue.normalizeClass(`level-${_ctx.ariaLevel}`)
+      }, null, 2))], 64)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$2));
+    };
+  }
+});
+function getValueFn(fn, key, coerce, defaultValue) {
+  if (fn) {
+    return fn;
+  }
+  if (key) {
+    return (row) => {
+      return coerce(row[key]);
+    };
+  }
+  return () => defaultValue;
+}
+function getUpdateFn(fn, key) {
+  if (fn) {
+    return fn;
+  }
+  if (key) {
+    return (row, value) => {
+      row[key] = value;
+    };
+  }
+  return () => void 0;
+}
+function normalizeTableColumn(column) {
+  var _column$validation;
+  if ("render" in column) {
+    return {
+      type: void 0,
+      header: column.header,
+      render: column.render
+    };
+  }
+  switch (column.type) {
+    case "checkbox":
+      return {
+        type: "checkbox",
+        header: column.header,
+        value: getValueFn(column.value, column.key, Boolean, false),
+        update: getUpdateFn(column.update, column.key),
+        editable: typeof column.editable === "function" ? column.editable : () => {
+          var _column$editable;
+          return Boolean((_column$editable = column.editable) !== null && _column$editable !== void 0 ? _column$editable : false);
+        },
+        sortable: column.key
+      };
+    case "radio":
+      return {
+        type: "radio",
+        header: column.header,
+        value: getValueFn(column.value, column.key, Boolean, false),
+        update: getUpdateFn(column.update, column.key),
+        sortable: column.key
+      };
+    case "text":
+      return {
+        type: "text",
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        update: getUpdateFn(column.update, column.key),
+        editable: typeof column.editable === "function" ? column.editable : () => {
+          var _column$editable2;
+          return Boolean((_column$editable2 = column.editable) !== null && _column$editable2 !== void 0 ? _column$editable2 : false);
+        },
+        validation: (_column$validation = column.validation) !== null && _column$validation !== void 0 ? _column$validation : {},
+        sortable: column.key
+      };
+    case "anchor":
+      return {
+        type: "anchor",
+        header: column.header,
+        value: column.value,
+        href: column.href,
+        enabled: typeof column.enabled === "function" ? column.enabled : () => {
+          var _column$enabled;
+          return Boolean((_column$enabled = column.enabled) !== null && _column$enabled !== void 0 ? _column$enabled : true);
+        },
+        sortable: column.key
+      };
+    case "button":
+      return {
+        type: "button",
+        header: column.header,
+        value: column.value,
+        onClick: column.onClick,
+        enabled: typeof column.enabled === "function" ? column.enabled : () => {
+          var _column$enabled2;
+          return Boolean((_column$enabled2 = column.enabled) !== null && _column$enabled2 !== void 0 ? _column$enabled2 : true);
+        },
+        icon: column.icon,
+        sortable: column.key
+      };
+    case "select":
+      return {
+        type: "select",
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        update: getUpdateFn(column.update, column.key),
+        editable: typeof column.editable === "function" ? column.editable : () => {
+          var _column$editable3;
+          return Boolean((_column$editable3 = column.editable) !== null && _column$editable3 !== void 0 ? _column$editable3 : false);
+        },
+        options: column.options,
+        sortable: column.key
+      };
+    case void 0:
+      return {
+        type: void 0,
+        header: column.header,
+        value: getValueFn(column.value, column.key, String, ""),
+        sortable: column.key
+      };
+  }
+}
+function defineTableColumns(columns) {
+  return columns;
+}
+function normalizeTableColumns(columns) {
+  return columns.map(normalizeTableColumn);
+}
+const stopEditKey = Symbol();
+function useStartStopEdit() {
+  const stopEdit2 = vue.inject(stopEditKey, () => Promise.resolve());
+  return {
+    stopEdit: stopEdit2
+  };
+}
+const _hoisted_1$7 = {
+  class: "table-ng__editable"
+};
+const _hoisted_2$3 = {
+  class: "table-ng__editable__text"
+};
+const _hoisted_3$1 = ["aria-controls"];
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableSelect",
+  props: {
+    row: {},
+    column: {}
+  },
+  setup(__props) {
+    const editing = vue.ref(false);
+    const editRef = vue.useTemplateRef("edit");
+    const {
+      stopEdit: stopEdit2
+    } = useStartStopEdit();
+    const viewValue = vue.ref(__props.column.value(__props.row));
+    const tdRef = vue.useTemplateRef("td");
+    function onActivateCell(e) {
+      logic.assertRef(tdRef);
+      tdRef.value.tabIndex = 0;
+      if (e.detail.focus) {
+        tdRef.value.focus();
+      }
+    }
+    async function onCellKeyDown(e) {
+      if (e.code === "Enter" || e.code === "NumpadEnter") {
+        startEditing(e);
+      }
+    }
+    async function onCellClick(e) {
+      if (editing.value) {
+        return;
+      }
+      startEditing(e);
+    }
+    async function startEditing(e) {
+      logic.assertRef(editRef);
+      e.preventDefault();
+      editing.value = true;
+      await vue.nextTick();
+      editRef.value.tabIndex = 0;
+      editRef.value.focus();
+      openSelected("first");
+    }
+    async function onDropdownSelect(value) {
+      logic.assertRef(editRef);
+      logic.assertSet(stopEdit2);
+      close();
+      submit();
+      viewValue.value = value;
+      stopEdit2(editRef.value, "enter");
+    }
+    function onDropdownClose() {
+      logic.assertRef(editRef);
+      logic.assertSet(stopEdit2);
+      stopEdit2(editRef.value, "escape");
+    }
+    const dropdownId = logic.ElementIdService.generateElementId();
+    const dropdownIsOpen = vue.ref(false);
+    const activeOptionId = logic.ElementIdService.generateElementId();
+    const activeOption = vue.ref(null);
+    vue.watchEffect(async () => {
+      if (!editRef.value) {
+        return;
+      }
+      if (activeOption.value) {
+        editRef.value.setAttribute("aria-activedescendant", activeOptionId);
+      } else {
+        editRef.value.removeAttribute("aria-activedescendant");
+      }
+    });
+    async function openSelected(fallback = null) {
+      dropdownIsOpen.value = true;
+      await vue.nextTick();
+      if (viewValue.value) {
+        activeOption.value = viewValue.value;
+      } else if (fallback === "first") {
+        activeOption.value = __props.column.options[0];
+      } else if (fallback === "last") {
+        activeOption.value = __props.column.options[__props.column.options.length - 1];
+      } else {
+        activeOption.value = null;
+      }
+      editRef.value?.focus();
+    }
+    function close() {
+      dropdownIsOpen.value = false;
+      activeOption.value = null;
+    }
+    function setNextOption() {
+      if (activeOption.value) {
+        const index = __props.column.options.indexOf(activeOption.value);
+        if (index === __props.column.options.length - 1) {
+          activeOption.value = __props.column.options[0];
+        } else {
+          activeOption.value = __props.column.options[index + 1];
+        }
+      } else {
+        activeOption.value = __props.column.options[0];
+      }
+    }
+    function setPreviousOption() {
+      if (activeOption.value) {
+        const index = __props.column.options.indexOf(activeOption.value);
+        if (index === 0) {
+          activeOption.value = __props.column.options[__props.column.options.length - 1];
+        } else {
+          activeOption.value = __props.column.options[index - 1];
+        }
+      } else {
+        activeOption.value = __props.column.options[__props.column.options.length - 1];
+      }
+    }
+    async function onEditKeyDown(e) {
+      logic.assertRef(editRef);
+      logic.assertSet(stopEdit2);
+      switch (e.code) {
+        case "Escape":
+          e.preventDefault();
+          cancel();
+          stopEdit2(editRef.value, "escape");
+          break;
+        case "Enter":
+        case "NumpadEnter":
+          e.preventDefault();
+          submit();
+          if (activeOption.value) {
+            viewValue.value = activeOption.value;
+          }
+          close();
+          stopEdit2(editRef.value, "enter");
+          break;
+        case "Tab":
+          e.preventDefault();
+          cancel();
+          stopEdit2(editRef.value, e.shiftKey ? "shift-tab" : "tab");
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (dropdownIsOpen.value) {
+            setNextOption();
+          } else {
+            openSelected("first");
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (dropdownIsOpen.value) {
+            setPreviousOption();
+          } else {
+            openSelected("last");
+          }
+          break;
+      }
+    }
+    async function onEditBlur() {
+      if (editing.value) {
+        logic.assertSet(stopEdit2);
+        logic.assertRef(editRef);
+        dropdownIsOpen.value = false;
+        editing.value = false;
+        await vue.nextTick();
+        stopEdit2(editRef.value, "blur");
+      }
+    }
+    async function submit() {
+      editing.value = false;
+      await vue.nextTick();
+    }
+    function cancel() {
+      logic.assertSet(stopEdit2);
+      logic.assertRef(editRef);
+      stopEdit2(editRef.value, "escape");
+    }
+    return (_ctx, _cache) => {
+      return _ctx.column.editable(_ctx.row) ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        ref: "td",
+        class: "table-ng__cell table-ng__cell--select",
+        tabindex: "-1",
+        onKeydown: onCellKeyDown,
+        onClick: vue.withModifiers(onCellClick, ["stop"]),
+        onTableActivateCell: onActivateCell
+      }, [vue.withDirectives(vue.createElementVNode("div", _hoisted_1$7, [vue.createElementVNode("span", _hoisted_2$3, vue.toDisplayString(viewValue.value), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(vue.unref(vue$1.FIcon), {
+        name: "pen",
+        class: "table-ng__editable__icon"
+      })], 512), [[vue.vShow, !editing.value]]), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("div", {
+        ref: "edit",
+        role: "combobox",
+        tabindex: "-1",
+        "aria-expanded": "",
+        "aria-controls": vue.unref(dropdownId),
+        "aria-autocomplete": "list",
+        class: "table-ng__editable",
+        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+        }, ["stop"])),
+        onDblclick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+        }, ["prevent"])),
+        onKeydown: vue.withModifiers(onEditKeyDown, ["stop"]),
+        onFocusout: onEditBlur
+      }, vue.toDisplayString(viewValue.value), 41, _hoisted_3$1), [[vue.vShow, editing.value]]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.withDirectives(vue.createVNode(vue.unref(vue$1.IComboboxDropdown), {
+        id: "dropdownId",
+        "is-open": dropdownIsOpen.value,
+        options: _ctx.column.options,
+        "active-option": activeOption.value,
+        "active-option-id": vue.unref(activeOptionId),
+        "input-node": editRef.value,
+        onSelect: onDropdownSelect,
+        onClose: onDropdownClose
+      }, null, 8, ["is-open", "options", "active-option", "active-option-id", "input-node"]), [[vue.vShow, editing.value]])], 544)) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        ref: "td",
+        tabindex: "-1",
+        class: "table-ng__cell table-ng__cell--static",
+        onTableActivateCell: onActivateCell
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 545));
+    };
+  }
+});
+const _hoisted_1$6 = ["checked", "aria-label"];
+const _hoisted_2$2 = ["checked", "aria-label"];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableCheckbox",
+  props: {
+    column: {},
+    row: {}
+  },
+  setup(__props) {
+    const targetElement = vue.useTemplateRef("target");
+    function onActivateCell(e) {
+      logic.assertRef(targetElement);
+      targetElement.value.tabIndex = 0;
+      if (e.detail.focus) {
+        targetElement.value.focus();
+      }
+    }
+    function onChange(e) {
+      const checked = e.target.checked;
+      __props.column.update(__props.row, checked, !checked);
+    }
+    return (_ctx, _cache) => {
+      return _ctx.column.editable(_ctx.row) ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        class: "table-ng__cell table-ng__cell--checkbox",
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("input", {
+        ref: "target",
+        checked: _ctx.column.value(_ctx.row),
+        type: "checkbox",
+        "aria-label": _ctx.column.header,
+        tabindex: "-1",
+        onChange
+      }, null, 40, _hoisted_1$6)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        ref: "target",
+        tabindex: "-1",
+        class: "table-ng__cell table-ng__cell--checkbox",
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("input", {
+        checked: _ctx.column.value(_ctx.row),
+        type: "checkbox",
+        "aria-label": _ctx.column.header,
+        disabled: ""
+      }, null, 8, _hoisted_2$2)], 544));
+    };
+  }
+});
+const _hoisted_1$5 = ["checked", "aria-label"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableRadio",
+  props: {
+    column: {},
+    row: {}
+  },
+  setup(__props) {
+    const inputElement = vue.useTemplateRef("input");
+    function onActivateCell(e) {
+      logic.assertRef(inputElement);
+      inputElement.value.tabIndex = 0;
+      if (e.detail.focus) {
+        inputElement.value.focus();
+      }
+    }
+    function onChange(_e) {
+      logic.assertRef(inputElement);
+      __props.column.update(__props.row, inputElement.value.checked, !inputElement.value.checked);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("td", {
+        class: "table-ng__cell table-ng__cell--radio",
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("input", {
+        ref: "input",
+        type: "radio",
+        checked: _ctx.column.value(_ctx.row),
+        "aria-label": _ctx.column.header,
+        tabindex: "-1",
+        onChange
+      }, null, 40, _hoisted_1$5)], 32);
+    };
+  }
+});
+const _hoisted_1$4 = ["href"];
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableAnchor",
+  props: {
+    column: {},
+    row: {}
+  },
+  setup(__props) {
+    const targetElement = vue.useTemplateRef("target");
+    function onActivateCell(e) {
+      logic.assertRef(targetElement);
+      targetElement.value.tabIndex = 0;
+      if (e.detail.focus) {
+        targetElement.value.focus();
+      }
+    }
+    const renderAnchor = vue.computed(() => {
+      return __props.column.enabled(__props.row) && __props.column.value(__props.row) !== null;
+    });
+    return (_ctx, _cache) => {
+      return renderAnchor.value ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        class: "table-ng__cell table-ng__cell--anchor",
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("a", {
+        ref: "target",
+        class: "anchor anchor--block",
+        target: "_blank",
+        href: _ctx.column.href,
+        tabindex: "-1"
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 9, _hoisted_1$4)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        ref: "target",
+        tabindex: "-1",
+        class: "table-ng__cell",
+        onTableActivateCell: onActivateCell
+      }, null, 544));
+    };
+  }
+});
+const _hoisted_1$3 = {
+  class: "sr-only"
+};
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableButton",
+  props: {
+    column: {},
+    row: {}
+  },
+  setup(__props) {
+    const buttonElement = vue.useTemplateRef("button");
+    const tdElement = vue.useTemplateRef("td");
+    async function onActivateCell(e) {
+      var _buttonElement$value;
+      await vue.nextTick();
+      const element = (_buttonElement$value = buttonElement.value) !== null && _buttonElement$value !== void 0 ? _buttonElement$value : tdElement.value;
+      logic.assertSet(element);
+      element.tabIndex = 0;
+      if (e.detail.focus) {
+        element.focus();
+      }
+    }
+    function onClickButton() {
+      if (__props.column.onClick) {
+        __props.column.onClick(__props.row);
+      }
+    }
+    const renderButton = vue.computed(() => {
+      return __props.column.enabled(__props.row) && __props.column.value(__props.row) !== null;
+    });
+    return (_ctx, _cache) => {
+      return renderButton.value ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        class: "table-ng__cell table-ng__cell--button",
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("button", {
+        ref: "button",
+        class: "icon-button",
+        type: "button",
+        tabindex: "-1",
+        onClick: onClickButton
+      }, [_ctx.column.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
+        key: 0,
+        name: _ctx.column.icon
+      }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$3, vue.toDisplayString(_ctx.column.value(_ctx.row)), 1)], 512)], 32)) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        ref: "td",
+        tabindex: "-1",
+        class: "table-ng__cell",
+        onTableActivateCell: onActivateCell
+      }, null, 544));
+    };
+  }
+});
+function isAlphanumeric(e) {
+  return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
+}
+const _hoisted_1$2 = {
+  class: "table-ng__editable"
+};
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableText",
+  props: {
+    row: {},
+    column: {}
+  },
+  setup(__props) {
+    const model = vue.ref("");
+    const validity = vue.ref({
+      isValid: true,
+      validationMessage: "",
+      validityMode: "INITIAL"
+    });
+    const hasError = vue.computed(() => validity.value.validityMode === "ERROR");
+    const wrapperClasses = vue.computed(() => {
+      return {
+        "table-ng__cell": true,
+        "table-ng__cell--text": true,
+        "table-ng__cell--valid": !hasError.value,
+        "table-ng__cell--error": hasError.value
+      };
+    });
+    const inputClasses = vue.computed(() => {
+      return {
+        foobar: true,
+        "table-ng__textedit": true
+      };
+    });
+    const tdElement = vue.useTemplateRef("td");
+    const viewElement = vue.useTemplateRef("view");
+    const inputElement = vue.useTemplateRef("input");
+    const {
+      stopEdit: stopEdit2
+    } = useStartStopEdit();
+    vue.onMounted(() => {
+      if (inputElement.value) {
+        logic.ValidationService.addValidatorsToElement(inputElement.value, __props.column.validation);
+      }
+    });
+    function onActivateCell(e) {
+      logic.assertRef(tdElement);
+      tdElement.value.tabIndex = 0;
+      if (e.detail.focus) {
+        tdElement.value.focus();
+      }
+    }
+    function onStartEdit(modelValue) {
+      logic.assertRef(tdElement);
+      logic.assertRef(inputElement);
+      const {
+        width
+      } = tdElement.value.getBoundingClientRect();
+      model.value = modelValue;
+      tdElement.value.style.setProperty("width", `${width}px`);
+      inputElement.value.focus();
+    }
+    function onStopEdit(options) {
+      const {
+        reason
+      } = options;
+      logic.assertRef(inputElement);
+      inputElement.value.tabIndex = -1;
+      stopEdit2(inputElement.value, reason);
+    }
+    function onClickCell(event) {
+      logic.assertRef(tdElement);
+      if (tdElement.value.contains(event.target)) {
+        const value = __props.column.value(__props.row);
+        onStartEdit(value);
+      }
+    }
+    function onViewingKeydown(event) {
+      if (isAlphanumeric(event)) {
+        event.stopPropagation();
+        onStartEdit("");
+      }
+      if (event.key === "Enter") {
+        event.stopPropagation();
+        const value = __props.column.value(__props.row);
+        onStartEdit(value);
+      }
+    }
+    function onEditingKeydown(event) {
+      logic.assertRef(viewElement);
+      logic.assertRef(inputElement);
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const oldValue = __props.column.value(__props.row);
+        const newValue = model.value;
+        __props.column.update(__props.row, newValue, oldValue);
+        model.value = "";
+        onStopEdit({
+          reason: "enter"
+        });
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        model.value = "";
+        onStopEdit({
+          reason: "escape"
+        });
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        const oldValue = __props.column.value(__props.row);
+        const newValue = model.value;
+        __props.column.update(__props.row, newValue, oldValue);
+        model.value = "";
+        onStopEdit({
+          reason: event.shiftKey ? "shift-tab" : "tab"
+        });
+      }
+    }
+    function onKeydown(event) {
+      const editing = document.activeElement === inputElement.value;
+      if (editing) {
+        onEditingKeydown(event);
+      } else {
+        onViewingKeydown(event);
+      }
+    }
+    function onBlur() {
+      logic.assertRef(tdElement);
+      tdElement.value.style.removeProperty("width");
+      const isDirty = model.value !== "";
+      if (isDirty) {
+        const oldValue = __props.column.value(__props.row);
+        const newValue = model.value;
+        __props.column.update(__props.row, newValue, oldValue);
+      }
+    }
+    function onValidity(event) {
+      const {
+        isValid,
+        validationMessage,
+        validityMode
+      } = event.detail;
+      validity.value = {
+        isValid,
+        validationMessage,
+        validityMode
+      };
+    }
+    return (_ctx, _cache) => {
+      return _ctx.column.editable(_ctx.row) ? (vue.openBlock(), vue.createElementBlock("td", {
+        key: 0,
+        ref: "td",
+        tabindex: "-1",
+        class: vue.normalizeClass(wrapperClasses.value),
+        onClick: vue.withModifiers(onClickCell, ["stop"]),
+        onKeydown,
+        onTableActivateCell: onActivateCell
+      }, [vue.createElementVNode("div", _hoisted_1$2, [vue.createElementVNode("span", {
+        ref: "view",
+        class: "table-ng__editable__text"
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 513), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("input", {
+        ref: "input",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        class: vue.normalizeClass(inputClasses.value),
+        type: "text",
+        maxlength: "40",
+        tabindex: "-1",
+        onBlur,
+        onValidity
+      }, null, 34), [[vue.vModelText, model.value]]), _cache[2] || (_cache[2] = vue.createTextVNode()), hasError.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
+        key: 0,
+        name: "error",
+        class: "table-ng__editable__icon"
+      })) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FIcon), {
+        key: 1,
+        name: "pen",
+        class: "table-ng__editable__icon"
+      }))])], 34)) : (vue.openBlock(), vue.createElementBlock("td", {
+        key: 1,
+        ref: "td",
+        tabindex: "-1",
+        class: "table-ng__cell table-ng__cell--static",
+        onTableActivateCell: onActivateCell
+      }, vue.toDisplayString(_ctx.column.value(_ctx.row)), 545));
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 0,
+  class: "pager"
+};
+const _hoisted_2$1 = {
+  key: 1
+};
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITablePager",
+  props: {
+    items: {},
+    itemsPerPage: {
+      default: 10
+    }
+  },
+  emits: ["itemRange"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const currentPage = vue.ref(1);
+    const currentPageItemLength = vue.ref(0);
+    const numberOfPages = vue.ref(0);
+    const numberOfItems = vue.computed(() => {
+      return __props.items.length;
+    });
+    const emit = __emit;
+    function switchToNextPage() {
+      currentPage.value++;
+      defineCurrentPage();
+    }
+    function switchToPreviousPage() {
+      currentPage.value--;
+      defineCurrentPage();
+    }
+    function switchToSpecificPage(page) {
+      currentPage.value = page;
+      defineCurrentPage();
+    }
+    function defineNumberOfPages() {
+      numberOfPages.value = Math.ceil(numberOfItems.value / __props.itemsPerPage);
+    }
+    function defineCurrentPage() {
+      const currentPageFirstItemId = __props.itemsPerPage * (currentPage.value - 1) + 1;
+      const currentPageLastItemId = Math.min(__props.itemsPerPage * currentPage.value, numberOfItems.value);
+      const currentPageItems = __props.items.slice(currentPageFirstItemId - 1, currentPageLastItemId);
+      emit("itemRange", currentPageItems);
+      currentPageItemLength.value = currentPageItems.length;
+    }
+    function showPageButton(page) {
+      const numberOfAdjacentPagesShown = 2;
+      return page === 1 || Math.abs(currentPage.value - page) <= numberOfAdjacentPagesShown || page === numberOfPages.value;
+    }
+    vue.onMounted(() => {
+      defineNumberOfPages();
+      defineCurrentPage();
+    });
+    return (_ctx, _cache) => {
+      return numberOfPages.value > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [currentPage.value !== 1 ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FButton), {
+        key: 0,
+        variant: "tertiary",
+        size: "small",
+        "icon-left": "chevrons-left",
+        onClick: _cache[0] || (_cache[0] = ($event) => switchToPreviousPage())
+      }, {
+        default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [vue.createTextVNode("\n            Föregående\n        ", -1)])]),
+        _: 1
+      })) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(numberOfPages.value, (page) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          key: page
+        }, [showPageButton(page) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FButton), {
+          key: 0,
+          size: "small",
+          variant: "tertiary",
+          disabled: page === currentPage.value,
+          onClick: ($event) => switchToSpecificPage(page)
+        }, {
+          default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(page), 1)]),
+          _: 2
+        }, 1032, ["disabled", "onClick"])) : showPageButton(page + 1) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "...")) : vue.createCommentVNode("", true)], 64);
+      }), 128)), _cache[5] || (_cache[5] = vue.createTextVNode()), currentPage.value !== numberOfPages.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.FButton), {
+        key: 1,
+        variant: "tertiary",
+        size: "small",
+        "icon-right": "arrow-right",
+        onClick: _cache[1] || (_cache[1] = ($event) => switchToNextPage())
+      }, {
+        default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [vue.createTextVNode("\n            Nästa\n        ", -1)])]),
+        _: 1
+      })) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ITableHeader",
+  props: {
+    column: {},
+    sortEnabled: {
+      type: Boolean
+    },
+    sortOrder: {}
+  },
+  emits: ["toggleSortOrder"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const emit = __emit;
+    const thElement = vue.useTemplateRef("th");
+    const sortIconClass = vue.computed(() => {
+      return {
+        "table-ng__column__sort-icon": true,
+        "table-ng__column__sort-icon--discrete": __props.sortOrder === "unsorted"
+      };
+    });
+    const sortIcon = vue.computed(() => {
+      switch (__props.sortOrder) {
+        case "unsorted":
+          return "sort";
+        case "ascending":
+          return "caret-up";
+        case "descending":
+          return "caret-down";
+        default:
+          return "";
+      }
+    });
+    function onActivateCell(e) {
+      logic.assertRef(thElement);
+      thElement.value.tabIndex = 0;
+      if (e.detail.focus) {
+        thElement.value.focus();
+      }
+    }
+    function onClickCell() {
+      if (!__props.column.sortable || !__props.sortEnabled) {
+        return;
+      }
+      emit("toggleSortOrder", String(__props.column.sortable));
+    }
+    function onKeydownCell(e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onClickCell();
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("th", {
+        ref: "th",
+        class: "table-ng__column",
+        tabindex: "-1",
+        onKeydown: onKeydownCell,
+        onClick: vue.withModifiers(onClickCell, ["stop"]),
+        onTableActivateCell: onActivateCell
+      }, [vue.createVNode(vue.unref(vue$1.IFlex), {
+        gap: "1x"
+      }, {
+        default: vue.withCtx(() => [vue.createVNode(vue.unref(vue$1.IFlexItem), {
+          shrink: ""
+        }, {
+          default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(_ctx.column.header), 1)]),
+          _: 1
+        }), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.sortEnabled ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.IFlexItem), {
+          key: 0,
+          shrink: "",
+          align: "center"
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(vue$1.FIcon), {
+            name: sortIcon.value,
+            class: vue.normalizeClass(sortIconClass.value)
+          }, null, 8, ["name", "class"])]),
+          _: 1
+        })) : vue.createCommentVNode("", true)]),
+        _: 1
+      })], 544);
+    };
+  }
+});
+const _hoisted_1 = ["role"];
+const _hoisted_2 = {
+  class: "table-ng__row"
+};
+const _hoisted_3 = {
+  key: 0,
+  scope: "col",
+  class: "table-ng__column table-ng__column--checkbox"
+};
+const _hoisted_4 = {
+  key: 1,
+  scope: "col"
+};
+const _hoisted_5 = {
+  key: 2,
+  scope: "col",
+  tabindex: "-1",
+  class: "table-ng__column"
+};
+const _hoisted_6 = ["colspan"];
+const _hoisted_7 = {
+  key: 0
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "FTable",
+  props: /* @__PURE__ */ vue.mergeModels({
+    columns: {},
+    rows: {},
+    keyAttribute: {
+      default: () => void 0
+    },
+    expandableAttribute: {
+      default: () => void 0
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    },
+    selectable: {
+      default: () => void 0
+    },
+    paginerated: {
+      type: Boolean,
+      default: false
+    }
+  }, {
+    "modelValue": {
+      default: []
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = vue.useModel(__props, "modelValue");
+    const tableRef = vue.useTemplateRef("table");
+    const selectAllRef = vue.useTemplateRef("selectAll");
+    const expandedKeys = vue.ref([]);
+    const keyedRows = vue.computed(() => vue$1.setInternalKeys(__props.rows, __props.keyAttribute, __props.expandableAttribute));
+    const metaRows = vue.computed(() => getMetaRows(keyedRows.value, expandedKeys.value, __props.expandableAttribute));
+    const isTreegrid = vue.computed(() => Boolean(__props.expandableAttribute));
+    const role = vue.computed(() => isTreegrid.value ? "treegrid" : "grid");
+    const rowsFromPaginator = vue.ref(metaRows.value);
+    const viewRows = vue.computed(() => {
+      return __props.paginerated ? rowsFromPaginator.value : metaRows.value;
+    });
+    const multiSelectColumn = {
+      type: "checkbox",
+      header: "selectable",
+      value(row) {
+        if (!__props.keyAttribute) {
+          return false;
+        }
+        return model.value.some((it) => {
+          return row[__props.keyAttribute] === it[__props.keyAttribute];
+        });
+      },
+      editable() {
+        return true;
+      },
+      update(row, _newValue, _oldValue) {
+        logic.assertRef(model);
+        const index = model.value.indexOf(row);
+        if (index < 0) {
+          model.value.push(row);
+        } else {
+          model.value.splice(index, 1);
+        }
+      }
+    };
+    const singleSelectColumn = {
+      type: "radio",
+      header: "Välj en rad",
+      value(row) {
+        if (!__props.keyAttribute) {
+          return false;
+        }
+        return model.value.some((it) => {
+          return row[__props.keyAttribute] === it[__props.keyAttribute];
+        });
+      },
+      update(row, _newValue, _oldValue) {
+        logic.assertRef(model);
+        model.value = [row];
+      }
+    };
+    const isIndeterminate = vue.computed(() => {
+      return model.value.length > 0 && model.value.length < __props.rows.length;
+    });
+    const isAllRowsSelected = vue.computed(() => {
+      return model.value.length > 0 && model.value.length === __props.rows.length;
+    });
+    const isSingleSelect = vue.computed(() => {
+      return __props.selectable === "single";
+    });
+    const isMultiSelect = vue.computed(() => {
+      return __props.selectable === "multi";
+    });
+    vue.watchEffect(() => {
+      if (selectAllRef.value) {
+        selectAllRef.value.indeterminate = isIndeterminate.value;
+        selectAllRef.value.checked = isAllRowsSelected.value;
+      }
+    });
+    function onSelectAllChange() {
+      if (selectAllRef.value?.checked) {
+        model.value = [...__props.rows];
+      } else {
+        model.value = [];
+      }
+    }
+    const columns = vue.computed(() => normalizeTableColumns(__props.columns));
+    const tableClasses = vue.computed(() => {
+      return __props.striped ? "table-ng table-ng--striped" : "table-ng";
+    });
+    const slots = vue.useSlots();
+    const hasExpandableSlot = vue.computed(() => {
+      return Boolean(slots["expandable"]);
+    });
+    async function stopEditHandler(element, reason) {
+      stopEdit(element, reason);
+    }
+    vue.provide(stopEditKey, stopEditHandler);
+    function onToggleExpanded(key) {
+      const index = expandedKeys.value.indexOf(key);
+      if (index < 0) {
+        expandedKeys.value.push(key);
+      } else {
+        expandedKeys.value.splice(index, 1);
+      }
+    }
+    function onKeydown(e) {
+      maybeNavigateToCell(e);
+    }
+    function onClick(e) {
+      const td = e.target.closest("td");
+      if (td) {
+        dispatchActivateCellEvent(td, {
+          focus: true
+        });
+      }
+    }
+    function onTableFocusout(e) {
+      logic.assertRef(tableRef);
+      const outsideTable = !e.relatedTarget || !tableRef.value.contains(e.relatedTarget);
+      if (outsideTable) {
+        const td = e.target.closest("td");
+        if (td) {
+          dispatchActivateCellEvent(td, {
+            focus: false
+          });
+        }
+      } else {
+        e.target.tabIndex = -1;
+      }
+    }
+    function onItemRangeUpdate(items) {
+      rowsFromPaginator.value = items;
+    }
+    const {
+      sort,
+      registerCallbackOnSort,
+      registerCallbackOnMount
+    } = vue$1.FSortFilterDatasetInjected();
+    const sortableColumns = vue.ref([]);
+    const sortedColumn = vue.ref("");
+    const sortedAscending = vue.ref(false);
+    function callbackSortableColumns(columnNames) {
+      sortableColumns.value = columnNames;
+    }
+    function callbackOnSort(columnName, ascending) {
+      sortedColumn.value = columnName;
+      sortedAscending.value = ascending;
+    }
+    function isSortEnabled(column) {
+      if (!column.sortable) {
+        return false;
+      }
+      return sortableColumns.value.indexOf(String(column.sortable)) > -1;
+    }
+    function getSortOrder(column) {
+      if (sortedColumn.value !== column.sortable) {
+        return "unsorted";
+      } else {
+        return sortedAscending.value ? "ascending" : "descending";
+      }
+    }
+    function onToggleSortOrder(sortable) {
+      if (sortable === sortedColumn.value) {
+        if (sortedAscending.value) {
+          sort(sortable, false);
+        } else {
+          sort("", true);
+        }
+      } else {
+        sort(sortable, true);
+      }
+    }
+    vue.onMounted(() => {
+      logic.assertRef(tableRef);
+      setDefaultCellTarget(tableRef.value);
+      registerCallbackOnMount(callbackSortableColumns);
+      registerCallbackOnSort(callbackOnSort);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [vue.createElementVNode("table", {
+        ref: "table",
+        role: role.value,
+        class: vue.normalizeClass(tableClasses.value),
+        onFocusout: onTableFocusout,
+        onClick,
+        onKeydown
+      }, [vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_2, [isMultiSelect.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3, [vue.createElementVNode("input", {
+        ref: "selectAll",
+        type: "checkbox",
+        "aria-label": "select all",
+        tabindex: "-1",
+        indeterminate: "",
+        onChange: onSelectAllChange
+      }, null, 544)])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), isSingleSelect.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4, vue.toDisplayString(singleSelectColumn.header), 1)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), isTreegrid.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$1, {
+          key: column.header,
+          column,
+          "sort-enabled": isSortEnabled(column),
+          "sort-order": getSortOrder(column),
+          scope: "col",
+          class: "table-ng__column",
+          onToggleSortOrder
+        }, null, 8, ["column", "sort-enabled", "sort-order"]);
+      }), 128))])]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(viewRows.value, ({
+        key,
+        row,
+        rowIndex,
+        level,
+        setsize,
+        posinset,
+        isExpandable,
+        isExpanded
+      }) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$9, {
+          key,
+          "row-key": key,
+          "aria-rowindex": rowIndex,
+          "aria-level": level,
+          "aria-setsize": setsize,
+          "aria-posinset": posinset,
+          "is-treegrid": isTreegrid.value,
+          "is-expandable": isExpandable,
+          "is-expanded": isExpanded,
+          onToggle: onToggleExpanded
+        }, {
+          default: vue.withCtx(() => [level > 1 && hasExpandableSlot.value ? (vue.openBlock(), vue.createElementBlock("td", {
+            key: 0,
+            colspan: columns.value.length
+          }, [vue.renderSlot(_ctx.$slots, "expandable", vue.mergeProps({
+            ref_for: true
+          }, {
+            row
+          }))], 8, _hoisted_6)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: 1
+          }, [isMultiSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+            key: 0,
+            row,
+            column: multiSelectColumn
+          }, null, 8, ["row"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), isSingleSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+            key: 1,
+            row,
+            column: singleSelectColumn
+          }, null, 8, ["row"])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: column.header
+            }, [column.type === "checkbox" ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+              key: 0,
+              row,
+              column
+            }, null, 8, ["row", "column"])) : column.type === "text" ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
+              key: 1,
+              row,
+              column
+            }, null, 8, ["row", "column"])) : column.type === "anchor" ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+              key: 2,
+              row,
+              column
+            }, null, 8, ["row", "column"])) : column.type === "button" ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
+              key: 3,
+              row,
+              column
+            }, null, 8, ["row", "column"])) : column.type === "select" ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
+              key: 4,
+              row,
+              column
+            }, null, 8, ["row", "column"])) : "render" in column ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(column.render(row)), {
+              key: 5,
+              row
+            }, null, 8, ["row"])) : vue.createCommentVNode("", true)], 64);
+          }), 128))], 64))]),
+          _: 2
+        }, 1032, ["row-key", "aria-rowindex", "aria-level", "aria-setsize", "aria-posinset", "is-treegrid", "is-expandable", "is-expanded"]);
+      }), 128))])], 42, _hoisted_1), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.paginerated ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.createVNode(_sfc_main$2, {
+        items: metaRows.value,
+        onItemRange: onItemRangeUpdate
+      }, null, 8, ["items"])])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "footer")], 64);
+    };
+  }
+});
+exports.FTable = _sfc_main;
 exports.HOURS_MINUTES_REGEXP = HOURS_MINUTES_REGEXP;
 exports.HOURS_MINUTES_WITHOUT_COLON_REGEXP = HOURS_MINUTES_WITHOUT_COLON_REGEXP;
 exports.HoursMinutesValidatorUtils = HoursMinutesValidatorUtils;
-exports.XTimeTextField = _sfc_main;
+exports.XTimeTextField = _sfc_main$a;
+exports.defineTableColumns = defineTableColumns;
 exports.forgivingParseTimeToNumber = forgivingParseTimeToNumber;
 exports.formatNumberToTime = formatNumberToTime;
 exports.hoursMinutesStringToMinutes = hoursMinutesStringToMinutes;