@watermarkinsights/ripple 5.13.0-alpha.1 → 5.13.0-alpha.2

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 (62) hide show
  1. package/package.json +2 -2
  2. package/dist/components/chartFunctions.js +0 -715
  3. package/dist/components/functions.js +0 -17465
  4. package/dist/components/index.js +0 -138
  5. package/dist/components/interfaces.js +0 -53
  6. package/dist/components/intl.js +0 -277
  7. package/dist/components/priv-calendar.js +0 -6
  8. package/dist/components/priv-calendar2.js +0 -592
  9. package/dist/components/priv-chart-popover.js +0 -6
  10. package/dist/components/priv-chart-popover2.js +0 -154
  11. package/dist/components/priv-navigator-button.js +0 -6
  12. package/dist/components/priv-navigator-button2.js +0 -42
  13. package/dist/components/priv-navigator-item.js +0 -6
  14. package/dist/components/priv-navigator-item2.js +0 -49
  15. package/dist/components/priv-option-list.js +0 -6
  16. package/dist/components/priv-option-list2.js +0 -421
  17. package/dist/components/wm-action-menu.js +0 -6
  18. package/dist/components/wm-action-menu2.js +0 -231
  19. package/dist/components/wm-button.js +0 -6
  20. package/dist/components/wm-button2.js +0 -231
  21. package/dist/components/wm-chart-slice.js +0 -41
  22. package/dist/components/wm-chart.js +0 -197
  23. package/dist/components/wm-date-range.js +0 -522
  24. package/dist/components/wm-datepicker.js +0 -287
  25. package/dist/components/wm-file-list.js +0 -38
  26. package/dist/components/wm-file.js +0 -228
  27. package/dist/components/wm-input.js +0 -152
  28. package/dist/components/wm-line-chart.js +0 -497
  29. package/dist/components/wm-menuitem.js +0 -6
  30. package/dist/components/wm-menuitem2.js +0 -146
  31. package/dist/components/wm-modal-footer.js +0 -73
  32. package/dist/components/wm-modal-header.js +0 -61
  33. package/dist/components/wm-modal-pss-footer.js +0 -69
  34. package/dist/components/wm-modal-pss-header.js +0 -64
  35. package/dist/components/wm-modal-pss.js +0 -162
  36. package/dist/components/wm-modal.js +0 -161
  37. package/dist/components/wm-navigation-hamburger.js +0 -70
  38. package/dist/components/wm-navigation-item.js +0 -40
  39. package/dist/components/wm-navigation.js +0 -144
  40. package/dist/components/wm-navigator.js +0 -410
  41. package/dist/components/wm-nested-select.js +0 -343
  42. package/dist/components/wm-optgroup.js +0 -107
  43. package/dist/components/wm-option.js +0 -6
  44. package/dist/components/wm-option2.js +0 -196
  45. package/dist/components/wm-pagination.js +0 -251
  46. package/dist/components/wm-progress-indicator.js +0 -144
  47. package/dist/components/wm-progress-monitor.js +0 -93
  48. package/dist/components/wm-progress-slice.js +0 -37
  49. package/dist/components/wm-search.js +0 -250
  50. package/dist/components/wm-select.js +0 -6
  51. package/dist/components/wm-select2.js +0 -294
  52. package/dist/components/wm-snackbar.js +0 -202
  53. package/dist/components/wm-tab-item.js +0 -85
  54. package/dist/components/wm-tab-list.js +0 -217
  55. package/dist/components/wm-tab-panel.js +0 -52
  56. package/dist/components/wm-tag-input.js +0 -919
  57. package/dist/components/wm-tag-option.js +0 -63
  58. package/dist/components/wm-textarea.js +0 -113
  59. package/dist/components/wm-timepicker.js +0 -333
  60. package/dist/components/wm-toggletip.js +0 -200
  61. package/dist/components/wm-uploader.js +0 -348
  62. package/dist/components/wm-wrapper.js +0 -34
@@ -1,919 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
2
- import { i as intl, d as debounce, I as measureText, l as truncateText, o as hideTooltip, J as findNext, K as findPrev, n as showTooltip, s as shouldOpenUp, v as csvToArray } from './functions.js';
3
- import { g as globalMessages } from './intl.js';
4
-
5
- const wmTagInputCss = ".svg-icon{display:block;width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem)}.svg-icon.horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.svg-icon.vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.svg-icon.svg-add:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-add:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-add-person:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-add-person:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-add-outline:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-add-outline:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-ai:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-ai:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-api-connected:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-api-connected:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M12 12Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M12 12Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-api-disconnected:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-api-disconnected:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-attach:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-attach:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-back:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-back:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-close:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-close:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-checkbox-selected:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-checkbox-selected:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-checkbox-blank:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-checkbox-blank:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-collapsed:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-collapsed:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-date:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-date:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-delete:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-delete:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-download:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-download:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-drilldown:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-drilldown:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M2,3h14v4H2V3 M2,10h20v4H2V10 M2,17h8v4H2V17z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M2,3h14v4H2V3 M2,10h20v4H2V10 M2,17h8v4H2V17z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-edit:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-edit:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-error:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-error:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-expand-less:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-expand-less:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-expand-more:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-expand-more:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-expanded:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-expanded:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-filter:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-filter:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-forward:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-forward:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-help-center:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-help-center:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-hide:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-hide:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-info:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-info:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-locked:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-locked:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-menu:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-menu:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-more-options:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-more-options:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-move-down:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-move-down:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-move-up:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-move-up:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-navigator-icon:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-navigator-icon:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' fill-rule='evenodd' clip-rule='evenodd' d='M21.9,11.5c0,5.5-4.4,9.9-9.9,9.9c-5.5,0-9.9-4.4-9.9-9.9C2.1,6,6.5,1.6,12,1.6 C17.5,1.6,21.9,6,21.9,11.5z M22.5,11.5C22.5,17.3,17.8,22,12,22C6.2,22,1.5,17.3,1.5,11.5C1.5,5.7,6.2,1,12,1 C17.8,1,22.5,5.7,22.5,11.5z M7.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3s0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S7.4,15.6,7.7,15.8z M11.2,15.8c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S10.9,15.6,11.2,15.8z M14.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,15.6,14.7,15.8z M7.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S7.4,12.1,7.7,12.3z M11.2,12.3c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,12.1,11.2,12.3z M14.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S14.4,12.1,14.7,12.3z M7.7,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3S9.7,8.3,9.7,8S9.6,7.4,9.3,7.2S8.8,6.8,8.5,6.8 S7.9,6.9,7.7,7.2S7.3,7.7,7.3,8S7.4,8.6,7.7,8.8z M11.2,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8 s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,8.6,11.2,8.8z M14.7,8.8 c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3 c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,8.6,14.7,8.8z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' fill-rule='evenodd' clip-rule='evenodd' d='M21.9,11.5c0,5.5-4.4,9.9-9.9,9.9c-5.5,0-9.9-4.4-9.9-9.9C2.1,6,6.5,1.6,12,1.6 C17.5,1.6,21.9,6,21.9,11.5z M22.5,11.5C22.5,17.3,17.8,22,12,22C6.2,22,1.5,17.3,1.5,11.5C1.5,5.7,6.2,1,12,1 C17.8,1,22.5,5.7,22.5,11.5z M7.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3s0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S7.4,15.6,7.7,15.8z M11.2,15.8c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S10.9,15.6,11.2,15.8z M14.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,15.6,14.7,15.8z M7.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S7.4,12.1,7.7,12.3z M11.2,12.3c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,12.1,11.2,12.3z M14.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S14.4,12.1,14.7,12.3z M7.7,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3S9.7,8.3,9.7,8S9.6,7.4,9.3,7.2S8.8,6.8,8.5,6.8 S7.9,6.9,7.7,7.2S7.3,7.7,7.3,8S7.4,8.6,7.7,8.8z M11.2,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8 s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,8.6,11.2,8.8z M14.7,8.8 c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3 c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,8.6,14.7,8.8z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-next:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-next:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-notifications:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-notifications:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-open-in-new:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-open-in-new:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-pending:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-pending:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.3,19.3l1.1,1.8c-1,0.5-2.1,0.8-3.3,0.9v-2.1C13.8,19.8,14.6,19.6,15.3,19.3z M3.6,12.6H1.5 c0.1,1.2,0.4,2.3,0.9,3.3l1.8-1.1C3.9,14.1,3.7,13.3,3.6,12.6z M15.3,3.7l1.1-1.8c-1-0.5-2.1-0.8-3.3-0.9v2.1 C13.8,3.2,14.6,3.4,15.3,3.7z M20.4,10.4h2.1c-0.1-1.2-0.4-2.3-0.9-3.3l-1.8,1.1C20.1,8.9,20.3,9.7,20.4,10.4z M8.7,19.3l-1.1,1.8 c1,0.5,2.1,0.8,3.3,0.9v-2.1C10.2,19.8,9.4,19.6,8.7,19.3z M10.9,3.1V1C9.8,1.1,8.7,1.4,7.7,1.9l1.1,1.8C9.4,3.4,10.2,3.2,10.9,3.1 z M18.7,6.4l1.8-1.1c-0.7-0.9-1.5-1.7-2.4-2.4l-1.1,1.8C17.7,5.3,18.2,5.8,18.7,6.4z M4.2,8.2L2.4,7.2c-0.5,1-0.8,2.1-0.9,3.3h2.1 C3.7,9.7,3.9,8.9,4.2,8.2z M20.4,12.6c-0.1,0.8-0.3,1.5-0.6,2.2l1.8,1.1c0.5-1,0.8-2.1,0.9-3.3H20.4z M17.1,18.2l1.1,1.8 c0.9-0.7,1.7-1.5,2.4-2.4l-1.8-1.1C18.2,17.2,17.7,17.7,17.1,18.2z M6.9,4.8L5.8,2.9C4.9,3.6,4.1,4.4,3.5,5.3l1.8,1.1 C5.8,5.8,6.3,5.3,6.9,4.8z M5.3,16.6l-1.8,1.1c0.7,0.9,1.5,1.7,2.4,2.4l1.1-1.8C6.3,17.7,5.8,17.2,5.3,16.6z M13.1,6.2h-2.1v5.7 l4.5,4.5L17,15l-3.9-3.9V6.2z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.3,19.3l1.1,1.8c-1,0.5-2.1,0.8-3.3,0.9v-2.1C13.8,19.8,14.6,19.6,15.3,19.3z M3.6,12.6H1.5 c0.1,1.2,0.4,2.3,0.9,3.3l1.8-1.1C3.9,14.1,3.7,13.3,3.6,12.6z M15.3,3.7l1.1-1.8c-1-0.5-2.1-0.8-3.3-0.9v2.1 C13.8,3.2,14.6,3.4,15.3,3.7z M20.4,10.4h2.1c-0.1-1.2-0.4-2.3-0.9-3.3l-1.8,1.1C20.1,8.9,20.3,9.7,20.4,10.4z M8.7,19.3l-1.1,1.8 c1,0.5,2.1,0.8,3.3,0.9v-2.1C10.2,19.8,9.4,19.6,8.7,19.3z M10.9,3.1V1C9.8,1.1,8.7,1.4,7.7,1.9l1.1,1.8C9.4,3.4,10.2,3.2,10.9,3.1 z M18.7,6.4l1.8-1.1c-0.7-0.9-1.5-1.7-2.4-2.4l-1.1,1.8C17.7,5.3,18.2,5.8,18.7,6.4z M4.2,8.2L2.4,7.2c-0.5,1-0.8,2.1-0.9,3.3h2.1 C3.7,9.7,3.9,8.9,4.2,8.2z M20.4,12.6c-0.1,0.8-0.3,1.5-0.6,2.2l1.8,1.1c0.5-1,0.8-2.1,0.9-3.3H20.4z M17.1,18.2l1.1,1.8 c0.9-0.7,1.7-1.5,2.4-2.4l-1.8-1.1C18.2,17.2,17.7,17.7,17.1,18.2z M6.9,4.8L5.8,2.9C4.9,3.6,4.1,4.4,3.5,5.3l1.8,1.1 C5.8,5.8,6.3,5.3,6.9,4.8z M5.3,16.6l-1.8,1.1c0.7,0.9,1.5,1.7,2.4,2.4l1.1-1.8C6.3,17.7,5.8,17.2,5.3,16.6z M13.1,6.2h-2.1v5.7 l4.5,4.5L17,15l-3.9-3.9V6.2z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-previous:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-previous:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-remove:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-remove:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-remove-tag:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-remove-tag:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-reset:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-reset:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-restore:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-restore:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-rotate-right:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-rotate-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-save:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-save:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-search:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-search:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-circle:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-circle:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z '/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z '/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-pentagon:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-pentagon:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2.5L2,9.8L5.8,21.5H18.2L22,9.8L12,2.5Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2.5L2,9.8L5.8,21.5H18.2L22,9.8L12,2.5Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-rhombus:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-rhombus:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-star:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-star:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-square:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-square:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M3,3V21H21V3'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M3,3V21H21V3'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-triangle:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-triangle:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1,21H23L12,2'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1,21H23L12,2'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-shape-triangle-inverted:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-shape-triangle-inverted:before{-webkit-mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1 3H23L12 22'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1 3H23L12 22'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-show:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-show:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-sort-a-to-z:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-sort-a-to-z:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5 9L6.41 10.41L11 5.83V22H13V5.83L17.59 10.42L19 9L12 2L5 9Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5 9L6.41 10.41L11 5.83V22H13V5.83L17.59 10.42L19 9L12 2L5 9Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-sort-z-to-a:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-sort-z-to-a:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19 15L17.59 13.59L13 18.17V2H11V18.17L6.41 13.58L5 15L12 22L19 15Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19 15L17.59 13.59L13 18.17V2H11V18.17L6.41 13.58L5 15L12 22L19 15Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-success:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-success:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-time:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-time:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-undo:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-undo:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-upload:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-upload:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z'/%3E%3C/svg%3E%0A\")}.svg-icon.svg-wrong:before{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}.svg-icon.svg-wrong:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A\")}:host *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:0.875rem}:host{--wmcolor-taginput-altrow-background-table:var(--wmcolor-table-altrow-background);--wmcolor-taginput-border:var(--wmcolor-input-border);--wmcolor-taginput-charcount-background:var(--wmcolor-input-charcount-background);--wmcolor-taginput-header-background-table:var(--wmcolor-table-header-background);--wmcolor-taginput-help-text:var(--wmcolor-text);--wmcolor-taginput-icon:var(--wmcolor-icon-accent);--wmcolor-taginput-maxtags-background:var(--wmcolor-background-readonly);--wmcolor-taginput-maxtags-border:var(--wmcolor-input-border);--wmcolor-taginput-maxtags-text:var(--wmcolor-text);--wmcolor-taginput-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-taginput-option-background-focus:var(--wmcolor-option-background-focus);--wmcolor-taginput-option-background:var(--wmcolor-option-background);--wmcolor-taginput-option-border:var(--wmcolor-option-border);--wmcolor-taginput-option-text-selected:var(--wmcolor-option-text-disabled);--wmcolor-taginput-option-text:var(--wmcolor-interactive);--wmcolor-taginput-row-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-taginput-row-background-focus:var(--wmcolor-interactive-background-focus);--wmcolor-taginput-row-background-selected:var(--wmcolor-table-row-background-selected);--wmcolor-taginput-row-background-table:var(--wmcolor-table-row-background);--wmcolor-taginput-row-border-selected:var(--wmcolor-table-row-border-selected);--wmcolor-taginput-tag-background-highlight:var(--wmcolor-interactive-background-highlight);--wmcolor-taginput-tag-background-locked:var(--wmcolor-interactive-disabled);--wmcolor-taginput-tag-background:var(--wmcolor-palelilacgray);--wmcolor-taginput-tag-text-locked:var(--wmcolor-text-ondark);--wmcolor-taginput-tag-text:var(--wmcolor-text);--wmcolor-taginput-tagbutton-background-hover:var(--wmcolor-button-background-icononly-hover);--wmcolor-taginput-tagbutton-border:var(--wmcolor-button-border-icononly);--wmcolor-taginput-tagbutton-icon-hover:var(--wmcolor-button-icon-icononly-hover);--wmcolor-taginput-tagbutton-icon:var(--wmcolor-button-icon-icononly);font-family:inherit;width:100%;display:block;max-height:80vh}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:rem-calc(14)}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:rem-calc(4)}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:rem-calc(40)}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:rem-calc(12)}:host .wrapper.label-none label{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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error);position:relative}:host .wrapper.invalid .label:after{content:\"\";display:block;background-color:var(--icon-fill, currentColor);width:var(--icon-size, 0.875rem);height:var(--icon-size, 0.875rem);-webkit-mask-size:100%;mask-size:100%}:host .wrapper.invalid .label:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A\")}:host .wrapper.invalid .label:after{display:inline-block;-webkit-margin-start:rem-calc(4);margin-inline-start:rem-calc(4);vertical-align:middle;-ms-flex-negative:0;flex-shrink:0;-webkit-transform:translateY(-1px);transform:translateY(-1px)}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:rem-calc(12)}:host .wrapper{width:100%;height:100%;max-height:inherit;min-height:inherit;position:relative}:host .field-wrapper{position:relative;width:100%;border:1px solid;border-color:var(--wmcolor-taginput-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}:host .field-wrapper.invalid{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper:not(.label-left) .field-wrapper{-ms-flex-negative:0;flex-shrink:0}:host .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:var(--wmcolor-taginput-charcount-background);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper{position:relative;width:100%;padding:8px 8px 8px 6px;overflow:auto;max-height:200px}:host .tags-and-input-wrapper.in-modal{max-height:20vh}:host .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row .svg-search{--icon-size:1.125rem;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:center;align-self:center;margin:0.75rem 0.5rem 0.75rem 0.75rem;color:var(--wmcolor-taginput-icon)}:host .lower-row{width:100%;min-height:1.875rem}:host #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:1.875rem;background-color:var(--wmcolor-taginput-maxtags-background);padding:0.5rem 1rem;color:var(--wmcolor-taginput-maxtags-text);font-size:0.875rem;-webkit-border-before:1px solid var(--wmcolor-taginput-maxtags-border);border-block-start:1px solid var(--wmcolor-taginput-maxtags-border);border-radius:0 0 3px 3px}:host .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0;margin:0;gap:8px}:host .tag-area:focus{outline:none}:host .tag-area li{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:var(--wmcolor-taginput-tag-text);background-color:var(--wmcolor-taginput-tag-background);padding:0.5rem 0.625rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area li.highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:var(--wmcolor-taginput-tag-background)}50%{background-color:var(--wmcolor-taginput-tag-background-highlight)}100%{background-color:var(--wmcolor-taginput-tag-background)}}@keyframes fadeIn{0%{background-color:var(--wmcolor-taginput-tag-background)}50%{background-color:var(--wmcolor-taginput-tag-background-highlight)}100%{background-color:var(--wmcolor-taginput-tag-background)}}:host .tag-area li.locked{background-color:var(--wmcolor-taginput-tag-background-locked);color:var(--wmcolor-taginput-tag-text-locked)}:host .tag-area li .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host .tag-area li .icon.remove-btn{border:1px solid var(--wmcolor-taginput-tagbutton-border);color:var(--wmcolor-taginput-tagbutton-icon);border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 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)}:host .tag-area li .icon.remove-btn:hover{color:var(--wmcolor-taginput-tagbutton-icon-hover);background-color:var(--wmcolor-taginput-tagbutton-background-hover)}:host .tag-area li .svg-locked{color:var(--wmcolor-taginput-tag-text-locked);-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host .tag-area.user-is-keying:focus-visible li.focused{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:3px}:host .input{font-family:inherit;border:none;height:1.75rem;padding:0;margin:0;inset-inline-end:8px}:host .input:focus{outline:none}:host .tag-area:not(.empty)+.input.extended{-webkit-margin-before:8px;margin-block-start:8px}:host .dropdown-wrapper{margin:0;padding:0;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;inset-block-start:calc(100% + 2px);inset-inline-end:0;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards{inset-block-start:unset;inset-block-end:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:var(--wmcolor-taginput-option-background);list-style:none;min-height:2.6875rem;white-space:pre-wrap;overflow-wrap:anywhere}:host .dropdown-wrapper li.option,:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div.option,:host .dropdown-wrapper div.add-new-btn{cursor:pointer;color:var(--wmcolor-taginput-option-text);font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li.option[aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div.option[aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:var(--wmcolor-taginput-option-text-selected);font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li.option:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.option:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]){outline:none;background:var(--wmcolor-taginput-option-background-hover)}:host .dropdown-wrapper li.option.focused,:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div.option.focused,:host .dropdown-wrapper div.add-new-btn.focused{outline:none;background:var(--wmcolor-taginput-option-background-focus)}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text{color:var(--wmcolor-taginput-help-text);height:auto;min-height:2.6875rem;-webkit-padding-before:0.25rem;padding-block-start:0.25rem;-webkit-padding-after:0.25rem;padding-block-end:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child){-webkit-border-after:2px solid var(--wmcolor-taginput-option-border);border-block-end:2px solid var(--wmcolor-taginput-option-border)}:host .info-text{font-style:italic;-webkit-margin-before:0.25rem;margin-block-start:0.25rem}:host .table-wrapper{overflow:auto;-webkit-margin-before:1.5rem;margin-block-start:1.5rem}:host .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers{height:2.5rem;background-color:var(--wmcolor-taginput-header-background-table)}:host .table-wrapper #table .headers th{text-align:start;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr:nth-child(even){background-color:var(--wmcolor-taginput-altrow-background-table)}:host .table-wrapper tr.selected,:host .table-wrapper tr.locked{background-color:var(--wmcolor-taginput-row-background-selected);-webkit-box-shadow:inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);box-shadow:inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);font-weight:500}:host .table-wrapper tr.focused{background-color:var(--wmcolor-taginput-row-background-focus);-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr:hover:not(.locked){background-color:var(--wmcolor-taginput-row-background-hover);-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr.locked td{cursor:auto}:host .table-wrapper tr.locked .svg-locked{display:inline-block;color:var(--wmcolor-taginput-tag-text);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.focused{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-3px}:host .table-wrapper td .cell-content-wrapper.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .description{display:none}:host .no-results{padding:1.25rem 1.5rem}:host .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host #error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:rem-calc(14)}:host #error:not(:empty){margin-top:rem-calc(4)}";
6
-
7
- const TagInput = /*@__PURE__*/ proxyCustomElement(class TagInput extends HTMLElement {
8
- constructor() {
9
- super();
10
- this.__registerHost();
11
- this.__attachShadow();
12
- this.wmTagInputTagAdded = createEvent(this, "wmTagInputTagAdded", 7);
13
- this.labelPosition = "top";
14
- this.requiredField = false;
15
- this.tagInputType = "dropdown";
16
- // dropdown variant
17
- this.addNew = true;
18
- this.characterLimit = 50;
19
- this.addNewHelpText = intl.formatMessage({
20
- id: "tagInput.addNewHelpText",
21
- defaultMessage: "Press the Enter or Comma key to add a new tag.",
22
- description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
23
- });
24
- this.selectionHelpText = intl.formatMessage({
25
- id: "tagInput.selectionHelpText",
26
- defaultMessage: "Search and select a tag.",
27
- description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
28
- });
29
- this.maxTagsReachedMessage = intl.formatMessage({
30
- id: "tagInput.maxTagsReached",
31
- defaultMessage: "No more tags can be added because the limit has been reached.",
32
- description: "Tag refers to a tag UI element that can be added to a list.",
33
- });
34
- this.tagAreaInstructions = intl.formatMessage({
35
- id: "tagInput.tagAreaInstructions",
36
- defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
37
- description: "Label for a UI element where a user can select from a list of tags.",
38
- });
39
- this.tagsAddedMessage = intl.formatMessage({
40
- id: "tagInput.tagsAdded",
41
- defaultMessage: "Tags added",
42
- description: "Tag refers to a tag UI element that can be added to a list. Full message for context: 'Tags added: x/y",
43
- });
44
- this.noResultsMessage = intl.formatMessage({
45
- id: "tagInput.noResults",
46
- defaultMessage: "No results match your search.",
47
- });
48
- this.openUp = false;
49
- this.inModal = false;
50
- this.isKeying = false;
51
- this.isExpanded = false;
52
- this.liveRegionMessage = "";
53
- this.focusedColumn = 0;
54
- this.tagsList = []; // options to render as tags. This needs the be kept in state as tags should be shown in the order they are added
55
- this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
56
- }
57
- addNewTagMessage(newTagName) {
58
- return intl.formatMessage({
59
- id: "tagInput.addNewTag",
60
- defaultMessage: "Add {newTagName}",
61
- description: "Button text to add a new tag to a list of tags",
62
- }, { newTagName: newTagName });
63
- }
64
- toggleKeyingOn() {
65
- this.isKeying = true;
66
- }
67
- toggleKeyingOff() {
68
- this.isKeying = false;
69
- }
70
- get isDropdown() {
71
- return this.tagInputType === "dropdown";
72
- }
73
- get isTable() {
74
- return this.tagInputType === "table";
75
- }
76
- get charCount() {
77
- return this.inputEl ? this.inputEl.value.length : 0;
78
- }
79
- get tooltipVisible() {
80
- return document.getElementById("wm-tooltip").classList.contains("show");
81
- }
82
- get optionEls() {
83
- return Array.from(this.el.querySelectorAll("wm-tag-option"));
84
- }
85
- // list of options matching user query
86
- get filteredOptionEls() {
87
- const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
88
- const list = Array.from(this.optionEls).filter((o) => {
89
- let values = "";
90
- if (this.isDropdown) {
91
- values = o.textContent.toLowerCase();
92
- }
93
- else if (this.isTable) {
94
- values = [o.col1, o.col2, o.col3, o.col4].join("").toLowerCase();
95
- }
96
- return values.includes(query);
97
- });
98
- return list;
99
- }
100
- // the ones that should be rendered as tags
101
- get taggedOptions() {
102
- return this.optionEls.filter((o) => o.selected || o.locked);
103
- }
104
- // for visual stuff (measuring, truncating...)
105
- get _tagEls() {
106
- return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
107
- }
108
- get focusedTag() {
109
- if (this.focusedTagIndex !== undefined && this.focusedTagIndex >= 0) {
110
- return this._tagEls[this.focusedTagIndex];
111
- }
112
- }
113
- // get the wm-tag-option, given the internal representation (dropdown li or table tr)
114
- tagOptionFromEl(el) {
115
- return el.id === "add-new-btn" ? undefined : this.el.querySelector("#" + el.id);
116
- }
117
- // get the wm-tag-option, given the internal representation of a tag
118
- tagOptionFromTag(el) {
119
- const id = el.id.replace("tag-", "");
120
- return this.el.querySelector("#" + id);
121
- }
122
- // get the internal representation of a wm-tag-option
123
- elFromTagOption(el) {
124
- return this.el.shadowRoot.querySelector("#" + el.id);
125
- }
126
- // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
127
- get _focusedOption() {
128
- if (!!this.focusedOption) {
129
- return this.elFromTagOption(this.focusedOption);
130
- }
131
- else if (this.addNewButton && this.addNewButton.classList.contains("focused")) {
132
- return this.addNewButton;
133
- }
134
- }
135
- get _focusedCell() {
136
- if (!!this._focusedOption) {
137
- const allCells = Array.from(this._focusedOption.querySelectorAll("td"));
138
- const index = this.focusedColumn || 0;
139
- return allCells[index];
140
- }
141
- }
142
- get inputActiveDescendantId() {
143
- if (this._focusedOption) {
144
- if (this.isTable) {
145
- const cells = Array.from(this._focusedOption.querySelectorAll("td"));
146
- return cells[this.focusedColumn].id;
147
- }
148
- return this._focusedOption.id;
149
- }
150
- return null;
151
- }
152
- get tagLimitReached() {
153
- return !!(this.maxTags && this.taggedOptions.length >= this.maxTags);
154
- }
155
- get inputMinimumWidth() {
156
- if (this._tagEls) {
157
- // 150px is the minimum width of the input field, or the length of the placeholder text
158
- const inputElStyles = getComputedStyle(this.inputEl);
159
- const tagElStyles = getComputedStyle(this._tagEls[this._tagEls.length - 1]);
160
- const inputElBuffer = [
161
- inputElStyles.paddingLeft,
162
- inputElStyles.paddingRight,
163
- inputElStyles.marginLeft,
164
- inputElStyles.marginRight,
165
- tagElStyles.marginRight,
166
- ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
167
- const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
168
- return minimumWidth;
169
- }
170
- else {
171
- return 150;
172
- }
173
- }
174
- getTagName(o) {
175
- // when the user is typing and adding a new option, all we can pass is the text typed. so for the dropdown type the tag name is the identifier. It also takes care of duplicates. Table variant requires an id as the tag name is the first column but we want to allow duplicates here (e.g. people with the same name)
176
- return this.isDropdown ? o.textContent : o.col1;
177
- }
178
- isExistingTag(tag) {
179
- const list = this.optionEls.map((o) => this.getTagName(o).toLowerCase());
180
- return list.includes(tag.toLowerCase());
181
- }
182
- tagAddedMessage(tag) {
183
- return intl.formatMessage({
184
- id: "tagInput.tagAdded",
185
- defaultMessage: "{tagName} added.",
186
- description: "Confirmation for adding a tag UI element to a list of tags.",
187
- }, { tagName: tag });
188
- }
189
- tagRemovedMessage(tag) {
190
- return intl.formatMessage({
191
- id: "tagInput.tagRemoved",
192
- defaultMessage: "{tagName} removed.",
193
- description: "Confirmation for removing a tag UI element from a list of tags.",
194
- }, { tagName: tag });
195
- }
196
- tagAlreadyAddedMessage(tag) {
197
- return intl.formatMessage({
198
- id: "tagInput.tagAlreadyAdded",
199
- defaultMessage: "{tagName} has already been added.",
200
- description: "Alert for adding a tag UI element that is already included in the list.",
201
- }, { tagName: tag });
202
- }
203
- tagLockedMessage(tag) {
204
- return intl.formatMessage({
205
- id: "tagInput.tagLocked",
206
- defaultMessage: "{tagName} is locked and cannot be removed.",
207
- description: "Alert indicating a tag UI element cannot be removed from its list.",
208
- }, { tagName: tag });
209
- }
210
- isElOrChild(el) {
211
- return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
212
- }
213
- componentWillLoad() {
214
- if (!this.placeholder) {
215
- this.placeholder = this.createPlaceholderDefault(this.addNew, this.optionEls.length > 0);
216
- }
217
- if (!this.label) {
218
- console.error("wm-tag-input must have a label property");
219
- }
220
- this.el.focus = () => {
221
- const firstFocusableTag = this._tagEls[0];
222
- if (firstFocusableTag) {
223
- this.tagAreaEl.focus();
224
- this.focusTag(firstFocusableTag);
225
- }
226
- else {
227
- this.inputEl.focus();
228
- }
229
- };
230
- // on resize of component, trigger componentDidRender -> positionInput
231
- const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
232
- resizeObserver.observe(this.el);
233
- // if within wm-modal, change max-height to vh unit
234
- if (this.el.closest("wm-modal")) {
235
- this.inModal = true;
236
- }
237
- const lockedTags = [];
238
- const regularTags = [];
239
- this.optionEls.forEach((o) => {
240
- if (o.locked) {
241
- lockedTags.push(o);
242
- }
243
- else if (o.selected) {
244
- regularTags.push(o);
245
- }
246
- });
247
- this.tagsList = [...lockedTags, ...regularTags];
248
- }
249
- componentDidLoad() {
250
- // Set up observer to announce changes in selected tags, or removed user-added tags
251
- const observerAnnouncer = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleChangeAnnouncement(mutationRecord)));
252
- observerAnnouncer.observe(this.el, {
253
- subtree: true,
254
- attributes: true,
255
- attributeFilter: ["selected"],
256
- childList: true,
257
- });
258
- // Set up observer that ensures parent reload
259
- // when children wm-tag-options are removed
260
- const optionListObserver = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleOptionListChange(mutationRecord)));
261
- optionListObserver.observe(this.el, {
262
- childList: true,
263
- });
264
- // Set up the observer that will handle focus
265
- // when tag list changes
266
- if (!!this.tagAreaEl) {
267
- const tagListObserver = new MutationObserver((tagListMutations) => tagListMutations.forEach((mutationRecord) => this.handleTagListChange(mutationRecord)));
268
- tagListObserver.observe(this.tagAreaEl, {
269
- childList: true,
270
- });
271
- }
272
- }
273
- handleChangeAnnouncement(mutationRecord) {
274
- const tagOptionEl = mutationRecord.target;
275
- if (mutationRecord.type == "childList" && mutationRecord.removedNodes.length > 0) {
276
- // announce deselection of user-added tag, whose element removal is picked up
277
- this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
278
- }
279
- else if (mutationRecord.type == "attributes") {
280
- const tagName = this.getTagName(tagOptionEl);
281
- // announce selection or deselection of all kinds of tags
282
- if (tagOptionEl.selected) {
283
- let changeAnnouncement = this.tagAddedMessage(tagName);
284
- if (this.tagLimitReached) {
285
- changeAnnouncement += ` ${this.maxTagsReachedMessage}`;
286
- }
287
- this.announce(changeAnnouncement);
288
- }
289
- else {
290
- this.announce(this.tagRemovedMessage(tagName));
291
- }
292
- }
293
- }
294
- handleOptionListChange(record) {
295
- const addedNodes = Array.from(record.addedNodes);
296
- if (addedNodes.length > 0) {
297
- addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
298
- }
299
- const removedNodes = Array.from(record.removedNodes);
300
- if (removedNodes.length > 0) {
301
- this.tagsList = this.tagsList.filter((t) => !removedNodes.includes(t));
302
- }
303
- }
304
- handleTagOptionSelected(ev) {
305
- const selOption = ev.target;
306
- this.tagsList = this.tagsList.concat(selOption);
307
- }
308
- handleTagOptionDeselected(ev) {
309
- const deselOption = ev.target;
310
- this.tagsList = this.tagsList.filter((t) => t != deselOption);
311
- }
312
- handleTagListChange(mutationRecord) {
313
- const addedTags = Array.from(mutationRecord.addedNodes);
314
- if (!!addedTags) {
315
- addedTags.forEach((t) => {
316
- t.classList.add("highlight");
317
- });
318
- }
319
- // there are 2 cases: the option still exists but is no longer selected,
320
- // or it was removed altogether
321
- const removedTag = mutationRecord.removedNodes[0];
322
- if (!!removedTag) {
323
- removedTag.classList.remove("highlight");
324
- // this is a trick. focusedTag gets the ref from an index. When an element
325
- // is removed it will fall back on the new element with that index if it exists
326
- if (this.focusedTag) {
327
- this.focusTag(this.focusedTag);
328
- }
329
- else if (this._tagEls.length > 0) {
330
- // Otherwise the last tag was deleted and we reassign to the new last tag.
331
- const tagToFocus = this._tagEls[this._tagEls.length - 1];
332
- this.focusTag(tagToFocus);
333
- }
334
- else {
335
- // unless there are no more tags...
336
- this.inputEl.focus();
337
- }
338
- }
339
- }
340
- componentDidRender() {
341
- this.positionInput();
342
- // check each tag if truncation is needed
343
- this._tagEls.forEach((tag) => {
344
- const textEl = tag.querySelector(".tag-text");
345
- const wrapper = this.el.shadowRoot.querySelector(".tags-and-input-wrapper");
346
- const leftBound = textEl.getBoundingClientRect().left;
347
- // the numbers represent spacing values for padding, margin, and delete icon
348
- const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
349
- const id = tag.id.replace("tag-", "");
350
- const optionEl = id && this.el.querySelector("#" + id);
351
- if (optionEl) {
352
- // tag text for table variant is first column text
353
- textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
354
- }
355
- });
356
- }
357
- createPlaceholderDefault(addNew, hasOptions) {
358
- const addAndSearchPlaceholder = intl.formatMessage({
359
- id: "tagInput.placeholderAddAndSearch",
360
- defaultMessage: "Add or search for a tag",
361
- description: "Placeholder text. Use imperative",
362
- });
363
- const searchPlaceholder = intl.formatMessage({
364
- id: "tagInput.placeholderSearch",
365
- defaultMessage: "Search and select a tag",
366
- description: "Placeholder text. Use imperative",
367
- });
368
- const addPlaceholder = intl.formatMessage({
369
- id: "tagInput.placeholderAdd",
370
- defaultMessage: "Add a new tag",
371
- description: "Placeholder text. Use imperative",
372
- });
373
- let placeholder = "";
374
- if (addNew && hasOptions) {
375
- placeholder = addAndSearchPlaceholder;
376
- }
377
- else if (!addNew && hasOptions) {
378
- placeholder = searchPlaceholder;
379
- }
380
- else if (addNew) {
381
- placeholder = addPlaceholder;
382
- }
383
- return placeholder;
384
- }
385
- handleClick(ev) {
386
- const el = ev.target;
387
- if (this.isDropdown && !this.el.contains(el) && this.isExpanded) {
388
- this.closeDropdown();
389
- }
390
- }
391
- announceError() {
392
- if (this.errorMessage) {
393
- setTimeout(() => this.announce(this.errorMessage), 100);
394
- }
395
- }
396
- handleOptionClick(ev) {
397
- ev.preventDefault();
398
- this.resetInput();
399
- let option;
400
- if (this.isTable) {
401
- option = ev.target;
402
- option = this.tagOptionFromEl(option.closest("tr"));
403
- }
404
- else {
405
- option = this.tagOptionFromEl(ev.target);
406
- }
407
- // if someone wants to attach a click event listener on wm-tag-option
408
- option.click();
409
- if (option.locked) {
410
- this.announce(this.tagLockedMessage(this.getTagName(option)));
411
- }
412
- else {
413
- option.selected
414
- ? this.isTable && option.emitDeselectedEvent() // dropdown doesn't deselect on option click
415
- : option.emitSelectedEvent();
416
- }
417
- }
418
- // From wm-button
419
- // we need to listen for scroll events during the capture phase because they do not bubble up
420
- // there can be layouts where the main content has 100vh and overflows
421
- // in these cases window will register no scroll events unless we catch on they way down
422
- dismissTooltip() {
423
- if (this.tooltipVisible) {
424
- hideTooltip();
425
- }
426
- }
427
- handleInputKeyDown(ev) {
428
- if (/^.$/.test(ev.key) && this.charCount >= this.characterLimit) {
429
- this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
430
- }
431
- switch (ev.key) {
432
- case "Enter":
433
- ev.preventDefault();
434
- this.handleInputEnter();
435
- break;
436
- case "ArrowDown":
437
- ev.preventDefault();
438
- this.handleInputArrowDown();
439
- break;
440
- case "ArrowUp":
441
- ev.preventDefault();
442
- this.handleInputArrowUp();
443
- break;
444
- case "ArrowLeft":
445
- if (this.isTable) {
446
- ev.preventDefault();
447
- this.focusPrevCell();
448
- }
449
- break;
450
- case "ArrowRight":
451
- if (this.isTable) {
452
- ev.preventDefault();
453
- this.focusNextCell();
454
- }
455
- break;
456
- case "Escape":
457
- if (this.isDropdown && this.isExpanded) {
458
- ev.preventDefault();
459
- this.closeDropdown();
460
- }
461
- break;
462
- case "ArrowLeft":
463
- case "Backspace":
464
- this.handleInputBackspace();
465
- break;
466
- }
467
- }
468
- handleInputFocus() {
469
- if (this.isDropdown) {
470
- this.openDropdown();
471
- this.clearOptionFocus();
472
- }
473
- }
474
- handleInputChanged(ev) {
475
- this.clearOptionFocus();
476
- if (this.isDropdown) {
477
- if (this.charCount >= this.characterLimit - 5) {
478
- this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
479
- }
480
- if (!this.isExpanded) {
481
- this.openDropdown();
482
- }
483
- }
484
- const val = ev.target.value;
485
- if (val.includes(",") && this.addNew) {
486
- this.addTags(val);
487
- }
488
- else {
489
- this.announceExistingOptions();
490
- }
491
- }
492
- handleInputEnter() {
493
- // user has selected an option in the list
494
- if (this.focusedOption) {
495
- if (this.focusedOption.locked) {
496
- this.announce(this.tagLockedMessage(this.getTagName(this.focusedOption)));
497
- }
498
- else {
499
- this.focusedOption.click();
500
- this.focusedOption.selected
501
- ? this.isTable && this.focusedOption.emitDeselectedEvent()
502
- : this.focusedOption.emitSelectedEvent();
503
- this.resetInput();
504
- }
505
- }
506
- else if (this.isDropdown) {
507
- // user is adding a new tag
508
- const tagName = this.inputEl.value;
509
- if (!!tagName) {
510
- this.isExistingTag(tagName) ? this.announce(this.tagAlreadyAddedMessage(tagName)) : this.addTags(tagName);
511
- this.resetInput();
512
- }
513
- }
514
- }
515
- handleInputArrowDown() {
516
- if (this.isDropdown) {
517
- if (!this.isExpanded) {
518
- this.openDropdown();
519
- }
520
- else {
521
- let items = [];
522
- // the id check prevents a bug where the ref is reassigned to the first option causing it to be added twice (after adding a new user option)
523
- if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
524
- items.push(this.addNewButton);
525
- }
526
- this.filteredOptionEls.forEach((o) => {
527
- items.push(this.elFromTagOption(o));
528
- });
529
- const next = findNext(items, this._focusedOption, true);
530
- this.focusOption(next);
531
- }
532
- }
533
- else {
534
- const items = this.filteredOptionEls.map((o) => this.elFromTagOption(o));
535
- const next = findNext(items, this._focusedOption, true);
536
- this.focusOption(next);
537
- }
538
- }
539
- handleInputArrowUp() {
540
- if (this.isDropdown) {
541
- if (!this.isExpanded) {
542
- this.openDropdown();
543
- }
544
- else {
545
- let items = [];
546
- if (this.addNewButton) {
547
- items.push(this.addNewButton);
548
- }
549
- this.filteredOptionEls.forEach((o) => {
550
- items.push(this.elFromTagOption(o));
551
- });
552
- const prev = findPrev(items, this._focusedOption, true);
553
- this.focusOption(prev);
554
- }
555
- }
556
- else {
557
- const items = this.filteredOptionEls.map((o) => this.elFromTagOption(o));
558
- const prev = findPrev(items, this._focusedOption, true);
559
- this.focusOption(prev);
560
- }
561
- }
562
- handleInputBackspace() {
563
- if (this.inputEl.value === "" && this._tagEls.length > 0) {
564
- this.isKeying = true;
565
- // wait for events to finish firing before redirecting focus
566
- // prevents double input in input area and tag area
567
- window.requestAnimationFrame(() => {
568
- this.tagAreaEl.focus();
569
- this.focusTag(this._tagEls[this._tagEls.length - 1]);
570
- });
571
- }
572
- }
573
- handleTagAreaKeyDown(ev) {
574
- switch (ev.key) {
575
- case "ArrowLeft":
576
- case "ArrowUp":
577
- ev.preventDefault();
578
- if (this.focusedTag) {
579
- const prev = findPrev(this._tagEls, this.focusedTag, true);
580
- this.focusTag(prev);
581
- }
582
- break;
583
- case "ArrowRight":
584
- case "ArrowDown":
585
- ev.preventDefault();
586
- if (this.focusedTag) {
587
- const next = findNext(this._tagEls, this.focusedTag, true);
588
- this.focusTag(next);
589
- }
590
- break;
591
- case "Backspace":
592
- case "Delete":
593
- if (this.focusedTag) {
594
- const option = this.tagOptionFromTag(this.focusedTag);
595
- if (option.locked) {
596
- this.announce(this.tagLockedMessage(this.getTagName(option)));
597
- }
598
- else {
599
- option.emitDeselectedEvent();
600
- }
601
- }
602
- break;
603
- }
604
- }
605
- handleBlur(ev) {
606
- this.dismissTooltip();
607
- this.clearOptionFocus();
608
- const relTarget = ev.relatedTarget;
609
- if (!this.isElOrChild(relTarget)) {
610
- this.fieldWrapperEl.classList.remove("focused");
611
- if (this.isDropdown) {
612
- this.closeDropdown();
613
- }
614
- }
615
- }
616
- handleTagAreaFocus(ev) {
617
- if (this.isDropdown) {
618
- this.closeDropdown();
619
- }
620
- if (this._tagEls.length > 0) {
621
- const relTarget = ev.relatedTarget;
622
- if (relTarget && relTarget.id === "input") {
623
- const lastFocusableTag = this._tagEls[this._tagEls.length - 1];
624
- this.focusTag(lastFocusableTag);
625
- }
626
- else {
627
- const firstFocusableTag = this._tagEls[0];
628
- this.focusTag(firstFocusableTag);
629
- }
630
- }
631
- }
632
- focusPrevCell() {
633
- if (this.focusedOption) {
634
- if (this.focusedColumn > 0) {
635
- this.focusedColumn -= 1;
636
- }
637
- }
638
- }
639
- focusNextCell() {
640
- if (this._focusedOption) {
641
- const lastCellIdx = this._focusedOption.querySelectorAll("td").length - 1;
642
- if (this.focusedColumn < lastCellIdx) {
643
- this.focusedColumn += 1;
644
- }
645
- }
646
- }
647
- focusOption(optionToFocus) {
648
- if (optionToFocus) {
649
- // will be undefined for the "Add New" button
650
- this.focusedOption = this.tagOptionFromEl(optionToFocus);
651
- if (optionToFocus === this.addNewButton) {
652
- this.addNewButton.classList.add("focused");
653
- }
654
- else {
655
- this.addNewButton && this.addNewButton.classList.remove("focused");
656
- }
657
- if (this.isTable) {
658
- // tooltip
659
- const contentWrapper = this._focusedOption.querySelector(".cell-content-wrapper");
660
- const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
661
- this.dismissTooltip();
662
- if (isTruncated) {
663
- // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
664
- showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
665
- }
666
- }
667
- optionToFocus.scrollIntoView({ block: "nearest" });
668
- }
669
- }
670
- showTooltipIfTruncated(el) {
671
- const displayedText = el.querySelector(".tag-text").textContent;
672
- const id = el.id.replace("tag-", "");
673
- if (id) {
674
- const tagEl = this.el.querySelector("#" + id);
675
- const fullText = this.getTagName(tagEl);
676
- if (displayedText !== fullText && displayedText.includes("...")) {
677
- showTooltip("bottom", el, fullText);
678
- }
679
- }
680
- }
681
- focusTag(element) {
682
- // technically it's the tag area that has focus. This function handles the aria-activedescendant value within that parent
683
- this.focusedTagIndex = this._tagEls.indexOf(element);
684
- element.scrollIntoView({ block: "nearest" });
685
- window.requestAnimationFrame(() => {
686
- hideTooltip();
687
- this.showTooltipIfTruncated(element);
688
- });
689
- }
690
- clearOptionFocus() {
691
- this.focusedOption = undefined;
692
- this.focusedColumn = 0;
693
- }
694
- openDropdown() {
695
- // offset of -2px to avoid overlapping the focus border
696
- this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.el.clientHeight, -2);
697
- this.isExpanded = true;
698
- }
699
- closeDropdown() {
700
- this.clearOptionFocus();
701
- this.isExpanded = false;
702
- }
703
- resetInput() {
704
- this.inputEl.value = "";
705
- }
706
- announce(message) {
707
- // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
708
- if (this.liveRegionEl.textContent === message) {
709
- message += "\u00A0";
710
- }
711
- this.liveRegionMessage = message;
712
- }
713
- addTags(tagNames) {
714
- // covers both typing "," and pasting in text that includes ","
715
- // if tag added without "," (typing enter), split puts the whole string in an array
716
- const addedTags = tagNames.split(",").filter((t) => t.match(/\S/));
717
- addedTags.forEach((tag) => {
718
- this.wmTagInputTagAdded.emit(tag);
719
- });
720
- this.announce(this.tagAddedMessage(addedTags.join(", ")));
721
- this.resetInput();
722
- }
723
- announceExistingOptions() {
724
- // request animation frame to wait for re-rendering of filtered options
725
- window.requestAnimationFrame(() => {
726
- const numResults = this.filteredOptionEls.length;
727
- const existingOptionsMessage = intl.formatMessage({
728
- id: "tagInput.existingOptions",
729
- defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
730
- }, { num: numResults });
731
- this.announce(existingOptionsMessage);
732
- });
733
- }
734
- generateCharacterLimitWarning(charCount, charLimit) {
735
- let message = globalMessages.getCharactersEntered(charCount, charLimit);
736
- if (charCount >= charLimit) {
737
- message += ` ${globalMessages.characterLimitReached}`;
738
- }
739
- return message;
740
- }
741
- positionInput() {
742
- if (this.tagAreaEl) {
743
- const lastTag = this._tagEls[this._tagEls.length - 1];
744
- // default placement to fall back to when no tags are present, or not enough space is available
745
- this.inputEl.style.position = "static";
746
- this.inputEl.style.width = "100%";
747
- this.inputEl.classList.add("extended");
748
- if (lastTag) {
749
- const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
750
- if (spaceAvailable >= this.inputMinimumWidth) {
751
- // because the input has right: 0px
752
- // all thats needed to properly place it is setting position: absolute, top, and width
753
- this.inputEl.style.position = "absolute";
754
- this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
755
- this.inputEl.style.width = (spaceAvailable - 8).toString() + "px";
756
- this.inputEl.classList.remove("extended");
757
- }
758
- }
759
- }
760
- }
761
- handleTagMouseEnter(ev) {
762
- this.showTooltipIfTruncated(ev.target);
763
- }
764
- renderDropdown() {
765
- return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
766
- }
767
- renderHelpText() {
768
- if (this.helpText)
769
- return this.helpText;
770
- let helpText = "";
771
- if (this.optionEls.length > 0) {
772
- helpText = this.selectionHelpText;
773
- }
774
- if (this.addNew) {
775
- helpText += " " + this.addNewHelpText;
776
- }
777
- return helpText;
778
- }
779
- renderAddNewButton() {
780
- const inputValue = this.inputEl.value.trim();
781
- const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
782
- const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
783
- return (this.addNew &&
784
- hasNonWhiteSpaceCharacters &&
785
- !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, this.addNewTagMessage(inputValue))));
786
- }
787
- renderTable() {
788
- return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
789
- }
790
- renderTableHeaders() {
791
- return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
792
- let overflowRule = "wrap";
793
- if (this.colWrap && csvToArray(this.colWrap)[idx]) {
794
- overflowRule = csvToArray(this.colWrap)[idx];
795
- }
796
- return (h("th", { class: `header-cell ${overflowRule}`, role: "columnheader",
797
- // @ts-ignore
798
- width: this.colWidths ? csvToArray(this.colWidths)[idx] : "" }, header));
799
- })));
800
- }
801
- renderTag(o) {
802
- const focused = this.focusedTag && this.focusedTag.id === "tag-" + o.id ? "focused" : "";
803
- const tagName = this.getTagName(o);
804
- return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${focused} ${o.locked ? "locked" : ""}`, "aria-describedby": `tag-${o.id}-description`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("div", { class: "description", id: `tag-${o.id}-description` }, o.locked ? "locked" : ""), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "svg-icon svg-locked" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }, h("div", { class: "svg-icon svg-close" })))));
805
- }
806
- renderTags() {
807
- return this.tagsList.map((o) => this.renderTag(o));
808
- }
809
- renderTagCounter() {
810
- if (this.maxTags) {
811
- return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.renderMaxTags())));
812
- }
813
- }
814
- renderMaxTags() {
815
- if (this.helpText) {
816
- return this.helpText;
817
- }
818
- else {
819
- let msg = `${this.tagsAddedMessage}: ${this.taggedOptions.length}/${this.maxTags}`;
820
- if (this.tagLimitReached) {
821
- msg += `- ${this.maxTagsReachedMessage}`;
822
- }
823
- return msg;
824
- }
825
- }
826
- handleCellMouseEnter(ev) {
827
- const cell = ev.target;
828
- const contentWrapper = cell.querySelector(".cell-content-wrapper");
829
- const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
830
- if (isTruncated) {
831
- // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
832
- showTooltip("bottom", cell, cell.innerText);
833
- }
834
- }
835
- renderTableCells(o) {
836
- const colValues = [o.col1, o.col2, o.col3, o.col4].filter((val) => !!val);
837
- return colValues.map((val, idx) => {
838
- const cellId = `${o.id}-col${idx + 1}`;
839
- let overflowRule = "wrap";
840
- if (this.colWrap && csvToArray(this.colWrap)[idx]) {
841
- overflowRule = csvToArray(this.colWrap)[idx];
842
- }
843
- const classes = {
844
- focused: !!this._focusedCell && cellId === this._focusedCell.id,
845
- };
846
- return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? globalMessages.locked : "")));
847
- });
848
- }
849
- renderTableRow(o) {
850
- const classes = {
851
- selected: o.selected,
852
- locked: o.locked,
853
- focused: this.focusedOption && o === this.focusedOption ? true : false,
854
- };
855
- return (h("tr", { id: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
856
- }
857
- renderListItem(o) {
858
- if (!!this.inputEl) {
859
- const isFocused = this.focusedOption && o === this.focusedOption;
860
- return (h("li", { id: o.id, role: "option", class: `option ${isFocused ? "focused" : ""}`, "aria-selected": o.selected ? "true" : "false", onClick: (ev) => this.handleOptionClick(ev) }, o.textContent));
861
- }
862
- }
863
- render() {
864
- return (h("div", { key: 'c7c6274b246a075d3dde1a85c48f74a6f81e8488', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e111c172efb9f67de292ea97c032eb0aceb5dd7b', class: "label-wrapper" }, h("label", { key: '41022ce3f8be12acda982a6b6fddd5703004278d', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '778554d1db5854adcc3629fa263a2c1b537bcf7f', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'e73b049d34b5de5f7599c7c09b325545a3be0c5e', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'd192eac4c59464f4002e99f77ad295c5e3917f38', class: "upper-row" }, h("div", { key: 'fde56c948d07ebfe7f0811bf516b8d466b8aaf20', class: "svg-icon svg-search" }), h("div", { key: '9831080c30d69e89aa482dc439a9210c5f6f0246', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'd9b2a3749cd06d1ad5ce381b99c04685cff97c62', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
865
- this.focusedTagIndex = undefined;
866
- this.handleBlur(ev);
867
- }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'cd48d5e5c79157f76e67d89411e3471bd421cb82', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
868
- this.handleBlur(ev);
869
- }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: 'f2bf5d26f43064e12e4a2b51ed3b7a531e30d0f1', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'aea747efbca0eb714301678e297052c9bcfb745c', id: "info", class: "info-text" }, this.info)), h("div", { key: 'fa5e0b55abbd2f9608bbea1161a9169adeaee627', id: "error" }, this.errorMessage), h("div", { key: '3f484bbc12775a17f5af366deeb0776808b38016', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
870
- }
871
- static get delegatesFocus() { return true; }
872
- get el() { return this; }
873
- static get watchers() { return {
874
- "errorMessage": ["announceError"]
875
- }; }
876
- static get style() { return wmTagInputCss; }
877
- }, [17, "wm-tag-input", {
878
- "label": [1],
879
- "errorMessage": [1, "error-message"],
880
- "info": [1],
881
- "labelPosition": [1, "label-position"],
882
- "maxTags": [2, "max-tags"],
883
- "placeholder": [1025],
884
- "requiredField": [4, "required-field"],
885
- "tagInputType": [1, "tag-input-type"],
886
- "helpText": [1, "help-text"],
887
- "addNew": [4, "add-new"],
888
- "characterLimit": [2, "character-limit"],
889
- "colHeaders": [1, "col-headers"],
890
- "colWidths": [1, "col-widths"],
891
- "colWrap": [1, "col-wrap"],
892
- "isKeying": [32],
893
- "isExpanded": [32],
894
- "liveRegionMessage": [32],
895
- "focusedOption": [32],
896
- "focusedColumn": [32],
897
- "focusedTagIndex": [32],
898
- "tagsList": [32]
899
- }, [[8, "wmUserIsKeying", "toggleKeyingOn"], [8, "wmUserIsTabbing", "toggleKeyingOn"], [8, "wmUserIsNotKeying", "toggleKeyingOff"], [8, "wmUserIsNotTabbing", "toggleKeyingOff"], [0, "privTagOptionSelected", "handleTagOptionSelected"], [0, "privTagOptionDeselected", "handleTagOptionDeselected"], [4, "click", "handleClick"], [11, "scroll", "dismissTooltip"], [0, "blur", "handleBlur"]], {
900
- "errorMessage": ["announceError"]
901
- }]);
902
- function defineCustomElement$1() {
903
- if (typeof customElements === "undefined") {
904
- return;
905
- }
906
- const components = ["wm-tag-input"];
907
- components.forEach(tagName => { switch (tagName) {
908
- case "wm-tag-input":
909
- if (!customElements.get(tagName)) {
910
- customElements.define(tagName, TagInput);
911
- }
912
- break;
913
- } });
914
- }
915
-
916
- const WmTagInput = TagInput;
917
- const defineCustomElement = defineCustomElement$1;
918
-
919
- export { WmTagInput, defineCustomElement };