@frollo/frollo-web-ui 4.0.1 → 5.0.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 (44) hide show
  1. package/cjs/index.js +800 -446
  2. package/esm/fw-accordion.js +61 -28
  3. package/esm/fw-animations.js +2 -2
  4. package/esm/fw-bar-chart.js +2 -1
  5. package/esm/{fw-button-7902ae9e.js → fw-button-beaf20f4.js} +1 -1
  6. package/esm/fw-button.js +3 -3
  7. package/esm/fw-checkbox.js +25 -9
  8. package/esm/fw-drawer.js +225 -0
  9. package/esm/fw-dropdown.js +1 -1
  10. package/esm/{fw-image-c829ed20.js → fw-image-161b667a.js} +65 -59
  11. package/esm/fw-image.js +4 -4
  12. package/esm/fw-input.js +2 -2
  13. package/esm/{fw-loading-spinner-7462e0b2.js → fw-loading-spinner-51deaa3d.js} +1 -1
  14. package/esm/fw-modal.js +3 -3
  15. package/esm/fw-navigation-menu.js +3 -3
  16. package/esm/fw-sidebar-menu.js +3 -3
  17. package/esm/fw-table.js +9 -9
  18. package/esm/fw-tag.js +93 -18
  19. package/esm/fw-toast.js +1 -1
  20. package/esm/fw-transactions-card.js +4 -4
  21. package/esm/get-root-colours-e2a1cb28.js +21 -0
  22. package/esm/{index-f0510452.js → index-2766bfe4.js} +12 -11
  23. package/esm/{index-dbe0534d.js → index-3624f1c9.js} +115 -101
  24. package/esm/index.js +40 -36
  25. package/frollo-web-ui.esm.js +861 -494
  26. package/icons/index.ts +3 -1
  27. package/icons/xmark.svg +3 -0
  28. package/index.d.ts +393 -140
  29. package/package.json +1 -1
  30. package/types/components/fw-accordion/fw-accordion.vue.d.ts +22 -4
  31. package/types/components/fw-accordion/index.types.d.ts +1 -0
  32. package/types/components/fw-checkbox/fw-checkbox.vue.d.ts +35 -3
  33. package/types/components/fw-checkbox/index.types.d.ts +2 -0
  34. package/types/components/fw-drawer/fw-drawer.vue.d.ts +165 -0
  35. package/types/components/fw-drawer/index.d.ts +2 -0
  36. package/types/components/fw-drawer/index.types.d.ts +14 -0
  37. package/types/components/fw-input/fw-input.vue.d.ts +2 -2
  38. package/types/components/fw-tag/fw-tag.vue.d.ts +30 -8
  39. package/types/components/fw-tag/index.types.d.ts +4 -2
  40. package/types/components/index.d.ts +1 -0
  41. package/types/components/index.types.d.ts +1 -0
  42. package/types/helpers/get-root-colours.d.ts +9 -0
  43. package/types/icons/index.d.ts +2 -1
  44. package/web-components/index.js +863 -496
@@ -1,15 +1,15 @@
1
1
  import './es.array.includes-91be7771.js';
2
2
  import './es.number.constructor-d6ff8874.js';
3
3
  import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, renderSlot } from 'vue';
4
- import './es.array.find-dfa1f42f.js';
5
- import './es.string.iterator-590198a8.js';
6
- import './web.timers-0f117224.js';
7
4
  import { a as documentCreateElement$1, g as global$1, c as createNonEnumerableProperty$1 } from './is-forced-752b5893.js';
8
5
  import { _ as _export } from './export-a37ba078.js';
9
6
  import { a as arrayIteration } from './array-iteration-107f927f.js';
10
7
  import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
8
+ import './es.array.find-dfa1f42f.js';
9
+ import './es.string.iterator-590198a8.js';
10
+ import './web.timers-0f117224.js';
11
11
  import { s as script$1 } from './fw-loading-bar-f5ca605c.js';
12
- import { r as render$1 } from './index-dbe0534d.js';
12
+ import { r as render$1 } from './index-3624f1c9.js';
13
13
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
14
14
 
15
15
  var es_array_forEach = {};
@@ -107,62 +107,67 @@ for (var COLLECTION_NAME in DOMIterables) {
107
107
 
108
108
  handlePrototype(DOMTokenListPrototype);
109
109
 
110
+ var handleIntersect = function handleIntersect(entries, observer) {
111
+ entries.forEach(function (entry) {
112
+ if (entry.isIntersecting) {
113
+ loadImage(entry.target);
114
+ observer.unobserve(entry.target);
115
+ }
116
+ });
117
+ };
118
+ var createObserver = function createObserver(el) {
119
+ var options = {
120
+ root: null,
121
+ threshold: Number(el.getAttribute('threshold')) || 0
122
+ };
123
+ var observer = new IntersectionObserver(handleIntersect, options);
124
+ observer.observe(el);
125
+ };
126
+ var loadImage = function loadImage(el) {
127
+ var imageElement = Array.from(el.children).find(function (element) {
128
+ return element.nodeName === 'IMG';
129
+ });
130
+ if (imageElement) {
131
+ var type = el.getAttribute('type');
132
+ var url = imageElement.dataset.url;
133
+ var setImgError = function setImgError() {
134
+ setTimeout(function () {
135
+ return el.classList.add('fw-image--loaded-error');
136
+ }, 100);
137
+ setTimeout(function () {
138
+ var _el$querySelector;
139
+ return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
140
+ }, 600);
141
+ };
142
+ if (url) {
143
+ imageElement.src = url;
144
+ } else {
145
+ setImgError();
146
+ }
147
+ imageElement.addEventListener('load', function () {
148
+ setTimeout(function () {
149
+ return el.classList.add('fw-image--loaded');
150
+ }, 100);
151
+ setTimeout(function () {
152
+ var _el$querySelector2;
153
+ return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
154
+ }, 600);
155
+ });
156
+ imageElement.addEventListener('error', function () {
157
+ setImgError();
158
+ });
159
+ if (type === 'background') {
160
+ el.style.backgroundImage = "url('".concat(url, "')");
161
+ imageElement.remove();
162
+ }
163
+ }
164
+ };
110
165
  var lazyLoadDirective = {
111
166
  mounted: function mounted(el) {
112
- var loadImage = function loadImage() {
113
- var imageElement = Array.from(el.children).find(function (element) {
114
- return element.nodeName === 'IMG';
115
- });
116
- if (imageElement) {
117
- var type = el.getAttribute('type');
118
- var url = imageElement.dataset.url;
119
- imageElement.addEventListener('load', function () {
120
- setTimeout(function () {
121
- return el.classList.add('fw-image--loaded');
122
- }, 100);
123
- setTimeout(function () {
124
- var _el$querySelector;
125
- return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
126
- }, 600);
127
- });
128
- if (url) {
129
- imageElement.src = url;
130
- }
131
- if (type === 'background') {
132
- el.style.backgroundImage = "url('".concat(url, "')");
133
- imageElement.remove();
134
- }
135
- imageElement.addEventListener('error', function () {
136
- setTimeout(function () {
137
- return el.classList.add('fw-image--loaded-error');
138
- }, 100);
139
- setTimeout(function () {
140
- var _el$querySelector2;
141
- return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
142
- }, 600);
143
- });
144
- }
145
- };
146
- var handleIntersect = function handleIntersect(entries, observer) {
147
- entries.forEach(function (entry) {
148
- if (entry.isIntersecting) {
149
- loadImage();
150
- observer.unobserve(el);
151
- }
152
- });
153
- };
154
- var createObserver = function createObserver() {
155
- var options = {
156
- root: null,
157
- threshold: Number(el.getAttribute('threshold')) || 0
158
- };
159
- var observer = new IntersectionObserver(handleIntersect, options);
160
- observer.observe(el);
161
- };
162
167
  if (window.IntersectionObserver) {
163
- createObserver();
168
+ createObserver(el);
164
169
  } else {
165
- loadImage();
170
+ loadImage(el);
166
171
  }
167
172
  }
168
173
  };
@@ -266,17 +271,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
266
271
  }, [createElementVNode("img", {
267
272
  "data-url": _ctx.src,
268
273
  alt: _ctx.alt,
269
- "class": normalizeClass(_ctx.imageClass)
274
+ loading: "lazy",
275
+ "class": normalizeClass([_ctx.rounded ? 'rounded-full' : '', _ctx.imageClass])
270
276
  }, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
271
277
  "class": normalizeClass(["fw-image--loading w-full h-full", {
272
278
  'rounded-full': _ctx.rounded
273
279
  }])
274
280
  }, null, 8, ["class"]), createElementVNode("div", {
275
- "class": normalizeClass(["fw-image--error bg-grey-20", {
281
+ "class": normalizeClass(["fw-image--error rounded bg-grey-20", {
276
282
  'rounded-full': _ctx.rounded
277
283
  }])
278
284
  }, [createElementVNode("div", _hoisted_3, [createVNode(_component_FileExclamationSvg, {
279
- "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
285
+ "class": "w-full h-full scale-[0.25] opacity-40 text-alert max-w-[150px]"
280
286
  })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
281
287
  }
282
288
 
package/esm/fw-image.js CHANGED
@@ -1,4 +1,4 @@
1
- export { s as FwImage } from './fw-image-c829ed20.js';
1
+ export { s as FwImage } from './fw-image-161b667a.js';
2
2
  import './es.array.includes-91be7771.js';
3
3
  import './is-forced-752b5893.js';
4
4
  import './export-a37ba078.js';
@@ -8,15 +8,15 @@ import './object-keys-4f5bf4e7.js';
8
8
  import './es.number.constructor-d6ff8874.js';
9
9
  import './classof-39c30bd5.js';
10
10
  import 'vue';
11
- import './es.array.find-dfa1f42f.js';
12
11
  import './array-iteration-107f927f.js';
13
12
  import './array-species-create-a5f5503b.js';
13
+ import './array-method-is-strict-055b1830.js';
14
+ import './es.array.find-dfa1f42f.js';
14
15
  import './es.string.iterator-590198a8.js';
15
16
  import './create-property-534611fd.js';
16
17
  import './web.timers-0f117224.js';
17
18
  import './function-apply-ce251590.js';
18
- import './array-method-is-strict-055b1830.js';
19
19
  import './fw-loading-bar-f5ca605c.js';
20
20
  import './style-inject.es-1f59c1d0.js';
21
- import './index-dbe0534d.js';
21
+ import './index-3624f1c9.js';
22
22
  import './check-94a5917a.js';
package/esm/fw-input.js CHANGED
@@ -87,11 +87,11 @@ var script = defineComponent({
87
87
  },
88
88
  /**
89
89
  * The logical tab order of the input.
90
- * Defaults to 1
90
+ * Defaults to 0
91
91
  */
92
92
  tabindex: {
93
93
  type: String,
94
- "default": '1'
94
+ "default": '0'
95
95
  },
96
96
  /**
97
97
  * Whether the input is rounded.
@@ -1,4 +1,4 @@
1
- import { h as render$1 } from './index-dbe0534d.js';
1
+ import { i as render$1 } from './index-3624f1c9.js';
2
2
  import { defineComponent, resolveComponent, openBlock, createBlock } from 'vue';
3
3
 
4
4
  var script = defineComponent({
package/esm/fw-modal.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './es.array.includes-91be7771.js';
2
2
  import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createElementVNode, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from 'vue';
3
- import { s as script$1 } from './fw-button-7902ae9e.js';
3
+ import { s as script$1 } from './fw-button-beaf20f4.js';
4
4
  import { u as uniqueId } from './uniqueId-fe08534a.js';
5
5
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
6
6
  import './is-forced-752b5893.js';
@@ -8,8 +8,8 @@ import './export-a37ba078.js';
8
8
  import './add-to-unscopables-2400f45b.js';
9
9
  import './object-create-f6f3a673.js';
10
10
  import './object-keys-4f5bf4e7.js';
11
- import './fw-loading-spinner-7462e0b2.js';
12
- import './index-dbe0534d.js';
11
+ import './fw-loading-spinner-51deaa3d.js';
12
+ import './index-3624f1c9.js';
13
13
  import './check-94a5917a.js';
14
14
 
15
15
  var script = defineComponent({
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
2
- import { s as script$1 } from './fw-button-7902ae9e.js';
2
+ import { s as script$1 } from './fw-button-beaf20f4.js';
3
3
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
4
4
  import './es.array.includes-91be7771.js';
5
5
  import './is-forced-752b5893.js';
@@ -7,8 +7,8 @@ import './export-a37ba078.js';
7
7
  import './add-to-unscopables-2400f45b.js';
8
8
  import './object-create-f6f3a673.js';
9
9
  import './object-keys-4f5bf4e7.js';
10
- import './fw-loading-spinner-7462e0b2.js';
11
- import './index-dbe0534d.js';
10
+ import './fw-loading-spinner-51deaa3d.js';
11
+ import './index-3624f1c9.js';
12
12
  import './check-94a5917a.js';
13
13
 
14
14
  var script = defineComponent({
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, Transition, renderSlot, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from 'vue';
2
- import { s as script$1 } from './fw-button-7902ae9e.js';
3
- import { g as render$1 } from './index-dbe0534d.js';
2
+ import { s as script$1 } from './fw-button-beaf20f4.js';
3
+ import { h as render$1 } from './index-3624f1c9.js';
4
4
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
5
5
  import './es.array.includes-91be7771.js';
6
6
  import './is-forced-752b5893.js';
@@ -8,7 +8,7 @@ import './export-a37ba078.js';
8
8
  import './add-to-unscopables-2400f45b.js';
9
9
  import './object-create-f6f3a673.js';
10
10
  import './object-keys-4f5bf4e7.js';
11
- import './fw-loading-spinner-7462e0b2.js';
11
+ import './fw-loading-spinner-51deaa3d.js';
12
12
  import './check-94a5917a.js';
13
13
 
14
14
  var script = defineComponent({
package/esm/fw-table.js CHANGED
@@ -4,8 +4,9 @@ import { i as toAbsoluteIndex$1, l as lengthOfArrayLike$2, j as engineUserAgent,
4
4
  import { _ as _export } from './export-a37ba078.js';
5
5
  import { c as createProperty$1 } from './create-property-534611fd.js';
6
6
  import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
7
- import { b as render$3, c as render$4 } from './index-dbe0534d.js';
7
+ import { c as render$3, d as render$4 } from './index-3624f1c9.js';
8
8
  import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode } from 'vue';
9
+ import { u as useColours } from './get-root-colours-e2a1cb28.js';
9
10
  import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
10
11
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
11
12
  import './classof-39c30bd5.js';
@@ -244,9 +245,8 @@ var __default__ = defineComponent({
244
245
  sortColumn(columns.value[Number(props.autoSortColumn)]);
245
246
  }
246
247
  });
247
- var style = getComputedStyle(document.body);
248
- var colorPrimary = style.getPropertyValue('--colorPrimary');
249
- var bgHoverColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
248
+ var _useColours = useColours(),
249
+ bgHoverColor = _useColours.primaryFade5;
250
250
  var sortColumn = function sortColumn(column) {
251
251
  if (!isColumnSortable(column)) return;
252
252
  currentSortedColumn.value = column;
@@ -330,7 +330,7 @@ var __default__ = defineComponent({
330
330
  var __injectCSSVars__ = function __injectCSSVars__() {
331
331
  useCssVars(function (_ctx) {
332
332
  return {
333
- "015ddfb2": _ctx.bgHoverColor
333
+ "14adfc52": _ctx.bgHoverColor
334
334
  };
335
335
  });
336
336
  };
@@ -341,7 +341,7 @@ __default__.setup = __setup__ ? function (props, ctx) {
341
341
  } : __injectCSSVars__;
342
342
 
343
343
  var _withScopeId = function _withScopeId(n) {
344
- return pushScopeId("data-v-29e0d2d4"), n = n(), popScopeId(), n;
344
+ return pushScopeId("data-v-7670383f"), n = n(), popScopeId(), n;
345
345
  };
346
346
  var _hoisted_1$2 = ["aria-busy"];
347
347
  var _hoisted_2$1 = {
@@ -445,12 +445,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
445
445
  }), 128))])], 10, _hoisted_1$2);
446
446
  }
447
447
 
448
- var css_248z = ".fw-table-head--sortable[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}.fw-table-row[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}";
449
- var stylesheet = ".fw-table-head--sortable[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}.fw-table-row[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}";
448
+ var css_248z = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
449
+ var stylesheet = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
450
450
  styleInject(css_248z);
451
451
 
452
452
  __default__.render = render$2;
453
- __default__.__scopeId = "data-v-29e0d2d4";
453
+ __default__.__scopeId = "data-v-7670383f";
454
454
 
455
455
  var script$1 = defineComponent({
456
456
  name: 'FwTableHead'
package/esm/fw-tag.js CHANGED
@@ -1,60 +1,96 @@
1
1
  import './es.array.includes-91be7771.js';
2
- import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
2
+ import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, withCtx, createVNode, createCommentVNode } from 'vue';
3
+ import './fw-button.js';
4
+ import { b as render$1 } from './index-3624f1c9.js';
5
+ import { u as useColours } from './get-root-colours-e2a1cb28.js';
6
+ import { s as script } from './fw-button-beaf20f4.js';
3
7
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
4
8
  import './is-forced-752b5893.js';
5
9
  import './export-a37ba078.js';
6
10
  import './add-to-unscopables-2400f45b.js';
7
11
  import './object-create-f6f3a673.js';
8
12
  import './object-keys-4f5bf4e7.js';
13
+ import './check-94a5917a.js';
14
+ import './fw-loading-spinner-51deaa3d.js';
9
15
 
10
- var script = defineComponent({
16
+ var __default__ = defineComponent({
11
17
  name: 'FwTag',
18
+ components: {
19
+ FwButton: script,
20
+ XMarkSvg: render$1
21
+ },
22
+ emits: ['dismissed'],
12
23
  props: {
13
24
  /**
14
- * The size of the tag. Accepts: 'xs' & 'sm'
25
+ * The size of the tag. Accepts: 'xs', 'sm' & 'md'
15
26
  */
16
27
  size: {
17
28
  type: String,
18
29
  "default": 'xs',
19
30
  validator: function validator(value) {
20
- return ['xs', 'sm'].includes(value);
31
+ return ['xs', 'sm', 'md'].includes(value);
21
32
  }
22
33
  },
23
34
  /**
24
35
  * The colour variant of the tag.
25
- * Accepts 'primary', 'alert', 'error', 'success'
36
+ * Accepts 'primary', 'secondary', 'alert', 'error', 'success'
26
37
  */
27
38
  variant: {
28
39
  type: String,
29
40
  "default": 'primary',
30
41
  validator: function validator(value) {
31
- return ['primary', 'alert', 'error', 'success'].includes(value);
42
+ return ['primary', 'secondary', 'alert', 'error', 'success'].includes(value);
32
43
  }
44
+ },
45
+ /**
46
+ * Whether the tag can be dismissed or closed.
47
+ * Emits the @dismissed event
48
+ */
49
+ dismissable: {
50
+ type: Boolean,
51
+ "default": false
33
52
  }
34
53
  },
35
54
  setup: function setup(props) {
36
- var baseClass = ref('inline-block font-semibold text-center whitespace-nowrap rounded-full');
55
+ var baseClass = ref("\n inline-flex items-center justify-center font-semibold text-center whitespace-nowrap rounded-full shadow\n ");
56
+ var _useColours = useColours(),
57
+ primaryFade5 = _useColours.primaryFade5;
37
58
  var tagClasses = ref({
38
59
  primary: {
39
60
  text: 'text-button-primary-text',
40
- background: 'bg-button-primary-bg'
61
+ background: 'bg-button-primary-bg',
62
+ iconType: 'primary'
63
+ },
64
+ secondary: {
65
+ text: 'text-primary',
66
+ background: 'fw-tag--secondary-bg',
67
+ iconType: 'tertiary'
41
68
  },
42
69
  alert: {
43
70
  text: 'text-white',
44
- background: 'bg-alert'
71
+ background: 'bg-alert',
72
+ iconType: 'error'
45
73
  },
46
74
  success: {
47
75
  text: 'text-white',
48
- background: 'bg-success'
76
+ background: 'bg-success',
77
+ iconType: 'success'
49
78
  },
50
79
  error: {
51
80
  text: 'text-white',
52
- background: 'bg-error'
81
+ background: 'bg-error',
82
+ iconType: 'error'
53
83
  }
54
84
  });
55
85
  var sizes = ref({
56
86
  xs: 'px-2 py-px text-xs',
57
- sm: 'px-4 py-1 text-xs'
87
+ sm: 'px-4 py-1 text-xs',
88
+ md: 'px-3 py-[4.75px] text-xs'
89
+ });
90
+ var iconSizes = ref({
91
+ xs: 'w-4 h-4',
92
+ sm: 'w-5 h-5',
93
+ md: 'w-6 h-6'
58
94
  });
59
95
  var textColorClass = computed(function () {
60
96
  return tagClasses.value[props.variant].text;
@@ -62,28 +98,67 @@ var script = defineComponent({
62
98
  var bgColorClass = computed(function () {
63
99
  return tagClasses.value[props.variant].background;
64
100
  });
101
+ var iconButtonType = computed(function () {
102
+ return tagClasses.value[props.variant].iconType;
103
+ });
65
104
  var sizeClass = computed(function () {
66
105
  return sizes.value[props.size];
67
106
  });
107
+ var iconSizeClass = computed(function () {
108
+ return iconSizes.value[props.size];
109
+ });
68
110
  return {
69
111
  baseClass: baseClass,
70
112
  textColorClass: textColorClass,
71
113
  bgColorClass: bgColorClass,
72
- sizeClass: sizeClass
114
+ sizeClass: sizeClass,
115
+ iconSizeClass: iconSizeClass,
116
+ iconButtonType: iconButtonType,
117
+ primaryFade5: primaryFade5
73
118
  };
74
119
  }
75
120
  });
121
+ var __injectCSSVars__ = function __injectCSSVars__() {
122
+ useCssVars(function (_ctx) {
123
+ return {
124
+ "f1e3ea3e": _ctx.primaryFade5
125
+ };
126
+ });
127
+ };
128
+ var __setup__ = __default__.setup;
129
+ __default__.setup = __setup__ ? function (props, ctx) {
130
+ __injectCSSVars__();
131
+ return __setup__(props, ctx);
132
+ } : __injectCSSVars__;
76
133
 
77
134
  function render(_ctx, _cache, $props, $setup, $data, $options) {
135
+ var _component_XMarkSvg = resolveComponent("XMarkSvg");
136
+ var _component_FwButton = resolveComponent("FwButton");
78
137
  return openBlock(), createElementBlock("span", {
79
138
  "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass]])
80
- }, [renderSlot(_ctx.$slots, "default")], 2);
139
+ }, [renderSlot(_ctx.$slots, "default"), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
140
+ key: 0,
141
+ variant: _ctx.iconButtonType,
142
+ tabindex: "",
143
+ title: "Dismiss filter",
144
+ onClick: _cache[0] || (_cache[0] = function ($event) {
145
+ return _ctx.$emit('dismissed');
146
+ }),
147
+ "class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"])
148
+ }, {
149
+ "default": withCtx(function () {
150
+ return [createVNode(_component_XMarkSvg, {
151
+ "class": "w-full h-full font-semibold m-0"
152
+ })];
153
+ }),
154
+ _: 1
155
+ }, 8, ["variant", "class"])) : createCommentVNode("", true)], 2);
81
156
  }
82
157
 
83
- var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
84
- var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
158
+ var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
159
+ var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
85
160
  styleInject(css_248z);
86
161
 
87
- script.render = render;
162
+ __default__.render = render;
88
163
 
89
- export { script as FwTag };
164
+ export { __default__ as FwTag };
package/esm/fw-toast.js CHANGED
@@ -6,7 +6,7 @@ import './es.array.concat-987938be.js';
6
6
  import './web.timers-0f117224.js';
7
7
  import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, toDisplayString, renderSlot } from 'vue';
8
8
  import { u as uniqueId } from './uniqueId-fe08534a.js';
9
- import { d as render$1, e as render$2, f as render$3 } from './index-dbe0534d.js';
9
+ import { e as render$1, f as render$2, g as render$3 } from './index-3624f1c9.js';
10
10
  import { s as styleInject } from './style-inject.es-1f59c1d0.js';
11
11
  import './add-to-unscopables-2400f45b.js';
12
12
  import './object-create-f6f3a673.js';
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, toDisplayString, createElementBlock } from 'vue';
2
2
  import { s as script$1 } from './fw-card-1b6a67fe.js';
3
- import { s as script$2 } from './fw-image-c829ed20.js';
3
+ import { s as script$2 } from './fw-image-161b667a.js';
4
4
  import './es.array.includes-91be7771.js';
5
5
  import './is-forced-752b5893.js';
6
6
  import './export-a37ba078.js';
@@ -9,17 +9,17 @@ import './object-create-f6f3a673.js';
9
9
  import './object-keys-4f5bf4e7.js';
10
10
  import './es.number.constructor-d6ff8874.js';
11
11
  import './classof-39c30bd5.js';
12
- import './es.array.find-dfa1f42f.js';
13
12
  import './array-iteration-107f927f.js';
14
13
  import './array-species-create-a5f5503b.js';
14
+ import './array-method-is-strict-055b1830.js';
15
+ import './es.array.find-dfa1f42f.js';
15
16
  import './es.string.iterator-590198a8.js';
16
17
  import './create-property-534611fd.js';
17
18
  import './web.timers-0f117224.js';
18
19
  import './function-apply-ce251590.js';
19
- import './array-method-is-strict-055b1830.js';
20
20
  import './fw-loading-bar-f5ca605c.js';
21
21
  import './style-inject.es-1f59c1d0.js';
22
- import './index-dbe0534d.js';
22
+ import './index-3624f1c9.js';
23
23
  import './check-94a5917a.js';
24
24
 
25
25
  var script = defineComponent({
@@ -0,0 +1,21 @@
1
+ var useColours = function useColours() {
2
+ var style = getComputedStyle(document.body);
3
+ var colorPrimary = style.getPropertyValue('--colorPrimary');
4
+ var colorSecondary = style.getPropertyValue('--colorSecondary');
5
+ var colorTertiary = style.getPropertyValue('--colorTertiary');
6
+ var fontFamily = style.getPropertyValue('--fontFamily');
7
+ var colorBody = style.getPropertyValue('--colorBody');
8
+ var primaryFade40 = "".concat(colorPrimary, "66"); // Adds 40% transparency
9
+ var primaryFade5 = "".concat(colorPrimary, "0d"); // Adds 5% transparency
10
+ return {
11
+ colorPrimary: colorPrimary,
12
+ colorSecondary: colorSecondary,
13
+ colorTertiary: colorTertiary,
14
+ fontFamily: fontFamily,
15
+ colorBody: colorBody,
16
+ primaryFade5: primaryFade5,
17
+ primaryFade40: primaryFade40
18
+ };
19
+ };
20
+
21
+ export { useColours as u };
@@ -12,6 +12,7 @@ import { d as doesNotExceedSafeInteger$1 } from './does-not-exceed-safe-integer-
12
12
  import { a as arraySpeciesCreate$1 } from './array-species-create-a5f5503b.js';
13
13
  import { c as createProperty$1 } from './create-property-534611fd.js';
14
14
  import { version as version$1, isProxy, toRaw, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, watch, h, computed, resolveComponent, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, createVNode } from 'vue';
15
+ import { u as useColours } from './get-root-colours-e2a1cb28.js';
15
16
  import { u as uniqueId } from './uniqueId-fe08534a.js';
16
17
 
17
18
  function _arrayLikeToArray(arr, len) {
@@ -3375,9 +3376,9 @@ function capBezierPoints(points, area) {
3375
3376
  }
3376
3377
  return valueInPixels;
3377
3378
  }
3378
- const getComputedStyle$1 = (element)=>element.ownerDocument.defaultView.getComputedStyle(element, null);
3379
+ const getComputedStyle = (element)=>element.ownerDocument.defaultView.getComputedStyle(element, null);
3379
3380
  function getStyle(el, property) {
3380
- return getComputedStyle$1(el).getPropertyValue(property);
3381
+ return getComputedStyle(el).getPropertyValue(property);
3381
3382
  }
3382
3383
  const positions = [
3383
3384
  'top',
@@ -3432,7 +3433,7 @@ const useOffsetPos = (x, y, target)=>(x > 0 || y > 0) && (!target || !target.sha
3432
3433
  return event;
3433
3434
  }
3434
3435
  const { canvas , currentDevicePixelRatio } = chart;
3435
- const style = getComputedStyle$1(canvas);
3436
+ const style = getComputedStyle(canvas);
3436
3437
  const borderBox = style.boxSizing === 'border-box';
3437
3438
  const paddings = getPositionedStyle(style, 'padding');
3438
3439
  const borders = getPositionedStyle(style, 'border', 'width');
@@ -3458,7 +3459,7 @@ function getContainerSize(canvas, width, height) {
3458
3459
  height = canvas.clientHeight;
3459
3460
  } else {
3460
3461
  const rect = container.getBoundingClientRect(); // this is the border box of the container
3461
- const containerStyle = getComputedStyle$1(container);
3462
+ const containerStyle = getComputedStyle(container);
3462
3463
  const containerBorder = getPositionedStyle(containerStyle, 'border', 'width');
3463
3464
  const containerPadding = getPositionedStyle(containerStyle, 'padding');
3464
3465
  width = rect.width - containerPadding.width - containerBorder.width;
@@ -3477,7 +3478,7 @@ function getContainerSize(canvas, width, height) {
3477
3478
  const round1 = (v)=>Math.round(v * 10) / 10;
3478
3479
  // eslint-disable-next-line complexity
3479
3480
  function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
3480
- const style = getComputedStyle$1(canvas);
3481
+ const style = getComputedStyle(canvas);
3481
3482
  const margins = getPositionedStyle(style, 'margin');
3482
3483
  const maxWidth = parseMaxStyle(style.maxWidth, canvas, 'clientWidth') || INFINITY;
3483
3484
  const maxHeight = parseMaxStyle(style.maxHeight, canvas, 'clientHeight') || INFINITY;
@@ -15680,12 +15681,12 @@ var script = defineComponent({
15680
15681
  return strToNumber(singleY);
15681
15682
  })) || [];
15682
15683
  });
15683
- var style = getComputedStyle(document.body);
15684
- var colorPrimary = style.getPropertyValue('--colorPrimary');
15685
- var fontFamily = style.getPropertyValue('--fontFamily');
15686
- var colorBody = style.getPropertyValue('--colorBody');
15687
- var primaryFade = "".concat(colorPrimary, "66"); // Adds 40% transparency
15688
- var bgColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
15684
+ var _useColours = useColours(),
15685
+ colorPrimary = _useColours.colorPrimary,
15686
+ colorBody = _useColours.colorBody,
15687
+ fontFamily = _useColours.fontFamily,
15688
+ bgColor = _useColours.primaryFade5,
15689
+ primaryFade = _useColours.primaryFade40;
15689
15690
  var maxY = computed(function () {
15690
15691
  return Math.max.apply(Math, _toConsumableArray(yModel.value));
15691
15692
  });