@fkui/vue 5.42.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.
Files changed (7) hide show
  1. package/dist/cjs/index.cjs.js +721 -218
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/esm/index.esm.js +723 -220
  4. package/dist/esm/index.esm.js.map +1 -1
  5. package/dist/types/index.d.ts +1107 -17
  6. package/htmlvalidate/elements/internal-components.js +30 -2
  7. package/package.json +2 -2
package/dist/cjs/index.cjs.js CHANGED
@@ -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
@@ -3812,6 +3812,19 @@ const _sfc_main$1b = vue.defineComponent({
3812
3812
  validator(value) {
3813
3813
  return sizes.includes(value);
3814
3814
  }
3815
+ },
3816
+ /**
3817
+ * Default behavior is that the modal will restore focus to previous element once closed.
3818
+ * - "on" (default) - component will set focus both when opened and closed
3819
+ * - "off" - focus strategy disabled
3820
+ * - "open" - focus will only be applied once modal is opened
3821
+ */
3822
+ focus: {
3823
+ type: String,
3824
+ default: "on",
3825
+ validator(value) {
3826
+ return ["on", "off", "open"].includes(value);
3827
+ }
3815
3828
  }
3816
3829
  },
3817
3830
  emits: ["close"],
@@ -3864,8 +3877,12 @@ const _sfc_main$1b = vue.defineComponent({
3864
3877
  root.style.top = `-${scroll}px`;
3865
3878
  root.classList.add("modal__open");
3866
3879
  const focusElement2 = this.resolveFocusElement();
3867
- this.savedFocus = logic.pushFocus(focusElement2);
3868
- this.savedScroll = scroll;
3880
+ if (this.focus === "on") {
3881
+ this.savedFocus = logic.pushFocus(focusElement2);
3882
+ this.savedScroll = scroll;
3883
+ } else if (this.focus === "open") {
3884
+ logic.focus(focusElement2);
3885
+ }
3869
3886
  },
3870
3887
  /**
3871
3888
  * Prioritises what element to initially focus on in the following order:
@@ -3885,15 +3902,15 @@ const _sfc_main$1b = vue.defineComponent({
3885
3902
  return firstTabbableChildElement !== null && firstTabbableChildElement !== void 0 ? firstTabbableChildElement : contentElement;
3886
3903
  },
3887
3904
  restoreState() {
3888
- if (this.savedFocus) {
3889
- var _this$savedScroll;
3890
- const root = document.documentElement;
3891
- root.classList.remove("modal__open");
3892
- root.style.removeProperty("top");
3893
- root.scrollTop = (_this$savedScroll = this.savedScroll) !== null && _this$savedScroll !== void 0 ? _this$savedScroll : 0;
3905
+ var _this$savedScroll;
3906
+ const root = document.documentElement;
3907
+ root.classList.remove("modal__open");
3908
+ root.style.removeProperty("top");
3909
+ root.scrollTop = (_this$savedScroll = this.savedScroll) !== null && _this$savedScroll !== void 0 ? _this$savedScroll : 0;
3910
+ this.savedScroll = null;
3911
+ if (this.focus === "on" && this.savedFocus) {
3894
3912
  logic.popFocus(this.savedFocus);
3895
3913
  this.savedFocus = null;
3896
- this.savedScroll = null;
3897
3914
  }
3898
3915
  },
3899
3916
  onFocusFirst() {
@@ -3908,11 +3925,11 @@ const _sfc_main$1b = vue.defineComponent({
3908
3925
  }
3909
3926
  }
3910
3927
  });
3911
- const _hoisted_1$T = ["id"];
3912
- const _hoisted_2$E = {
3928
+ const _hoisted_1$V = ["id"];
3929
+ const _hoisted_2$G = {
3913
3930
  class: "modal__backdrop"
3914
3931
  };
3915
- const _hoisted_3$w = {
3932
+ const _hoisted_3$x = {
3916
3933
  class: "modal__inner-container"
3917
3934
  };
3918
3935
  const _hoisted_4$r = {
@@ -3924,7 +3941,7 @@ const _hoisted_5$l = {
3924
3941
  const _hoisted_6$g = {
3925
3942
  class: "modal__header"
3926
3943
  };
3927
- const _hoisted_7$d = {
3944
+ const _hoisted_7$e = {
3928
3945
  key: 0,
3929
3946
  ref: "modalTitle",
3930
3947
  class: "modal__title",
@@ -3948,19 +3965,19 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
3948
3965
  key: 0,
3949
3966
  id: _ctx.id,
3950
3967
  class: vue.normalizeClass(["modal", _ctx.modalClass])
3951
- }, [vue.createElementVNode("div", _hoisted_2$E, [vue.createElementVNode("div", {
3968
+ }, [vue.createElementVNode("div", _hoisted_2$G, [vue.createElementVNode("div", {
3952
3969
  class: "modal__outer-container scroll-target",
3953
3970
  tabindex: "-1",
3954
3971
  role: "dialog",
3955
3972
  "aria-modal": "true",
3956
3973
  onKeyup: _cache[3] || (_cache[3] = vue.withKeys((...args) => _ctx.onClose && _ctx.onClose(...args), ["esc"]))
3957
- }, [vue.createElementVNode("div", _hoisted_3$w, [vue.createElementVNode("div", {
3974
+ }, [vue.createElementVNode("div", _hoisted_3$x, [vue.createElementVNode("div", {
3958
3975
  ref: "modalDialogContainer",
3959
3976
  class: vue.normalizeClass(["modal__dialog-container", _ctx.containerClasses])
3960
3977
  }, [vue.createElementVNode("div", _hoisted_4$r, [vue.createElementVNode("div", _hoisted_5$l, [vue.createElementVNode("div", _hoisted_6$g, [vue.createElementVNode("div", {
3961
3978
  tabindex: "0",
3962
3979
  onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusFirst && _ctx.onFocusFirst(...args))
3963
- }, 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", {
3964
3981
  type: "button",
3965
3982
  class: "close-button",
3966
3983
  "aria-label": _ctx.ariaCloseText,
@@ -3970,9 +3987,9 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
3970
3987
  })], 8, _hoisted_11$3), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("div", {
3971
3988
  tabindex: "0",
3972
3989
  onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
3973
- }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
3990
+ }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$V)) : vue.createCommentVNode("", true);
3974
3991
  }
3975
- const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$$]]);
3992
+ const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$$]]);
3976
3993
  function prepareButtonList(src, buttonOrder = config.buttonOrder) {
3977
3994
  const list = src.map((it) => {
3978
3995
  var _it$event, _ref, _it$reason, _it$type;
@@ -4001,7 +4018,7 @@ const defaultButtons = [{
4001
4018
  event: "dismiss",
4002
4019
  type: "secondary"
4003
4020
  }];
4004
- const _sfc_main$1a = vue.defineComponent({
4021
+ const _sfc_main$1c = vue.defineComponent({
4005
4022
  name: "FConfirmModal",
4006
4023
  components: {
4007
4024
  FModal
@@ -4067,6 +4084,19 @@ const _sfc_main$1a = vue.defineComponent({
4067
4084
  default: () => {
4068
4085
  return defaultButtons;
4069
4086
  }
4087
+ },
4088
+ /**
4089
+ * Default behavior is that the modal will restore focus to previous element once closed.
4090
+ * - "on" (default) - component will set focus both when opened and closed
4091
+ * - "off" - focus strategy disabled
4092
+ * - "open" - focus will only be applied once modal is opened
4093
+ */
4094
+ focus: {
4095
+ type: String,
4096
+ default: "on",
4097
+ validator(value) {
4098
+ return ["on", "off", "open"].includes(value);
4099
+ }
4070
4100
  }
4071
4101
  },
4072
4102
  emits: ["close", ...defaultButtons.map((it) => {
@@ -4092,11 +4122,11 @@ const _sfc_main$1a = vue.defineComponent({
4092
4122
  }
4093
4123
  }
4094
4124
  });
4095
- const _hoisted_1$S = {
4125
+ const _hoisted_1$U = {
4096
4126
  class: "button-group"
4097
4127
  };
4098
- const _hoisted_2$D = ["onClick"];
4099
- const _hoisted_3$v = {
4128
+ const _hoisted_2$F = ["onClick"];
4129
+ const _hoisted_3$w = {
4100
4130
  key: 0,
4101
4131
  class: "sr-only"
4102
4132
  };
@@ -4108,26 +4138,27 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
4108
4138
  "aria-close-text": _ctx.ariaCloseText,
4109
4139
  type: "warning",
4110
4140
  size: _ctx.size,
4141
+ focus: _ctx.focus,
4111
4142
  onClose: _ctx.onClose
4112
4143
  }, {
4113
4144
  header: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "heading", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.heading), 1)])]),
4114
4145
  content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "content", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)])]),
4115
- 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) => {
4116
4147
  return vue.openBlock(), vue.createElementBlock("button", {
4117
4148
  key: button.label,
4118
4149
  type: "button",
4119
4150
  class: vue.normalizeClass([button.classlist, "button-group__item"]),
4120
4151
  onClick: ($event) => _ctx.onClick(button)
4121
- }, [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);
4122
4153
  }), 128))])]),
4123
4154
  _: 3
4124
- }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "onClose"]);
4155
+ }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
4125
4156
  }
4126
- const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$_]]);
4157
+ const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$_]]);
4127
4158
  const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
4128
4159
  const ALIGNMENT = ["top", "center", "bottom"];
4129
4160
  const FLOAT = ["left", "center", "right"];
4130
- const _sfc_main$19 = vue.defineComponent({
4161
+ const _sfc_main$1b = vue.defineComponent({
4131
4162
  name: "IFlex",
4132
4163
  inheritAttrs: true,
4133
4164
  props: {
@@ -4207,8 +4238,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
4207
4238
  class: vue.normalizeClass(["iflex", _ctx.classList])
4208
4239
  }, [vue.renderSlot(_ctx.$slots, "default")], 2);
4209
4240
  }
4210
- const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$Z]]);
4211
- 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({
4212
4243
  name: "IFlexItem",
4213
4244
  inheritAttrs: true,
4214
4245
  props: {
@@ -4260,7 +4291,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
4260
4291
  class: vue.normalizeClass(["iflex__item", _ctx.classList])
4261
4292
  }, [vue.renderSlot(_ctx.$slots, "default")], 2);
4262
4293
  }
4263
- 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]]);
4264
4295
  function focusError(item) {
4265
4296
  const element = document.querySelector(`#${item.id}`);
4266
4297
  if (!element) {
@@ -4270,7 +4301,7 @@ function focusError(item) {
4270
4301
  logic.scrollTo(element, window.innerHeight * 0.25);
4271
4302
  logic.focus(focusElement2 ? focusElement2 : element);
4272
4303
  }
4273
- const _sfc_main$17 = vue.defineComponent({
4304
+ const _sfc_main$19 = vue.defineComponent({
4274
4305
  name: "FErrorList",
4275
4306
  components: {
4276
4307
  FIcon,
@@ -4326,13 +4357,13 @@ const _sfc_main$17 = vue.defineComponent({
4326
4357
  }
4327
4358
  }
4328
4359
  });
4329
- const _hoisted_1$R = {
4360
+ const _hoisted_1$T = {
4330
4361
  class: "error-list"
4331
4362
  };
4332
- const _hoisted_2$C = {
4363
+ const _hoisted_2$E = {
4333
4364
  key: 0
4334
4365
  };
4335
- const _hoisted_3$u = {
4366
+ const _hoisted_3$v = {
4336
4367
  class: "error-list__list error-list--list-style-none"
4337
4368
  };
4338
4369
  const _hoisted_4$q = ["onClick"];
@@ -4343,7 +4374,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
4343
4374
  const _component_f_icon = vue.resolveComponent("f-icon");
4344
4375
  const _component_i_flex_item = vue.resolveComponent("i-flex-item");
4345
4376
  const _component_i_flex = vue.resolveComponent("i-flex");
4346
- 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, {
4347
4378
  default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createBlock(_component_i_flex_item, {
4348
4379
  key: 0,
4349
4380
  shrink: ""
@@ -4362,7 +4393,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
4362
4393
  })) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(_component_i_flex_item, {
4363
4394
  grow: ""
4364
4395
  }, {
4365
- 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) => {
4366
4397
  return vue.openBlock(), vue.createElementBlock("li", {
4367
4398
  key: item.id,
4368
4399
  class: vue.normalizeClass(_ctx.liClasses(item))
@@ -4393,7 +4424,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
4393
4424
  _: 3
4394
4425
  })]);
4395
4426
  }
4396
- 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]]);
4397
4428
  function cleanUpElements(vm) {
4398
4429
  return new Promise((resolve) => {
4399
4430
  window.setTimeout(() => {
@@ -4422,7 +4453,7 @@ function sortComponentsWithErrorsOnDOMOrder(componentList) {
4422
4453
  function isFormStepReference(reference) {
4423
4454
  return "isOpen" in reference.ref;
4424
4455
  }
4425
- const _sfc_main$16 = vue.defineComponent({
4456
+ const _sfc_main$18 = vue.defineComponent({
4426
4457
  name: "FValidationGroup",
4427
4458
  props: {
4428
4459
  /**
@@ -4498,13 +4529,13 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
4498
4529
  onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
4499
4530
  }, [vue.renderSlot(_ctx.$slots, "default")], 32);
4500
4531
  }
4501
- 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]]);
4502
4533
  var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
4503
4534
  FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
4504
4535
  FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
4505
4536
  return FValidationFormAction2;
4506
4537
  })(FValidationFormAction || {});
4507
- const _sfc_main$15 = vue.defineComponent({
4538
+ const _sfc_main$17 = vue.defineComponent({
4508
4539
  name: "FValidationForm",
4509
4540
  components: {
4510
4541
  FValidationGroup,
@@ -4643,8 +4674,8 @@ const _sfc_main$15 = vue.defineComponent({
4643
4674
  }
4644
4675
  }
4645
4676
  });
4646
- const _hoisted_1$Q = ["id"];
4647
- const _hoisted_2$B = {
4677
+ const _hoisted_1$S = ["id"];
4678
+ const _hoisted_2$D = {
4648
4679
  key: 0,
4649
4680
  ref: "errors",
4650
4681
  tabindex: "-1",
@@ -4665,19 +4696,19 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
4665
4696
  novalidate: "",
4666
4697
  autocomplete: "off",
4667
4698
  onSubmit: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onSubmit && _ctx.onSubmit(...args), ["prevent"]))
4668
- }), [_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, {
4669
4700
  items: _ctx.errors,
4670
4701
  bullets: _ctx.errorListBullets,
4671
4702
  "before-navigate": _ctx.errorListBeforeNavigate
4672
4703
  }, {
4673
4704
  title: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message")]),
4674
4705
  _: 3
4675
- }, 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)]),
4676
4707
  _: 3
4677
4708
  }, 8, ["modelValue"]);
4678
4709
  }
4679
- const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$V]]);
4680
- 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({
4681
4712
  name: "FFormModal",
4682
4713
  components: {
4683
4714
  FModal,
@@ -4829,11 +4860,11 @@ const _sfc_main$14 = vue.defineComponent({
4829
4860
  }
4830
4861
  }
4831
4862
  });
4832
- const _hoisted_1$P = {
4863
+ const _hoisted_1$R = {
4833
4864
  class: "button-group"
4834
4865
  };
4835
- const _hoisted_2$A = ["type", "form", "onClick"];
4836
- const _hoisted_3$t = {
4866
+ const _hoisted_2$C = ["type", "form", "onClick"];
4867
+ const _hoisted_3$u = {
4837
4868
  key: 0,
4838
4869
  class: "sr-only"
4839
4870
  };
@@ -4862,7 +4893,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
4862
4893
  default: vue.withCtx(() => [_cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "input-text-fields")]),
4863
4894
  _: 3
4864
4895
  }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit", "onCancel"])]),
4865
- 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, {
4866
4897
  key: 0
4867
4898
  }, vue.renderList(_ctx.preparedButtons, (button) => {
4868
4899
  return vue.openBlock(), vue.createElementBlock("button", {
@@ -4871,7 +4902,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
4871
4902
  class: vue.normalizeClass([button.classlist, "button-group__item"]),
4872
4903
  form: button.buttonType === "submit" ? _ctx.formId : void 0,
4873
4904
  onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
4874
- }, [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);
4875
4906
  }), 128)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
4876
4907
  key: 1
4877
4908
  }, [vue.createElementVNode("button", {
@@ -4888,7 +4919,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
4888
4919
  _: 3
4889
4920
  }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
4890
4921
  }
4891
- 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]]);
4892
4923
  async function confirmModal(callingInstance, texts) {
4893
4924
  const buttons = [{
4894
4925
  label: texts.confirm,
@@ -5214,7 +5245,7 @@ const ErrorPlugin = {
5214
5245
  }
5215
5246
  }
5216
5247
  };
5217
- const _sfc_main$13 = vue.defineComponent({
5248
+ const _sfc_main$15 = vue.defineComponent({
5218
5249
  name: "FErrorPage",
5219
5250
  props: {
5220
5251
  payload: {
@@ -5224,16 +5255,16 @@ const _sfc_main$13 = vue.defineComponent({
5224
5255
  }
5225
5256
  }
5226
5257
  });
5227
- const _hoisted_1$O = {
5258
+ const _hoisted_1$Q = {
5228
5259
  "data-test": "f-error-page"
5229
5260
  };
5230
5261
  function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
5231
- 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", {
5232
5263
  href: "/"
5233
5264
  }, "Gå till startsidan", -1)]));
5234
5265
  }
5235
- const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$T]]);
5236
- 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({
5237
5268
  name: "FErrorHandlingApp",
5238
5269
  props: {
5239
5270
  defaultComponent: {
@@ -5272,7 +5303,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
5272
5303
  key: 2
5273
5304
  })]);
5274
5305
  }
5275
- 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]]);
5276
5307
  function isMonthBefore(date2, minDate) {
5277
5308
  return Boolean(minDate && date2.isBefore(minDate.startOfMonth()));
5278
5309
  }
@@ -5283,7 +5314,7 @@ function isInvalidMonth(date2, minDate, maxDate) {
5283
5314
  const startOfMonth = date2.startOfMonth();
5284
5315
  return isMonthBefore(startOfMonth, minDate) || isMonthAfter(startOfMonth, maxDate);
5285
5316
  }
5286
- function getMessage($t, date2, minDate, maxDate) {
5317
+ function getMessage($t2, date2, minDate, maxDate) {
5287
5318
  const invalidMonth = isInvalidMonth(date2, minDate, maxDate);
5288
5319
  if (!invalidMonth) {
5289
5320
  return void 0;
@@ -5294,7 +5325,7 @@ function getMessage($t, date2, minDate, maxDate) {
5294
5325
  monthName,
5295
5326
  year
5296
5327
  } = minDate;
5297
- 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}}", {
5298
5329
  day,
5299
5330
  month: monthName,
5300
5331
  year
@@ -5306,14 +5337,14 @@ function getMessage($t, date2, minDate, maxDate) {
5306
5337
  monthName,
5307
5338
  year
5308
5339
  } = maxDate;
5309
- 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}}", {
5310
5341
  day,
5311
5342
  month: monthName,
5312
5343
  year
5313
5344
  });
5314
5345
  }
5315
5346
  }
5316
- const _sfc_main$11 = vue.defineComponent({
5347
+ const _sfc_main$13 = vue.defineComponent({
5317
5348
  name: "ICalendarNavbar",
5318
5349
  components: {
5319
5350
  FIcon
@@ -5427,14 +5458,14 @@ const _sfc_main$11 = vue.defineComponent({
5427
5458
  }
5428
5459
  }
5429
5460
  });
5430
- const _hoisted_1$N = {
5461
+ const _hoisted_1$P = {
5431
5462
  class: "calendar-navbar"
5432
5463
  };
5433
- const _hoisted_2$z = {
5464
+ const _hoisted_2$B = {
5434
5465
  class: "calendar-navbar__month",
5435
5466
  tabindex: "-1"
5436
5467
  };
5437
- const _hoisted_3$s = ["aria-disabled", "aria-live"];
5468
+ const _hoisted_3$t = ["aria-disabled", "aria-live"];
5438
5469
  const _hoisted_4$o = {
5439
5470
  class: "sr-only"
5440
5471
  };
@@ -5444,7 +5475,7 @@ const _hoisted_6$f = {
5444
5475
  };
5445
5476
  function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
5446
5477
  const _component_f_icon = vue.resolveComponent("f-icon");
5447
- 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", {
5448
5479
  ref: "previousButton",
5449
5480
  class: "calendar-navbar__arrow calendar-navbar__arrow--previous",
5450
5481
  type: "button",
@@ -5454,7 +5485,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
5454
5485
  }, [vue.createElementVNode("span", _hoisted_4$o, vue.toDisplayString(_ctx.previousSrText), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
5455
5486
  class: vue.normalizeClass(_ctx.previousIconClasses),
5456
5487
  name: "arrow-right"
5457
- }, 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", {
5458
5489
  ref: "nextButton",
5459
5490
  class: "calendar-navbar__arrow calendar-navbar__arrow--next",
5460
5491
  type: "button",
@@ -5466,14 +5497,14 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
5466
5497
  name: "arrow-right"
5467
5498
  }, null, 8, ["class"])], 8, _hoisted_5$j)]);
5468
5499
  }
5469
- 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]]);
5470
5501
  function getDayStartOffset(days) {
5471
5502
  return days[0].weekDay - 1;
5472
5503
  }
5473
5504
  function getDayEndOffset(days) {
5474
5505
  return 7 - days[days.length - 1].weekDay;
5475
5506
  }
5476
- const _sfc_main$10 = vue.defineComponent({
5507
+ const _sfc_main$12 = vue.defineComponent({
5477
5508
  name: "ICalendarMonthGrid",
5478
5509
  props: {
5479
5510
  /**
@@ -5544,14 +5575,14 @@ const _sfc_main$10 = vue.defineComponent({
5544
5575
  }
5545
5576
  }
5546
5577
  });
5547
- const _hoisted_1$M = {
5578
+ const _hoisted_1$O = {
5548
5579
  key: 0,
5549
5580
  class: "calendar-month__col--week"
5550
5581
  };
5551
- const _hoisted_2$y = {
5582
+ const _hoisted_2$A = {
5552
5583
  role: "presentation"
5553
5584
  };
5554
- const _hoisted_3$r = {
5585
+ const _hoisted_3$s = {
5555
5586
  role: "presentation"
5556
5587
  };
5557
5588
  const _hoisted_4$n = {
@@ -5564,7 +5595,7 @@ const _hoisted_5$i = ["title"];
5564
5595
  const _hoisted_6$e = {
5565
5596
  role: "presentation"
5566
5597
  };
5567
- const _hoisted_7$c = {
5598
+ const _hoisted_7$d = {
5568
5599
  key: 0,
5569
5600
  class: "calendar-month__cell calendar-month__cell--week-number",
5570
5601
  "aria-hidden": "true"
@@ -5587,7 +5618,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5587
5618
  role: "application",
5588
5619
  onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusin && _ctx.onFocusin(...args)),
5589
5620
  onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusout && _ctx.onFocusout(...args))
5590
- }, [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", {
5591
5622
  class: "calendar-month__col--day"
5592
5623
  }, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), _cache[5] || (_cache[5] = vue.createElementVNode("col", {
5593
5624
  class: "calendar-month__col--day"
@@ -5601,7 +5632,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5601
5632
  class: "calendar-month__col--day"
5602
5633
  }, null, -1)), _cache[14] || (_cache[14] = vue.createTextVNode()), _cache[15] || (_cache[15] = vue.createElementVNode("col", {
5603
5634
  class: "calendar-month__col--day"
5604
- }, 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) => {
5605
5636
  return vue.openBlock(), vue.createElementBlock("th", {
5606
5637
  key: weekday.name,
5607
5638
  scope: "col",
@@ -5615,7 +5646,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5615
5646
  return vue.openBlock(), vue.createElementBlock("tr", {
5616
5647
  key: week.week,
5617
5648
  role: "presentation"
5618
- }, [!_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", {
5619
5650
  key: 1,
5620
5651
  class: "calendar-month__cell",
5621
5652
  colspan: _ctx.getDayStartOffset(week.days),
@@ -5645,7 +5676,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
5645
5676
  "aria-hidden": "true"
5646
5677
  }, null, 8, _hoisted_13$1)])) : vue.createCommentVNode("", true)])], 32);
5647
5678
  }
5648
- 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]]);
5649
5680
  const DayStep = {
5650
5681
  ArrowRight: 1,
5651
5682
  ArrowLeft: -1,
@@ -5669,7 +5700,7 @@ function getDayTabindex(date2, active, entry) {
5669
5700
  return date2.day === 1 ? 0 : -1;
5670
5701
  }
5671
5702
  }
5672
- const _sfc_main$$ = vue.defineComponent({
5703
+ const _sfc_main$11 = vue.defineComponent({
5673
5704
  name: "ICalendarMonth",
5674
5705
  components: {
5675
5706
  ICalendarMonthGrid
@@ -5755,7 +5786,7 @@ const _sfc_main$$ = vue.defineComponent({
5755
5786
  }
5756
5787
  }
5757
5788
  });
5758
- const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
5789
+ const _hoisted_1$N = ["data-date", "tabindex", "onClick", "onKeydown"];
5759
5790
  function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
5760
5791
  const _component_i_calendar_month_grid = vue.resolveComponent("i-calendar-month-grid");
5761
5792
  return vue.openBlock(), vue.createBlock(_component_i_calendar_month_grid, {
@@ -5775,12 +5806,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
5775
5806
  }, [vue.renderSlot(_ctx.$slots, "default", {
5776
5807
  date: date2,
5777
5808
  isFocused: _ctx.isDayFocused(date2)
5778
- })], 40, _hoisted_1$L)]),
5809
+ })], 40, _hoisted_1$N)]),
5779
5810
  _: 3
5780
5811
  }, 8, ["value"]);
5781
5812
  }
5782
- const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$P]]);
5783
- 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({
5784
5815
  name: "FCalendar",
5785
5816
  components: {
5786
5817
  ICalendarNavbar,
@@ -5832,13 +5863,13 @@ const _sfc_main$_ = vue.defineComponent({
5832
5863
  }
5833
5864
  }
5834
5865
  });
5835
- const _hoisted_1$K = {
5866
+ const _hoisted_1$M = {
5836
5867
  class: "calendar__wrapper"
5837
5868
  };
5838
5869
  function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
5839
5870
  const _component_i_calendar_navbar = vue.resolveComponent("i-calendar-navbar");
5840
5871
  const _component_i_calendar_month = vue.resolveComponent("i-calendar-month");
5841
- 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, {
5842
5873
  "model-value": _ctx.modelValue,
5843
5874
  "min-date": _ctx.minDate,
5844
5875
  "max-date": _ctx.maxDate,
@@ -5861,7 +5892,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
5861
5892
  _: 3
5862
5893
  }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
5863
5894
  }
5864
- const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$O]]);
5895
+ const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$O]]);
5865
5896
  function getCalendarDaySrText(day, enabled, selected, t) {
5866
5897
  const parts = [];
5867
5898
  if (!enabled) {
@@ -5880,7 +5911,7 @@ function getCalendarDaySrText(day, enabled, selected, t) {
5880
5911
  parts.push(day.toString(date.DateFormat.FULL));
5881
5912
  return parts.join(" ");
5882
5913
  }
5883
- const _sfc_main$Z = vue.defineComponent({
5914
+ const _sfc_main$$ = vue.defineComponent({
5884
5915
  name: "FCalendarDay",
5885
5916
  mixins: [TranslationMixin],
5886
5917
  props: {
@@ -5945,18 +5976,18 @@ const _sfc_main$Z = vue.defineComponent({
5945
5976
  }
5946
5977
  }
5947
5978
  });
5948
- const _hoisted_1$J = {
5979
+ const _hoisted_1$L = {
5949
5980
  "aria-hidden": "true"
5950
5981
  };
5951
- const _hoisted_2$x = {
5982
+ const _hoisted_2$z = {
5952
5983
  class: "sr-only"
5953
5984
  };
5954
5985
  function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
5955
5986
  return vue.openBlock(), vue.createElementBlock("span", {
5956
5987
  class: vue.normalizeClass(_ctx.dayClasses)
5957
- }, [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);
5958
5989
  }
5959
- const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$N]]);
5990
+ const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$N]]);
5960
5991
  function offset(page, el) {
5961
5992
  const rect = el.getBoundingClientRect();
5962
5993
  return {
@@ -6241,7 +6272,7 @@ function isTeleportDisabled(options) {
6241
6272
  }
6242
6273
  return disableTeleport;
6243
6274
  }
6244
- const _sfc_main$Y = vue.defineComponent({
6275
+ const _sfc_main$_ = vue.defineComponent({
6245
6276
  name: "IPopup",
6246
6277
  inheritAttrs: false,
6247
6278
  props: {
@@ -6553,7 +6584,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
6553
6584
  placement: _ctx.placement
6554
6585
  })))], 544)], 16)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
6555
6586
  }
6556
- const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$M]]);
6587
+ const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$M]]);
6557
6588
  function isContextMenuTextItem(value) {
6558
6589
  return typeof value.key === "string";
6559
6590
  }
@@ -6601,7 +6632,7 @@ async function doMenuAction$2(action, target) {
6601
6632
  }
6602
6633
  const preventKeys$2 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter", "Escape"];
6603
6634
  const keyUp = ["ArrowUp", "Up"];
6604
- const _sfc_main$X = vue.defineComponent({
6635
+ const _sfc_main$Z = vue.defineComponent({
6605
6636
  name: "FContextMenu",
6606
6637
  components: {
6607
6638
  IPopup,
@@ -6765,14 +6796,14 @@ const _sfc_main$X = vue.defineComponent({
6765
6796
  }
6766
6797
  }
6767
6798
  });
6768
- const _hoisted_1$I = ["aria-label"];
6769
- const _hoisted_2$w = {
6799
+ const _hoisted_1$K = ["aria-label"];
6800
+ const _hoisted_2$y = {
6770
6801
  ref: "contextmenu",
6771
6802
  role: "menu",
6772
6803
  tabindex: "-1",
6773
6804
  class: "contextmenu__list"
6774
6805
  };
6775
- const _hoisted_3$q = ["onClick"];
6806
+ const _hoisted_3$r = ["onClick"];
6776
6807
  const _hoisted_4$m = ["tabindex"];
6777
6808
  const _hoisted_5$h = {
6778
6809
  key: 0,
@@ -6795,7 +6826,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
6795
6826
  "aria-label": _ctx.ariaLabel,
6796
6827
  onKeyup: _cache[0] || (_cache[0] = (...args) => _ctx.onKeyUp && _ctx.onKeyUp(...args)),
6797
6828
  onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args))
6798
- }, [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) => {
6799
6830
  return vue.openBlock(), vue.createElementBlock("li", {
6800
6831
  key: item.key,
6801
6832
  role: "menuitem",
@@ -6813,13 +6844,13 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
6813
6844
  }, null, 8, ["name", "library"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("a", {
6814
6845
  ref_for: true,
6815
6846
  ref: "anchors"
6816
- }, 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);
6817
- }), 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)]),
6818
6849
  _: 1
6819
6850
  }, 8, ["is-open", "anchor", "focus-element"]);
6820
6851
  }
6821
- const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$L]]);
6822
- 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({
6823
6854
  name: "FExpand",
6824
6855
  data() {
6825
6856
  return {
@@ -6885,7 +6916,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
6885
6916
  _: 3
6886
6917
  }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
6887
6918
  }
6888
- 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]]);
6889
6920
  function computeArrowOffset(placement, inputIconRect, wrapperRect) {
6890
6921
  switch (placement) {
6891
6922
  case Placement.A: {
@@ -6949,7 +6980,7 @@ function computeArrowOffset(placement, inputIconRect, wrapperRect) {
6949
6980
  }
6950
6981
  }
6951
6982
  const POPUP_SPACING = 10;
6952
- const _sfc_main$V = vue.defineComponent({
6983
+ const _sfc_main$X = vue.defineComponent({
6953
6984
  name: "IPopupError",
6954
6985
  components: {
6955
6986
  FIcon
@@ -7084,7 +7115,7 @@ const _sfc_main$V = vue.defineComponent({
7084
7115
  }
7085
7116
  }
7086
7117
  });
7087
- const _hoisted_1$H = {
7118
+ const _hoisted_1$J = {
7088
7119
  ref: "wrapper",
7089
7120
  class: "popup-error__wrapper"
7090
7121
  };
@@ -7098,7 +7129,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
7098
7129
  ref: "popup",
7099
7130
  class: vue.normalizeClass(_ctx.popupClasses),
7100
7131
  "aria-hidden": "true"
7101
- }, [vue.createElementVNode("div", _hoisted_1$H, [vue.createElementVNode("div", {
7132
+ }, [vue.createElementVNode("div", _hoisted_1$J, [vue.createElementVNode("div", {
7102
7133
  class: vue.normalizeClass(_ctx.arrowClass),
7103
7134
  style: vue.normalizeStyle(_ctx.errorStyle)
7104
7135
  }, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.errorMessage), 1), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("button", {
@@ -7112,7 +7143,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
7112
7143
  class: "button__icon"
7113
7144
  })])], 6)], 512)], 2)], 8, ["disabled"])) : vue.createCommentVNode("", true);
7114
7145
  }
7115
- 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]]);
7116
7147
  function useEventListener(target, event, callback) {
7117
7148
  vue.onMounted(() => {
7118
7149
  var _a;
@@ -7133,15 +7164,16 @@ function useSlotUtils() {
7133
7164
  }
7134
7165
  };
7135
7166
  }
7136
- function numItems(itemHeight, availableHeight) {
7137
- 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);
7138
7170
  }
7139
- function tryBelow(itemHeight, numOfItems, anchor, viewport) {
7171
+ function tryBelow(itemHeight, numOfItems, anchor, viewport, verticalSpacing) {
7140
7172
  const p1 = viewport.y + viewport.height;
7141
7173
  const p2 = anchor.y + anchor.height;
7142
7174
  const availableHeight = p1 - p2;
7143
- const itemsFit = numItems(itemHeight, availableHeight);
7144
- if (itemsFit < 2) {
7175
+ const itemsFit = numItems(itemHeight, availableHeight, verticalSpacing);
7176
+ if (itemsFit < 3) {
7145
7177
  return void 0;
7146
7178
  }
7147
7179
  const fittedHeight = itemHeight * Math.min(numOfItems, itemsFit);
@@ -7152,18 +7184,18 @@ function tryBelow(itemHeight, numOfItems, anchor, viewport) {
7152
7184
  height: fittedHeight
7153
7185
  };
7154
7186
  }
7155
- function tryAbove(itemHeight, numOfItems, anchor, viewport) {
7187
+ function tryAbove(itemHeight, numOfItems, anchor, viewport, verticalSpacing) {
7156
7188
  const p1 = viewport.y;
7157
7189
  const p2 = anchor.y;
7158
7190
  const availableHeight = p2 - p1;
7159
- const itemsFit = numItems(itemHeight, availableHeight);
7160
- if (itemsFit < 2) {
7191
+ const itemsFit = numItems(itemHeight, availableHeight, verticalSpacing);
7192
+ if (itemsFit < 3) {
7161
7193
  return void 0;
7162
7194
  }
7163
7195
  const fittedHeight = itemHeight * Math.min(numOfItems, itemsFit);
7164
7196
  return {
7165
7197
  left: anchor.x,
7166
- top: anchor.y - fittedHeight,
7198
+ top: anchor.y - fittedHeight - verticalSpacing,
7167
7199
  width: anchor.width,
7168
7200
  height: fittedHeight
7169
7201
  };
@@ -7174,7 +7206,8 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
7174
7206
  } = window) {
7175
7207
  const {
7176
7208
  itemHeight,
7177
- numOfItems
7209
+ numOfItems,
7210
+ verticalSpacing
7178
7211
  } = options;
7179
7212
  const rect = anchor.getBoundingClientRect();
7180
7213
  const anchorRect = {
@@ -7187,19 +7220,22 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
7187
7220
  y: scrollY,
7188
7221
  height: root.clientHeight
7189
7222
  };
7190
- const d = tryBelow(itemHeight, numOfItems, anchorRect, viewportRect);
7191
- if (d) {
7192
- return d;
7223
+ const below = tryBelow(itemHeight, numOfItems, anchorRect, viewportRect, verticalSpacing);
7224
+ if (below) {
7225
+ return below;
7193
7226
  }
7194
- const u = tryAbove(itemHeight, numOfItems, anchorRect, viewportRect);
7195
- if (u) {
7196
- return u;
7227
+ const above = tryAbove(itemHeight, numOfItems, anchorRect, viewportRect, verticalSpacing);
7228
+ if (above) {
7229
+ return above;
7197
7230
  }
7198
7231
  return void 0;
7199
7232
  }
7200
- const _hoisted_1$G = ["onKeyup"];
7233
+ const _hoisted_1$I = ["onKeyup"];
7234
+ const _hoisted_2$x = {
7235
+ ref: "content"
7236
+ };
7201
7237
  const teleportDisabled = false;
7202
- const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7238
+ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
7203
7239
  __name: "IPopupListbox",
7204
7240
  props: {
7205
7241
  isOpen: {
@@ -7207,21 +7243,39 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7207
7243
  },
7208
7244
  anchor: {},
7209
7245
  numOfItems: {},
7210
- itemHeight: {}
7246
+ itemHeight: {},
7247
+ activeElement: {}
7211
7248
  },
7212
7249
  emits: ["close"],
7213
7250
  setup(__props, {
7214
7251
  emit: __emit
7215
7252
  }) {
7216
7253
  const emit = __emit;
7217
- const wrapper = vue.useTemplateRef("wrapper");
7218
- const content = vue.useTemplateRef("content");
7254
+ const wrapperRef = vue.useTemplateRef("wrapper");
7255
+ const contentRef = vue.useTemplateRef("content");
7219
7256
  const popupClasses = ["popup", "popup--overlay"];
7220
7257
  const teleportTarget = vue.computed(() => {
7221
7258
  var _config$popupTarget;
7222
7259
  return (_config$popupTarget = config.popupTarget) !== null && _config$popupTarget !== void 0 ? _config$popupTarget : config.teleportTarget;
7223
7260
  });
7261
+ let guessedItemHeight = void 0;
7262
+ let verticalSpacing = void 0;
7224
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
+ });
7225
7279
  function addListeners() {
7226
7280
  document.addEventListener("click", onDocumentClickHandler);
7227
7281
  window.addEventListener("resize", logic.debounce(onResize, 100));
@@ -7230,6 +7284,14 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7230
7284
  document.removeEventListener("click", onDocumentClickHandler);
7231
7285
  window.removeEventListener("resize", logic.debounce(onResize, 100));
7232
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
+ }
7233
7295
  vue.watchEffect(() => {
7234
7296
  if (__props.isOpen) {
7235
7297
  calculatePosition();
@@ -7242,6 +7304,11 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7242
7304
  removeListeners();
7243
7305
  }
7244
7306
  });
7307
+ vue.watch(() => __props.numOfItems, (oldValue, newValue) => {
7308
+ if (oldValue !== newValue && __props.isOpen) {
7309
+ calculatePosition();
7310
+ }
7311
+ });
7245
7312
  vue.onUnmounted(removeListeners);
7246
7313
  function onDocumentClickHandler() {
7247
7314
  emit("close");
@@ -7262,21 +7329,30 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7262
7329
  async function calculatePosition() {
7263
7330
  var _a;
7264
7331
  await vue.nextTick();
7265
- const wrapperElement = wrapper.value;
7266
- const contentWrapper = content.value;
7332
+ const wrapperElement = wrapperRef.value;
7333
+ const contentWrapper = contentRef.value;
7267
7334
  if (!__props.anchor || !wrapperElement || !contentWrapper) {
7268
7335
  return;
7269
7336
  }
7270
7337
  let contentItemHeigth = __props.itemHeight;
7271
7338
  if (!contentItemHeigth) {
7272
- 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;
7273
7348
  }
7274
7349
  wrapperElement.style.overflowY = "auto";
7275
- wrapperElement.style.left = `0px`;
7276
- wrapperElement.style.boxShadow = "none";
7350
+ wrapperElement.style.overflowX = "hidden";
7351
+ wrapperElement.style.left = "0px";
7277
7352
  const rect = computeListboxRect(__props.anchor, {
7278
7353
  itemHeight: contentItemHeigth,
7279
- numOfItems: __props.numOfItems
7354
+ numOfItems: __props.numOfItems,
7355
+ verticalSpacing
7280
7356
  });
7281
7357
  if (rect) {
7282
7358
  var _offsetRect$x;
@@ -7290,8 +7366,9 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7290
7366
  const offsetLeft = (_offsetRect$x = offsetRect == null ? void 0 : offsetRect.x) !== null && _offsetRect$x !== void 0 ? _offsetRect$x : 0;
7291
7367
  wrapperElement.style.top = `${top}px`;
7292
7368
  wrapperElement.style.left = `${left - offsetLeft}px`;
7293
- wrapperElement.style.minWidth = `${width}px`;
7294
- wrapperElement.style.maxHeight = `${height}px`;
7369
+ wrapperElement.style.width = `${width}px`;
7370
+ contentWrapper.style.maxHeight = `${height}px`;
7371
+ contentWrapper.style.width = `${width}px`;
7295
7372
  }
7296
7373
  }
7297
7374
  return (_ctx, _cache) => {
@@ -7303,17 +7380,14 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
7303
7380
  ref: "popup",
7304
7381
  class: vue.normalizeClass(popupClasses)
7305
7382
  }, [vue.createElementVNode("div", vue.mergeProps({
7306
- ref_key: "wrapper",
7307
- ref: wrapper
7383
+ ref: "wrapper"
7308
7384
  }, _ctx.$attrs, {
7309
7385
  class: "popup__wrapper",
7386
+ tabindex: "0",
7310
7387
  onKeyup: vue.withKeys(vue.withModifiers(onKeyEsc, ["stop"]), ["esc"]),
7311
7388
  onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
7312
7389
  }, ["stop"]))
7313
- }), [vue.createElementVNode("div", {
7314
- ref_key: "content",
7315
- ref: content
7316
- }, [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);
7317
7391
  };
7318
7392
  }
7319
7393
  });
@@ -7357,7 +7431,7 @@ async function doMenuAction$1(action, target) {
7357
7431
  }
7358
7432
  }
7359
7433
  const preventKeys$1 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter"];
7360
- const _sfc_main$T = vue.defineComponent({
7434
+ const _sfc_main$V = vue.defineComponent({
7361
7435
  name: "IPopupMenu",
7362
7436
  components: {
7363
7437
  IPopup
@@ -7613,12 +7687,12 @@ const _sfc_main$T = vue.defineComponent({
7613
7687
  }
7614
7688
  }
7615
7689
  });
7616
- const _hoisted_1$F = ["aria-label"];
7617
- const _hoisted_2$v = {
7690
+ const _hoisted_1$H = ["aria-label"];
7691
+ const _hoisted_2$w = {
7618
7692
  role: "menu",
7619
7693
  class: "ipopupmenu__list"
7620
7694
  };
7621
- const _hoisted_3$p = ["onClick"];
7695
+ const _hoisted_3$q = ["onClick"];
7622
7696
  const _hoisted_4$l = ["data-ref-index", "href", "target"];
7623
7697
  const _hoisted_5$g = {
7624
7698
  key: 0,
@@ -7639,7 +7713,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
7639
7713
  default: vue.withCtx(() => [vue.createElementVNode("nav", {
7640
7714
  class: "ipopupmenu ipopupmenu--vertical",
7641
7715
  "aria-label": _ctx.ariaLabel
7642
- }, [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) => {
7643
7717
  return vue.openBlock(), vue.createElementBlock("li", {
7644
7718
  ref_for: true,
7645
7719
  ref: "items",
@@ -7655,18 +7729,18 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
7655
7729
  role: "menuitem",
7656
7730
  target: item.target,
7657
7731
  tabindex: "0"
7658
- }, [_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);
7659
- }), 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)]),
7660
7734
  _: 1
7661
7735
  }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
7662
7736
  }
7663
- 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]]);
7664
7738
  const ANIMATION_DURATION = 500;
7665
7739
  const NO_CSS_CLASSES = "";
7666
7740
  const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
7667
7741
  const CLOSED_CSS_CLASS = "animate-expand";
7668
7742
  const ANIMATION_CSS_CLASSES = "animate-expand animate-expand--expanded";
7669
- const _sfc_main$S = vue.defineComponent({
7743
+ const _sfc_main$U = vue.defineComponent({
7670
7744
  name: "IAnimateExpand",
7671
7745
  props: {
7672
7746
  /**
@@ -7858,7 +7932,7 @@ const _sfc_main$S = vue.defineComponent({
7858
7932
  }
7859
7933
  }
7860
7934
  });
7861
- const _hoisted_1$E = {
7935
+ const _hoisted_1$G = {
7862
7936
  key: 0,
7863
7937
  ref: "content",
7864
7938
  "data-test": "animation-content"
@@ -7867,10 +7941,10 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
7867
7941
  return vue.openBlock(), vue.createElementBlock("div", {
7868
7942
  class: vue.normalizeClass(_ctx.animationClasses),
7869
7943
  style: vue.normalizeStyle(_ctx.heightStyle)
7870
- }, [_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);
7871
7945
  }
7872
- const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$H]]);
7873
- 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({
7874
7948
  name: "ISkipLink",
7875
7949
  mixins: [TranslationMixin],
7876
7950
  props: {
@@ -7884,14 +7958,355 @@ const _sfc_main$R = vue.defineComponent({
7884
7958
  }
7885
7959
  }
7886
7960
  });
7887
- const _hoisted_1$D = ["href"];
7961
+ const _hoisted_1$F = ["href"];
7888
7962
  function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
7889
7963
  return vue.openBlock(), vue.createElementBlock("a", {
7890
7964
  class: "iskiplink",
7891
7965
  href: _ctx.href
7892
- }, [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
+ }
7893
8212
  }
7894
- 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
+ });
7895
8310
  const tooltipAttachTo = Symbol("tooltipAttachTo");
7896
8311
  let initialized = false;
7897
8312
  const reducedMotion = vue.ref(false);
@@ -8486,7 +8901,7 @@ const _hoisted_5$e = {
8486
8901
  const _hoisted_6$c = {
8487
8902
  key: 1
8488
8903
  };
8489
- const _hoisted_7$b = {
8904
+ const _hoisted_7$c = {
8490
8905
  ref: "tooltipAttachTo",
8491
8906
  class: "label"
8492
8907
  };
@@ -8517,7 +8932,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
8517
8932
  name: "error"
8518
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, {
8519
8934
  key: 1
8520
- }, [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", {
8521
8936
  key: 0,
8522
8937
  class: vue.normalizeClass(["label", _ctx.groupLabelClass]),
8523
8938
  "aria-hidden": "true"
@@ -9490,7 +9905,7 @@ const _hoisted_5$d = {
9490
9905
  class: "label__message label__message--error"
9491
9906
  };
9492
9907
  const _hoisted_6$b = ["for"];
9493
- const _hoisted_7$a = {
9908
+ const _hoisted_7$b = {
9494
9909
  key: 0,
9495
9910
  class: "label__message label__message--error"
9496
9911
  };
@@ -9516,7 +9931,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
9516
9931
  }, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "description", vue.normalizeProps(vue.guardReactiveProps({
9517
9932
  descriptionClass: _ctx.descriptionClass,
9518
9933
  discreteDescriptionClass: _ctx.discreteDescriptionClass
9519
- }))), _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, {
9520
9935
  class: "label__icon--left",
9521
9936
  name: "error"
9522
9937
  }), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message")])) : vue.createCommentVNode("", true)], 8, _hoisted_6$b));
@@ -9708,12 +10123,54 @@ const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_r
9708
10123
  function resolveWidthClass(words, inline) {
9709
10124
  return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
9710
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
+ }
9711
10166
  const _sfc_main$H = vue.defineComponent({
9712
10167
  name: "FTextField",
9713
10168
  components: {
9714
10169
  FLabel,
9715
10170
  FIcon,
9716
- IPopupError
10171
+ IPopupError,
10172
+ IComboboxDropdown: _sfc_main$S,
10173
+ IComboboxToggleButton: _sfc_main$R
9717
10174
  },
9718
10175
  inheritAttrs: false,
9719
10176
  props: {
@@ -9808,18 +10265,52 @@ const _sfc_main$H = vue.defineComponent({
9808
10265
  type: String,
9809
10266
  required: false,
9810
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
9811
10280
  }
9812
10281
  },
9813
10282
  emits: ["blur", "change", "update", "update:modelValue"],
9814
- 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);
9815
10297
  return {
9816
- 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
9817
10309
  };
9818
10310
  },
9819
10311
  data() {
9820
10312
  return {
9821
10313
  showErrorPopup: false,
9822
- viewValue: "",
9823
10314
  lastModelValue: "",
9824
10315
  validationMessage: "",
9825
10316
  validityMode: "INITIAL",
@@ -9882,6 +10373,12 @@ const _sfc_main$H = vue.defineComponent({
9882
10373
  this.isAfterInitialRender = true;
9883
10374
  },
9884
10375
  methods: {
10376
+ onDropdownSelect(value) {
10377
+ this.selectOption(value);
10378
+ },
10379
+ onDropdownClose() {
10380
+ this.closeDropdown();
10381
+ },
9885
10382
  getErrorPopupAnchor() {
9886
10383
  return this.$refs.input;
9887
10384
  },
@@ -10016,10 +10513,16 @@ const _hoisted_6$a = {
10016
10513
  key: 2,
10017
10514
  class: "text-field__append-inner"
10018
10515
  };
10516
+ const _hoisted_7$a = {
10517
+ key: 3,
10518
+ class: "text-field__append-inner"
10519
+ };
10019
10520
  function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
10020
10521
  const _component_f_label = vue.resolveComponent("f-label");
10021
10522
  const _component_f_icon = vue.resolveComponent("f-icon");
10022
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");
10023
10526
  return vue.openBlock(), vue.createElementBlock("div", {
10024
10527
  class: vue.normalizeClass(["text-field", _ctx.rootClass])
10025
10528
  }, [vue.createElementVNode("div", {
@@ -10053,9 +10556,9 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
10053
10556
  name: "tooltip",
10054
10557
  fn: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "tooltip")]),
10055
10558
  key: "0"
10056
- } : 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", {
10057
10560
  class: vue.normalizeClass(["text-field__input-wrapper", _ctx.inputWrapperClass])
10058
- }, [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({
10059
10562
  id: _ctx.id,
10060
10563
  ref: "input",
10061
10564
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.viewValue = $event),
@@ -10079,7 +10582,21 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
10079
10582
  "is-open": _ctx.showPopupError,
10080
10583
  "error-message": _ctx.validationMessage,
10081
10584
  onClose: _ctx.closePopupError
10082
- }, 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);
10083
10600
  }
10084
10601
  const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$w]]);
10085
10602
  const _sfc_main$G = vue.defineComponent({
@@ -10378,10 +10895,8 @@ const _sfc_main$E = vue.defineComponent({
10378
10895
  default: logic.parseNumber
10379
10896
  }
10380
10897
  },
10381
- setup() {
10382
- return {
10383
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10384
- };
10898
+ setup(props) {
10899
+ return useTextFieldSetup(props);
10385
10900
  },
10386
10901
  data() {
10387
10902
  return {
@@ -10524,10 +11039,8 @@ const _sfc_main$C = vue.defineComponent({
10524
11039
  default: logic.parseBankAccountNumber
10525
11040
  }
10526
11041
  },
10527
- setup() {
10528
- return {
10529
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10530
- };
11042
+ setup(props) {
11043
+ return useTextFieldSetup(props);
10531
11044
  },
10532
11045
  data() {
10533
11046
  return {
@@ -10555,10 +11068,8 @@ const _sfc_main$B = vue.defineComponent({
10555
11068
  default: logic.parseBankgiro
10556
11069
  }
10557
11070
  },
10558
- setup() {
10559
- return {
10560
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10561
- };
11071
+ setup(props) {
11072
+ return useTextFieldSetup(props);
10562
11073
  },
10563
11074
  data() {
10564
11075
  return {
@@ -10589,10 +11100,8 @@ const _sfc_main$A = vue.defineComponent({
10589
11100
  default: logic.parseClearingNumber
10590
11101
  }
10591
11102
  },
10592
- setup() {
10593
- return {
10594
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10595
- };
11103
+ setup(props) {
11104
+ return useTextFieldSetup(props);
10596
11105
  },
10597
11106
  data() {
10598
11107
  return {
@@ -10636,10 +11145,8 @@ const _sfc_main$z = vue.defineComponent({
10636
11145
  default: logic.parseNumber
10637
11146
  }
10638
11147
  },
10639
- setup() {
10640
- return {
10641
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10642
- };
11148
+ setup(props) {
11149
+ return useTextFieldSetup(props);
10643
11150
  },
10644
11151
  mounted() {
10645
11152
  const inputElement = getInputElement(this);
@@ -10667,10 +11174,8 @@ const _sfc_main$y = vue.defineComponent({
10667
11174
  default: logic.parsePersonnummer
10668
11175
  }
10669
11176
  },
10670
- setup() {
10671
- return {
10672
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10673
- };
11177
+ setup(props) {
11178
+ return useTextFieldSetup(props);
10674
11179
  },
10675
11180
  data() {
10676
11181
  return {
@@ -10704,10 +11209,8 @@ const _sfc_main$x = vue.defineComponent({
10704
11209
  default: logic.parsePlusgiro
10705
11210
  }
10706
11211
  },
10707
- setup() {
10708
- return {
10709
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10710
- };
11212
+ setup(props) {
11213
+ return useTextFieldSetup(props);
10711
11214
  },
10712
11215
  data() {
10713
11216
  return {
@@ -10738,10 +11241,8 @@ const _sfc_main$w = vue.defineComponent({
10738
11241
  default: logic.formatPostalCode
10739
11242
  }
10740
11243
  },
10741
- setup() {
10742
- return {
10743
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10744
- };
11244
+ setup(props) {
11245
+ return useTextFieldSetup(props);
10745
11246
  },
10746
11247
  data() {
10747
11248
  return {
@@ -10790,10 +11291,8 @@ const _sfc_main$v = vue.defineComponent({
10790
11291
  default: logic.parsePercent
10791
11292
  }
10792
11293
  },
10793
- setup() {
10794
- return {
10795
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10796
- };
11294
+ setup(props) {
11295
+ return useTextFieldSetup(props);
10797
11296
  },
10798
11297
  data() {
10799
11298
  return {
@@ -10827,10 +11326,8 @@ const _sfc_main$u = vue.defineComponent({
10827
11326
  default: logic.parseOrganisationsnummer
10828
11327
  }
10829
11328
  },
10830
- setup() {
10831
- return {
10832
- textFieldTableMode: vue.inject("textFieldTableMode", false)
10833
- };
11329
+ setup(props) {
11330
+ return useTextFieldSetup(props);
10834
11331
  },
10835
11332
  data() {
10836
11333
  return {
@@ -13709,7 +14206,9 @@ const _sfc_main$e = vue.defineComponent({
13709
14206
  }
13710
14207
  },
13711
14208
  updateActiveItemFromVModel() {
13712
- 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)) {
13713
14212
  this.activeItem = this.active;
13714
14213
  }
13715
14214
  },
@@ -16640,7 +17139,7 @@ exports.ErrorData = ErrorData;
16640
17139
  exports.ErrorPlugin = ErrorPlugin;
16641
17140
  exports.ErrorViewData = ErrorViewData;
16642
17141
  exports.EventBus = EventBus;
16643
- exports.FBadge = _sfc_main$1d;
17142
+ exports.FBadge = _sfc_main$1f;
16644
17143
  exports.FBankAccountNumberTextField = _sfc_main$C;
16645
17144
  exports.FBankgiroTextField = _sfc_main$B;
16646
17145
  exports.FCalendar = FCalendar;
@@ -16723,11 +17222,13 @@ exports.IAnimateExpand = IAnimateExpand;
16723
17222
  exports.ICalendarMonth = ICalendarMonth;
16724
17223
  exports.ICalendarMonthGrid = ICalendarMonthGrid;
16725
17224
  exports.ICalendarNavbar = ICalendarNavbar;
17225
+ exports.IComboboxDropdown = _sfc_main$S;
17226
+ exports.IComboboxToggleButton = _sfc_main$R;
16726
17227
  exports.IFlex = IFlex;
16727
17228
  exports.IFlexItem = IFlexItem;
16728
17229
  exports.IPopup = IPopup;
16729
17230
  exports.IPopupError = IPopupError;
16730
- exports.IPopupListbox = _sfc_main$U;
17231
+ exports.IPopupListbox = _sfc_main$W;
16731
17232
  exports.IPopupMenu = IPopupMenu;
16732
17233
  exports.ISkipLink = ISkipLink;
16733
17234
  exports.IValidationForm = FValidationForm;
@@ -16788,7 +17289,9 @@ exports.setRunningContext = setRunningContext;
16788
17289
  exports.sortComponentsWithErrorsOnDOMOrder = sortComponentsWithErrorsOnDOMOrder;
16789
17290
  exports.tableScrollClasses = tableScrollClasses;
16790
17291
  exports.tooltipAttachTo = tooltipAttachTo;
17292
+ exports.useCombobox = useCombobox;
16791
17293
  exports.useModal = useModal;
16792
17294
  exports.useSlotUtils = useSlotUtils;
17295
+ exports.useTextFieldSetup = useTextFieldSetup;
16793
17296
  exports.useTranslate = useTranslate;
16794
17297
  //# sourceMappingURL=index.cjs.js.map