@fkui/vue 5.43.0 → 5.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@ const vue = require("vue");
4
4
  const logic = require("@fkui/logic");
5
5
  const date = require("@fkui/date");
6
6
  const statuses = ["default", "warning", "error", "success", "info"];
7
- const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
7
+ const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
8
8
  __name: "FBadge",
9
9
  props: {
10
10
  /**
@@ -1322,7 +1322,7 @@ function requireEs_array_push() {
1322
1322
  requireEs_array_push();
1323
1323
  const Flip = ["horizontal", "vertical"];
1324
1324
  const Rotate = ["90", "180", "270"];
1325
- const _sfc_main$1c = vue.defineComponent({
1325
+ const _sfc_main$1e = vue.defineComponent({
1326
1326
  name: "FIcon",
1327
1327
  inheritAttrs: false,
1328
1328
  props: {
@@ -1410,8 +1410,8 @@ const _export_sfc = (sfc, props) => {
1410
1410
  }
1411
1411
  return target;
1412
1412
  };
1413
- const _hoisted_1$U = ["aria-hidden"];
1414
- const _hoisted_2$F = ["xlink:href"];
1413
+ const _hoisted_1$W = ["aria-hidden"];
1414
+ const _hoisted_2$H = ["xlink:href"];
1415
1415
  function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
1416
1416
  return vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps(_ctx.$attrs, {
1417
1417
  focusable: "false",
@@ -1419,9 +1419,9 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
1419
1419
  "aria-hidden": _ctx.ariaHidden
1420
1420
  }), [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("use", {
1421
1421
  "xlink:href": _ctx.spriteId
1422
- }, null, 8, _hoisted_2$F)], 16, _hoisted_1$U);
1422
+ }, null, 8, _hoisted_2$H)], 16, _hoisted_1$W);
1423
1423
  }
1424
- const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$10]]);
1424
+ const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$10]]);
1425
1425
  const DATA_TEST_ATTRIBUTE_NAME = "data-test";
1426
1426
  function throwErrorIfEmpty(value) {
1427
1427
  if (!value) {
@@ -3751,7 +3751,7 @@ function elementIsRadioButton(element) {
3751
3751
  function isHTMLInputElement(element) {
3752
3752
  return element instanceof HTMLInputElement;
3753
3753
  }
3754
- const _sfc_main$1b = vue.defineComponent({
3754
+ const _sfc_main$1d = vue.defineComponent({
3755
3755
  name: "FModal",
3756
3756
  components: {
3757
3757
  FIcon
@@ -3925,11 +3925,11 @@ const _sfc_main$1b = vue.defineComponent({
3925
3925
  }
3926
3926
  }
3927
3927
  });
3928
- const _hoisted_1$T = ["id"];
3929
- const _hoisted_2$E = {
3928
+ const _hoisted_1$V = ["id"];
3929
+ const _hoisted_2$G = {
3930
3930
  class: "modal__backdrop"
3931
3931
  };
3932
- const _hoisted_3$w = {
3932
+ const _hoisted_3$x = {
3933
3933
  class: "modal__inner-container"
3934
3934
  };
3935
3935
  const _hoisted_4$r = {
@@ -3941,7 +3941,7 @@ const _hoisted_5$l = {
3941
3941
  const _hoisted_6$g = {
3942
3942
  class: "modal__header"
3943
3943
  };
3944
- const _hoisted_7$d = {
3944
+ const _hoisted_7$e = {
3945
3945
  key: 0,
3946
3946
  ref: "modalTitle",
3947
3947
  class: "modal__title",
@@ -3965,19 +3965,19 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
3965
3965
  key: 0,
3966
3966
  id: _ctx.id,
3967
3967
  class: vue.normalizeClass(["modal", _ctx.modalClass])
3968
- }, [vue.createElementVNode("div", _hoisted_2$E, [vue.createElementVNode("div", {
3968
+ }, [vue.createElementVNode("div", _hoisted_2$G, [vue.createElementVNode("div", {
3969
3969
  class: "modal__outer-container scroll-target",
3970
3970
  tabindex: "-1",
3971
3971
  role: "dialog",
3972
3972
  "aria-modal": "true",
3973
3973
  onKeyup: _cache[3] || (_cache[3] = vue.withKeys((...args) => _ctx.onClose && _ctx.onClose(...args), ["esc"]))
3974
- }, [vue.createElementVNode("div", _hoisted_3$w, [vue.createElementVNode("div", {
3974
+ }, [vue.createElementVNode("div", _hoisted_3$x, [vue.createElementVNode("div", {
3975
3975
  ref: "modalDialogContainer",
3976
3976
  class: vue.normalizeClass(["modal__dialog-container", _ctx.containerClasses])
3977
3977
  }, [vue.createElementVNode("div", _hoisted_4$r, [vue.createElementVNode("div", _hoisted_5$l, [vue.createElementVNode("div", _hoisted_6$g, [vue.createElementVNode("div", {
3978
3978
  tabindex: "0",
3979
3979
  onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusFirst && _ctx.onFocusFirst(...args))
3980
- }, null, 32), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasHeaderSlot ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7$d, [vue.renderSlot(_ctx.$slots, "header")], 512)) : vue.createCommentVNode("", true)]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_8$9, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_9$6, [vue.renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10$4, [vue.createElementVNode("button", {
3980
+ }, null, 32), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasHeaderSlot ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7$e, [vue.renderSlot(_ctx.$slots, "header")], 512)) : vue.createCommentVNode("", true)]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_8$9, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_9$6, [vue.renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10$4, [vue.createElementVNode("button", {
3981
3981
  type: "button",
3982
3982
  class: "close-button",
3983
3983
  "aria-label": _ctx.ariaCloseText,
@@ -3987,9 +3987,9 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
3987
3987
  })], 8, _hoisted_11$3), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("div", {
3988
3988
  tabindex: "0",
3989
3989
  onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
3990
- }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
3990
+ }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$V)) : vue.createCommentVNode("", true);
3991
3991
  }
3992
- const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$$]]);
3992
+ const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$$]]);
3993
3993
  function prepareButtonList(src, buttonOrder = config.buttonOrder) {
3994
3994
  const list = src.map((it) => {
3995
3995
  var _it$event, _ref, _it$reason, _it$type;
@@ -4018,7 +4018,7 @@ const defaultButtons = [{
4018
4018
  event: "dismiss",
4019
4019
  type: "secondary"
4020
4020
  }];
4021
- const _sfc_main$1a = vue.defineComponent({
4021
+ const _sfc_main$1c = vue.defineComponent({
4022
4022
  name: "FConfirmModal",
4023
4023
  components: {
4024
4024
  FModal
@@ -4122,11 +4122,11 @@ const _sfc_main$1a = vue.defineComponent({
4122
4122
  }
4123
4123
  }
4124
4124
  });
4125
- const _hoisted_1$S = {
4125
+ const _hoisted_1$U = {
4126
4126
  class: "button-group"
4127
4127
  };
4128
- const _hoisted_2$D = ["onClick"];
4129
- const _hoisted_3$v = {
4128
+ const _hoisted_2$F = ["onClick"];
4129
+ const _hoisted_3$w = {
4130
4130
  key: 0,
4131
4131
  class: "sr-only"
4132
4132
  };
@@ -4143,22 +4143,22 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
4143
4143
  }, {
4144
4144
  header: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "heading", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.heading), 1)])]),
4145
4145
  content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "content", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)])]),
4146
- footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$S, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.preparedButtons, (button) => {
4146
+ footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$U, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.preparedButtons, (button) => {
4147
4147
  return vue.openBlock(), vue.createElementBlock("button", {
4148
4148
  key: button.label,
4149
4149
  type: "button",
4150
4150
  class: vue.normalizeClass([button.classlist, "button-group__item"]),
4151
4151
  onClick: ($event) => _ctx.onClick(button)
4152
- }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$D);
4152
+ }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$w, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$F);
4153
4153
  }), 128))])]),
4154
4154
  _: 3
4155
4155
  }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
4156
4156
  }
4157
- const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$_]]);
4157
+ const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$_]]);
4158
4158
  const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
4159
4159
  const ALIGNMENT = ["top", "center", "bottom"];
4160
4160
  const FLOAT = ["left", "center", "right"];
4161
- const _sfc_main$19 = vue.defineComponent({
4161
+ const _sfc_main$1b = vue.defineComponent({
4162
4162
  name: "IFlex",
4163
4163
  inheritAttrs: true,
4164
4164
  props: {
@@ -4238,8 +4238,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
4238
4238
  class: vue.normalizeClass(["iflex", _ctx.classList])
4239
4239
  }, [vue.renderSlot(_ctx.$slots, "default")], 2);
4240
4240
  }
4241
- const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$Z]]);
4242
- const _sfc_main$18 = vue.defineComponent({
4241
+ const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$Z]]);
4242
+ const _sfc_main$1a = vue.defineComponent({
4243
4243
  name: "IFlexItem",
4244
4244
  inheritAttrs: true,
4245
4245
  props: {
@@ -4291,7 +4291,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
4291
4291
  class: vue.normalizeClass(["iflex__item", _ctx.classList])
4292
4292
  }, [vue.renderSlot(_ctx.$slots, "default")], 2);
4293
4293
  }
4294
- const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$Y]]);
4294
+ const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$Y]]);
4295
4295
  function focusError(item) {
4296
4296
  const element = document.querySelector(`#${item.id}`);
4297
4297
  if (!element) {
@@ -4301,7 +4301,7 @@ function focusError(item) {
4301
4301
  logic.scrollTo(element, window.innerHeight * 0.25);
4302
4302
  logic.focus(focusElement2 ? focusElement2 : element);
4303
4303
  }
4304
- const _sfc_main$17 = vue.defineComponent({
4304
+ const _sfc_main$19 = vue.defineComponent({
4305
4305
  name: "FErrorList",
4306
4306
  components: {
4307
4307
  FIcon,
@@ -4357,13 +4357,13 @@ const _sfc_main$17 = vue.defineComponent({
4357
4357
  }
4358
4358
  }
4359
4359
  });
4360
- const _hoisted_1$R = {
4360
+ const _hoisted_1$T = {
4361
4361
  class: "error-list"
4362
4362
  };
4363
- const _hoisted_2$C = {
4363
+ const _hoisted_2$E = {
4364
4364
  key: 0
4365
4365
  };
4366
- const _hoisted_3$u = {
4366
+ const _hoisted_3$v = {
4367
4367
  class: "error-list__list error-list--list-style-none"
4368
4368
  };
4369
4369
  const _hoisted_4$q = ["onClick"];
@@ -4374,7 +4374,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
4374
4374
  const _component_f_icon = vue.resolveComponent("f-icon");
4375
4375
  const _component_i_flex_item = vue.resolveComponent("i-flex-item");
4376
4376
  const _component_i_flex = vue.resolveComponent("i-flex");
4377
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [vue.createVNode(_component_i_flex, null, {
4377
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [vue.createVNode(_component_i_flex, null, {
4378
4378
  default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createBlock(_component_i_flex_item, {
4379
4379
  key: 0,
4380
4380
  shrink: ""
@@ -4393,7 +4393,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
4393
4393
  })) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(_component_i_flex_item, {
4394
4394
  grow: ""
4395
4395
  }, {
4396
- default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$C, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$u, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
4396
+ default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$E, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$v, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
4397
4397
  return vue.openBlock(), vue.createElementBlock("li", {
4398
4398
  key: item.id,
4399
4399
  class: vue.normalizeClass(_ctx.liClasses(item))
@@ -4424,7 +4424,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
4424
4424
  _: 3
4425
4425
  })]);
4426
4426
  }
4427
- const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$X]]);
4427
+ const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$X]]);
4428
4428
  function cleanUpElements(vm) {
4429
4429
  return new Promise((resolve) => {
4430
4430
  window.setTimeout(() => {
@@ -4453,7 +4453,7 @@ function sortComponentsWithErrorsOnDOMOrder(componentList) {
4453
4453
  function isFormStepReference(reference) {
4454
4454
  return "isOpen" in reference.ref;
4455
4455
  }
4456
- const _sfc_main$16 = vue.defineComponent({
4456
+ const _sfc_main$18 = vue.defineComponent({
4457
4457
  name: "FValidationGroup",
4458
4458
  props: {
4459
4459
  /**
@@ -4529,13 +4529,13 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
4529
4529
  onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
4530
4530
  }, [vue.renderSlot(_ctx.$slots, "default")], 32);
4531
4531
  }
4532
- const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$W]]);
4532
+ const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$W]]);
4533
4533
  var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
4534
4534
  FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
4535
4535
  FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
4536
4536
  return FValidationFormAction2;
4537
4537
  })(FValidationFormAction || {});
4538
- const _sfc_main$15 = vue.defineComponent({
4538
+ const _sfc_main$17 = vue.defineComponent({
4539
4539
  name: "FValidationForm",
4540
4540
  components: {
4541
4541
  FValidationGroup,
@@ -4674,8 +4674,8 @@ const _sfc_main$15 = vue.defineComponent({
4674
4674
  }
4675
4675
  }
4676
4676
  });
4677
- const _hoisted_1$Q = ["id"];
4678
- const _hoisted_2$B = {
4677
+ const _hoisted_1$S = ["id"];
4678
+ const _hoisted_2$D = {
4679
4679
  key: 0,
4680
4680
  ref: "errors",
4681
4681
  tabindex: "-1",
@@ -4696,19 +4696,19 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
4696
4696
  novalidate: "",
4697
4697
  autocomplete: "off",
4698
4698
  onSubmit: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onSubmit && _ctx.onSubmit(...args), ["prevent"]))
4699
- }), [_ctx.displayErrors ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2$B, [vue.createVNode(_component_f_error_list, {
4699
+ }), [_ctx.displayErrors ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2$D, [vue.createVNode(_component_f_error_list, {
4700
4700
  items: _ctx.errors,
4701
4701
  bullets: _ctx.errorListBullets,
4702
4702
  "before-navigate": _ctx.errorListBeforeNavigate
4703
4703
  }, {
4704
4704
  title: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message")]),
4705
4705
  _: 3
4706
- }, 8, ["items", "bullets", "before-navigate"])], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$Q)]),
4706
+ }, 8, ["items", "bullets", "before-navigate"])], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$S)]),
4707
4707
  _: 3
4708
4708
  }, 8, ["modelValue"]);
4709
4709
  }
4710
- const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$V]]);
4711
- const _sfc_main$14 = vue.defineComponent({
4710
+ const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$V]]);
4711
+ const _sfc_main$16 = vue.defineComponent({
4712
4712
  name: "FFormModal",
4713
4713
  components: {
4714
4714
  FModal,
@@ -4860,11 +4860,11 @@ const _sfc_main$14 = vue.defineComponent({
4860
4860
  }
4861
4861
  }
4862
4862
  });
4863
- const _hoisted_1$P = {
4863
+ const _hoisted_1$R = {
4864
4864
  class: "button-group"
4865
4865
  };
4866
- const _hoisted_2$A = ["type", "form", "onClick"];
4867
- const _hoisted_3$t = {
4866
+ const _hoisted_2$C = ["type", "form", "onClick"];
4867
+ const _hoisted_3$u = {
4868
4868
  key: 0,
4869
4869
  class: "sr-only"
4870
4870
  };
@@ -4893,7 +4893,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
4893
4893
  default: vue.withCtx(() => [_cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "input-text-fields")]),
4894
4894
  _: 3
4895
4895
  }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit", "onCancel"])]),
4896
- footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$P, [!_ctx.hasDeprecatedSlots ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
4896
+ footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$R, [!_ctx.hasDeprecatedSlots ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
4897
4897
  key: 0
4898
4898
  }, vue.renderList(_ctx.preparedButtons, (button) => {
4899
4899
  return vue.openBlock(), vue.createElementBlock("button", {
@@ -4902,7 +4902,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
4902
4902
  class: vue.normalizeClass([button.classlist, "button-group__item"]),
4903
4903
  form: button.buttonType === "submit" ? _ctx.formId : void 0,
4904
4904
  onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
4905
- }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[3] || (_cache[3] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$t, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$A);
4905
+ }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[3] || (_cache[3] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$u, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$C);
4906
4906
  }), 128)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
4907
4907
  key: 1
4908
4908
  }, [vue.createElementVNode("button", {
@@ -4919,7 +4919,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
4919
4919
  _: 3
4920
4920
  }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
4921
4921
  }
4922
- const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$U]]);
4922
+ const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$U]]);
4923
4923
  async function confirmModal(callingInstance, texts) {
4924
4924
  const buttons = [{
4925
4925
  label: texts.confirm,
@@ -5245,7 +5245,7 @@ const ErrorPlugin = {
5245
5245
  }
5246
5246
  }
5247
5247
  };
5248
- const _sfc_main$13 = vue.defineComponent({
5248
+ const _sfc_main$15 = vue.defineComponent({
5249
5249
  name: "FErrorPage",
5250
5250
  props: {
5251
5251
  payload: {
@@ -5255,16 +5255,16 @@ const _sfc_main$13 = vue.defineComponent({
5255
5255
  }
5256
5256
  }
5257
5257
  });
5258
- const _hoisted_1$O = {
5258
+ const _hoisted_1$Q = {
5259
5259
  "data-test": "f-error-page"
5260
5260
  };
5261
5261
  function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
5262
- 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", {
5262
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, _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", {
5263
5263
  href: "/"
5264
5264
  }, "Gå till startsidan", -1)]));
5265
5265
  }
5266
- const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$T]]);
5267
- const _sfc_main$12 = vue.defineComponent({
5266
+ const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$T]]);
5267
+ const _sfc_main$14 = vue.defineComponent({
5268
5268
  name: "FErrorHandlingApp",
5269
5269
  props: {
5270
5270
  defaultComponent: {
@@ -5303,7 +5303,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
5303
5303
  key: 2
5304
5304
  })]);
5305
5305
  }
5306
- const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$S]]);
5306
+ const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$S]]);
5307
5307
  function isMonthBefore(date2, minDate) {
5308
5308
  return Boolean(minDate && date2.isBefore(minDate.startOfMonth()));
5309
5309
  }
@@ -5314,7 +5314,7 @@ function isInvalidMonth(date2, minDate, maxDate) {
5314
5314
  const startOfMonth = date2.startOfMonth();
5315
5315
  return isMonthBefore(startOfMonth, minDate) || isMonthAfter(startOfMonth, maxDate);
5316
5316
  }
5317
- function getMessage($t, date2, minDate, maxDate) {
5317
+ function getMessage($t2, date2, minDate, maxDate) {
5318
5318
  const invalidMonth = isInvalidMonth(date2, minDate, maxDate);
5319
5319
  if (!invalidMonth) {
5320
5320
  return void 0;
@@ -5325,7 +5325,7 @@ function getMessage($t, date2, minDate, maxDate) {
5325
5325
  monthName,
5326
5326
  year
5327
5327
  } = minDate;
5328
- return $t("fkui.calendar.error.below-min-date", "Du kan inte välja en dag före {{day}} {{month}} {{year}}", {
5328
+ return $t2("fkui.calendar.error.below-min-date", "Du kan inte välja en dag före {{day}} {{month}} {{year}}", {
5329
5329
  day,
5330
5330
  month: monthName,
5331
5331
  year
@@ -5337,14 +5337,14 @@ function getMessage($t, date2, minDate, maxDate) {
5337
5337
  monthName,
5338
5338
  year
5339
5339
  } = maxDate;
5340
- return $t("fkui.calendar.error.above-max-date", "Du kan inte välja en dag efter {{day}} {{month}} {{year}}", {
5340
+ return $t2("fkui.calendar.error.above-max-date", "Du kan inte välja en dag efter {{day}} {{month}} {{year}}", {
5341
5341
  day,
5342
5342
  month: monthName,
5343
5343
  year
5344
5344
  });
5345
5345
  }
5346
5346
  }
5347
- const _sfc_main$11 = vue.defineComponent({
5347
+ const _sfc_main$13 = vue.defineComponent({
5348
5348
  name: "ICalendarNavbar",
5349
5349
  components: {
5350
5350
  FIcon
@@ -5458,14 +5458,14 @@ const _sfc_main$11 = vue.defineComponent({
5458
5458
  }
5459
5459
  }
5460
5460
  });
5461
- const _hoisted_1$N = {
5461
+ const _hoisted_1$P = {
5462
5462
  class: "calendar-navbar"
5463
5463
  };
5464
- const _hoisted_2$z = {
5464
+ const _hoisted_2$B = {
5465
5465
  class: "calendar-navbar__month",
5466
5466
  tabindex: "-1"
5467
5467
  };
5468
- const _hoisted_3$s = ["aria-disabled", "aria-live"];
5468
+ const _hoisted_3$t = ["aria-disabled", "aria-live"];
5469
5469
  const _hoisted_4$o = {
5470
5470
  class: "sr-only"
5471
5471
  };
@@ -5475,7 +5475,7 @@ const _hoisted_6$f = {
5475
5475
  };
5476
5476
  function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
5477
5477
  const _component_f_icon = vue.resolveComponent("f-icon");
5478
- 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", {
5478
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [vue.createElementVNode("div", _hoisted_2$B, vue.toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("button", {
5479
5479
  ref: "previousButton",
5480
5480
  class: "calendar-navbar__arrow calendar-navbar__arrow--previous",
5481
5481
  type: "button",
@@ -5485,7 +5485,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
5485
5485
  }, [vue.createElementVNode("span", _hoisted_4$o, vue.toDisplayString(_ctx.previousSrText), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
5486
5486
  class: vue.normalizeClass(_ctx.previousIconClasses),
5487
5487
  name: "arrow-right"
5488
- }, null, 8, ["class"])], 8, _hoisted_3$s), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("button", {
5488
+ }, null, 8, ["class"])], 8, _hoisted_3$t), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("button", {
5489
5489
  ref: "nextButton",
5490
5490
  class: "calendar-navbar__arrow calendar-navbar__arrow--next",
5491
5491
  type: "button",
@@ -5497,14 +5497,14 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
5497
5497
  name: "arrow-right"
5498
5498
  }, null, 8, ["class"])], 8, _hoisted_5$j)]);
5499
5499
  }
5500
- const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$R]]);
5500
+ const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$R]]);
5501
5501
  function getDayStartOffset(days) {
5502
5502
  return days[0].weekDay - 1;
5503
5503
  }
5504
5504
  function getDayEndOffset(days) {
5505
5505
  return 7 - days[days.length - 1].weekDay;
5506
5506
  }
5507
- const _sfc_main$10 = vue.defineComponent({
5507
+ const _sfc_main$12 = vue.defineComponent({
5508
5508
  name: "ICalendarMonthGrid",
5509
5509
  props: {
5510
5510
  /**
@@ -5575,14 +5575,14 @@ const _sfc_main$10 = vue.defineComponent({
5575
5575
  }
5576
5576
  }
5577
5577
  });
5578
- const _hoisted_1$M = {
5578
+ const _hoisted_1$O = {
5579
5579
  key: 0,
5580
5580
  class: "calendar-month__col--week"
5581
5581
  };
5582
- const _hoisted_2$y = {
5582
+ const _hoisted_2$A = {
5583
5583
  role: "presentation"
5584
5584
  };
5585
- const _hoisted_3$r = {
5585
+ const _hoisted_3$s = {
5586
5586
  role: "presentation"
5587
5587
  };
5588
5588
  const _hoisted_4$n = {
@@ -5595,7 +5595,7 @@ const _hoisted_5$i = ["title"];
5595
5595
  const _hoisted_6$e = {
5596
5596
  role: "presentation"
5597
5597
  };
5598
- const _hoisted_7$c = {
5598
+ const _hoisted_7$d = {
5599
5599
  key: 0,
5600
5600
  class: "calendar-month__cell calendar-month__cell--week-number",
5601
5601
  "aria-hidden": "true"
@@ -5618,7 +5618,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5618
5618
  role: "application",
5619
5619
  onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusin && _ctx.onFocusin(...args)),
5620
5620
  onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusout && _ctx.onFocusout(...args))
5621
- }, [vue.createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_1$M)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _cache[3] || (_cache[3] = vue.createElementVNode("col", {
5621
+ }, [vue.createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_1$O)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _cache[3] || (_cache[3] = vue.createElementVNode("col", {
5622
5622
  class: "calendar-month__col--day"
5623
5623
  }, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), _cache[5] || (_cache[5] = vue.createElementVNode("col", {
5624
5624
  class: "calendar-month__col--day"
@@ -5632,7 +5632,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5632
5632
  class: "calendar-month__col--day"
5633
5633
  }, null, -1)), _cache[14] || (_cache[14] = vue.createTextVNode()), _cache[15] || (_cache[15] = vue.createElementVNode("col", {
5634
5634
  class: "calendar-month__col--day"
5635
- }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", _hoisted_2$y, [vue.createElementVNode("tr", _hoisted_3$r, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$n)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
5635
+ }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", _hoisted_2$A, [vue.createElementVNode("tr", _hoisted_3$s, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$n)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
5636
5636
  return vue.openBlock(), vue.createElementBlock("th", {
5637
5637
  key: weekday.name,
5638
5638
  scope: "col",
@@ -5646,7 +5646,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5646
5646
  return vue.openBlock(), vue.createElementBlock("tr", {
5647
5647
  key: week.week,
5648
5648
  role: "presentation"
5649
- }, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_7$c, vue.toDisplayString(week.week), 1)) : vue.createCommentVNode("", true), _cache[17] || (_cache[17] = vue.createTextVNode()), _ctx.getDayStartOffset(week.days) ? (vue.openBlock(), vue.createElementBlock("td", {
5649
+ }, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_7$d, vue.toDisplayString(week.week), 1)) : vue.createCommentVNode("", true), _cache[17] || (_cache[17] = vue.createTextVNode()), _ctx.getDayStartOffset(week.days) ? (vue.openBlock(), vue.createElementBlock("td", {
5650
5650
  key: 1,
5651
5651
  class: "calendar-month__cell",
5652
5652
  colspan: _ctx.getDayStartOffset(week.days),
@@ -5676,7 +5676,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5676
5676
  "aria-hidden": "true"
5677
5677
  }, null, 8, _hoisted_13$1)])) : vue.createCommentVNode("", true)])], 32);
5678
5678
  }
5679
- const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$Q]]);
5679
+ const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$Q]]);
5680
5680
  const DayStep = {
5681
5681
  ArrowRight: 1,
5682
5682
  ArrowLeft: -1,
@@ -5700,7 +5700,7 @@ function getDayTabindex(date2, active, entry) {
5700
5700
  return date2.day === 1 ? 0 : -1;
5701
5701
  }
5702
5702
  }
5703
- const _sfc_main$$ = vue.defineComponent({
5703
+ const _sfc_main$11 = vue.defineComponent({
5704
5704
  name: "ICalendarMonth",
5705
5705
  components: {
5706
5706
  ICalendarMonthGrid
@@ -5786,7 +5786,7 @@ const _sfc_main$$ = vue.defineComponent({
5786
5786
  }
5787
5787
  }
5788
5788
  });
5789
- const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
5789
+ const _hoisted_1$N = ["data-date", "tabindex", "onClick", "onKeydown"];
5790
5790
  function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
5791
5791
  const _component_i_calendar_month_grid = vue.resolveComponent("i-calendar-month-grid");
5792
5792
  return vue.openBlock(), vue.createBlock(_component_i_calendar_month_grid, {
@@ -5806,12 +5806,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
5806
5806
  }, [vue.renderSlot(_ctx.$slots, "default", {
5807
5807
  date: date2,
5808
5808
  isFocused: _ctx.isDayFocused(date2)
5809
- })], 40, _hoisted_1$L)]),
5809
+ })], 40, _hoisted_1$N)]),
5810
5810
  _: 3
5811
5811
  }, 8, ["value"]);
5812
5812
  }
5813
- const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$P]]);
5814
- const _sfc_main$_ = vue.defineComponent({
5813
+ const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$P]]);
5814
+ const _sfc_main$10 = vue.defineComponent({
5815
5815
  name: "FCalendar",
5816
5816
  components: {
5817
5817
  ICalendarNavbar,
@@ -5863,13 +5863,13 @@ const _sfc_main$_ = vue.defineComponent({
5863
5863
  }
5864
5864
  }
5865
5865
  });
5866
- const _hoisted_1$K = {
5866
+ const _hoisted_1$M = {
5867
5867
  class: "calendar__wrapper"
5868
5868
  };
5869
5869
  function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
5870
5870
  const _component_i_calendar_navbar = vue.resolveComponent("i-calendar-navbar");
5871
5871
  const _component_i_calendar_month = vue.resolveComponent("i-calendar-month");
5872
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [vue.createVNode(_component_i_calendar_navbar, {
5872
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [vue.createVNode(_component_i_calendar_navbar, {
5873
5873
  "model-value": _ctx.modelValue,
5874
5874
  "min-date": _ctx.minDate,
5875
5875
  "max-date": _ctx.maxDate,
@@ -5892,7 +5892,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
5892
5892
  _: 3
5893
5893
  }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
5894
5894
  }
5895
- const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$O]]);
5895
+ const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$O]]);
5896
5896
  function getCalendarDaySrText(day, enabled, selected, t) {
5897
5897
  const parts = [];
5898
5898
  if (!enabled) {
@@ -5911,7 +5911,7 @@ function getCalendarDaySrText(day, enabled, selected, t) {
5911
5911
  parts.push(day.toString(date.DateFormat.FULL));
5912
5912
  return parts.join(" ");
5913
5913
  }
5914
- const _sfc_main$Z = vue.defineComponent({
5914
+ const _sfc_main$$ = vue.defineComponent({
5915
5915
  name: "FCalendarDay",
5916
5916
  mixins: [TranslationMixin],
5917
5917
  props: {
@@ -5976,18 +5976,18 @@ const _sfc_main$Z = vue.defineComponent({
5976
5976
  }
5977
5977
  }
5978
5978
  });
5979
- const _hoisted_1$J = {
5979
+ const _hoisted_1$L = {
5980
5980
  "aria-hidden": "true"
5981
5981
  };
5982
- const _hoisted_2$x = {
5982
+ const _hoisted_2$z = {
5983
5983
  class: "sr-only"
5984
5984
  };
5985
5985
  function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
5986
5986
  return vue.openBlock(), vue.createElementBlock("span", {
5987
5987
  class: vue.normalizeClass(_ctx.dayClasses)
5988
- }, [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);
5988
+ }, [vue.createElementVNode("span", _hoisted_1$L, vue.toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$z, vue.toDisplayString(_ctx.srText), 1)], 2);
5989
5989
  }
5990
- const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$N]]);
5990
+ const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$N]]);
5991
5991
  function offset(page, el) {
5992
5992
  const rect = el.getBoundingClientRect();
5993
5993
  return {
@@ -6272,7 +6272,7 @@ function isTeleportDisabled(options) {
6272
6272
  }
6273
6273
  return disableTeleport;
6274
6274
  }
6275
- const _sfc_main$Y = vue.defineComponent({
6275
+ const _sfc_main$_ = vue.defineComponent({
6276
6276
  name: "IPopup",
6277
6277
  inheritAttrs: false,
6278
6278
  props: {
@@ -6584,7 +6584,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
6584
6584
  placement: _ctx.placement
6585
6585
  })))], 544)], 16)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
6586
6586
  }
6587
- const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$M]]);
6587
+ const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$M]]);
6588
6588
  function isContextMenuTextItem(value) {
6589
6589
  return typeof value.key === "string";
6590
6590
  }
@@ -6632,7 +6632,7 @@ async function doMenuAction$2(action, target) {
6632
6632
  }
6633
6633
  const preventKeys$2 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter", "Escape"];
6634
6634
  const keyUp = ["ArrowUp", "Up"];
6635
- const _sfc_main$X = vue.defineComponent({
6635
+ const _sfc_main$Z = vue.defineComponent({
6636
6636
  name: "FContextMenu",
6637
6637
  components: {
6638
6638
  IPopup,
@@ -6796,14 +6796,14 @@ const _sfc_main$X = vue.defineComponent({
6796
6796
  }
6797
6797
  }
6798
6798
  });
6799
- const _hoisted_1$I = ["aria-label"];
6800
- const _hoisted_2$w = {
6799
+ const _hoisted_1$K = ["aria-label"];
6800
+ const _hoisted_2$y = {
6801
6801
  ref: "contextmenu",
6802
6802
  role: "menu",
6803
6803
  tabindex: "-1",
6804
6804
  class: "contextmenu__list"
6805
6805
  };
6806
- const _hoisted_3$q = ["onClick"];
6806
+ const _hoisted_3$r = ["onClick"];
6807
6807
  const _hoisted_4$m = ["tabindex"];
6808
6808
  const _hoisted_5$h = {
6809
6809
  key: 0,
@@ -6826,7 +6826,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
6826
6826
  "aria-label": _ctx.ariaLabel,
6827
6827
  onKeyup: _cache[0] || (_cache[0] = (...args) => _ctx.onKeyUp && _ctx.onKeyUp(...args)),
6828
6828
  onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args))
6829
- }, [vue.createElementVNode("ul", _hoisted_2$w, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.popupItems, (item, index) => {
6829
+ }, [vue.createElementVNode("ul", _hoisted_2$y, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.popupItems, (item, index) => {
6830
6830
  return vue.openBlock(), vue.createElementBlock("li", {
6831
6831
  key: item.key,
6832
6832
  role: "menuitem",
@@ -6844,13 +6844,13 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
6844
6844
  }, null, 8, ["name", "library"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("a", {
6845
6845
  ref_for: true,
6846
6846
  ref: "anchors"
6847
- }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$m), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$h)) : vue.createCommentVNode("", true)], 8, _hoisted_3$q);
6848
- }), 128))], 512)], 40, _hoisted_1$I)]),
6847
+ }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$m), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$h)) : vue.createCommentVNode("", true)], 8, _hoisted_3$r);
6848
+ }), 128))], 512)], 40, _hoisted_1$K)]),
6849
6849
  _: 1
6850
6850
  }, 8, ["is-open", "anchor", "focus-element"]);
6851
6851
  }
6852
- const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$L]]);
6853
- const _sfc_main$W = vue.defineComponent({
6852
+ const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$L]]);
6853
+ const _sfc_main$Y = vue.defineComponent({
6854
6854
  name: "FExpand",
6855
6855
  data() {
6856
6856
  return {
@@ -6916,7 +6916,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
6916
6916
  _: 3
6917
6917
  }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
6918
6918
  }
6919
- const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$K]]);
6919
+ const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$K]]);
6920
6920
  function computeArrowOffset(placement, inputIconRect, wrapperRect) {
6921
6921
  switch (placement) {
6922
6922
  case Placement.A: {
@@ -6980,7 +6980,7 @@ function computeArrowOffset(placement, inputIconRect, wrapperRect) {
6980
6980
  }
6981
6981
  }
6982
6982
  const POPUP_SPACING = 10;
6983
- const _sfc_main$V = vue.defineComponent({
6983
+ const _sfc_main$X = vue.defineComponent({
6984
6984
  name: "IPopupError",
6985
6985
  components: {
6986
6986
  FIcon
@@ -7115,7 +7115,7 @@ const _sfc_main$V = vue.defineComponent({
7115
7115
  }
7116
7116
  }
7117
7117
  });
7118
- const _hoisted_1$H = {
7118
+ const _hoisted_1$J = {
7119
7119
  ref: "wrapper",
7120
7120
  class: "popup-error__wrapper"
7121
7121
  };
@@ -7129,7 +7129,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
7129
7129
  ref: "popup",
7130
7130
  class: vue.normalizeClass(_ctx.popupClasses),
7131
7131
  "aria-hidden": "true"
7132
- }, [vue.createElementVNode("div", _hoisted_1$H, [vue.createElementVNode("div", {
7132
+ }, [vue.createElementVNode("div", _hoisted_1$J, [vue.createElementVNode("div", {
7133
7133
  class: vue.normalizeClass(_ctx.arrowClass),
7134
7134
  style: vue.normalizeStyle(_ctx.errorStyle)
7135
7135
  }, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.errorMessage), 1), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("button", {
@@ -7143,7 +7143,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
7143
7143
  class: "button__icon"
7144
7144
  })])], 6)], 512)], 2)], 8, ["disabled"])) : vue.createCommentVNode("", true);
7145
7145
  }
7146
- const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$J]]);
7146
+ const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$J]]);
7147
7147
  function useEventListener(target, event, callback) {
7148
7148
  vue.onMounted(() => {
7149
7149
  var _a;
@@ -7164,15 +7164,16 @@ function useSlotUtils() {
7164
7164
  }
7165
7165
  };
7166
7166
  }
7167
- function numItems(itemHeight, availableHeight) {
7168
- return Math.min(Math.floor(availableHeight / itemHeight), 6);
7167
+ function numItems(itemHeight, availableHeight, verticalSpacing) {
7168
+ const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
7169
+ return Math.min(itemsFit, 7);
7169
7170
  }
7170
- function tryBelow(itemHeight, numOfItems, anchor, viewport) {
7171
+ function tryBelow(itemHeight, numOfItems, anchor, viewport, verticalSpacing) {
7171
7172
  const p1 = viewport.y + viewport.height;
7172
7173
  const p2 = anchor.y + anchor.height;
7173
7174
  const availableHeight = p1 - p2;
7174
- const itemsFit = numItems(itemHeight, availableHeight);
7175
- if (itemsFit < 2) {
7175
+ const itemsFit = numItems(itemHeight, availableHeight, verticalSpacing);
7176
+ if (itemsFit < 3) {
7176
7177
  return void 0;
7177
7178
  }
7178
7179
  const fittedHeight = itemHeight * Math.min(numOfItems, itemsFit);
@@ -7183,18 +7184,18 @@ function tryBelow(itemHeight, numOfItems, anchor, viewport) {
7183
7184
  height: fittedHeight
7184
7185
  };
7185
7186
  }
7186
- function tryAbove(itemHeight, numOfItems, anchor, viewport) {
7187
+ function tryAbove(itemHeight, numOfItems, anchor, viewport, verticalSpacing) {
7187
7188
  const p1 = viewport.y;
7188
7189
  const p2 = anchor.y;
7189
7190
  const availableHeight = p2 - p1;
7190
- const itemsFit = numItems(itemHeight, availableHeight);
7191
- if (itemsFit < 2) {
7191
+ const itemsFit = numItems(itemHeight, availableHeight, verticalSpacing);
7192
+ if (itemsFit < 3) {
7192
7193
  return void 0;
7193
7194
  }
7194
7195
  const fittedHeight = itemHeight * Math.min(numOfItems, itemsFit);
7195
7196
  return {
7196
7197
  left: anchor.x,
7197
- top: anchor.y - fittedHeight,
7198
+ top: anchor.y - fittedHeight - verticalSpacing,
7198
7199
  width: anchor.width,
7199
7200
  height: fittedHeight
7200
7201
  };
@@ -7205,7 +7206,8 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
7205
7206
  } = window) {
7206
7207
  const {
7207
7208
  itemHeight,
7208
- numOfItems
7209
+ numOfItems,
7210
+ verticalSpacing
7209
7211
  } = options;
7210
7212
  const rect = anchor.getBoundingClientRect();
7211
7213
  const anchorRect = {
@@ -7218,19 +7220,22 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
7218
7220
  y: scrollY,
7219
7221
  height: root.clientHeight
7220
7222
  };
7221
- const d = tryBelow(itemHeight, numOfItems, anchorRect, viewportRect);
7222
- if (d) {
7223
- return d;
7223
+ const below = tryBelow(itemHeight, numOfItems, anchorRect, viewportRect, verticalSpacing);
7224
+ if (below) {
7225
+ return below;
7224
7226
  }
7225
- const u = tryAbove(itemHeight, numOfItems, anchorRect, viewportRect);
7226
- if (u) {
7227
- return u;
7227
+ const above = tryAbove(itemHeight, numOfItems, anchorRect, viewportRect, verticalSpacing);
7228
+ if (above) {
7229
+ return above;
7228
7230
  }
7229
7231
  return void 0;
7230
7232
  }
7231
- const _hoisted_1$G = ["onKeyup"];
7233
+ const _hoisted_1$I = ["onKeyup"];
7234
+ const _hoisted_2$x = {
7235
+ ref: "content"
7236
+ };
7232
7237
  const teleportDisabled = false;
7233
- const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7238
+ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
7234
7239
  __name: "IPopupListbox",
7235
7240
  props: {
7236
7241
  isOpen: {
@@ -7238,21 +7243,39 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7238
7243
  },
7239
7244
  anchor: {},
7240
7245
  numOfItems: {},
7241
- itemHeight: {}
7246
+ itemHeight: {},
7247
+ activeElement: {}
7242
7248
  },
7243
7249
  emits: ["close"],
7244
7250
  setup(__props, {
7245
7251
  emit: __emit
7246
7252
  }) {
7247
7253
  const emit = __emit;
7248
- const wrapper = vue.useTemplateRef("wrapper");
7249
- const content = vue.useTemplateRef("content");
7254
+ const wrapperRef = vue.useTemplateRef("wrapper");
7255
+ const contentRef = vue.useTemplateRef("content");
7250
7256
  const popupClasses = ["popup", "popup--overlay"];
7251
7257
  const teleportTarget = vue.computed(() => {
7252
7258
  var _config$popupTarget;
7253
7259
  return (_config$popupTarget = config.popupTarget) !== null && _config$popupTarget !== void 0 ? _config$popupTarget : config.teleportTarget;
7254
7260
  });
7261
+ let guessedItemHeight = void 0;
7262
+ let verticalSpacing = void 0;
7255
7263
  useEventListener(__props.anchor, "keyup", onKeyEsc);
7264
+ vue.watchEffect(() => {
7265
+ if (wrapperRef.value && __props.activeElement !== void 0) {
7266
+ const centerPosition = __props.activeElement.offsetTop - (wrapperRef.value.getBoundingClientRect().height - __props.activeElement.getBoundingClientRect().height) / 2;
7267
+ if (!isElementInsideViewport(wrapperRef.value)) {
7268
+ wrapperRef.value.scrollIntoView({
7269
+ behavior: "instant",
7270
+ block: "nearest"
7271
+ });
7272
+ }
7273
+ wrapperRef.value.scrollTo({
7274
+ top: centerPosition,
7275
+ behavior: "instant"
7276
+ });
7277
+ }
7278
+ });
7256
7279
  function addListeners() {
7257
7280
  document.addEventListener("click", onDocumentClickHandler);
7258
7281
  window.addEventListener("resize", logic.debounce(onResize, 100));
@@ -7261,6 +7284,14 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7261
7284
  document.removeEventListener("click", onDocumentClickHandler);
7262
7285
  window.removeEventListener("resize", logic.debounce(onResize, 100));
7263
7286
  }
7287
+ function isElementInsideViewport(element) {
7288
+ const rect = element.getBoundingClientRect();
7289
+ const windowHeight = window.innerHeight || document.documentElement.clientHeight;
7290
+ const windowWidth = window.innerWidth || document.documentElement.clientWidth;
7291
+ const insideX = rect.left >= 0 && rect.left + rect.width <= windowWidth;
7292
+ const insideY = rect.top >= 0 && rect.top + rect.height <= windowHeight;
7293
+ return insideX && insideY;
7294
+ }
7264
7295
  vue.watchEffect(() => {
7265
7296
  if (__props.isOpen) {
7266
7297
  calculatePosition();
@@ -7273,6 +7304,11 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7273
7304
  removeListeners();
7274
7305
  }
7275
7306
  });
7307
+ vue.watch(() => __props.numOfItems, (oldValue, newValue) => {
7308
+ if (oldValue !== newValue && __props.isOpen) {
7309
+ calculatePosition();
7310
+ }
7311
+ });
7276
7312
  vue.onUnmounted(removeListeners);
7277
7313
  function onDocumentClickHandler() {
7278
7314
  emit("close");
@@ -7293,21 +7329,30 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7293
7329
  async function calculatePosition() {
7294
7330
  var _a;
7295
7331
  await vue.nextTick();
7296
- const wrapperElement = wrapper.value;
7297
- const contentWrapper = content.value;
7332
+ const wrapperElement = wrapperRef.value;
7333
+ const contentWrapper = contentRef.value;
7298
7334
  if (!__props.anchor || !wrapperElement || !contentWrapper) {
7299
7335
  return;
7300
7336
  }
7301
7337
  let contentItemHeigth = __props.itemHeight;
7302
7338
  if (!contentItemHeigth) {
7303
- contentItemHeigth = guessItemHeight(__props.numOfItems, contentWrapper);
7339
+ if (!guessedItemHeight) {
7340
+ guessedItemHeight = guessItemHeight(__props.numOfItems, contentWrapper);
7341
+ }
7342
+ contentItemHeigth = guessedItemHeight;
7343
+ }
7344
+ if (verticalSpacing === void 0) {
7345
+ const absWrapper = getAbsolutePosition(wrapperElement);
7346
+ const marginTotal = absWrapper.y * 2;
7347
+ verticalSpacing = Math.ceil(absWrapper.height - contentItemHeigth * __props.numOfItems) + marginTotal;
7304
7348
  }
7305
7349
  wrapperElement.style.overflowY = "auto";
7306
- wrapperElement.style.left = `0px`;
7307
- wrapperElement.style.boxShadow = "none";
7350
+ wrapperElement.style.overflowX = "hidden";
7351
+ wrapperElement.style.left = "0px";
7308
7352
  const rect = computeListboxRect(__props.anchor, {
7309
7353
  itemHeight: contentItemHeigth,
7310
- numOfItems: __props.numOfItems
7354
+ numOfItems: __props.numOfItems,
7355
+ verticalSpacing
7311
7356
  });
7312
7357
  if (rect) {
7313
7358
  var _offsetRect$x;
@@ -7321,8 +7366,9 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7321
7366
  const offsetLeft = (_offsetRect$x = offsetRect == null ? void 0 : offsetRect.x) !== null && _offsetRect$x !== void 0 ? _offsetRect$x : 0;
7322
7367
  wrapperElement.style.top = `${top}px`;
7323
7368
  wrapperElement.style.left = `${left - offsetLeft}px`;
7324
- wrapperElement.style.minWidth = `${width}px`;
7325
- wrapperElement.style.maxHeight = `${height}px`;
7369
+ wrapperElement.style.width = `${width}px`;
7370
+ contentWrapper.style.maxHeight = `${height}px`;
7371
+ contentWrapper.style.width = `${width}px`;
7326
7372
  }
7327
7373
  }
7328
7374
  return (_ctx, _cache) => {
@@ -7334,17 +7380,14 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7334
7380
  ref: "popup",
7335
7381
  class: vue.normalizeClass(popupClasses)
7336
7382
  }, [vue.createElementVNode("div", vue.mergeProps({
7337
- ref_key: "wrapper",
7338
- ref: wrapper
7383
+ ref: "wrapper"
7339
7384
  }, _ctx.$attrs, {
7340
7385
  class: "popup__wrapper",
7386
+ tabindex: "0",
7341
7387
  onKeyup: vue.withKeys(vue.withModifiers(onKeyEsc, ["stop"]), ["esc"]),
7342
7388
  onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
7343
7389
  }, ["stop"]))
7344
- }), [vue.createElementVNode("div", {
7345
- ref_key: "content",
7346
- ref: content
7347
- }, [vue.renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$G)], 512)], 8, ["to"])) : vue.createCommentVNode("", true);
7390
+ }), [vue.createElementVNode("div", _hoisted_2$x, [vue.renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$I)], 512)], 8, ["to"])) : vue.createCommentVNode("", true);
7348
7391
  };
7349
7392
  }
7350
7393
  });
@@ -7388,7 +7431,7 @@ async function doMenuAction$1(action, target) {
7388
7431
  }
7389
7432
  }
7390
7433
  const preventKeys$1 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter"];
7391
- const _sfc_main$T = vue.defineComponent({
7434
+ const _sfc_main$V = vue.defineComponent({
7392
7435
  name: "IPopupMenu",
7393
7436
  components: {
7394
7437
  IPopup
@@ -7644,12 +7687,12 @@ const _sfc_main$T = vue.defineComponent({
7644
7687
  }
7645
7688
  }
7646
7689
  });
7647
- const _hoisted_1$F = ["aria-label"];
7648
- const _hoisted_2$v = {
7690
+ const _hoisted_1$H = ["aria-label"];
7691
+ const _hoisted_2$w = {
7649
7692
  role: "menu",
7650
7693
  class: "ipopupmenu__list"
7651
7694
  };
7652
- const _hoisted_3$p = ["onClick"];
7695
+ const _hoisted_3$q = ["onClick"];
7653
7696
  const _hoisted_4$l = ["data-ref-index", "href", "target"];
7654
7697
  const _hoisted_5$g = {
7655
7698
  key: 0,
@@ -7670,7 +7713,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
7670
7713
  default: vue.withCtx(() => [vue.createElementVNode("nav", {
7671
7714
  class: "ipopupmenu ipopupmenu--vertical",
7672
7715
  "aria-label": _ctx.ariaLabel
7673
- }, [vue.createElementVNode("ul", _hoisted_2$v, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
7716
+ }, [vue.createElementVNode("ul", _hoisted_2$w, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
7674
7717
  return vue.openBlock(), vue.createElementBlock("li", {
7675
7718
  ref_for: true,
7676
7719
  ref: "items",
@@ -7686,18 +7729,18 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
7686
7729
  role: "menuitem",
7687
7730
  target: item.target,
7688
7731
  tabindex: "0"
7689
- }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$g, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
7690
- }), 128))])], 8, _hoisted_1$F)]),
7732
+ }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$g, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$q);
7733
+ }), 128))])], 8, _hoisted_1$H)]),
7691
7734
  _: 1
7692
7735
  }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
7693
7736
  }
7694
- const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$I]]);
7737
+ const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$I]]);
7695
7738
  const ANIMATION_DURATION = 500;
7696
7739
  const NO_CSS_CLASSES = "";
7697
7740
  const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
7698
7741
  const CLOSED_CSS_CLASS = "animate-expand";
7699
7742
  const ANIMATION_CSS_CLASSES = "animate-expand animate-expand--expanded";
7700
- const _sfc_main$S = vue.defineComponent({
7743
+ const _sfc_main$U = vue.defineComponent({
7701
7744
  name: "IAnimateExpand",
7702
7745
  props: {
7703
7746
  /**
@@ -7889,7 +7932,7 @@ const _sfc_main$S = vue.defineComponent({
7889
7932
  }
7890
7933
  }
7891
7934
  });
7892
- const _hoisted_1$E = {
7935
+ const _hoisted_1$G = {
7893
7936
  key: 0,
7894
7937
  ref: "content",
7895
7938
  "data-test": "animation-content"
@@ -7898,10 +7941,10 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
7898
7941
  return vue.openBlock(), vue.createElementBlock("div", {
7899
7942
  class: vue.normalizeClass(_ctx.animationClasses),
7900
7943
  style: vue.normalizeStyle(_ctx.heightStyle)
7901
- }, [_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);
7944
+ }, [_ctx.shouldVIf ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [vue.renderSlot(_ctx.$slots, "default")], 512)), [[vue.vShow, _ctx.shouldVShow]]) : vue.createCommentVNode("", true)], 6);
7902
7945
  }
7903
- const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$H]]);
7904
- const _sfc_main$R = vue.defineComponent({
7946
+ const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$H]]);
7947
+ const _sfc_main$T = vue.defineComponent({
7905
7948
  name: "ISkipLink",
7906
7949
  mixins: [TranslationMixin],
7907
7950
  props: {
@@ -7915,14 +7958,355 @@ const _sfc_main$R = vue.defineComponent({
7915
7958
  }
7916
7959
  }
7917
7960
  });
7918
- const _hoisted_1$D = ["href"];
7961
+ const _hoisted_1$F = ["href"];
7919
7962
  function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
7920
7963
  return vue.openBlock(), vue.createElementBlock("a", {
7921
7964
  class: "iskiplink",
7922
7965
  href: _ctx.href
7923
- }, [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);
7966
+ }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$F);
7967
+ }
7968
+ const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$G]]);
7969
+ function filterOptions(options, filter2, selectMode) {
7970
+ if (logic.isEmpty(filter2) || selectMode) {
7971
+ return options;
7972
+ }
7973
+ const filterLowerCased = filter2.toLowerCase();
7974
+ return options.filter((it) => it.toLowerCase().indexOf(filterLowerCased) > -1);
7975
+ }
7976
+ const $t = useTranslate();
7977
+ function useCombobox(inputRef, options, onOptionSelected) {
7978
+ if (!options) {
7979
+ return {
7980
+ dropdownId: "",
7981
+ dropdownIsOpen: vue.ref(false),
7982
+ dropdownOptions: vue.ref([]),
7983
+ activeOptionId: "",
7984
+ activeOption: vue.ref(null),
7985
+ toggleDropdown() {
7986
+ },
7987
+ selectOption() {
7988
+ },
7989
+ closeDropdown() {
7990
+ }
7991
+ };
7992
+ }
7993
+ useEventListener(inputRef, "click", onInputClick);
7994
+ useEventListener(inputRef, "focus", onInputFocus);
7995
+ useEventListener(inputRef, "keydown", onInputKeyDown);
7996
+ useEventListener(inputRef, "keyup", onInputKeyUp);
7997
+ const dropdownId = logic.ElementIdService.generateElementId();
7998
+ const dropdownIsOpen = vue.ref(false);
7999
+ const activeOptionId = logic.ElementIdService.generateElementId();
8000
+ const activeOption = vue.ref(null);
8001
+ const filter2 = vue.ref("");
8002
+ const selectMode = vue.ref(false);
8003
+ const selectedOption = vue.ref(null);
8004
+ const dropdownOptions = vue.computed(() => {
8005
+ return filterOptions(options, filter2.value, selectMode.value);
8006
+ });
8007
+ const hasOptions = vue.computed(() => {
8008
+ return dropdownOptions.value.length > 0;
8009
+ });
8010
+ const hasMultipleOptions = vue.computed(() => {
8011
+ return dropdownOptions.value.length > 1;
8012
+ });
8013
+ vue.watchEffect(() => {
8014
+ if (!inputRef.value) {
8015
+ return;
8016
+ }
8017
+ inputRef.value.setAttribute("aria-expanded", `${dropdownIsOpen.value}`);
8018
+ if (dropdownIsOpen.value) {
8019
+ inputRef.value.setAttribute("aria-controls", dropdownId);
8020
+ } else {
8021
+ inputRef.value.removeAttribute("aria-controls");
8022
+ }
8023
+ });
8024
+ vue.watchEffect(async () => {
8025
+ if (!inputRef.value) {
8026
+ return;
8027
+ }
8028
+ if (activeOption.value) {
8029
+ inputRef.value.setAttribute("aria-activedescendant", activeOptionId);
8030
+ } else {
8031
+ inputRef.value.removeAttribute("aria-activedescendant");
8032
+ }
8033
+ });
8034
+ vue.watchEffect(() => {
8035
+ if (!inputRef.value) {
8036
+ return;
8037
+ }
8038
+ let description = selectMode.value ? `${$t("fkui.combobox.selected", "Valt förslag")} ` : "";
8039
+ if (logic.isEmpty(filter2.value) || selectMode.value) {
8040
+ description += $t("fkui.combobox.listDetails", `Det finns {{ count }} förslag. Använd uppåtpil och nedåtpil för att navigera bland förslagen.`, {
8041
+ count: options.length
8042
+ });
8043
+ } else if (hasOptions.value) {
8044
+ description += $t("fkui.combobox.matchesListDetails", `Det finns {{ count }} förslag som matchar. Använd uppåtpil och nedåtpil för att navigera bland förslagen.`, {
8045
+ count: dropdownOptions.value.length
8046
+ });
8047
+ } else {
8048
+ description = $t("fkui.combobox.noMatchesListDetails", "Det finns inga förslag som matchar.");
8049
+ }
8050
+ inputRef.value.setAttribute("aria-description", description);
8051
+ });
8052
+ vue.onMounted(() => {
8053
+ if (!inputRef.value) {
8054
+ throw new Error("missing input ref");
8055
+ }
8056
+ filter2.value = inputRef.value.value;
8057
+ inputRef.value.setAttribute("role", "combobox");
8058
+ inputRef.value.setAttribute("aria-autocomplete", "list");
8059
+ });
8060
+ return {
8061
+ dropdownId,
8062
+ dropdownIsOpen,
8063
+ dropdownOptions,
8064
+ activeOptionId,
8065
+ activeOption,
8066
+ toggleDropdown,
8067
+ selectOption,
8068
+ closeDropdown: close
8069
+ };
8070
+ function selectOption(value) {
8071
+ selectedOption.value = value;
8072
+ if (selectedOption.value) {
8073
+ close();
8074
+ filter2.value = selectedOption.value;
8075
+ selectMode.value = true;
8076
+ if (onOptionSelected) {
8077
+ onOptionSelected(value);
8078
+ }
8079
+ }
8080
+ }
8081
+ async function openSelected(fallback = null) {
8082
+ var _a;
8083
+ if (hasOptions.value) {
8084
+ dropdownIsOpen.value = true;
8085
+ await vue.nextTick();
8086
+ if (selectMode.value) {
8087
+ activeOption.value = filter2.value;
8088
+ } else if (fallback === "first") {
8089
+ activeOption.value = dropdownOptions.value[0];
8090
+ } else if (fallback === "last") {
8091
+ activeOption.value = dropdownOptions.value[dropdownOptions.value.length - 1];
8092
+ } else {
8093
+ activeOption.value = null;
8094
+ }
8095
+ (_a = inputRef.value) == null ? void 0 : _a.focus();
8096
+ }
8097
+ }
8098
+ function close() {
8099
+ dropdownIsOpen.value = false;
8100
+ activeOption.value = null;
8101
+ }
8102
+ function toggleDropdown() {
8103
+ if (!dropdownIsOpen.value) {
8104
+ openSelected();
8105
+ } else {
8106
+ close();
8107
+ }
8108
+ }
8109
+ function setNextOption() {
8110
+ if (activeOption.value && hasMultipleOptions.value) {
8111
+ const index = dropdownOptions.value.indexOf(activeOption.value);
8112
+ if (index === dropdownOptions.value.length - 1) {
8113
+ activeOption.value = dropdownOptions.value[0];
8114
+ } else {
8115
+ activeOption.value = dropdownOptions.value[index + 1];
8116
+ }
8117
+ } else {
8118
+ activeOption.value = dropdownOptions.value[0];
8119
+ }
8120
+ }
8121
+ function setPreviousOption() {
8122
+ if (activeOption.value && hasMultipleOptions.value) {
8123
+ const index = dropdownOptions.value.indexOf(activeOption.value);
8124
+ if (index === 0) {
8125
+ activeOption.value = dropdownOptions.value[dropdownOptions.value.length - 1];
8126
+ } else {
8127
+ activeOption.value = dropdownOptions.value[index - 1];
8128
+ }
8129
+ } else {
8130
+ activeOption.value = dropdownOptions.value[dropdownOptions.value.length - 1];
8131
+ }
8132
+ }
8133
+ function onInputClick() {
8134
+ toggleDropdown();
8135
+ }
8136
+ async function onInputFocus() {
8137
+ var _a;
8138
+ var _inputRef$value$value, _options$includes;
8139
+ await vue.nextTick();
8140
+ filter2.value = (_inputRef$value$value = (_a = inputRef.value) == null ? void 0 : _a.value) !== null && _inputRef$value$value !== void 0 ? _inputRef$value$value : "";
8141
+ selectMode.value = (_options$includes = options == null ? void 0 : options.includes(filter2.value)) !== null && _options$includes !== void 0 ? _options$includes : false;
8142
+ }
8143
+ async function onInputKeyDown(event) {
8144
+ let flag = false;
8145
+ if (event.ctrlKey || event.shiftKey) {
8146
+ return;
8147
+ }
8148
+ switch (event.key) {
8149
+ case "Enter":
8150
+ if (dropdownIsOpen.value) {
8151
+ if (activeOption.value) {
8152
+ selectOption(activeOption.value);
8153
+ flag = true;
8154
+ }
8155
+ close();
8156
+ } else {
8157
+ openSelected();
8158
+ }
8159
+ break;
8160
+ case "Down":
8161
+ case "ArrowDown":
8162
+ if (dropdownIsOpen.value) {
8163
+ setNextOption();
8164
+ } else {
8165
+ openSelected("first");
8166
+ }
8167
+ flag = true;
8168
+ break;
8169
+ case "Up":
8170
+ case "ArrowUp":
8171
+ if (dropdownIsOpen.value) {
8172
+ setPreviousOption();
8173
+ } else {
8174
+ openSelected("last");
8175
+ }
8176
+ flag = true;
8177
+ break;
8178
+ case "Esc":
8179
+ case "Escape":
8180
+ if (dropdownIsOpen.value) {
8181
+ close();
8182
+ }
8183
+ flag = true;
8184
+ break;
8185
+ case "Tab":
8186
+ if (dropdownIsOpen.value) {
8187
+ close();
8188
+ }
8189
+ break;
8190
+ }
8191
+ if (flag) {
8192
+ event.stopPropagation();
8193
+ event.preventDefault();
8194
+ }
8195
+ }
8196
+ function onInputKeyUp() {
8197
+ if (!inputRef.value) {
8198
+ throw new Error("missing input ref");
8199
+ }
8200
+ if (filter2.value === inputRef.value.value) {
8201
+ return;
8202
+ }
8203
+ filter2.value = inputRef.value.value;
8204
+ activeOption.value = null;
8205
+ selectMode.value = false;
8206
+ if (!dropdownIsOpen.value) {
8207
+ openSelected();
8208
+ } else if (!hasOptions.value) {
8209
+ close();
8210
+ }
8211
+ }
7924
8212
  }
7925
- const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$G]]);
8213
+ const _hoisted_1$E = {
8214
+ class: "combobox"
8215
+ };
8216
+ const _hoisted_2$v = ["id"];
8217
+ const _hoisted_3$p = ["id", "aria-selected", "onClick"];
8218
+ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
8219
+ __name: "IComboboxDropdown",
8220
+ props: {
8221
+ id: {},
8222
+ isOpen: {
8223
+ type: Boolean
8224
+ },
8225
+ options: {},
8226
+ activeOption: {},
8227
+ activeOptionId: {},
8228
+ inputNode: {}
8229
+ },
8230
+ emits: ["select", "close"],
8231
+ setup(__props, {
8232
+ emit: __emit
8233
+ }) {
8234
+ const emit = __emit;
8235
+ const listboxRef = vue.useTemplateRef("listbox");
8236
+ const activeElement = vue.ref();
8237
+ function isOptionActive(item) {
8238
+ return item === __props.activeOption;
8239
+ }
8240
+ function onOptionClick(value) {
8241
+ emit("select", value);
8242
+ }
8243
+ function onListboxClose() {
8244
+ emit("close");
8245
+ }
8246
+ vue.watchEffect(async () => {
8247
+ var _a;
8248
+ if (__props.activeOption !== null) {
8249
+ await vue.nextTick();
8250
+ const activeOptionNode = (_a = listboxRef.value) == null ? void 0 : _a.querySelector(`#${__props.activeOptionId}`);
8251
+ activeElement.value = activeOptionNode !== null && activeOptionNode !== void 0 ? activeOptionNode : void 0;
8252
+ }
8253
+ });
8254
+ return (_ctx, _cache) => {
8255
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [vue.createVNode(vue.unref(_sfc_main$W), {
8256
+ "is-open": _ctx.isOpen,
8257
+ anchor: _ctx.inputNode,
8258
+ "num-of-items": _ctx.options.length,
8259
+ "active-element": activeElement.value,
8260
+ class: "combobox__listbox",
8261
+ onClose: onListboxClose
8262
+ }, {
8263
+ default: vue.withCtx(() => [vue.createElementVNode("ul", {
8264
+ id: _ctx.id,
8265
+ ref: "listbox",
8266
+ role: "listbox",
8267
+ "aria-label": "Förslag",
8268
+ class: "combobox__listbox__list"
8269
+ }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (item) => {
8270
+ return vue.openBlock(), vue.createElementBlock("li", {
8271
+ id: isOptionActive(item) ? _ctx.activeOptionId : void 0,
8272
+ key: item,
8273
+ role: "option",
8274
+ "aria-selected": isOptionActive(item) ? "true" : void 0,
8275
+ class: vue.normalizeClass(["combobox__listbox__option", {
8276
+ "combobox__listbox__option--highlight": isOptionActive(item)
8277
+ }]),
8278
+ onClick: vue.withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
8279
+ }, vue.toDisplayString(item), 11, _hoisted_3$p);
8280
+ }), 128))], 8, _hoisted_2$v)]),
8281
+ _: 1
8282
+ }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
8283
+ };
8284
+ }
8285
+ });
8286
+ const _hoisted_1$D = ["aria-label"];
8287
+ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
8288
+ __name: "IComboboxToggleButton",
8289
+ emits: ["toggle"],
8290
+ setup(__props, {
8291
+ emit: __emit
8292
+ }) {
8293
+ const $t2 = useTranslate();
8294
+ const emit = __emit;
8295
+ const ariaLabel = $t2("fkui.combobox.toggle", "Öppna förslagen");
8296
+ return (_ctx, _cache) => {
8297
+ return vue.openBlock(), vue.createElementBlock("button", {
8298
+ class: "combobox__button",
8299
+ type: "button",
8300
+ "aria-label": vue.unref(ariaLabel),
8301
+ tabindex: "-1",
8302
+ onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
8303
+ }, [vue.createVNode(vue.unref(FIcon), {
8304
+ name: "arrow-down",
8305
+ class: "text-field__icon"
8306
+ })], 8, _hoisted_1$D);
8307
+ };
8308
+ }
8309
+ });
7926
8310
  const tooltipAttachTo = Symbol("tooltipAttachTo");
7927
8311
  let initialized = false;
7928
8312
  const reducedMotion = vue.ref(false);
@@ -8517,7 +8901,7 @@ const _hoisted_5$e = {
8517
8901
  const _hoisted_6$c = {
8518
8902
  key: 1
8519
8903
  };
8520
- const _hoisted_7$b = {
8904
+ const _hoisted_7$c = {
8521
8905
  ref: "tooltipAttachTo",
8522
8906
  class: "label"
8523
8907
  };
@@ -8548,7 +8932,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
8548
8932
  name: "error"
8549
8933
  }), vue.createTextVNode(" " + vue.toDisplayString(_ctx.validity.validationMessage), 1)])) : vue.createCommentVNode("", true)])], 2)), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.hasCheckbox ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$j, [_ctx.children.length === 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$e, vue.toDisplayString(_ctx.checkboxCheckedScreenReaderText), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$c, vue.toDisplayString(_ctx.numberOfCheckedCheckboxesScreenText), 1))])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.hasTooltipSlot ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
8550
8934
  key: 1
8551
- }, [vue.createElementVNode("div", _hoisted_7$b, [vue.createElementVNode("span", _hoisted_8$7, [vue.renderSlot(_ctx.$slots, "label")])], 512), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot || _ctx.hasError ? (vue.openBlock(), vue.createElementBlock("div", {
8935
+ }, [vue.createElementVNode("div", _hoisted_7$c, [vue.createElementVNode("span", _hoisted_8$7, [vue.renderSlot(_ctx.$slots, "label")])], 512), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot || _ctx.hasError ? (vue.openBlock(), vue.createElementBlock("div", {
8552
8936
  key: 0,
8553
8937
  class: vue.normalizeClass(["label", _ctx.groupLabelClass]),
8554
8938
  "aria-hidden": "true"
@@ -9521,7 +9905,7 @@ const _hoisted_5$d = {
9521
9905
  class: "label__message label__message--error"
9522
9906
  };
9523
9907
  const _hoisted_6$b = ["for"];
9524
- const _hoisted_7$a = {
9908
+ const _hoisted_7$b = {
9525
9909
  key: 0,
9526
9910
  class: "label__message label__message--error"
9527
9911
  };
@@ -9547,7 +9931,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
9547
9931
  }, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "description", vue.normalizeProps(vue.guardReactiveProps({
9548
9932
  descriptionClass: _ctx.descriptionClass,
9549
9933
  discreteDescriptionClass: _ctx.discreteDescriptionClass
9550
- }))), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$a, [vue.createVNode(_component_f_icon, {
9934
+ }))), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$b, [vue.createVNode(_component_f_icon, {
9551
9935
  class: "label__icon--left",
9552
9936
  name: "error"
9553
9937
  }), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message")])) : vue.createCommentVNode("", true)], 8, _hoisted_6$b));
@@ -9739,12 +10123,54 @@ const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_r
9739
10123
  function resolveWidthClass(words, inline) {
9740
10124
  return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
9741
10125
  }
10126
+ function setCursorAtEnd(input) {
10127
+ input.setSelectionRange(input.value.length, input.value.length);
10128
+ }
10129
+ function useTextFieldSetup(props) {
10130
+ const inputNode = vue.useTemplateRef("input");
10131
+ const textFieldTableMode = vue.inject("textFieldTableMode", false);
10132
+ const viewValue = vue.ref("");
10133
+ async function onOptionSelected(value) {
10134
+ if (!inputNode.value) {
10135
+ return;
10136
+ }
10137
+ viewValue.value = value;
10138
+ await vue.nextTick();
10139
+ inputNode.value.focus();
10140
+ setCursorAtEnd(inputNode.value);
10141
+ }
10142
+ const {
10143
+ dropdownId,
10144
+ dropdownIsOpen,
10145
+ dropdownOptions,
10146
+ activeOptionId,
10147
+ activeOption,
10148
+ toggleDropdown,
10149
+ selectOption,
10150
+ closeDropdown
10151
+ } = useCombobox(inputNode, props.options, onOptionSelected);
10152
+ return {
10153
+ textFieldTableMode,
10154
+ viewValue,
10155
+ onOptionSelected,
10156
+ dropdownId,
10157
+ dropdownIsOpen,
10158
+ dropdownOptions,
10159
+ activeOptionId,
10160
+ activeOption,
10161
+ toggleDropdown,
10162
+ selectOption,
10163
+ closeDropdown
10164
+ };
10165
+ }
9742
10166
  const _sfc_main$H = vue.defineComponent({
9743
10167
  name: "FTextField",
9744
10168
  components: {
9745
10169
  FLabel,
9746
10170
  FIcon,
9747
- IPopupError
10171
+ IPopupError,
10172
+ IComboboxDropdown: _sfc_main$S,
10173
+ IComboboxToggleButton: _sfc_main$R
9748
10174
  },
9749
10175
  inheritAttrs: false,
9750
10176
  props: {
@@ -9839,18 +10265,52 @@ const _sfc_main$H = vue.defineComponent({
9839
10265
  type: String,
9840
10266
  required: false,
9841
10267
  default: "sm-12"
10268
+ },
10269
+ /**
10270
+ * List of options.
10271
+ *
10272
+ * When set, the user can select a value from the list of options and filter while typing.
10273
+ *
10274
+ * If a formatter is used by the component, make sure the options are formatted as well.
10275
+ */
10276
+ options: {
10277
+ type: Array,
10278
+ required: false,
10279
+ default: () => void 0
9842
10280
  }
9843
10281
  },
9844
10282
  emits: ["blur", "change", "update", "update:modelValue"],
9845
- setup() {
10283
+ setup(props) {
10284
+ const {
10285
+ textFieldTableMode,
10286
+ viewValue,
10287
+ onOptionSelected,
10288
+ dropdownId,
10289
+ dropdownIsOpen,
10290
+ dropdownOptions,
10291
+ activeOptionId,
10292
+ activeOption,
10293
+ toggleDropdown,
10294
+ selectOption,
10295
+ closeDropdown
10296
+ } = useTextFieldSetup(props);
9846
10297
  return {
9847
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10298
+ textFieldTableMode,
10299
+ viewValue,
10300
+ onOptionSelected,
10301
+ dropdownId,
10302
+ dropdownIsOpen,
10303
+ dropdownOptions,
10304
+ activeOptionId,
10305
+ activeOption,
10306
+ toggleDropdown,
10307
+ selectOption,
10308
+ closeDropdown
9848
10309
  };
9849
10310
  },
9850
10311
  data() {
9851
10312
  return {
9852
10313
  showErrorPopup: false,
9853
- viewValue: "",
9854
10314
  lastModelValue: "",
9855
10315
  validationMessage: "",
9856
10316
  validityMode: "INITIAL",
@@ -9913,6 +10373,12 @@ const _sfc_main$H = vue.defineComponent({
9913
10373
  this.isAfterInitialRender = true;
9914
10374
  },
9915
10375
  methods: {
10376
+ onDropdownSelect(value) {
10377
+ this.selectOption(value);
10378
+ },
10379
+ onDropdownClose() {
10380
+ this.closeDropdown();
10381
+ },
9916
10382
  getErrorPopupAnchor() {
9917
10383
  return this.$refs.input;
9918
10384
  },
@@ -10047,10 +10513,16 @@ const _hoisted_6$a = {
10047
10513
  key: 2,
10048
10514
  class: "text-field__append-inner"
10049
10515
  };
10516
+ const _hoisted_7$a = {
10517
+ key: 3,
10518
+ class: "text-field__append-inner"
10519
+ };
10050
10520
  function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
10051
10521
  const _component_f_label = vue.resolveComponent("f-label");
10052
10522
  const _component_f_icon = vue.resolveComponent("f-icon");
10053
10523
  const _component_i_popup_error = vue.resolveComponent("i-popup-error");
10524
+ const _component_i_combobox_toggle_button = vue.resolveComponent("i-combobox-toggle-button");
10525
+ const _component_i_combobox_dropdown = vue.resolveComponent("i-combobox-dropdown");
10054
10526
  return vue.openBlock(), vue.createElementBlock("div", {
10055
10527
  class: vue.normalizeClass(["text-field", _ctx.rootClass])
10056
10528
  }, [vue.createElementVNode("div", {
@@ -10084,9 +10556,9 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
10084
10556
  name: "tooltip",
10085
10557
  fn: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "tooltip")]),
10086
10558
  key: "0"
10087
- } : void 0]), 1032, ["for", "class"])], 2), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.createElementVNode("div", {
10559
+ } : void 0]), 1032, ["for", "class"])], 2), _cache[19] || (_cache[19] = vue.createTextVNode()), vue.createElementVNode("div", {
10088
10560
  class: vue.normalizeClass(["text-field__input-wrapper", _ctx.inputWrapperClass])
10089
- }, [vue.renderSlot(_ctx.$slots, "input-left"), _cache[16] || (_cache[16] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_4$g, [vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
10561
+ }, [vue.renderSlot(_ctx.$slots, "input-left"), _cache[17] || (_cache[17] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_4$g, [vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
10090
10562
  id: _ctx.id,
10091
10563
  ref: "input",
10092
10564
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.viewValue = $event),
@@ -10110,7 +10582,21 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
10110
10582
  "is-open": _ctx.showPopupError,
10111
10583
  "error-message": _ctx.validationMessage,
10112
10584
  onClose: _ctx.closePopupError
10113
- }, null, 8, ["anchor", "is-open", "error-message", "onClose"])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), _ctx.$slots["append-inner"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [vue.renderSlot(_ctx.$slots, "append-inner")])) : vue.createCommentVNode("", true)]), _cache[17] || (_cache[17] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "input-right")], 2)], 2);
10585
+ }, null, 8, ["anchor", "is-open", "error-message", "onClose"])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), _ctx.$slots["append-inner"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [vue.renderSlot(_ctx.$slots, "append-inner")])) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), _ctx.options ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$a, [vue.createVNode(_component_i_combobox_toggle_button, {
10586
+ "aria-controls": _ctx.dropdownIsOpen ? _ctx.dropdownId : void 0,
10587
+ "aria-expanded": _ctx.dropdownIsOpen,
10588
+ onToggle: _ctx.toggleDropdown
10589
+ }, null, 8, ["aria-controls", "aria-expanded", "onToggle"])])) : vue.createCommentVNode("", true)]), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "input-right")], 2), _cache[20] || (_cache[20] = vue.createTextVNode()), _ctx.options && _ctx.$refs.input ? (vue.openBlock(), vue.createBlock(_component_i_combobox_dropdown, {
10590
+ key: 0,
10591
+ id: _ctx.dropdownId,
10592
+ "is-open": _ctx.dropdownIsOpen,
10593
+ options: _ctx.dropdownOptions,
10594
+ "active-option": _ctx.activeOption,
10595
+ "active-option-id": _ctx.activeOptionId,
10596
+ "input-node": _ctx.$refs.input,
10597
+ onSelect: _ctx.onDropdownSelect,
10598
+ onClose: _ctx.onDropdownClose
10599
+ }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node", "onSelect", "onClose"])) : vue.createCommentVNode("", true)], 2);
10114
10600
  }
10115
10601
  const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$w]]);
10116
10602
  const _sfc_main$G = vue.defineComponent({
@@ -10409,10 +10895,8 @@ const _sfc_main$E = vue.defineComponent({
10409
10895
  default: logic.parseNumber
10410
10896
  }
10411
10897
  },
10412
- setup() {
10413
- return {
10414
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10415
- };
10898
+ setup(props) {
10899
+ return useTextFieldSetup(props);
10416
10900
  },
10417
10901
  data() {
10418
10902
  return {
@@ -10555,10 +11039,8 @@ const _sfc_main$C = vue.defineComponent({
10555
11039
  default: logic.parseBankAccountNumber
10556
11040
  }
10557
11041
  },
10558
- setup() {
10559
- return {
10560
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10561
- };
11042
+ setup(props) {
11043
+ return useTextFieldSetup(props);
10562
11044
  },
10563
11045
  data() {
10564
11046
  return {
@@ -10586,10 +11068,8 @@ const _sfc_main$B = vue.defineComponent({
10586
11068
  default: logic.parseBankgiro
10587
11069
  }
10588
11070
  },
10589
- setup() {
10590
- return {
10591
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10592
- };
11071
+ setup(props) {
11072
+ return useTextFieldSetup(props);
10593
11073
  },
10594
11074
  data() {
10595
11075
  return {
@@ -10620,10 +11100,8 @@ const _sfc_main$A = vue.defineComponent({
10620
11100
  default: logic.parseClearingNumber
10621
11101
  }
10622
11102
  },
10623
- setup() {
10624
- return {
10625
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10626
- };
11103
+ setup(props) {
11104
+ return useTextFieldSetup(props);
10627
11105
  },
10628
11106
  data() {
10629
11107
  return {
@@ -10667,10 +11145,8 @@ const _sfc_main$z = vue.defineComponent({
10667
11145
  default: logic.parseNumber
10668
11146
  }
10669
11147
  },
10670
- setup() {
10671
- return {
10672
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10673
- };
11148
+ setup(props) {
11149
+ return useTextFieldSetup(props);
10674
11150
  },
10675
11151
  mounted() {
10676
11152
  const inputElement = getInputElement(this);
@@ -10698,10 +11174,8 @@ const _sfc_main$y = vue.defineComponent({
10698
11174
  default: logic.parsePersonnummer
10699
11175
  }
10700
11176
  },
10701
- setup() {
10702
- return {
10703
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10704
- };
11177
+ setup(props) {
11178
+ return useTextFieldSetup(props);
10705
11179
  },
10706
11180
  data() {
10707
11181
  return {
@@ -10735,10 +11209,8 @@ const _sfc_main$x = vue.defineComponent({
10735
11209
  default: logic.parsePlusgiro
10736
11210
  }
10737
11211
  },
10738
- setup() {
10739
- return {
10740
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10741
- };
11212
+ setup(props) {
11213
+ return useTextFieldSetup(props);
10742
11214
  },
10743
11215
  data() {
10744
11216
  return {
@@ -10769,10 +11241,8 @@ const _sfc_main$w = vue.defineComponent({
10769
11241
  default: logic.formatPostalCode
10770
11242
  }
10771
11243
  },
10772
- setup() {
10773
- return {
10774
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10775
- };
11244
+ setup(props) {
11245
+ return useTextFieldSetup(props);
10776
11246
  },
10777
11247
  data() {
10778
11248
  return {
@@ -10821,10 +11291,8 @@ const _sfc_main$v = vue.defineComponent({
10821
11291
  default: logic.parsePercent
10822
11292
  }
10823
11293
  },
10824
- setup() {
10825
- return {
10826
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10827
- };
11294
+ setup(props) {
11295
+ return useTextFieldSetup(props);
10828
11296
  },
10829
11297
  data() {
10830
11298
  return {
@@ -10858,10 +11326,8 @@ const _sfc_main$u = vue.defineComponent({
10858
11326
  default: logic.parseOrganisationsnummer
10859
11327
  }
10860
11328
  },
10861
- setup() {
10862
- return {
10863
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10864
- };
11329
+ setup(props) {
11330
+ return useTextFieldSetup(props);
10865
11331
  },
10866
11332
  data() {
10867
11333
  return {
@@ -13740,7 +14206,9 @@ const _sfc_main$e = vue.defineComponent({
13740
14206
  }
13741
14207
  },
13742
14208
  updateActiveItemFromVModel() {
13743
- if (this.active && !itemEquals(this.active, this.activeItem, this.keyAttribute)) {
14209
+ if (this.active === void 0) {
14210
+ this.activeItem = void 0;
14211
+ } else if (!itemEquals(this.active, this.activeItem, this.keyAttribute)) {
13744
14212
  this.activeItem = this.active;
13745
14213
  }
13746
14214
  },
@@ -16671,7 +17139,7 @@ exports.ErrorData = ErrorData;
16671
17139
  exports.ErrorPlugin = ErrorPlugin;
16672
17140
  exports.ErrorViewData = ErrorViewData;
16673
17141
  exports.EventBus = EventBus;
16674
- exports.FBadge = _sfc_main$1d;
17142
+ exports.FBadge = _sfc_main$1f;
16675
17143
  exports.FBankAccountNumberTextField = _sfc_main$C;
16676
17144
  exports.FBankgiroTextField = _sfc_main$B;
16677
17145
  exports.FCalendar = FCalendar;
@@ -16754,11 +17222,13 @@ exports.IAnimateExpand = IAnimateExpand;
16754
17222
  exports.ICalendarMonth = ICalendarMonth;
16755
17223
  exports.ICalendarMonthGrid = ICalendarMonthGrid;
16756
17224
  exports.ICalendarNavbar = ICalendarNavbar;
17225
+ exports.IComboboxDropdown = _sfc_main$S;
17226
+ exports.IComboboxToggleButton = _sfc_main$R;
16757
17227
  exports.IFlex = IFlex;
16758
17228
  exports.IFlexItem = IFlexItem;
16759
17229
  exports.IPopup = IPopup;
16760
17230
  exports.IPopupError = IPopupError;
16761
- exports.IPopupListbox = _sfc_main$U;
17231
+ exports.IPopupListbox = _sfc_main$W;
16762
17232
  exports.IPopupMenu = IPopupMenu;
16763
17233
  exports.ISkipLink = ISkipLink;
16764
17234
  exports.IValidationForm = FValidationForm;
@@ -16819,7 +17289,9 @@ exports.setRunningContext = setRunningContext;
16819
17289
  exports.sortComponentsWithErrorsOnDOMOrder = sortComponentsWithErrorsOnDOMOrder;
16820
17290
  exports.tableScrollClasses = tableScrollClasses;
16821
17291
  exports.tooltipAttachTo = tooltipAttachTo;
17292
+ exports.useCombobox = useCombobox;
16822
17293
  exports.useModal = useModal;
16823
17294
  exports.useSlotUtils = useSlotUtils;
17295
+ exports.useTextFieldSetup = useTextFieldSetup;
16824
17296
  exports.useTranslate = useTranslate;
16825
17297
  //# sourceMappingURL=index.cjs.js.map