@frollo/frollo-web-ui 1.2.4 → 1.2.5

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 (11) hide show
  1. package/cjs/index.js +76 -50
  2. package/esm/fw-image.js +46 -20
  3. package/esm/{fw-loading-bar-525e9129.js → fw-loading-bar-da7d53fb.js} +1 -1
  4. package/esm/fw-loading.js +2 -2
  5. package/esm/fw-table.js +1 -1
  6. package/esm/index.js +5 -5
  7. package/frollo-web-ui.esm.js +76 -50
  8. package/index.d.ts +45 -0
  9. package/package.json +1 -1
  10. package/types/components/fw-image/fw-image.vue.d.ts +42 -0
  11. package/types/components/fw-image/index.types.d.ts +3 -0
package/cjs/index.js CHANGED
@@ -4738,8 +4738,8 @@ var _hoisted_2$F = {
4738
4738
  var _hoisted_3$D = {
4739
4739
  "class": "flex flex-row justify-between"
4740
4740
  };
4741
- var _hoisted_4$d = ["for"];
4742
- var _hoisted_5$8 = {
4741
+ var _hoisted_4$c = ["for"];
4742
+ var _hoisted_5$7 = {
4743
4743
  key: 1
4744
4744
  };
4745
4745
  var _hoisted_6$5 = {
@@ -4797,7 +4797,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
4797
4797
  key: 0,
4798
4798
  "for": _ctx.name,
4799
4799
  "class": "block mb-2 font-medium"
4800
- }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$d)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
4800
+ }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$c)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
4801
4801
  placeholder: _ctx.placeholder,
4802
4802
  type: _ctx.type,
4803
4803
  readonly: _ctx.readonly,
@@ -4903,8 +4903,8 @@ var _hoisted_2$E = {
4903
4903
  "class": "flex flex-col"
4904
4904
  };
4905
4905
  var _hoisted_3$C = ["for"];
4906
- var _hoisted_4$c = ["value", "name"];
4907
- var _hoisted_5$7 = ["innerHTML"];
4906
+ var _hoisted_4$b = ["value", "name"];
4907
+ var _hoisted_5$6 = ["innerHTML"];
4908
4908
  var _hoisted_6$4 = {
4909
4909
  "class": "italic text-sm font-medium min-h-[21px]"
4910
4910
  };
@@ -4937,11 +4937,11 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
4937
4937
  name: _ctx.name,
4938
4938
  type: "checkbox",
4939
4939
  "class": "text-link w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
4940
- }), null, 16, _hoisted_4$c), _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", {
4940
+ }), null, 16, _hoisted_4$b), _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", {
4941
4941
  key: 0,
4942
4942
  "class": "ml-2",
4943
4943
  innerHTML: _ctx.label
4944
- }, null, 8, _hoisted_5$7)) : vue.createCommentVNode("", true)], 8, _hoisted_3$C), vue.createElementVNode("div", _hoisted_6$4, [vue.createVNode(vue.Transition, {
4944
+ }, null, 8, _hoisted_5$6)) : vue.createCommentVNode("", true)], 8, _hoisted_3$C), vue.createElementVNode("div", _hoisted_6$4, [vue.createVNode(vue.Transition, {
4945
4945
  name: "fwFadeIn",
4946
4946
  mode: "out-in"
4947
4947
  }, {
@@ -5031,13 +5031,13 @@ function render$F(_ctx, _cache) {
5031
5031
  };
5032
5032
  const _hoisted_2$z = /*#__PURE__*/vue.createElementVNode("path", { d: "M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" }, null, -1);
5033
5033
  const _hoisted_3$x = /*#__PURE__*/vue.createElementVNode("path", { d: "M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" }, null, -1);
5034
- const _hoisted_4$b = [
5034
+ const _hoisted_4$a = [
5035
5035
  _hoisted_2$z,
5036
5036
  _hoisted_3$x
5037
5037
  ];
5038
5038
 
5039
5039
  function render$E(_ctx, _cache) {
5040
- return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$D, _hoisted_4$b))
5040
+ return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$D, _hoisted_4$a))
5041
5041
  }const _hoisted_1$C = {
5042
5042
  viewBox: "0 0 24 24",
5043
5043
  fill: "currentColor",
@@ -5069,13 +5069,13 @@ function render$C(_ctx, _cache) {
5069
5069
  };
5070
5070
  const _hoisted_2$w = /*#__PURE__*/vue.createElementVNode("path", { d: "M609.608 315.426a19.767 19.767 0 000-18.853c-58.464-107.643-172.5-180.72-303.607-180.72S60.857 188.931 2.393 296.573a19.767 19.767 0 000 18.853C60.858 423.069 174.892 496.147 306 496.147s245.143-73.078 303.608-180.721zM306 451.855c-80.554 0-145.855-65.302-145.855-145.855S225.446 160.144 306 160.144 451.856 225.446 451.856 306 386.554 451.855 306 451.855z" }, null, -1);
5071
5071
  const _hoisted_3$u = /*#__PURE__*/vue.createElementVNode("path", { d: "M306 231.67c-6.136 0-12.095.749-17.798 2.15 5.841 6.76 9.383 15.563 9.383 25.198 0 21.3-17.267 38.568-38.568 38.568-9.635 0-18.438-3.541-25.198-9.383a74.513 74.513 0 00-2.15 17.798c0 41.052 33.279 74.33 74.33 74.33s74.33-33.279 74.33-74.33S347.052 231.67 306 231.67z" }, null, -1);
5072
- const _hoisted_4$a = [
5072
+ const _hoisted_4$9 = [
5073
5073
  _hoisted_2$w,
5074
5074
  _hoisted_3$u
5075
5075
  ];
5076
5076
 
5077
5077
  function render$B(_ctx, _cache) {
5078
- return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _hoisted_4$a))
5078
+ return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _hoisted_4$9))
5079
5079
  }const _hoisted_1$z = {
5080
5080
  fill: "currentColor",
5081
5081
  xmlns: "http://www.w3.org/2000/svg",
@@ -5095,13 +5095,13 @@ function render$A(_ctx, _cache) {
5095
5095
  };
5096
5096
  const _hoisted_2$u = /*#__PURE__*/vue.createElementVNode("path", { d: "M16 13h-4.172l-1.414 1.414A1.99 1.99 0 019 15a1.986 1.986 0 01-1.414-.586L6.172 13H2a1 1 0 00-1 1v3a1 1 0 001 1h14a1 1 0 001-1v-3c0-.553-.447-1-1-1zm-1.5 3.25a.752.752 0 01-.75-.75c0-.412.338-.75.75-.75s.75.338.75.75-.338.75-.75.75z" }, null, -1);
5097
5097
  const _hoisted_3$s = /*#__PURE__*/vue.createElementVNode("path", { d: "M4.293 8.706a1 1 0 011.414-1.414l2.292 2.296V2a1 1 0 012 0v7.588l2.293-2.294a1 1 0 111.414 1.414l-4 4A.997.997 0 019 13a.995.995 0 01-.707-.293l-4-4z" }, null, -1);
5098
- const _hoisted_4$9 = [
5098
+ const _hoisted_4$8 = [
5099
5099
  _hoisted_2$u,
5100
5100
  _hoisted_3$s
5101
5101
  ];
5102
5102
 
5103
5103
  function render$z(_ctx, _cache) {
5104
- return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _hoisted_4$9))
5104
+ return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _hoisted_4$8))
5105
5105
  }const _hoisted_1$x = {
5106
5106
  fill: "currentColor",
5107
5107
  xmlns: "http://www.w3.org/2000/svg",
@@ -5439,10 +5439,10 @@ var _hoisted_2$d = {
5439
5439
  "class": "block mb-2 font-medium text-left"
5440
5440
  };
5441
5441
  var _hoisted_3$b = ["id", "aria-expanded"];
5442
- var _hoisted_4$8 = {
5442
+ var _hoisted_4$7 = {
5443
5443
  key: 0
5444
5444
  };
5445
- var _hoisted_5$6 = {
5445
+ var _hoisted_5$5 = {
5446
5446
  key: 1,
5447
5447
  "class": "text-grey-base"
5448
5448
  };
@@ -5472,7 +5472,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
5472
5472
  id: "".concat(_ctx.name, "-fw-dropdown--button"),
5473
5473
  "aria-expanded": _ctx.isOpen,
5474
5474
  "aria-haspopup": "true"
5475
- }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$8, vue.toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$6, vue.toDisplayString(_ctx.placeholder), 1)), vue.createVNode(_component_ChevronDownSvg, {
5475
+ }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, vue.toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$5, vue.toDisplayString(_ctx.placeholder), 1)), vue.createVNode(_component_ChevronDownSvg, {
5476
5476
  "class": vue.normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
5477
5477
  }, null, 8, ["class"])], 10, _hoisted_3$b), vue.createVNode(vue.Transition, {
5478
5478
  name: "slideUpDown"
@@ -5866,11 +5866,11 @@ var _hoisted_3$9 = {
5866
5866
  key: 0,
5867
5867
  "class": "flex-shrink-0 flex items-center"
5868
5868
  };
5869
- var _hoisted_4$7 = {
5869
+ var _hoisted_4$6 = {
5870
5870
  key: 1,
5871
5871
  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
5872
5872
  };
5873
- var _hoisted_5$5 = {
5873
+ var _hoisted_5$4 = {
5874
5874
  "class": "flex space-x-2"
5875
5875
  };
5876
5876
  var _hoisted_6$2 = {
@@ -5902,7 +5902,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
5902
5902
 
5903
5903
  var _component_FwButton = vue.resolveComponent("FwButton");
5904
5904
 
5905
- return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$e, [vue.createElementVNode("div", _hoisted_2$b, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$7, [vue.createElementVNode("div", _hoisted_5$5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
5905
+ return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$e, [vue.createElementVNode("div", _hoisted_2$b, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [vue.createElementVNode("div", _hoisted_5$4, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
5906
5906
  return vue.openBlock(), vue.createBlock(_component_FwButton, {
5907
5907
  key: i,
5908
5908
  variant: "text",
@@ -6634,8 +6634,8 @@ var _hoisted_2$9 = {
6634
6634
  var _hoisted_3$7 = {
6635
6635
  "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
6636
6636
  };
6637
- var _hoisted_4$6 = ["role", "aria-labelledby", "aria-describedby"];
6638
- var _hoisted_5$4 = {
6637
+ var _hoisted_4$5 = ["role", "aria-labelledby", "aria-describedby"];
6638
+ var _hoisted_5$3 = {
6639
6639
  key: 0,
6640
6640
  "class": "fw-modal--header text-center"
6641
6641
  };
@@ -6666,7 +6666,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
6666
6666
  "class": "fw-modal--container p-12 m-8 inline-block w-full max-w-[540px] bg-white rounded-2xl shadow",
6667
6667
  "aria-labelledby": _ctx.$slots.header || _ctx.header ? "modal_".concat(_ctx.uuid, "_header") : undefined,
6668
6668
  "aria-describedby": _ctx.$slots.body ? "modal_".concat(_ctx.uuid, "_body") : undefined
6669
- }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.renderSlot(_ctx.$slots, "icon")])) : vue.createCommentVNode("", true), _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
6669
+ }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, [_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.renderSlot(_ctx.$slots, "icon")])) : vue.createCommentVNode("", true), _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
6670
6670
  key: 1,
6671
6671
  id: "modal_".concat(_ctx.uuid, "_header")
6672
6672
  }, [vue.renderSlot(_ctx.$slots, "header")], 8, _hoisted_7$1)) : _ctx.header ? (vue.openBlock(), vue.createElementBlock("h2", {
@@ -6708,7 +6708,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
6708
6708
  return [vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText), 1)];
6709
6709
  }),
6710
6710
  _: 1
6711
- }, 8, ["variant", "aria-label"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)], 8, _hoisted_4$6)])])])];
6711
+ }, 8, ["variant", "aria-label"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)], 8, _hoisted_4$5)])])])];
6712
6712
  }),
6713
6713
  _: 3
6714
6714
  });
@@ -6773,11 +6773,11 @@ var _hoisted_3$6 = {
6773
6773
  key: 1,
6774
6774
  "class": "text-base font-semibold text-center w-full"
6775
6775
  };
6776
- var _hoisted_4$5 = {
6776
+ var _hoisted_4$4 = {
6777
6777
  key: 0,
6778
6778
  "class": "w-full flex items-start mt-[13px] mx-[-15px]"
6779
6779
  };
6780
- var _hoisted_5$3 = {
6780
+ var _hoisted_5$2 = {
6781
6781
  "class": "w-full bg-grey-40 rounded flex-1"
6782
6782
  };
6783
6783
  function render$b(_ctx, _cache, $props, $setup, $data, $options) {
@@ -6799,7 +6799,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
6799
6799
  'font-bold': step.position === _ctx.activeStep,
6800
6800
  'text-body': step.position > _ctx.activeStep
6801
6801
  }])
6802
- }, vue.toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [vue.createElementVNode("div", _hoisted_5$3, [vue.createElementVNode("div", {
6802
+ }, vue.toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.createElementVNode("div", _hoisted_5$2, [vue.createElementVNode("div", {
6803
6803
  "class": "bg-primary text-xs leading-none py-0.5 text-center rounded transition-all",
6804
6804
  style: vue.normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
6805
6805
  }, null, 4)])])) : vue.createCommentVNode("", true)], 2);
@@ -7081,7 +7081,7 @@ $$4({ target: 'Array', proto: true, forced: FORCED }, {
7081
7081
  });var script$7 = vue.defineComponent({
7082
7082
  name: 'FwLoadingBar'
7083
7083
  });var _hoisted_1$9 = {
7084
- "class": "fw-loading-bar rounded shadow-md",
7084
+ "class": "fw-loading-bar rounded",
7085
7085
  "aria-hidden": "true"
7086
7086
  };
7087
7087
  function render$9(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7207,10 +7207,10 @@ var _hoisted_2$7 = ["tabindex", "onKeydown", "onClick"];
7207
7207
  var _hoisted_3$5 = {
7208
7208
  "class": "flex flex-row items-center space-x-1"
7209
7209
  };
7210
- var _hoisted_4$4 = {
7210
+ var _hoisted_4$3 = {
7211
7211
  "class": "w-full"
7212
7212
  };
7213
- var _hoisted_5$2 = {
7213
+ var _hoisted_5$1 = {
7214
7214
  key: 0
7215
7215
  };
7216
7216
  var _hoisted_6 = {
@@ -7248,7 +7248,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
7248
7248
  onClick: function onClick($event) {
7249
7249
  return _ctx.sortColumn(column);
7250
7250
  }
7251
- }, [vue.createElementVNode("div", _hoisted_3$5, [vue.createElementVNode("span", _hoisted_4$4, vue.toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$2, [vue.createElementVNode("span", _hoisted_6, [vue.createVNode(_component_CaretDownSvg, {
7251
+ }, [vue.createElementVNode("div", _hoisted_3$5, [vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, [vue.createElementVNode("span", _hoisted_6, [vue.createVNode(_component_CaretDownSvg, {
7252
7252
  "class": vue.normalizeClass(["inline-block w-[12px] rotate-180", _ctx.sortedIcon('asc', column)])
7253
7253
  }, null, 8, ["class"]), vue.createVNode(_component_CaretDownSvg, {
7254
7254
  "class": vue.normalizeClass(["inline-block w-[12px] mt-[2px]", _ctx.sortedIcon('desc', column)])
@@ -7366,10 +7366,10 @@ var _hoisted_2$5 = {
7366
7366
  var _hoisted_3$3 = {
7367
7367
  "class": "flex flex-row items-center"
7368
7368
  };
7369
- var _hoisted_4$3 = {
7369
+ var _hoisted_4$2 = {
7370
7370
  "class": "h4 mb-0 ml-6"
7371
7371
  };
7372
- var _hoisted_5$1 = {
7372
+ var _hoisted_5 = {
7373
7373
  key: 0,
7374
7374
  "class": "h4"
7375
7375
  };
@@ -7381,7 +7381,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
7381
7381
  "class": "fw-accordion--header px-8 py-4 bg-grey-lightest w-full border-opacity-0 hover:bg-grey-20"
7382
7382
  }, [vue.createElementVNode("div", _hoisted_2$5, [vue.createElementVNode("div", _hoisted_3$3, [vue.createElementVNode("span", {
7383
7383
  "class": vue.normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
7384
- }, null, 2), vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, vue.toDisplayString(_ctx.suffixTitle), 1)) : vue.createCommentVNode("", true)])]), vue.createVNode(vue.Transition, {
7384
+ }, null, 2), vue.createElementVNode("span", _hoisted_4$2, vue.toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(_ctx.suffixTitle), 1)) : vue.createCommentVNode("", true)])]), vue.createVNode(vue.Transition, {
7385
7385
  name: "slideInOut",
7386
7386
  onBeforeEnter: _ctx.transitionEnter,
7387
7387
  onEnter: _ctx.transitionEnter,
@@ -7937,7 +7937,7 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
7937
7937
  var createObserver = function createObserver() {
7938
7938
  var options = {
7939
7939
  root: null,
7940
- threshold: Number(el.getAttribute('threshold')) || 0.01
7940
+ threshold: Number(el.getAttribute('threshold')) || 0
7941
7941
  };
7942
7942
  var observer = new IntersectionObserver(handleIntersect, options);
7943
7943
  observer.observe(el);
@@ -7978,6 +7978,29 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
7978
7978
  validator: function validator(value) {
7979
7979
  return ['native', 'background'].includes(value);
7980
7980
  }
7981
+ },
7982
+
7983
+ /**
7984
+ * Whether the loading bar and error state are rounded.
7985
+ */
7986
+ rounded: {
7987
+ type: Boolean,
7988
+ "default": false
7989
+ },
7990
+
7991
+ /**
7992
+ * The class for the native image element
7993
+ */
7994
+ imageClass: {
7995
+ type: String
7996
+ },
7997
+
7998
+ /**
7999
+ * Controls the threshold before the component triggers the src url.
8000
+ */
8001
+ threshold: {
8002
+ type: Number,
8003
+ "default": 0
7981
8004
  }
7982
8005
  },
7983
8006
  setup: function setup(props) {
@@ -7990,17 +8013,11 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
7990
8013
  isBackground: isBackground
7991
8014
  };
7992
8015
  }
7993
- });var _hoisted_1$4 = ["type"];
8016
+ });var _hoisted_1$4 = ["type", "threshold"];
7994
8017
  var _hoisted_2$4 = ["data-url", "alt"];
7995
8018
  var _hoisted_3$2 = {
7996
- "class": "fw-image--error bg-grey-20"
7997
- };
7998
- var _hoisted_4$2 = {
7999
8019
  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
8000
8020
  };
8001
-
8002
- var _hoisted_5 = /*#__PURE__*/vue.createElementVNode("p", null, "Image failed to load", -1);
8003
-
8004
8021
  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
8005
8022
  var _component_FwLoadingBar = vue.resolveComponent("FwLoadingBar");
8006
8023
 
@@ -8011,8 +8028,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
8011
8028
  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
8012
8029
  ref: "fwImageRef",
8013
8030
  type: _ctx.type,
8031
+ threshold: _ctx.threshold,
8014
8032
  "class": vue.normalizeClass(["fw-image", {
8015
- 'fw-image--background': _ctx.isBackground
8033
+ 'fw-image--background': _ctx.isBackground,
8034
+ 'rounded-full': _ctx.rounded
8016
8035
  }]),
8017
8036
  onClick: _cache[0] || (_cache[0] = function ($event) {
8018
8037
  return _ctx.$emit('click', $event);
@@ -8034,14 +8053,21 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
8034
8053
  })
8035
8054
  }, [vue.createElementVNode("img", {
8036
8055
  "data-url": _ctx.src,
8037
- alt: _ctx.alt
8038
- }, null, 8, _hoisted_2$4), vue.createVNode(_component_FwLoadingBar, {
8039
- "class": "fw-image--loading w-full h-full"
8040
- }), vue.createElementVNode("div", _hoisted_3$2, [vue.createElementVNode("div", _hoisted_4$2, [vue.createVNode(_component_FileExclamationSvg, {
8041
- "class": "w-10 h-10 text-alert mb-2"
8042
- }), _hoisted_5])]), vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
8043
- }var css_248z$2 = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8044
- var stylesheet$2 = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8056
+ alt: _ctx.alt,
8057
+ "class": vue.normalizeClass(_ctx.imageClass)
8058
+ }, null, 10, _hoisted_2$4), vue.createVNode(_component_FwLoadingBar, {
8059
+ "class": vue.normalizeClass(["fw-image--loading w-full h-full", {
8060
+ 'rounded-full': _ctx.rounded
8061
+ }])
8062
+ }, null, 8, ["class"]), vue.createElementVNode("div", {
8063
+ "class": vue.normalizeClass(["fw-image--error bg-grey-20", {
8064
+ 'rounded-full': _ctx.rounded
8065
+ }])
8066
+ }, [vue.createElementVNode("div", _hoisted_3$2, [vue.createVNode(_component_FileExclamationSvg, {
8067
+ "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
8068
+ })])], 2), vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
8069
+ }var css_248z$2 = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8070
+ var stylesheet$2 = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8045
8071
  styleInject(css_248z$2);script$2.render = render$4;var script$1 = vue.defineComponent({
8046
8072
  name: 'FwLoadingCard',
8047
8073
  components: {
package/esm/fw-image.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import './es.array.includes-9a6e4066.js';
2
- import { defineComponent, computed, ref, createElementVNode, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createVNode, renderSlot } from 'vue';
2
+ import { o as objectSetPrototypeOf } from './es.number.constructor-b7faae1f.js';
3
+ import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, renderSlot } from 'vue';
3
4
  import './es.array.find-54b8f84b.js';
4
5
  import { a as documentCreateElement$1, g as global$4, b as functionCall, c as anObject$3, e as getMethod$2, w as wellKnownSymbol$6, h as aCallable$1, t as tryToString$1, i as toObject$2, f as functionUncurryThis, r as requireObjectCoercible$1, j as fails$2, k as hasOwnProperty_1, l as isCallable$4, m as isPure, o as objectDefineProperty, n as functionName, p as functionBindNative, q as engineUserAgent } from './function-name-c49146fc.js';
5
6
  import { _ as _export } from './object-keys-3c73c404.js';
@@ -9,8 +10,7 @@ import { a as arrayMethodIsStrict$1, c as createProperty$1 } from './create-prop
9
10
  import { c as classof$1 } from './classof-088c9833.js';
10
11
  import { t as toString$2 } from './to-string-c2bd1f4d.js';
11
12
  import { o as objectCreate } from './add-to-unscopables-a5032b1d.js';
12
- import { o as objectSetPrototypeOf } from './es.number.constructor-b7faae1f.js';
13
- import { s as script$1 } from './fw-loading-bar-525e9129.js';
13
+ import { s as script$1 } from './fw-loading-bar-da7d53fb.js';
14
14
  import { r as render$1 } from './index-b3aa1664.js';
15
15
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
16
16
  import './check-94a5917a.js';
@@ -704,7 +704,7 @@ var lazyLoadDirective = {
704
704
  var createObserver = function createObserver() {
705
705
  var options = {
706
706
  root: null,
707
- threshold: Number(el.getAttribute('threshold')) || 0.01
707
+ threshold: Number(el.getAttribute('threshold')) || 0
708
708
  };
709
709
  var observer = new IntersectionObserver(handleIntersect, options);
710
710
  observer.observe(el);
@@ -747,6 +747,29 @@ var script = defineComponent({
747
747
  validator: function validator(value) {
748
748
  return ['native', 'background'].includes(value);
749
749
  }
750
+ },
751
+
752
+ /**
753
+ * Whether the loading bar and error state are rounded.
754
+ */
755
+ rounded: {
756
+ type: Boolean,
757
+ "default": false
758
+ },
759
+
760
+ /**
761
+ * The class for the native image element
762
+ */
763
+ imageClass: {
764
+ type: String
765
+ },
766
+
767
+ /**
768
+ * Controls the threshold before the component triggers the src url.
769
+ */
770
+ threshold: {
771
+ type: Number,
772
+ "default": 0
750
773
  }
751
774
  },
752
775
  setup: function setup(props) {
@@ -761,17 +784,11 @@ var script = defineComponent({
761
784
  }
762
785
  });
763
786
 
764
- var _hoisted_1 = ["type"];
787
+ var _hoisted_1 = ["type", "threshold"];
765
788
  var _hoisted_2 = ["data-url", "alt"];
766
789
  var _hoisted_3 = {
767
- "class": "fw-image--error bg-grey-20"
768
- };
769
- var _hoisted_4 = {
770
790
  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
771
791
  };
772
-
773
- var _hoisted_5 = /*#__PURE__*/createElementVNode("p", null, "Image failed to load", -1);
774
-
775
792
  function render(_ctx, _cache, $props, $setup, $data, $options) {
776
793
  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
777
794
 
@@ -782,8 +799,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
782
799
  return withDirectives((openBlock(), createElementBlock("div", {
783
800
  ref: "fwImageRef",
784
801
  type: _ctx.type,
802
+ threshold: _ctx.threshold,
785
803
  "class": normalizeClass(["fw-image", {
786
- 'fw-image--background': _ctx.isBackground
804
+ 'fw-image--background': _ctx.isBackground,
805
+ 'rounded-full': _ctx.rounded
787
806
  }]),
788
807
  onClick: _cache[0] || (_cache[0] = function ($event) {
789
808
  return _ctx.$emit('click', $event);
@@ -805,16 +824,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
805
824
  })
806
825
  }, [createElementVNode("img", {
807
826
  "data-url": _ctx.src,
808
- alt: _ctx.alt
809
- }, null, 8, _hoisted_2), createVNode(_component_FwLoadingBar, {
810
- "class": "fw-image--loading w-full h-full"
811
- }), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createVNode(_component_FileExclamationSvg, {
812
- "class": "w-10 h-10 text-alert mb-2"
813
- }), _hoisted_5])]), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
827
+ alt: _ctx.alt,
828
+ "class": normalizeClass(_ctx.imageClass)
829
+ }, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
830
+ "class": normalizeClass(["fw-image--loading w-full h-full", {
831
+ 'rounded-full': _ctx.rounded
832
+ }])
833
+ }, null, 8, ["class"]), createElementVNode("div", {
834
+ "class": normalizeClass(["fw-image--error bg-grey-20", {
835
+ 'rounded-full': _ctx.rounded
836
+ }])
837
+ }, [createElementVNode("div", _hoisted_3, [createVNode(_component_FileExclamationSvg, {
838
+ "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
839
+ })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
814
840
  }
815
841
 
816
- var css_248z = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
817
- var stylesheet = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
842
+ var css_248z = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
843
+ var stylesheet = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
818
844
  styleInject(css_248z);
819
845
 
820
846
  script.render = render;
package/esm/{fw-loading-bar-525e9129.js → fw-loading-bar-da7d53fb.js} RENAMED
@@ -6,7 +6,7 @@ var script = defineComponent({
6
6
  });
7
7
 
8
8
  var _hoisted_1 = {
9
- "class": "fw-loading-bar rounded shadow-md",
9
+ "class": "fw-loading-bar rounded",
10
10
  "aria-hidden": "true"
11
11
  };
12
12
  function render(_ctx, _cache, $props, $setup, $data, $options) {
package/esm/fw-loading.js CHANGED
@@ -1,5 +1,5 @@
1
- import { s as script$2 } from './fw-loading-bar-525e9129.js';
2
- export { s as FwLoadingBar } from './fw-loading-bar-525e9129.js';
1
+ import { s as script$2 } from './fw-loading-bar-da7d53fb.js';
2
+ export { s as FwLoadingBar } from './fw-loading-bar-da7d53fb.js';
3
3
  import { defineComponent, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, normalizeClass, Fragment, renderList } from 'vue';
4
4
  import './es.number.constructor-b7faae1f.js';
5
5
  import './style-inject.es-1f59c1d0.js';
package/esm/fw-table.js CHANGED
@@ -5,7 +5,7 @@ import { t as toString$1 } from './to-string-c2bd1f4d.js';
5
5
  import { c as createProperty$1, a as arrayMethodIsStrict$1 } from './create-property-da6d232b.js';
6
6
  import { b as render$3 } from './index-b3aa1664.js';
7
7
  import { defineComponent, computed, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
8
- import { s as script$3 } from './fw-loading-bar-525e9129.js';
8
+ import { s as script$3 } from './fw-loading-bar-da7d53fb.js';
9
9
  import './classof-088c9833.js';
10
10
  import './check-94a5917a.js';
11
11
  import './style-inject.es-1f59c1d0.js';
package/esm/index.js CHANGED
@@ -36,16 +36,16 @@ import { F as Form } from './vee-validate.esm-a17a23c3.js';
36
36
  export { F as FwForm } from './vee-validate.esm-a17a23c3.js';
37
37
  import { s as script$4 } from './fw-button-d5d2cf19.js';
38
38
  export { s as FwButton } from './fw-button-d5d2cf19.js';
39
- import { s as script$g } from './fw-loading-bar-525e9129.js';
40
- export { s as FwLoadingBar } from './fw-loading-bar-525e9129.js';
39
+ import { s as script$g } from './fw-loading-bar-da7d53fb.js';
40
+ export { s as FwLoadingBar } from './fw-loading-bar-da7d53fb.js';
41
41
  import { createApp } from 'vue';
42
42
  import './es.array.includes-9a6e4066.js';
43
43
  import './add-to-unscopables-a5032b1d.js';
44
- import './array-iteration-4f83e223.js';
44
+ import './es.number.constructor-b7faae1f.js';
45
+ import './to-string-c2bd1f4d.js';
45
46
  import './classof-088c9833.js';
47
+ import './array-iteration-4f83e223.js';
46
48
  import './create-property-da6d232b.js';
47
- import './to-string-c2bd1f4d.js';
48
- import './es.number.constructor-b7faae1f.js';
49
49
  import './index-b3aa1664.js';
50
50
  import './check-94a5917a.js';
51
51
  import './style-inject.es-1f59c1d0.js';
package/frollo-web-ui.esm.js CHANGED
@@ -4974,8 +4974,8 @@ var _hoisted_2$F = {
4974
4974
  var _hoisted_3$D = {
4975
4975
  "class": "flex flex-row justify-between"
4976
4976
  };
4977
- var _hoisted_4$d = ["for"];
4978
- var _hoisted_5$8 = {
4977
+ var _hoisted_4$c = ["for"];
4978
+ var _hoisted_5$7 = {
4979
4979
  key: 1
4980
4980
  };
4981
4981
  var _hoisted_6$5 = {
@@ -5033,7 +5033,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
5033
5033
  key: 0,
5034
5034
  "for": _ctx.name,
5035
5035
  "class": "block mb-2 font-medium"
5036
- }, toDisplayString(_ctx.label), 9, _hoisted_4$d)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$8, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$5, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
5036
+ }, toDisplayString(_ctx.label), 9, _hoisted_4$c)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$7, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$5, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
5037
5037
  placeholder: _ctx.placeholder,
5038
5038
  type: _ctx.type,
5039
5039
  readonly: _ctx.readonly,
@@ -5149,8 +5149,8 @@ var _hoisted_2$E = {
5149
5149
  "class": "flex flex-col"
5150
5150
  };
5151
5151
  var _hoisted_3$C = ["for"];
5152
- var _hoisted_4$c = ["value", "name"];
5153
- var _hoisted_5$7 = ["innerHTML"];
5152
+ var _hoisted_4$b = ["value", "name"];
5153
+ var _hoisted_5$6 = ["innerHTML"];
5154
5154
  var _hoisted_6$4 = {
5155
5155
  "class": "italic text-sm font-medium min-h-[21px]"
5156
5156
  };
@@ -5183,11 +5183,11 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
5183
5183
  name: _ctx.name,
5184
5184
  type: "checkbox",
5185
5185
  "class": "text-link w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
5186
- }), null, 16, _hoisted_4$c), _ctx.label ? (openBlock(), createElementBlock("span", {
5186
+ }), null, 16, _hoisted_4$b), _ctx.label ? (openBlock(), createElementBlock("span", {
5187
5187
  key: 0,
5188
5188
  "class": "ml-2",
5189
5189
  innerHTML: _ctx.label
5190
- }, null, 8, _hoisted_5$7)) : createCommentVNode("", true)], 8, _hoisted_3$C), createElementVNode("div", _hoisted_6$4, [createVNode(Transition, {
5190
+ }, null, 8, _hoisted_5$6)) : createCommentVNode("", true)], 8, _hoisted_3$C), createElementVNode("div", _hoisted_6$4, [createVNode(Transition, {
5191
5191
  name: "fwFadeIn",
5192
5192
  mode: "out-in"
5193
5193
  }, {
@@ -5295,13 +5295,13 @@ const _hoisted_1$D = {
5295
5295
  };
5296
5296
  const _hoisted_2$z = /*#__PURE__*/createElementVNode("path", { d: "M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" }, null, -1);
5297
5297
  const _hoisted_3$x = /*#__PURE__*/createElementVNode("path", { d: "M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" }, null, -1);
5298
- const _hoisted_4$b = [
5298
+ const _hoisted_4$a = [
5299
5299
  _hoisted_2$z,
5300
5300
  _hoisted_3$x
5301
5301
  ];
5302
5302
 
5303
5303
  function render$E(_ctx, _cache) {
5304
- return (openBlock(), createElementBlock("svg", _hoisted_1$D, _hoisted_4$b))
5304
+ return (openBlock(), createElementBlock("svg", _hoisted_1$D, _hoisted_4$a))
5305
5305
  }
5306
5306
 
5307
5307
  const _hoisted_1$C = {
@@ -5339,13 +5339,13 @@ const _hoisted_1$A = {
5339
5339
  };
5340
5340
  const _hoisted_2$w = /*#__PURE__*/createElementVNode("path", { d: "M609.608 315.426a19.767 19.767 0 000-18.853c-58.464-107.643-172.5-180.72-303.607-180.72S60.857 188.931 2.393 296.573a19.767 19.767 0 000 18.853C60.858 423.069 174.892 496.147 306 496.147s245.143-73.078 303.608-180.721zM306 451.855c-80.554 0-145.855-65.302-145.855-145.855S225.446 160.144 306 160.144 451.856 225.446 451.856 306 386.554 451.855 306 451.855z" }, null, -1);
5341
5341
  const _hoisted_3$u = /*#__PURE__*/createElementVNode("path", { d: "M306 231.67c-6.136 0-12.095.749-17.798 2.15 5.841 6.76 9.383 15.563 9.383 25.198 0 21.3-17.267 38.568-38.568 38.568-9.635 0-18.438-3.541-25.198-9.383a74.513 74.513 0 00-2.15 17.798c0 41.052 33.279 74.33 74.33 74.33s74.33-33.279 74.33-74.33S347.052 231.67 306 231.67z" }, null, -1);
5342
- const _hoisted_4$a = [
5342
+ const _hoisted_4$9 = [
5343
5343
  _hoisted_2$w,
5344
5344
  _hoisted_3$u
5345
5345
  ];
5346
5346
 
5347
5347
  function render$B(_ctx, _cache) {
5348
- return (openBlock(), createElementBlock("svg", _hoisted_1$A, _hoisted_4$a))
5348
+ return (openBlock(), createElementBlock("svg", _hoisted_1$A, _hoisted_4$9))
5349
5349
  }
5350
5350
 
5351
5351
  const _hoisted_1$z = {
@@ -5369,13 +5369,13 @@ const _hoisted_1$y = {
5369
5369
  };
5370
5370
  const _hoisted_2$u = /*#__PURE__*/createElementVNode("path", { d: "M16 13h-4.172l-1.414 1.414A1.99 1.99 0 019 15a1.986 1.986 0 01-1.414-.586L6.172 13H2a1 1 0 00-1 1v3a1 1 0 001 1h14a1 1 0 001-1v-3c0-.553-.447-1-1-1zm-1.5 3.25a.752.752 0 01-.75-.75c0-.412.338-.75.75-.75s.75.338.75.75-.338.75-.75.75z" }, null, -1);
5371
5371
  const _hoisted_3$s = /*#__PURE__*/createElementVNode("path", { d: "M4.293 8.706a1 1 0 011.414-1.414l2.292 2.296V2a1 1 0 012 0v7.588l2.293-2.294a1 1 0 111.414 1.414l-4 4A.997.997 0 019 13a.995.995 0 01-.707-.293l-4-4z" }, null, -1);
5372
- const _hoisted_4$9 = [
5372
+ const _hoisted_4$8 = [
5373
5373
  _hoisted_2$u,
5374
5374
  _hoisted_3$s
5375
5375
  ];
5376
5376
 
5377
5377
  function render$z(_ctx, _cache) {
5378
- return (openBlock(), createElementBlock("svg", _hoisted_1$y, _hoisted_4$9))
5378
+ return (openBlock(), createElementBlock("svg", _hoisted_1$y, _hoisted_4$8))
5379
5379
  }
5380
5380
 
5381
5381
  const _hoisted_1$x = {
@@ -5749,10 +5749,10 @@ var _hoisted_2$d = {
5749
5749
  "class": "block mb-2 font-medium text-left"
5750
5750
  };
5751
5751
  var _hoisted_3$b = ["id", "aria-expanded"];
5752
- var _hoisted_4$8 = {
5752
+ var _hoisted_4$7 = {
5753
5753
  key: 0
5754
5754
  };
5755
- var _hoisted_5$6 = {
5755
+ var _hoisted_5$5 = {
5756
5756
  key: 1,
5757
5757
  "class": "text-grey-base"
5758
5758
  };
@@ -5782,7 +5782,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
5782
5782
  id: "".concat(_ctx.name, "-fw-dropdown--button"),
5783
5783
  "aria-expanded": _ctx.isOpen,
5784
5784
  "aria-haspopup": "true"
5785
- }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$6, toDisplayString(_ctx.placeholder), 1)), createVNode(_component_ChevronDownSvg, {
5785
+ }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("span", _hoisted_4$7, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$5, toDisplayString(_ctx.placeholder), 1)), createVNode(_component_ChevronDownSvg, {
5786
5786
  "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
5787
5787
  }, null, 8, ["class"])], 10, _hoisted_3$b), createVNode(Transition, {
5788
5788
  name: "slideUpDown"
@@ -6198,11 +6198,11 @@ var _hoisted_3$9 = {
6198
6198
  key: 0,
6199
6199
  "class": "flex-shrink-0 flex items-center"
6200
6200
  };
6201
- var _hoisted_4$7 = {
6201
+ var _hoisted_4$6 = {
6202
6202
  key: 1,
6203
6203
  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
6204
6204
  };
6205
- var _hoisted_5$5 = {
6205
+ var _hoisted_5$4 = {
6206
6206
  "class": "flex space-x-2"
6207
6207
  };
6208
6208
  var _hoisted_6$2 = {
@@ -6234,7 +6234,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
6234
6234
 
6235
6235
  var _component_FwButton = resolveComponent("FwButton");
6236
6236
 
6237
- return openBlock(), createElementBlock("nav", _hoisted_1$e, [createElementVNode("div", _hoisted_2$b, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$9, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$7, [createElementVNode("div", _hoisted_5$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
6237
+ return openBlock(), createElementBlock("nav", _hoisted_1$e, [createElementVNode("div", _hoisted_2$b, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$9, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$6, [createElementVNode("div", _hoisted_5$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
6238
6238
  return openBlock(), createBlock(_component_FwButton, {
6239
6239
  key: i,
6240
6240
  variant: "text",
@@ -7034,8 +7034,8 @@ var _hoisted_2$9 = {
7034
7034
  var _hoisted_3$7 = {
7035
7035
  "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
7036
7036
  };
7037
- var _hoisted_4$6 = ["role", "aria-labelledby", "aria-describedby"];
7038
- var _hoisted_5$4 = {
7037
+ var _hoisted_4$5 = ["role", "aria-labelledby", "aria-describedby"];
7038
+ var _hoisted_5$3 = {
7039
7039
  key: 0,
7040
7040
  "class": "fw-modal--header text-center"
7041
7041
  };
@@ -7066,7 +7066,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
7066
7066
  "class": "fw-modal--container p-12 m-8 inline-block w-full max-w-[540px] bg-white rounded-2xl shadow",
7067
7067
  "aria-labelledby": _ctx.$slots.header || _ctx.header ? "modal_".concat(_ctx.uuid, "_header") : undefined,
7068
7068
  "aria-describedby": _ctx.$slots.body ? "modal_".concat(_ctx.uuid, "_body") : undefined
7069
- }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", _hoisted_5$4, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
7069
+ }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", _hoisted_5$3, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
7070
7070
  key: 1,
7071
7071
  id: "modal_".concat(_ctx.uuid, "_header")
7072
7072
  }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_7$1)) : _ctx.header ? (openBlock(), createElementBlock("h2", {
@@ -7108,7 +7108,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
7108
7108
  return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
7109
7109
  }),
7110
7110
  _: 1
7111
- }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$6)])])])];
7111
+ }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$5)])])])];
7112
7112
  }),
7113
7113
  _: 3
7114
7114
  });
@@ -7181,11 +7181,11 @@ var _hoisted_3$6 = {
7181
7181
  key: 1,
7182
7182
  "class": "text-base font-semibold text-center w-full"
7183
7183
  };
7184
- var _hoisted_4$5 = {
7184
+ var _hoisted_4$4 = {
7185
7185
  key: 0,
7186
7186
  "class": "w-full flex items-start mt-[13px] mx-[-15px]"
7187
7187
  };
7188
- var _hoisted_5$3 = {
7188
+ var _hoisted_5$2 = {
7189
7189
  "class": "w-full bg-grey-40 rounded flex-1"
7190
7190
  };
7191
7191
  function render$b(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7207,7 +7207,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
7207
7207
  'font-bold': step.position === _ctx.activeStep,
7208
7208
  'text-body': step.position > _ctx.activeStep
7209
7209
  }])
7210
- }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$5, [createElementVNode("div", _hoisted_5$3, [createElementVNode("div", {
7210
+ }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$4, [createElementVNode("div", _hoisted_5$2, [createElementVNode("div", {
7211
7211
  "class": "bg-primary text-xs leading-none py-0.5 text-center rounded transition-all",
7212
7212
  style: normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
7213
7213
  }, null, 4)])])) : createCommentVNode("", true)], 2);
@@ -7525,7 +7525,7 @@ var script$7 = defineComponent({
7525
7525
  });
7526
7526
 
7527
7527
  var _hoisted_1$9 = {
7528
- "class": "fw-loading-bar rounded shadow-md",
7528
+ "class": "fw-loading-bar rounded",
7529
7529
  "aria-hidden": "true"
7530
7530
  };
7531
7531
  function render$9(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7659,10 +7659,10 @@ var _hoisted_2$7 = ["tabindex", "onKeydown", "onClick"];
7659
7659
  var _hoisted_3$5 = {
7660
7660
  "class": "flex flex-row items-center space-x-1"
7661
7661
  };
7662
- var _hoisted_4$4 = {
7662
+ var _hoisted_4$3 = {
7663
7663
  "class": "w-full"
7664
7664
  };
7665
- var _hoisted_5$2 = {
7665
+ var _hoisted_5$1 = {
7666
7666
  key: 0
7667
7667
  };
7668
7668
  var _hoisted_6 = {
@@ -7700,7 +7700,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
7700
7700
  onClick: function onClick($event) {
7701
7701
  return _ctx.sortColumn(column);
7702
7702
  }
7703
- }, [createElementVNode("div", _hoisted_3$5, [createElementVNode("span", _hoisted_4$4, toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$2, [createElementVNode("span", _hoisted_6, [createVNode(_component_CaretDownSvg, {
7703
+ }, [createElementVNode("div", _hoisted_3$5, [createElementVNode("span", _hoisted_4$3, toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$1, [createElementVNode("span", _hoisted_6, [createVNode(_component_CaretDownSvg, {
7704
7704
  "class": normalizeClass(["inline-block w-[12px] rotate-180", _ctx.sortedIcon('asc', column)])
7705
7705
  }, null, 8, ["class"]), createVNode(_component_CaretDownSvg, {
7706
7706
  "class": normalizeClass(["inline-block w-[12px] mt-[2px]", _ctx.sortedIcon('desc', column)])
@@ -7836,10 +7836,10 @@ var _hoisted_2$5 = {
7836
7836
  var _hoisted_3$3 = {
7837
7837
  "class": "flex flex-row items-center"
7838
7838
  };
7839
- var _hoisted_4$3 = {
7839
+ var _hoisted_4$2 = {
7840
7840
  "class": "h4 mb-0 ml-6"
7841
7841
  };
7842
- var _hoisted_5$1 = {
7842
+ var _hoisted_5 = {
7843
7843
  key: 0,
7844
7844
  "class": "h4"
7845
7845
  };
@@ -7851,7 +7851,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
7851
7851
  "class": "fw-accordion--header px-8 py-4 bg-grey-lightest w-full border-opacity-0 hover:bg-grey-20"
7852
7852
  }, [createElementVNode("div", _hoisted_2$5, [createElementVNode("div", _hoisted_3$3, [createElementVNode("span", {
7853
7853
  "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
7854
- }, null, 2), createElementVNode("span", _hoisted_4$3, toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true)])]), createVNode(Transition, {
7854
+ }, null, 2), createElementVNode("span", _hoisted_4$2, toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true)])]), createVNode(Transition, {
7855
7855
  name: "slideInOut",
7856
7856
  onBeforeEnter: _ctx.transitionEnter,
7857
7857
  onEnter: _ctx.transitionEnter,
@@ -8469,7 +8469,7 @@ var lazyLoadDirective = {
8469
8469
  var createObserver = function createObserver() {
8470
8470
  var options = {
8471
8471
  root: null,
8472
- threshold: Number(el.getAttribute('threshold')) || 0.01
8472
+ threshold: Number(el.getAttribute('threshold')) || 0
8473
8473
  };
8474
8474
  var observer = new IntersectionObserver(handleIntersect, options);
8475
8475
  observer.observe(el);
@@ -8512,6 +8512,29 @@ var script$2 = defineComponent({
8512
8512
  validator: function validator(value) {
8513
8513
  return ['native', 'background'].includes(value);
8514
8514
  }
8515
+ },
8516
+
8517
+ /**
8518
+ * Whether the loading bar and error state are rounded.
8519
+ */
8520
+ rounded: {
8521
+ type: Boolean,
8522
+ "default": false
8523
+ },
8524
+
8525
+ /**
8526
+ * The class for the native image element
8527
+ */
8528
+ imageClass: {
8529
+ type: String
8530
+ },
8531
+
8532
+ /**
8533
+ * Controls the threshold before the component triggers the src url.
8534
+ */
8535
+ threshold: {
8536
+ type: Number,
8537
+ "default": 0
8515
8538
  }
8516
8539
  },
8517
8540
  setup: function setup(props) {
@@ -8526,17 +8549,11 @@ var script$2 = defineComponent({
8526
8549
  }
8527
8550
  });
8528
8551
 
8529
- var _hoisted_1$4 = ["type"];
8552
+ var _hoisted_1$4 = ["type", "threshold"];
8530
8553
  var _hoisted_2$4 = ["data-url", "alt"];
8531
8554
  var _hoisted_3$2 = {
8532
- "class": "fw-image--error bg-grey-20"
8533
- };
8534
- var _hoisted_4$2 = {
8535
8555
  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
8536
8556
  };
8537
-
8538
- var _hoisted_5 = /*#__PURE__*/createElementVNode("p", null, "Image failed to load", -1);
8539
-
8540
8557
  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
8541
8558
  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
8542
8559
 
@@ -8547,8 +8564,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
8547
8564
  return withDirectives((openBlock(), createElementBlock("div", {
8548
8565
  ref: "fwImageRef",
8549
8566
  type: _ctx.type,
8567
+ threshold: _ctx.threshold,
8550
8568
  "class": normalizeClass(["fw-image", {
8551
- 'fw-image--background': _ctx.isBackground
8569
+ 'fw-image--background': _ctx.isBackground,
8570
+ 'rounded-full': _ctx.rounded
8552
8571
  }]),
8553
8572
  onClick: _cache[0] || (_cache[0] = function ($event) {
8554
8573
  return _ctx.$emit('click', $event);
@@ -8570,16 +8589,23 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
8570
8589
  })
8571
8590
  }, [createElementVNode("img", {
8572
8591
  "data-url": _ctx.src,
8573
- alt: _ctx.alt
8574
- }, null, 8, _hoisted_2$4), createVNode(_component_FwLoadingBar, {
8575
- "class": "fw-image--loading w-full h-full"
8576
- }), createElementVNode("div", _hoisted_3$2, [createElementVNode("div", _hoisted_4$2, [createVNode(_component_FileExclamationSvg, {
8577
- "class": "w-10 h-10 text-alert mb-2"
8578
- }), _hoisted_5])]), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
8592
+ alt: _ctx.alt,
8593
+ "class": normalizeClass(_ctx.imageClass)
8594
+ }, null, 10, _hoisted_2$4), createVNode(_component_FwLoadingBar, {
8595
+ "class": normalizeClass(["fw-image--loading w-full h-full", {
8596
+ 'rounded-full': _ctx.rounded
8597
+ }])
8598
+ }, null, 8, ["class"]), createElementVNode("div", {
8599
+ "class": normalizeClass(["fw-image--error bg-grey-20", {
8600
+ 'rounded-full': _ctx.rounded
8601
+ }])
8602
+ }, [createElementVNode("div", _hoisted_3$2, [createVNode(_component_FileExclamationSvg, {
8603
+ "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
8604
+ })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
8579
8605
  }
8580
8606
 
8581
- var css_248z$2 = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8582
- var stylesheet$2 = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8607
+ var css_248z$2 = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8608
+ var stylesheet$2 = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
8583
8609
  styleInject(css_248z$2);
8584
8610
 
8585
8611
  script$2.render = render$4;
package/index.d.ts CHANGED
@@ -1071,6 +1071,26 @@ declare const _default$3: vue.DefineComponent<{
1071
1071
  default: string;
1072
1072
  validator: (value: string) => boolean;
1073
1073
  };
1074
+ /**
1075
+ * Whether the loading bar and error state are rounded.
1076
+ */
1077
+ rounded: {
1078
+ type: BooleanConstructor;
1079
+ default: boolean;
1080
+ };
1081
+ /**
1082
+ * The class for the native image element
1083
+ */
1084
+ imageClass: {
1085
+ type: StringConstructor;
1086
+ };
1087
+ /**
1088
+ * Controls the threshold before the component triggers the src url.
1089
+ */
1090
+ threshold: {
1091
+ type: NumberConstructor;
1092
+ default: number;
1093
+ };
1074
1094
  }, {
1075
1095
  fwImageRef: vue.Ref<null>;
1076
1096
  isBackground: vue.ComputedRef<boolean>;
@@ -1091,8 +1111,30 @@ declare const _default$3: vue.DefineComponent<{
1091
1111
  default: string;
1092
1112
  validator: (value: string) => boolean;
1093
1113
  };
1114
+ /**
1115
+ * Whether the loading bar and error state are rounded.
1116
+ */
1117
+ rounded: {
1118
+ type: BooleanConstructor;
1119
+ default: boolean;
1120
+ };
1121
+ /**
1122
+ * The class for the native image element
1123
+ */
1124
+ imageClass: {
1125
+ type: StringConstructor;
1126
+ };
1127
+ /**
1128
+ * Controls the threshold before the component triggers the src url.
1129
+ */
1130
+ threshold: {
1131
+ type: NumberConstructor;
1132
+ default: number;
1133
+ };
1094
1134
  }>>, {
1095
1135
  type: "native" | "background" | undefined;
1136
+ rounded: boolean;
1137
+ threshold: number;
1096
1138
  }>;
1097
1139
 
1098
1140
  declare const _default$2: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
@@ -1221,6 +1263,9 @@ declare interface FwImageProps {
1221
1263
  src?: string;
1222
1264
  alt?: string;
1223
1265
  type?: 'native' | 'background';
1266
+ rounded?: boolean;
1267
+ imageClass?: string;
1268
+ threshold?: number;
1224
1269
  }
1225
1270
 
1226
1271
  declare module '@frollo/frollo-web-ui/icons' { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frollo/frollo-web-ui",
3
- "version": "1.2.4",
3
+ "version": "1.2.5",
4
4
  "description": "Frollo's UI library for components, utilities and configs",
5
5
  "exports": {
6
6
  "./icons": "./icons/index.ts",
package/types/components/fw-image/fw-image.vue.d.ts CHANGED
@@ -16,6 +16,26 @@ declare const _default: import("vue").DefineComponent<{
16
16
  default: string;
17
17
  validator: (value: string) => boolean;
18
18
  };
19
+ /**
20
+ * Whether the loading bar and error state are rounded.
21
+ */
22
+ rounded: {
23
+ type: BooleanConstructor;
24
+ default: boolean;
25
+ };
26
+ /**
27
+ * The class for the native image element
28
+ */
29
+ imageClass: {
30
+ type: StringConstructor;
31
+ };
32
+ /**
33
+ * Controls the threshold before the component triggers the src url.
34
+ */
35
+ threshold: {
36
+ type: NumberConstructor;
37
+ default: number;
38
+ };
19
39
  }, {
20
40
  fwImageRef: import("vue").Ref<null>;
21
41
  isBackground: import("vue").ComputedRef<boolean>;
@@ -36,7 +56,29 @@ declare const _default: import("vue").DefineComponent<{
36
56
  default: string;
37
57
  validator: (value: string) => boolean;
38
58
  };
59
+ /**
60
+ * Whether the loading bar and error state are rounded.
61
+ */
62
+ rounded: {
63
+ type: BooleanConstructor;
64
+ default: boolean;
65
+ };
66
+ /**
67
+ * The class for the native image element
68
+ */
69
+ imageClass: {
70
+ type: StringConstructor;
71
+ };
72
+ /**
73
+ * Controls the threshold before the component triggers the src url.
74
+ */
75
+ threshold: {
76
+ type: NumberConstructor;
77
+ default: number;
78
+ };
39
79
  }>>, {
40
80
  type: "native" | "background" | undefined;
81
+ rounded: boolean;
82
+ threshold: number;
41
83
  }>;
42
84
  export default _default;
package/types/components/fw-image/index.types.d.ts CHANGED
@@ -2,4 +2,7 @@ export declare interface FwImageProps {
2
2
  src?: string;
3
3
  alt?: string;
4
4
  type?: 'native' | 'background';
5
+ rounded?: boolean;
6
+ imageClass?: string;
7
+ threshold?: number;
5
8
  }