@watermarkinsights/ripple 3.0.1 → 3.0.2-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 (81) hide show
  1. package/dist/cjs/{global-ccb9500c.js → global-1e540de6.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
  4. package/dist/cjs/ripple.cjs.js +2 -2
  5. package/dist/cjs/wm-datepicker.cjs.entry.js +25 -30
  6. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.css +9 -0
  7. package/dist/collection/components/wm-datepicker/wm-datepicker.js +26 -32
  8. package/dist/esm/{global-4f914bb2.js → global-d6b49e98.js} +1 -1
  9. package/dist/esm/loader.js +2 -2
  10. package/dist/esm/priv-datepicker.entry.js +1 -1
  11. package/dist/esm/ripple.js +2 -2
  12. package/dist/esm/wm-datepicker.entry.js +25 -30
  13. package/dist/ripple/p-129d94fa.entry.js +1 -0
  14. package/dist/ripple/{p-454ad552.entry.js → p-c0fe5201.entry.js} +1 -1
  15. package/dist/ripple/{p-69a73e86.js → p-e3843249.js} +1 -1
  16. package/dist/ripple/ripple.esm.js +1 -1
  17. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +3 -3
  18. package/package.json +1 -1
  19. package/dist/cjs/app-globals-a07327ae.js +0 -47
  20. package/dist/cjs/css-shim-a7379e2b.js +0 -6
  21. package/dist/cjs/dom-3e7d9c3b.js +0 -75
  22. package/dist/cjs/functions-65513c61.js +0 -8360
  23. package/dist/cjs/global-06317e3f.js +0 -36
  24. package/dist/cjs/global-f6930bb0.js +0 -38
  25. package/dist/cjs/index-8dea8c13.js +0 -2976
  26. package/dist/cjs/shadow-css-09555044.js +0 -391
  27. package/dist/esm/app-globals-f62991a4.js +0 -45
  28. package/dist/esm/css-shim-bbdf0cc6.js +0 -4
  29. package/dist/esm/dom-1f98a75f.js +0 -73
  30. package/dist/esm/functions-316c1b23.js +0 -8340
  31. package/dist/esm/global-03372f70.js +0 -34
  32. package/dist/esm/global-fedbc323.js +0 -36
  33. package/dist/esm/index-e34aa595.js +0 -2938
  34. package/dist/esm/shadow-css-67b66845.js +0 -389
  35. package/dist/ripple/app-globals-b5693c90.js +0 -45
  36. package/dist/ripple/app-globals-d72c2d3c.js +0 -45
  37. package/dist/ripple/app-globals-f62991a4.js +0 -45
  38. package/dist/ripple/css-shim-bbdf0cc6.js +0 -4
  39. package/dist/ripple/dom-1f98a75f.js +0 -73
  40. package/dist/ripple/functions-316c1b23.js +0 -8340
  41. package/dist/ripple/http-service-5d037e16.js +0 -52
  42. package/dist/ripple/index-20b65f86.js +0 -2938
  43. package/dist/ripple/index-e34aa595.js +0 -2938
  44. package/dist/ripple/interfaces-50753346.js +0 -51
  45. package/dist/ripple/p-0c2498f4.js +0 -1
  46. package/dist/ripple/p-42ca2e15.entry.js +0 -1
  47. package/dist/ripple/p-e91befe3.js +0 -1
  48. package/dist/ripple/priv-chart-popover.entry.js +0 -85
  49. package/dist/ripple/priv-datepicker.entry.js +0 -668
  50. package/dist/ripple/priv-navigator-button.entry.js +0 -25
  51. package/dist/ripple/priv-navigator-item.entry.js +0 -30
  52. package/dist/ripple/ripple.css +0 -84
  53. package/dist/ripple/shadow-css-67b66845.js +0 -389
  54. package/dist/ripple/wm-action-menu.entry.js +0 -202
  55. package/dist/ripple/wm-button.entry.js +0 -148
  56. package/dist/ripple/wm-chart-slice.entry.js +0 -18
  57. package/dist/ripple/wm-chart.entry.js +0 -504
  58. package/dist/ripple/wm-datepicker.entry.js +0 -258
  59. package/dist/ripple/wm-input.entry.js +0 -106
  60. package/dist/ripple/wm-menuitem.entry.js +0 -114
  61. package/dist/ripple/wm-modal-footer.entry.js +0 -39
  62. package/dist/ripple/wm-modal-header.entry.js +0 -41
  63. package/dist/ripple/wm-modal.entry.js +0 -145
  64. package/dist/ripple/wm-navigator.entry.js +0 -275
  65. package/dist/ripple/wm-network-uploader.entry.js +0 -427
  66. package/dist/ripple/wm-option.entry.js +0 -119
  67. package/dist/ripple/wm-pagination.entry.js +0 -172
  68. package/dist/ripple/wm-search.entry.js +0 -227
  69. package/dist/ripple/wm-select.entry.js +0 -362
  70. package/dist/ripple/wm-snackbar.entry.js +0 -156
  71. package/dist/ripple/wm-tab-item.entry.js +0 -78
  72. package/dist/ripple/wm-tab-list.entry.js +0 -201
  73. package/dist/ripple/wm-tab-panel.entry.js +0 -38
  74. package/dist/ripple/wm-tag-input.entry.js +0 -534
  75. package/dist/ripple/wm-timepicker.entry.js +0 -382
  76. package/dist/ripple/wm-toggletip.entry.js +0 -124
  77. package/dist/ripple/wm-uploader.entry.js +0 -338
  78. package/dist/ripple/wm-wrapper.entry.js +0 -17
  79. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts~ds312_tagInputMaxTags +0 -87
  80. package/dist/types/components.d.ts~ds312_tagInputMaxTags +0 -879
  81. package/dist/types/stencil-public-runtime.d.ts~ds312_tagInputMaxTags +0 -1555
@@ -1,338 +0,0 @@
1
- import { r as registerInstance, e as createEvent, i as forceUpdate, h, f as Host, g as getElement } from './index-e34aa595.js';
2
- import { g as generateId, i as intl, n as hasValidType } from './functions-316c1b23.js';
3
-
4
- const wmUploaderCss = "@charset \"UTF-8\";:host .wm-button,wm-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:flex;justify-content:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text{background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button:hover,wm-uploader .wm-button:hover{background:#464177;color:#fff}:host .wm-button .mdi,wm-uploader .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover,wm-uploader .wm-button.-primary:not(.-textonly):hover{background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-textonly,wm-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-uploader .wm-button.-textonly.-permanentlydelete:hover{text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover,wm-uploader .wm-button.-textonly.dark:hover{text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-uploader .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-uploader .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-selectoronly,wm-uploader .wm-button.-selectoronly{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:1px solid #575195;border-radius:3px 3px 3px 3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:500;font-size:0.875rem;text-transform:none;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selectoronly,wm-uploader .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-uploader .wm-button.-selectoronly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";position:absolute;right:0.5625rem;top:50%;transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-uploader .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-uploader .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-uploader .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.dark,wm-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-primary.dark,wm-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-uploader .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-uploader .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{width:100%;height:100%;display:block;position:relative}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-uploader input:focus+.wm-button.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important}:host *,wm-uploader *{box-sizing:border-box}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.header{margin-bottom:1rem}.header .slot-wrapper{display:flex;justify-content:flex-start;align-items:flex-start}.header .info-wrapper{align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.footer{display:flex;flex-direction:column;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{align-items:flex-end}.footer .filecount-wrapper{display:flex;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:flex;flex-direction:column;margin-bottom:1rem}.notif{padding-top:0.25rem;font-size:0.875rem;font-style:italic;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-wrapper{position:relative;display:flex}.file-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-info+.file-controls{flex:none;margin-left:1rem}.empty-block{margin:5rem auto;display:flex;flex-direction:column;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container.type1{padding:0 1.875rem;height:16.25rem}ul{list-style:none;padding:0;width:100%}ul li{font-size:0.875rem}ul li .file{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.75rem;padding:0.5rem 1.25rem;background:#f4f4f4;border:1px solid #6b6b6b;display:flex;justify-content:space-between;align-items:center}ul li .file+.file{margin-top:1.25rem}ul li .file .filename{font-weight:500}ul li .file wm-button+wm-button{margin-left:1rem}ul.file-list .file.--saved,ul.inprogress-list .file{margin-bottom:1.625rem}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.error-list li{margin-bottom:1.25rem;color:#c0392b}ul.error-list li .file{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}ul.error-list li .error-message{padding-top:0.25rem;font-style:italic}";
5
-
6
- const Uploader = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.wmFilesSelected = createEvent(this, "wmFilesSelected", 7);
10
- this.wmDeleteFile = createEvent(this, "wmDeleteFile", 7);
11
- this.wmDownloadFile = createEvent(this, "wmDownloadFile", 7);
12
- this.type = "1";
13
- this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
14
- this.maxSize = 100; // in Mb
15
- this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
16
- this.fileList = []; // the string above transformed into the actual array
17
- this.filesToUpload = []; // input.files that passed validation
18
- this.isTabbing = false;
19
- this.errorList = []; // for errors on a particular file
20
- this.inputId = generateId();
21
- }
22
- toggleTabbingOn() {
23
- this.isTabbing = true;
24
- }
25
- toggleTabbingOff() {
26
- this.isTabbing = false;
27
- }
28
- handleUploadProgress(ev) {
29
- this.fileList.map((i) => {
30
- if (i.id === ev.detail.id) {
31
- i.progress = ev.detail.progress;
32
- forceUpdate(this.el);
33
- }
34
- });
35
- if (ev.detail.progress === 100) {
36
- // inProgressList is not a perfect reflection of how many files are uploading
37
- // because even after progress reached 100% the item should remain in the array
38
- // (should only be removed once it appears in fileList)
39
- this.numFilesInProgress -= 1;
40
- }
41
- // aggregate the percentages for SR to announce progress
42
- if (!this.srProgress && this.numFilesInProgress) {
43
- const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
44
- this.srProgress = setInterval(() => {
45
- const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
46
- if (this.liveRegion) {
47
- this.liveRegion.innerHTML = intl.formatMessage({
48
- id: "uploader.uploadProgress",
49
- defaultMessage: "Upload progress: {percentage}%",
50
- }, { percentage: Math.floor(aggregate / total) });
51
- }
52
- }, 5000);
53
- }
54
- }
55
- parseFiles() {
56
- if (!!this.files) {
57
- if (typeof this.files === "string") {
58
- const list = JSON.parse(this.files);
59
- if (typeof list === "object") {
60
- this.fileList = list;
61
- }
62
- else {
63
- throw new Error("could not parse string passed to files attribute");
64
- }
65
- }
66
- else {
67
- throw new Error("Attribute 'files' should be a string");
68
- }
69
- }
70
- }
71
- parseRejectedFiles() {
72
- if (!!this.rejectedFiles) {
73
- if (typeof this.files === "string") {
74
- const list = JSON.parse(this.rejectedFiles);
75
- if (typeof list === "object") {
76
- this.errorList = list;
77
- }
78
- else {
79
- throw new Error("could not parse string passed to errors attribute");
80
- }
81
- }
82
- else {
83
- throw new Error("Attribute 'rejected-files' should be a string");
84
- }
85
- }
86
- }
87
- setMaxSize() {
88
- // Max size can't be set above 100Mb
89
- this.maxSize = this.maxSize > 100 ? 100 : this.maxSize;
90
- }
91
- uploadNotifications(newNum, oldNum) {
92
- if (oldNum > 0 && newNum === 0) {
93
- setTimeout(() => {
94
- this.notif = null;
95
- }, 20 * 1000);
96
- const message = intl.formatMessage({
97
- id: "uploader.finishedUploading",
98
- defaultMessage: "Finished uploading",
99
- });
100
- this.notif = { id: 5, message };
101
- if (this.liveRegion) {
102
- this.liveRegion.innerHTML = message;
103
- }
104
- this.numFilesInProgress = null;
105
- clearInterval(this.srProgress);
106
- forceUpdate(this.el);
107
- }
108
- else if (newNum > 0 && newNum != oldNum) {
109
- const message = intl.formatMessage({
110
- id: "uploader.filesUploading",
111
- defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
112
- }, { num: newNum });
113
- this.notif = { id: 6, message };
114
- if (this.liveRegion) {
115
- this.liveRegion.innerHTML = message;
116
- }
117
- forceUpdate(this.el);
118
- }
119
- }
120
- isValidSize(size) {
121
- // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
122
- return size / 1024 / 1024 <= this.maxSize;
123
- }
124
- isDuplicate(name) {
125
- return this.fileList.find((f) => {
126
- const filename = f.type ? f.name + "." + f.type : f.name;
127
- return filename === name;
128
- });
129
- }
130
- isEmpty() {
131
- return !this.fileList.length && !this.errorList.length;
132
- }
133
- isDisabled() {
134
- const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
135
- if (!this.notif) {
136
- if (isMax) {
137
- const errMessage = intl.formatMessage({
138
- id: "uploader.fileUploadLimit",
139
- defaultMessage: "You have reached the file upload limit.",
140
- });
141
- this.notif = { id: 1, message: errMessage };
142
- if (this.liveRegion) {
143
- this.liveRegion.innerHTML = errMessage;
144
- }
145
- }
146
- else {
147
- this.notif = null;
148
- }
149
- }
150
- else if (this.notif.id === 1) {
151
- // to make sure SR don't repeat the error, don't reset it if it already is showing
152
- // just dismiss it if isMax is not true anymore
153
- if (!isMax) {
154
- this.notif = null;
155
- }
156
- // finally do nothing if error 2 is showing (special case when user selects too many files)
157
- }
158
- // disable if is the uploader is maxed out or if something is uploading
159
- return isMax || this.numFilesInProgress > 0;
160
- }
161
- isItemUploading(item) {
162
- return item.hasOwnProperty("progress") && item.progress < 100;
163
- }
164
- clearErrors() {
165
- this.errorList = [];
166
- this.notif = null;
167
- }
168
- handleFiles(ev) {
169
- this.filesToUpload = [];
170
- const validTypes = this.fileTypes.split(" ").join(", ");
171
- const files = Array.from(ev.target.files);
172
- if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
173
- const errMessage = intl.formatMessage({
174
- id: "uploader.fileUploadExceeded",
175
- defaultMessage: "The number of selected files exceeds the limit.",
176
- });
177
- this.notif = { id: 2, message: errMessage };
178
- if (this.liveRegion) {
179
- this.liveRegion.innerHTML = errMessage;
180
- }
181
- }
182
- else {
183
- files &&
184
- files.map((file) => {
185
- if (!hasValidType(file, this.fileTypes)) {
186
- const error = {
187
- name: file.name,
188
- message: intl.formatMessage({
189
- id: "uploader.invalidFileType",
190
- defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
191
- }, { validTypes }),
192
- };
193
- this.errorList.push(error);
194
- }
195
- else if (!this.isValidSize(file.size)) {
196
- const error = {
197
- name: file.name,
198
- message: intl.formatMessage({
199
- id: "uploader.fileTooLarge",
200
- defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
201
- }, { size: this.maxSize }),
202
- };
203
- this.errorList.push(error);
204
- }
205
- else if (this.isDuplicate(file.name)) {
206
- const error = {
207
- name: file.name,
208
- message: intl.formatMessage({
209
- id: "uploader.duplicateName",
210
- defaultMessage: "A file with this name already exists.",
211
- }),
212
- };
213
- this.errorList.push(error);
214
- }
215
- else {
216
- this.filesToUpload.push(file);
217
- }
218
- });
219
- if (this.filesToUpload.length > 0) {
220
- this.numFilesInProgress = this.filesToUpload.length;
221
- this.wmFilesSelected.emit(this.filesToUpload);
222
- }
223
- }
224
- ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
225
- }
226
- downloadFile(file) {
227
- this.clearErrors();
228
- this.wmDownloadFile.emit(file.id);
229
- }
230
- deleteFile(file) {
231
- this.clearErrors();
232
- forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
233
- this.wmDeleteFile.emit(file.id);
234
- }
235
- componentWillLoad() {
236
- if (!this.buttonText) {
237
- throw new Error("wm-uploader: button-text is a required prop");
238
- }
239
- if (this.type === "1" && !this.emptyStateText) {
240
- throw new Error("wm-uploader: empty-state-text is a required prop");
241
- }
242
- this.setMaxSize();
243
- this.parseFiles();
244
- this.clearErrors();
245
- this.parseRejectedFiles();
246
- }
247
- componentDidLoad() {
248
- // awkward way to handle Edge bug where file input dialog doesn't open on Enter key
249
- // first, detect polyfill by checking the class name that it adds to the component
250
- // (it's important NOT to execute the code below in normal browsers as it would open the dialog twice)
251
- this.el.classList.contains("sc-wm-uploader-h") &&
252
- // then add an even listener to force a click event when Enter key is pressed
253
- this.inputEl &&
254
- this.inputEl.addEventListener("keydown", (ev) => {
255
- if (this.inputEl && ev.keyCode === 13) {
256
- this.inputEl.click();
257
- }
258
- });
259
- if (document.body.classList.contains("wmcl-user-is-tabbing")) {
260
- this.toggleTabbingOn();
261
- }
262
- }
263
- renderUploadSvg() {
264
- return (h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" }, h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
265
- }
266
- renderIcon() {
267
- // mdi attachment icon (paper clip) is horizontal but we want it vertical
268
- const rotate = this.icon && this.icon === "f066";
269
- return (this.icon && (h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
270
- }
271
- renderInfo() {
272
- return this.info && this.type === "2" ? h("span", { class: "info" }, this.info) : "";
273
- }
274
- renderNotif() {
275
- return this.notif ? h("div", { class: "notif" }, this.notif.message) : "";
276
- }
277
- renderUploadButton(classes) {
278
- return (h("div", { class: "info-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: () => this.clearErrors(), onChange: (e) => this.handleFiles(e), disabled: this.isDisabled() }), h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderInfo()));
279
- }
280
- renderEmptyState() {
281
- return (h("div", { class: "empty-block" }, this.renderUploadSvg(), h("div", { class: `empty-message` }, this.emptyStateText), this.renderUploadButton("-primary empty-button"), this.renderNotif()));
282
- }
283
- renderErrorList() {
284
- if (!!this.errorList.length) {
285
- if (this.liveRegion) {
286
- let srMessage = this.errorList.reduce(function (acc, err) {
287
- return acc + `${err.name}: ${err.message} `;
288
- }, "");
289
- this.liveRegion.innerHTML = srMessage;
290
- }
291
- return (h("ul", { class: "error-list" }, this.errorList.map((err) => (h("li", null, h("div", { class: "file --error" }, h("div", { class: "file-info" }, h("span", { class: "filename" }, err.name))), h("div", { class: "error-message" }, err.message))))));
292
- }
293
- }
294
- renderFileInProgress(item) {
295
- const filename = item.type ? item.name + "." + item.type : item.name;
296
- return (h("li", null, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
297
- background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
298
- } }), h("div", { class: "file-info" }, h("span", { class: "filename" }, filename, " ", h("span", { class: "sr-only" }, "uploading"))))));
299
- }
300
- renderFile(item) {
301
- return (h("li", null, h("div", { class: "file --saved" }, h("div", { class: "file-info" }, h("span", { class: "filename" }, item.name + "." + item.type)), h("div", { class: "file-controls" }, h("wm-button", { class: "download-button", "button-style": "icononly", tooltip: "download", "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }), h("wm-button", { class: "delete-button", "button-style": "icononly", tooltip: "remove", "tooltip-position": "bottom", "label-for-identical-buttons": `remove ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
302
- }
303
- renderFileList() {
304
- if (this.fileList) {
305
- this.sortBy === "name"
306
- ? this.fileList.sort((a, b) => a.name.localeCompare(b.name))
307
- : this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));
308
- return (h("div", null, h("ul", { class: "inprogress-list" }, this.fileList.filter((item) => this.isItemUploading(item)).map((item) => this.renderFileInProgress(item))), h("ul", { class: "file-list" }, this.fileList.filter((item) => !this.isItemUploading(item)).map((item) => this.renderFile(item)))));
309
- }
310
- }
311
- renderHeader() {
312
- return (this.type === "2" && (h("div", { class: "header" }, h("div", { class: "slot-wrapper" }, h("slot", null), h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled() ? "disabled" : ""}`), this.renderNotif())))));
313
- }
314
- renderFooter() {
315
- return (this.type === "1" && (h("div", { class: "footer" }, h("div", { class: "notif-wrapper" }, h("div", { class: "filecount-wrapper" }, h("div", { class: "filecount" }, intl.formatMessage({
316
- id: "uploader.filesAdded",
317
- defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
318
- }, { numFiles: this.fileList.length })), this.renderUploadButton(`-primary ${this.isDisabled() ? "disabled" : ""}`)), this.renderNotif()))));
319
- }
320
- renderWithItems() {
321
- return (h("div", null, this.renderHeader(), h("div", { class: `list-container type${this.type}` }, this.renderErrorList(), this.renderFileList()), this.renderFooter()));
322
- }
323
- render() {
324
- return (h(Host, null, this.isEmpty() && this.type === "1" ? this.renderEmptyState() : this.renderWithItems(), h("div", { ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
325
- ,
326
- "aria-atomic": "true" })));
327
- }
328
- get el() { return getElement(this); }
329
- static get watchers() { return {
330
- "files": ["parseFiles"],
331
- "rejectedFiles": ["parseRejectedFiles"],
332
- "maxSize": ["setMaxSize"],
333
- "numFilesInProgress": ["uploadNotifications"]
334
- }; }
335
- };
336
- Uploader.style = wmUploaderCss;
337
-
338
- export { Uploader as wm_uploader };
@@ -1,17 +0,0 @@
1
- import { r as registerInstance, e as createEvent, g as getElement } from './index-e34aa595.js';
2
-
3
- const Wrapper = class {
4
- constructor(hostRef) {
5
- registerInstance(this, hostRef);
6
- this.wmWrapperLoaded = createEvent(this, "wmWrapperLoaded", 7);
7
- }
8
- componentDidLoad() {
9
- this.wmWrapperLoaded.emit();
10
- }
11
- render() {
12
- return;
13
- }
14
- get el() { return getElement(this); }
15
- };
16
-
17
- export { Wrapper as wm_wrapper };
@@ -1,87 +0,0 @@
1
- import { EventEmitter } from "../../stencil-public-runtime";
2
- export declare class TagInput {
3
- el: HTMLWmTagInputElement;
4
- private inputEl;
5
- private dropdownEl;
6
- private tagAreaEl;
7
- private liveRegionEl;
8
- private fieldWrapperEl;
9
- label: string;
10
- labelPosition: "top" | "left" | "none";
11
- options: string;
12
- selectedTags: string;
13
- info?: string;
14
- addNew: boolean;
15
- placeholder?: string;
16
- characterLimit: number;
17
- maxTags?: number;
18
- wmTagInputChanged: EventEmitter<{
19
- value: string[];
20
- }>;
21
- private uid;
22
- private openUp;
23
- focusedListItem: HTMLLIElement | null;
24
- focusedTag: HTMLLIElement | null;
25
- isExpanded: boolean;
26
- tagsList: string[];
27
- optionsList: string[];
28
- charCount: number;
29
- liveRegionMessage: string;
30
- private tagAreaInstructions;
31
- private maxTagsReachedMessage;
32
- get focusedElement(): Element | null;
33
- get listItemEls(): HTMLLIElement[];
34
- get tagEls(): HTMLLIElement[];
35
- get optionEls(): HTMLLIElement[];
36
- generateTagAddedMessage(tag: string): string;
37
- generateTagAlreadyAddedMessage(tag: string): string;
38
- generateTagCounterMessage(): any;
39
- componentWillLoad(): void;
40
- componentDidLoad(): void;
41
- consolidateSelectedTags(): void;
42
- createPlaceholderDefault(addNew: boolean, hasOptions: boolean): string;
43
- reflectSelectedTags(): void;
44
- closeIfNotElOrChild(ev: MouseEvent): void;
45
- handleInputKeyDown(ev: KeyboardEvent): void;
46
- handleInputChanged(value: string): void;
47
- submitInput(canAddNew: boolean, value: string): void;
48
- handleInputArrowDown(): void;
49
- handleInputArrowUp(): void;
50
- handleInputBackspace(): void;
51
- handleListItemKeyDown(ev: KeyboardEvent): void;
52
- handleListItemClick(ev: MouseEvent): void;
53
- handleTagAreaKeyDown(ev: KeyboardEvent): void;
54
- handleTagAreaDelete(): void;
55
- handleBlur(ev: FocusEvent, component: HTMLElement): void;
56
- handleTagAreaFocus(): void;
57
- handleRemoveButtonClick(tag: string): void;
58
- moveDownListItem(): void;
59
- moveUpListItem(): void;
60
- moveLeftTag(): void;
61
- moveRightTag(): void;
62
- addOption(option: string): string[];
63
- removeOption(option: string): void;
64
- addTag(tag: string): string[];
65
- removeTag(tag: string): void;
66
- focusListItem(item: HTMLLIElement): void;
67
- focusTag(element: HTMLLIElement): void;
68
- clearTagFocus(): void;
69
- openDropdown(): void;
70
- closeDropdown(): void;
71
- clearListItemFocus(): void;
72
- resetInput(): void;
73
- announce(message: string): void;
74
- announceExistingOptions(): void;
75
- announceCharacterLimitWarning(charCount: number, charLimit: number): void;
76
- listToCSV(list: string[]): string;
77
- csvToArray(csv: string | undefined): string[];
78
- includesCaseInsensitive(list: string[], element: string): boolean;
79
- filterCaseInsensitive(list: string[], element: string): string[];
80
- sortCaseInsensitive(list: string[]): string[];
81
- renderTags(): any[];
82
- renderListItems(optionsList: string[]): any[];
83
- renderAddNewButton(): any;
84
- renderHelpText(): string;
85
- renderTagCounter(): any;
86
- render(): any;
87
- }