@watermarkinsights/ripple 3.26.0 → 3.26.1-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/cjs/{chartFunctions-b7452189.js → chartFunctions-d746b939.js} +596 -596
- package/dist/cjs/{functions-a047a8ea.js → functions-68f637b4.js} +503 -503
- package/dist/cjs/{global-21ae6c78.js → global-ae47f0c9.js} +72 -72
- package/dist/cjs/{http-service-494d81de.js → http-service-9e8c4dd5.js} +49 -49
- package/dist/cjs/{interfaces-a3338581.js → interfaces-30a74c1f.js} +29 -29
- package/dist/cjs/{intl-47d63c8f.js → intl-d9ffc76c.js} +131 -131
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/priv-chart-popover.cjs.entry.js +91 -91
- package/dist/cjs/priv-datepicker.cjs.entry.js +657 -657
- package/dist/cjs/priv-navigator-button.cjs.entry.js +19 -19
- package/dist/cjs/priv-navigator-item.cjs.entry.js +23 -23
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-action-menu_2.cjs.entry.js +334 -334
- package/dist/cjs/wm-button.cjs.entry.js +260 -260
- package/dist/cjs/wm-chart-slice.cjs.entry.js +18 -18
- package/dist/cjs/wm-chart.cjs.entry.js +183 -183
- package/dist/cjs/wm-datepicker.cjs.entry.js +263 -263
- package/dist/cjs/wm-file-list.cjs.entry.js +35 -35
- package/dist/cjs/wm-file.cjs.entry.js +181 -181
- package/dist/cjs/wm-input.cjs.entry.js +136 -136
- package/dist/cjs/wm-modal-footer.cjs.entry.js +33 -33
- package/dist/cjs/wm-modal-header.cjs.entry.js +32 -32
- package/dist/cjs/wm-modal.cjs.entry.js +152 -152
- package/dist/cjs/wm-navigation_3.cjs.entry.js +225 -225
- package/dist/cjs/wm-navigator.cjs.entry.js +264 -264
- package/dist/cjs/wm-network-uploader.cjs.entry.js +465 -465
- package/dist/cjs/wm-option_2.cjs.entry.js +768 -768
- package/dist/cjs/wm-pagination.cjs.entry.js +179 -179
- package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +155 -155
- package/dist/cjs/wm-search.cjs.entry.js +184 -184
- package/dist/cjs/wm-snackbar.cjs.entry.js +155 -155
- package/dist/cjs/wm-tab-item_3.cjs.entry.js +265 -265
- package/dist/cjs/wm-tag-input-row.cjs.entry.js +14 -14
- package/dist/cjs/wm-tag-input.cjs.entry.js +939 -939
- package/dist/cjs/wm-timepicker.cjs.entry.js +385 -385
- package/dist/cjs/wm-toggletip.cjs.entry.js +130 -130
- package/dist/cjs/wm-uploader.cjs.entry.js +441 -441
- package/dist/cjs/wm-wrapper.cjs.entry.js +12 -12
- package/dist/collection/components/charts/chartFunctions.js +562 -562
- package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js +267 -267
- package/dist/collection/components/charts/wm-chart/wm-chart-slice.js +125 -125
- package/dist/collection/components/charts/wm-chart/wm-chart.js +450 -450
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js +207 -207
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js +143 -143
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-slice.js +121 -121
- package/dist/collection/components/wm-action-menu/wm-action-menu.js +472 -472
- package/dist/collection/components/wm-button/wm-button.js +575 -575
- package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +983 -983
- package/dist/collection/components/wm-datepicker/wm-datepicker.js +491 -491
- package/dist/collection/components/wm-file/wm-file.js +313 -313
- package/dist/collection/components/wm-file-list/wm-file-list.js +152 -152
- package/dist/collection/components/wm-input/wm-input.js +509 -509
- package/dist/collection/components/wm-menuitem/wm-menuitem.js +454 -454
- package/dist/collection/components/wm-modal/wm-modal-footer.js +138 -138
- package/dist/collection/components/wm-modal/wm-modal-header.js +82 -82
- package/dist/collection/components/wm-modal/wm-modal.js +462 -462
- package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +176 -176
- package/dist/collection/components/wm-navigation/wm-navigation-item.js +130 -130
- package/dist/collection/components/wm-navigation/wm-navigation.js +217 -217
- package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +106 -106
- package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +123 -123
- package/dist/collection/components/wm-navigator/wm-navigator.js +467 -467
- package/dist/collection/components/wm-option/wm-option.js +435 -435
- package/dist/collection/components/wm-pagination/wm-pagination.js +370 -370
- package/dist/collection/components/wm-search/wm-search.js +439 -439
- package/dist/collection/components/wm-select/wm-select.js +1054 -1054
- package/dist/collection/components/wm-snackbar/wm-snackbar.js +282 -282
- package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +211 -211
- package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.css +0 -1
- package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +327 -327
- package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +108 -108
- package/dist/collection/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.js +122 -122
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +1294 -1294
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +605 -605
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +253 -253
- package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +772 -772
- package/dist/collection/components/wm-uploader/wm-uploader.js +964 -964
- package/dist/collection/components/wm-wrapper/wm-wrapper.js +28 -28
- package/dist/collection/dev/scripts.js +20 -20
- package/dist/collection/global/__mocks__/functions.js +6 -6
- package/dist/collection/global/functions.js +546 -546
- package/dist/collection/global/global.js +79 -79
- package/dist/collection/global/interfaces.js +49 -49
- package/dist/collection/global/intl.js +132 -132
- package/dist/collection/global/services/__mocks__/http-service.js +130 -130
- package/dist/collection/global/services/http-service.js +50 -50
- package/dist/collection/lang/lang.js +5 -5
- package/dist/collection/lang/missing.js +43 -43
- package/dist/collection/lang/piglatin.js +93 -93
- package/dist/esm/{chartFunctions-9d629e09.js → chartFunctions-5c1ad085.js} +596 -596
- package/dist/esm/{functions-3b813e0c.js → functions-b2582352.js} +503 -503
- package/dist/esm/{global-c7bb5530.js → global-770519f0.js} +72 -72
- package/dist/esm/{http-service-3dc3b3e7.js → http-service-5d037e16.js} +49 -49
- package/dist/esm/{interfaces-2b97fab2.js → interfaces-61c6305b.js} +29 -29
- package/dist/esm/{intl-d544f922.js → intl-6732dd5b.js} +131 -131
- package/dist/esm/loader.js +1 -1
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/priv-chart-popover.entry.js +91 -91
- package/dist/esm/priv-datepicker.entry.js +657 -657
- package/dist/esm/priv-navigator-button.entry.js +19 -19
- package/dist/esm/priv-navigator-item.entry.js +23 -23
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-action-menu_2.entry.js +334 -334
- package/dist/esm/wm-button.entry.js +260 -260
- package/dist/esm/wm-chart-slice.entry.js +18 -18
- package/dist/esm/wm-chart.entry.js +183 -183
- package/dist/esm/wm-datepicker.entry.js +263 -263
- package/dist/esm/wm-file-list.entry.js +35 -35
- package/dist/esm/wm-file.entry.js +181 -181
- package/dist/esm/wm-input.entry.js +136 -136
- package/dist/esm/wm-modal-footer.entry.js +33 -33
- package/dist/esm/wm-modal-header.entry.js +32 -32
- package/dist/esm/wm-modal.entry.js +152 -152
- package/dist/esm/wm-navigation_3.entry.js +225 -225
- package/dist/esm/wm-navigator.entry.js +264 -264
- package/dist/esm/wm-network-uploader.entry.js +465 -465
- package/dist/esm/wm-option_2.entry.js +768 -768
- package/dist/esm/wm-pagination.entry.js +179 -179
- package/dist/esm/wm-progress-indicator_3.entry.js +155 -155
- package/dist/esm/wm-search.entry.js +184 -184
- package/dist/esm/wm-snackbar.entry.js +155 -155
- package/dist/esm/wm-tab-item_3.entry.js +265 -265
- package/dist/esm/wm-tag-input-row.entry.js +14 -14
- package/dist/esm/wm-tag-input.entry.js +939 -939
- package/dist/esm/wm-timepicker.entry.js +385 -385
- package/dist/esm/wm-toggletip.entry.js +130 -130
- package/dist/esm/wm-uploader.entry.js +441 -441
- package/dist/esm/wm-wrapper.entry.js +12 -12
- package/dist/esm-es5/{chartFunctions-9d629e09.js → chartFunctions-5c1ad085.js} +1 -1
- package/dist/esm-es5/global-770519f0.js +1 -0
- package/dist/esm-es5/{intl-d544f922.js → intl-6732dd5b.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
- package/dist/esm-es5/priv-datepicker.entry.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
- package/dist/esm-es5/wm-button.entry.js +1 -1
- package/dist/esm-es5/wm-chart.entry.js +1 -1
- package/dist/esm-es5/wm-datepicker.entry.js +1 -1
- package/dist/esm-es5/wm-file.entry.js +1 -1
- package/dist/esm-es5/wm-input.entry.js +1 -1
- package/dist/esm-es5/wm-modal-header.entry.js +1 -1
- package/dist/esm-es5/wm-modal.entry.js +1 -1
- package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
- package/dist/esm-es5/wm-navigator.entry.js +1 -1
- package/dist/esm-es5/wm-network-uploader.entry.js +1 -1
- package/dist/esm-es5/wm-option_2.entry.js +1 -1
- package/dist/esm-es5/wm-pagination.entry.js +1 -1
- package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
- package/dist/esm-es5/wm-search.entry.js +1 -1
- package/dist/esm-es5/wm-snackbar.entry.js +1 -1
- package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
- package/dist/esm-es5/wm-tag-input.entry.js +1 -1
- package/dist/esm-es5/wm-timepicker.entry.js +1 -1
- package/dist/esm-es5/wm-toggletip.entry.js +1 -1
- package/dist/esm-es5/wm-uploader.entry.js +1 -1
- package/dist/ripple/{p-56ba575c.system.entry.js → p-00edfbc8.system.entry.js} +1 -1
- package/dist/ripple/{p-0cfc0d13.entry.js → p-0414179c.entry.js} +1 -1
- package/dist/ripple/{p-f6c9c95f.entry.js → p-043b4874.entry.js} +1 -1
- package/dist/ripple/{p-ea99fb58.system.entry.js → p-0503e614.system.entry.js} +1 -1
- package/dist/ripple/{p-09a04f55.system.entry.js → p-061914bf.system.entry.js} +1 -1
- package/dist/ripple/{p-4f5a48dd.system.entry.js → p-0648aa61.system.entry.js} +1 -1
- package/dist/ripple/{p-2d46dbea.entry.js → p-076a8729.entry.js} +1 -1
- package/dist/ripple/{p-d973fe13.system.entry.js → p-08e1c91b.system.entry.js} +1 -1
- package/dist/ripple/{p-ae1e1db8.entry.js → p-094388f1.entry.js} +1 -1
- package/dist/ripple/{p-8c853762.entry.js → p-17490d32.entry.js} +1 -1
- package/dist/ripple/{p-51b38033.entry.js → p-22b74491.entry.js} +1 -1
- package/dist/ripple/{p-4fb81a33.system.entry.js → p-2948bf33.system.entry.js} +1 -1
- package/dist/ripple/{p-2cde4ade.system.entry.js → p-2cef256c.system.entry.js} +1 -1
- package/dist/ripple/{p-2dd5f5c3.system.entry.js → p-3313df40.system.entry.js} +1 -1
- package/dist/ripple/{p-7f15df83.entry.js → p-3aaf86e4.entry.js} +1 -1
- package/dist/ripple/{p-b3d97de8.entry.js → p-3b582301.entry.js} +1 -1
- package/dist/ripple/{p-42f8f3ff.entry.js → p-42739dba.entry.js} +1 -1
- package/dist/ripple/{p-236dab05.system.entry.js → p-462e7cf8.system.entry.js} +1 -1
- package/dist/ripple/{p-fe76e568.entry.js → p-49f7f1da.entry.js} +1 -1
- package/dist/ripple/{p-38819b27.system.entry.js → p-4e7489a3.system.entry.js} +1 -1
- package/dist/ripple/{p-832910a0.entry.js → p-5ddb1660.entry.js} +1 -1
- package/dist/ripple/{p-fea37751.system.entry.js → p-60f58a39.system.entry.js} +1 -1
- package/dist/ripple/{p-35790e4e.system.entry.js → p-64b64f40.system.entry.js} +1 -1
- package/dist/ripple/{p-84ce9b67.system.entry.js → p-66bb46e5.system.entry.js} +1 -1
- package/dist/ripple/{p-8b23f32b.entry.js → p-6f96c28d.entry.js} +1 -1
- package/dist/ripple/p-719816e6.system.entry.js +1 -0
- package/dist/ripple/{p-f6f80b8d.system.entry.js → p-731beaab.system.entry.js} +1 -1
- package/dist/ripple/{p-630bd6f5.system.entry.js → p-7dafc84b.system.entry.js} +1 -1
- package/dist/ripple/{p-18c2f4fe.js → p-7ee31208.js} +1 -1
- package/dist/ripple/{p-8ff578ad.system.entry.js → p-81b26d3a.system.entry.js} +1 -1
- package/dist/ripple/{p-ffb83b6f.entry.js → p-918dc303.entry.js} +1 -1
- package/dist/ripple/{p-3aa8e5f5.entry.js → p-926aab51.entry.js} +1 -1
- package/dist/ripple/{p-54a2b7d6.system.js → p-9706537b.system.js} +1 -1
- package/dist/ripple/p-9ad652d9.system.js +1 -0
- package/dist/ripple/{p-95f4e5a1.entry.js → p-9b28a31f.entry.js} +1 -1
- package/dist/ripple/{p-5708349e.entry.js → p-9b293f13.entry.js} +1 -1
- package/dist/ripple/{p-95aa793b.system.entry.js → p-9b9e60aa.system.entry.js} +1 -1
- package/dist/ripple/{p-2cd5477a.entry.js → p-9baf62ae.entry.js} +1 -1
- package/dist/ripple/p-9c2b8fb4.js +1 -0
- package/dist/ripple/{p-a48e4f1a.system.js → p-a1f5f82f.system.js} +1 -1
- package/dist/ripple/{p-09bc0aa7.entry.js → p-a2f10a77.entry.js} +1 -1
- package/dist/ripple/{p-f2bb38d0.system.entry.js → p-a5662a2c.system.entry.js} +1 -1
- package/dist/ripple/{p-0ef638b7.entry.js → p-a9080b82.entry.js} +1 -1
- package/dist/ripple/{p-72b9b986.entry.js → p-a966a18c.entry.js} +1 -1
- package/dist/ripple/{p-a006968b.system.entry.js → p-accdf91c.system.entry.js} +1 -1
- package/dist/ripple/{p-6eb2c2d5.system.js → p-b7982fab.system.js} +1 -1
- package/dist/ripple/{p-c3665c9f.system.entry.js → p-b805612a.system.entry.js} +1 -1
- package/dist/ripple/{p-eeeec290.entry.js → p-bd94e7c3.entry.js} +1 -1
- package/dist/ripple/{p-05563588.entry.js → p-d5a420fa.entry.js} +1 -1
- package/dist/ripple/{p-d96b86c9.js → p-d7f77b2c.js} +1 -1
- package/dist/ripple/{p-8775e10b.system.entry.js → p-e6fde200.system.entry.js} +1 -1
- package/dist/ripple/{p-12c70659.system.entry.js → p-f740c48c.system.entry.js} +1 -1
- package/dist/ripple/{p-bdecbb63.entry.js → p-f8418ac9.entry.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/charts/chartFunctions.d.ts +37 -37
- package/dist/types/components/charts/priv-chart-popover/priv-chart-popover.d.ts +27 -27
- package/dist/types/components/charts/wm-chart/wm-chart-slice.d.ts +11 -11
- package/dist/types/components/charts/wm-chart/wm-chart.d.ts +47 -47
- package/dist/types/components/charts/wm-progress-monitor/wm-progress-indicator.d.ts +29 -29
- package/dist/types/components/charts/wm-progress-monitor/wm-progress-monitor.d.ts +20 -20
- package/dist/types/components/charts/wm-progress-monitor/wm-progress-slice.d.ts +10 -10
- package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +49 -49
- package/dist/types/components/wm-button/wm-button.d.ts +49 -49
- package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +80 -80
- package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +42 -42
- package/dist/types/components/wm-file/wm-file.d.ts +40 -40
- package/dist/types/components/wm-file-list/wm-file-list.d.ts +16 -16
- package/dist/types/components/wm-input/wm-input.d.ts +57 -57
- package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
- package/dist/types/components/wm-modal/wm-modal-footer.d.ts +14 -14
- package/dist/types/components/wm-modal/wm-modal-header.d.ts +10 -10
- package/dist/types/components/wm-modal/wm-modal.d.ts +40 -40
- package/dist/types/components/wm-navigation/wm-navigation-hamburger.d.ts +21 -21
- package/dist/types/components/wm-navigation/wm-navigation-item.d.ts +13 -13
- package/dist/types/components/wm-navigation/wm-navigation.d.ts +26 -26
- package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
- package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
- package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
- package/dist/types/components/wm-option/wm-option.d.ts +34 -34
- package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
- package/dist/types/components/wm-search/wm-search.d.ts +77 -77
- package/dist/types/components/wm-select/wm-select.d.ts +101 -101
- package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +31 -31
- package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +37 -37
- package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +52 -52
- package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
- package/dist/types/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.d.ts +11 -11
- package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +136 -136
- package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +62 -62
- package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +28 -28
- package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
- package/dist/types/components/wm-uploader/wm-uploader.d.ts +99 -99
- package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
- package/dist/types/components.d.ts +27 -27
- package/dist/types/global/__mocks__/functions.d.ts +6 -6
- package/dist/types/global/functions.d.ts +49 -49
- package/dist/types/global/global.d.ts +1 -1
- package/dist/types/global/interfaces.d.ts +74 -74
- package/dist/types/global/intl.d.ts +29 -29
- package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
- package/dist/types/global/services/http-service.d.ts +4 -4
- package/dist/types/lang/lang.d.ts +5 -5
- package/package.json +46 -46
- package/dist/esm-es5/global-c7bb5530.js +0 -1
- package/dist/ripple/p-169606b9.system.js +0 -1
- package/dist/ripple/p-4444add0.system.entry.js +0 -1
- package/dist/ripple/p-76015762.js +0 -1
- /package/dist/esm-es5/{functions-3b813e0c.js → functions-b2582352.js} +0 -0
- /package/dist/esm-es5/{http-service-3dc3b3e7.js → http-service-5d037e16.js} +0 -0
- /package/dist/esm-es5/{interfaces-2b97fab2.js → interfaces-61c6305b.js} +0 -0
- /package/dist/ripple/{p-f5df5903.system.js → p-08b7ec08.system.js} +0 -0
- /package/dist/ripple/{p-9d02957d.system.js → p-313b6073.system.js} +0 -0
- /package/dist/ripple/{p-4a0e1d2d.js → p-5384856b.js} +0 -0
- /package/dist/ripple/{p-43f1298b.js → p-888bec42.js} +0 -0
- /package/dist/ripple/{p-190afa40.system.js → p-9e94ae94.system.js} +0 -0
- /package/dist/ripple/{p-fd8070fb.js → p-a6d6eae7.js} +0 -0
|
@@ -1,313 +1,313 @@
|
|
|
1
|
-
import { h, Host, forceUpdate } from "@stencil/core";
|
|
2
|
-
import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../global/functions";
|
|
3
|
-
export class File {
|
|
4
|
-
constructor() {
|
|
5
|
-
// the file component is used within wm-uploader, which still includes legacy types 1 and 2
|
|
6
|
-
// some new features are not included in these legacy types, and must use the below in conditions
|
|
7
|
-
this.isWithinLegacyUploader = false;
|
|
8
|
-
this.debouncedResize = debounce(() => {
|
|
9
|
-
this.isCondensed = this.el.clientWidth < 500;
|
|
10
|
-
// rerender to show filename truncation changes
|
|
11
|
-
forceUpdate(this.el);
|
|
12
|
-
}, 50);
|
|
13
|
-
this.file = undefined;
|
|
14
|
-
this.showInfo = "time";
|
|
15
|
-
this.errorMessage = undefined;
|
|
16
|
-
this.isCondensed = false;
|
|
17
|
-
}
|
|
18
|
-
get fileData() {
|
|
19
|
-
let data = this.file ? JSON.parse(this.file) : null;
|
|
20
|
-
// sometimes JSON numbers can be received as strings, make sure progress is always a number
|
|
21
|
-
if (data && data.progress && typeof data.progress === "string" && data.progress.match(/^[0-9]+$/)) {
|
|
22
|
-
data.progress = parseInt(data.progress.toString());
|
|
23
|
-
}
|
|
24
|
-
return data;
|
|
25
|
-
}
|
|
26
|
-
get isUploading() {
|
|
27
|
-
return this.fileData && this.fileData.hasOwnProperty("progress") && this.fileData.progress < 100;
|
|
28
|
-
}
|
|
29
|
-
get previewButtonTooltip() {
|
|
30
|
-
return intl.formatMessage({
|
|
31
|
-
id: "file.previewButtonTooltip",
|
|
32
|
-
defaultMessage: "Preview",
|
|
33
|
-
description: "Tooltip of a button that triggers a file to be previewed",
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
get downloadButtonTooltip() {
|
|
37
|
-
return intl.formatMessage({
|
|
38
|
-
id: "file.downloadButtonTooltip",
|
|
39
|
-
defaultMessage: "Download",
|
|
40
|
-
description: "Tooltip of a button that triggers a file to be downloaded",
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
get deleteButtonTooltip() {
|
|
44
|
-
return intl.formatMessage({
|
|
45
|
-
id: "file.deleteButtonTooltip",
|
|
46
|
-
defaultMessage: "Delete",
|
|
47
|
-
description: "Tooltip of a button that triggers a file to be deleted",
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
get previewActionMessage() {
|
|
51
|
-
return intl.formatMessage({
|
|
52
|
-
id: "file.previewAction",
|
|
53
|
-
defaultMessage: "Preview File",
|
|
54
|
-
description: "Label of a button that triggers a file to be previewed",
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
get downloadActionMessage() {
|
|
58
|
-
return intl.formatMessage({
|
|
59
|
-
id: "file.downloadAction",
|
|
60
|
-
defaultMessage: "Download File",
|
|
61
|
-
description: "Label of a button that triggers a file to be downloaded",
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
get deleteActionMessage() {
|
|
65
|
-
return intl.formatMessage({
|
|
66
|
-
id: "file.deleteAction",
|
|
67
|
-
defaultMessage: "Delete File",
|
|
68
|
-
description: "Label of a button that triggers a file to be delete",
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
get actionMenuLabel() {
|
|
72
|
-
return intl.formatMessage({
|
|
73
|
-
id: "file.actionMenuLabel",
|
|
74
|
-
defaultMessage: "Actions",
|
|
75
|
-
description: "Label of a button that opens a menu of file actions",
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
get clearButtonText() {
|
|
79
|
-
return intl.formatMessage({
|
|
80
|
-
id: "file.clearErrorText",
|
|
81
|
-
defaultMessage: "Clear",
|
|
82
|
-
description: "Text for a button used to clear an error",
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
generateClearButtonLabel(filename) {
|
|
86
|
-
return intl.formatMessage({
|
|
87
|
-
id: "file.clearErrorLabel",
|
|
88
|
-
defaultMessage: "Clear {fileName} error",
|
|
89
|
-
description: "Label for a button used to clear an error, including filename",
|
|
90
|
-
}, { fileName: filename });
|
|
91
|
-
}
|
|
92
|
-
componentWillLoad() {
|
|
93
|
-
const shadowRootHost = this.el.getRootNode().host;
|
|
94
|
-
if (shadowRootHost && shadowRootHost.nodeName === "WM-UPLOADER") {
|
|
95
|
-
if (shadowRootHost.type || shadowRootHost.uploaderType) {
|
|
96
|
-
this.isWithinLegacyUploader = true;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
// rerender on resize in case layout needs to change
|
|
100
|
-
const resizeObserver = new ResizeObserver(() => this.debouncedResize());
|
|
101
|
-
resizeObserver.observe(this.el);
|
|
102
|
-
}
|
|
103
|
-
componentDidRender() {
|
|
104
|
-
const fileNameEl = this.el.shadowRoot.querySelector(".filename");
|
|
105
|
-
const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
|
|
106
|
-
const rightGroup = this.el.shadowRoot.querySelector(".right-group");
|
|
107
|
-
const rightBoundary = rightGroup
|
|
108
|
-
? rightGroup.getBoundingClientRect().left
|
|
109
|
-
: this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
|
|
110
|
-
fileNameEl.textContent = truncateText(fileNameEl, fileNameEl.dataset.filename, rightBoundary - leftBoundary, 7);
|
|
111
|
-
}
|
|
112
|
-
previewFile(file) {
|
|
113
|
-
this.wmIntFilePreviewed.emit(file.id);
|
|
114
|
-
}
|
|
115
|
-
downloadFile(file) {
|
|
116
|
-
this.wmIntFileDownloaded.emit(file.id);
|
|
117
|
-
}
|
|
118
|
-
deleteFile(file) {
|
|
119
|
-
this.wmIntFileDeleted.emit(file.id);
|
|
120
|
-
}
|
|
121
|
-
handleFilenameMouseEnter(ev, filename) {
|
|
122
|
-
// only show tooltip if file name is being truncated (has ellipses)
|
|
123
|
-
if (ev.target.textContent.includes("...")) {
|
|
124
|
-
showTooltip("bottom", ev.target, filename);
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
renderFileName(filename, isUploading) {
|
|
128
|
-
return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, filename), h("span", { "aria-hidden": "true", class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => hideTooltip() }), isUploading && h("span", { class: "sr-only" }, "uploading"))));
|
|
129
|
-
}
|
|
130
|
-
renderFileInfo(item, showInfo) {
|
|
131
|
-
let displayedInfo = "";
|
|
132
|
-
if (showInfo === "time" && item.lastUpdated) {
|
|
133
|
-
displayedInfo = item.lastUpdated;
|
|
134
|
-
}
|
|
135
|
-
else if (showInfo === "size" && item.size) {
|
|
136
|
-
displayedInfo = item.size;
|
|
137
|
-
}
|
|
138
|
-
return h("div", { class: "file-info" }, displayedInfo);
|
|
139
|
-
}
|
|
140
|
-
renderActionMenu(item) {
|
|
141
|
-
const defaultFileActions = "download delete";
|
|
142
|
-
const availableActions = item.fileActions || defaultFileActions;
|
|
143
|
-
const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile(item) }, this.previewActionMessage));
|
|
144
|
-
const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile(item) }, this.downloadActionMessage));
|
|
145
|
-
const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile(item) }, this.deleteActionMessage));
|
|
146
|
-
return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${item.name} ${this.actionMenuLabel}` }, availableActions.includes("preview") && previewItem, availableActions.includes("download") && downloadItem, availableActions.includes("delete") && deleteItem));
|
|
147
|
-
}
|
|
148
|
-
renderFileActionButtons(item) {
|
|
149
|
-
const defaultFileActions = "download delete";
|
|
150
|
-
const availableActions = item.fileActions || defaultFileActions;
|
|
151
|
-
const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${item.name}`, icon: "f208", onClick: () => this.previewFile(item) }));
|
|
152
|
-
const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }));
|
|
153
|
-
const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) }));
|
|
154
|
-
return (h("div", { class: "file-controls" }, availableActions.includes("preview") && previewButton, availableActions.includes("download") && downloadButton, availableActions.includes("delete") && deleteButton));
|
|
155
|
-
}
|
|
156
|
-
renderFileInProgress(item) {
|
|
157
|
-
const filename = item.type ? `${item.name}.${item.type}` : item.name;
|
|
158
|
-
return (h("div", { class: "file-wrapper" }, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
|
|
159
|
-
background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
|
|
160
|
-
} }), this.renderFileName(filename, this.isUploading))));
|
|
161
|
-
}
|
|
162
|
-
renderFileControls(item) {
|
|
163
|
-
const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
|
|
164
|
-
const showActionMenu = this.isCondensed && !hasSingleFileAction;
|
|
165
|
-
return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);
|
|
166
|
-
}
|
|
167
|
-
renderFile(item) {
|
|
168
|
-
const filename = item.type ? `${item.name}.${item.type}` : item.name;
|
|
169
|
-
const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;
|
|
170
|
-
return (h("div", { class: `file-wrapper ${showCheckmark ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(filename, this.isUploading), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.showInfo !== "none" && this.renderFileInfo(item, this.showInfo), item.fileActions !== "" && this.renderFileControls(item))), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(item.name), onClick: () => this.wmFileClearErrorClicked.emit({ name: item.name }) }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
|
|
171
|
-
}
|
|
172
|
-
render() {
|
|
173
|
-
return (h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)));
|
|
174
|
-
}
|
|
175
|
-
static get is() { return "wm-file"; }
|
|
176
|
-
static get encapsulation() { return "shadow"; }
|
|
177
|
-
static get delegatesFocus() { return true; }
|
|
178
|
-
static get originalStyleUrls() {
|
|
179
|
-
return {
|
|
180
|
-
"$": ["wm-file.scss"]
|
|
181
|
-
};
|
|
182
|
-
}
|
|
183
|
-
static get styleUrls() {
|
|
184
|
-
return {
|
|
185
|
-
"$": ["wm-file.css"]
|
|
186
|
-
};
|
|
187
|
-
}
|
|
188
|
-
static get properties() {
|
|
189
|
-
return {
|
|
190
|
-
"file": {
|
|
191
|
-
"type": "string",
|
|
192
|
-
"mutable": false,
|
|
193
|
-
"complexType": {
|
|
194
|
-
"original": "string",
|
|
195
|
-
"resolved": "string | undefined",
|
|
196
|
-
"references": {}
|
|
197
|
-
},
|
|
198
|
-
"required": false,
|
|
199
|
-
"optional": true,
|
|
200
|
-
"docs": {
|
|
201
|
-
"tags": [],
|
|
202
|
-
"text": ""
|
|
203
|
-
},
|
|
204
|
-
"attribute": "file",
|
|
205
|
-
"reflect": false
|
|
206
|
-
},
|
|
207
|
-
"showInfo": {
|
|
208
|
-
"type": "string",
|
|
209
|
-
"mutable": false,
|
|
210
|
-
"complexType": {
|
|
211
|
-
"original": "\"time\" | \"size\" | \"none\"",
|
|
212
|
-
"resolved": "\"none\" | \"size\" | \"time\"",
|
|
213
|
-
"references": {}
|
|
214
|
-
},
|
|
215
|
-
"required": false,
|
|
216
|
-
"optional": false,
|
|
217
|
-
"docs": {
|
|
218
|
-
"tags": [],
|
|
219
|
-
"text": ""
|
|
220
|
-
},
|
|
221
|
-
"attribute": "show-info",
|
|
222
|
-
"reflect": false,
|
|
223
|
-
"defaultValue": "\"time\""
|
|
224
|
-
},
|
|
225
|
-
"errorMessage": {
|
|
226
|
-
"type": "string",
|
|
227
|
-
"mutable": false,
|
|
228
|
-
"complexType": {
|
|
229
|
-
"original": "string",
|
|
230
|
-
"resolved": "string | undefined",
|
|
231
|
-
"references": {}
|
|
232
|
-
},
|
|
233
|
-
"required": false,
|
|
234
|
-
"optional": true,
|
|
235
|
-
"docs": {
|
|
236
|
-
"tags": [],
|
|
237
|
-
"text": ""
|
|
238
|
-
},
|
|
239
|
-
"attribute": "error-message",
|
|
240
|
-
"reflect": false
|
|
241
|
-
}
|
|
242
|
-
};
|
|
243
|
-
}
|
|
244
|
-
static get states() {
|
|
245
|
-
return {
|
|
246
|
-
"isCondensed": {}
|
|
247
|
-
};
|
|
248
|
-
}
|
|
249
|
-
static get events() {
|
|
250
|
-
return [{
|
|
251
|
-
"method": "wmIntFilePreviewed",
|
|
252
|
-
"name": "wmIntFilePreviewed",
|
|
253
|
-
"bubbles": true,
|
|
254
|
-
"cancelable": true,
|
|
255
|
-
"composed": true,
|
|
256
|
-
"docs": {
|
|
257
|
-
"tags": [],
|
|
258
|
-
"text": ""
|
|
259
|
-
},
|
|
260
|
-
"complexType": {
|
|
261
|
-
"original": "string",
|
|
262
|
-
"resolved": "string",
|
|
263
|
-
"references": {}
|
|
264
|
-
}
|
|
265
|
-
}, {
|
|
266
|
-
"method": "wmIntFileDownloaded",
|
|
267
|
-
"name": "wmIntFileDownloaded",
|
|
268
|
-
"bubbles": true,
|
|
269
|
-
"cancelable": true,
|
|
270
|
-
"composed": true,
|
|
271
|
-
"docs": {
|
|
272
|
-
"tags": [],
|
|
273
|
-
"text": ""
|
|
274
|
-
},
|
|
275
|
-
"complexType": {
|
|
276
|
-
"original": "string",
|
|
277
|
-
"resolved": "string",
|
|
278
|
-
"references": {}
|
|
279
|
-
}
|
|
280
|
-
}, {
|
|
281
|
-
"method": "wmIntFileDeleted",
|
|
282
|
-
"name": "wmIntFileDeleted",
|
|
283
|
-
"bubbles": true,
|
|
284
|
-
"cancelable": true,
|
|
285
|
-
"composed": true,
|
|
286
|
-
"docs": {
|
|
287
|
-
"tags": [],
|
|
288
|
-
"text": ""
|
|
289
|
-
},
|
|
290
|
-
"complexType": {
|
|
291
|
-
"original": "string",
|
|
292
|
-
"resolved": "string",
|
|
293
|
-
"references": {}
|
|
294
|
-
}
|
|
295
|
-
}, {
|
|
296
|
-
"method": "wmFileClearErrorClicked",
|
|
297
|
-
"name": "wmFileClearErrorClicked",
|
|
298
|
-
"bubbles": true,
|
|
299
|
-
"cancelable": true,
|
|
300
|
-
"composed": true,
|
|
301
|
-
"docs": {
|
|
302
|
-
"tags": [],
|
|
303
|
-
"text": ""
|
|
304
|
-
},
|
|
305
|
-
"complexType": {
|
|
306
|
-
"original": "any",
|
|
307
|
-
"resolved": "any",
|
|
308
|
-
"references": {}
|
|
309
|
-
}
|
|
310
|
-
}];
|
|
311
|
-
}
|
|
312
|
-
static get elementRef() { return "el"; }
|
|
313
|
-
}
|
|
1
|
+
import { h, Host, forceUpdate } from "@stencil/core";
|
|
2
|
+
import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../global/functions";
|
|
3
|
+
export class File {
|
|
4
|
+
constructor() {
|
|
5
|
+
// the file component is used within wm-uploader, which still includes legacy types 1 and 2
|
|
6
|
+
// some new features are not included in these legacy types, and must use the below in conditions
|
|
7
|
+
this.isWithinLegacyUploader = false;
|
|
8
|
+
this.debouncedResize = debounce(() => {
|
|
9
|
+
this.isCondensed = this.el.clientWidth < 500;
|
|
10
|
+
// rerender to show filename truncation changes
|
|
11
|
+
forceUpdate(this.el);
|
|
12
|
+
}, 50);
|
|
13
|
+
this.file = undefined;
|
|
14
|
+
this.showInfo = "time";
|
|
15
|
+
this.errorMessage = undefined;
|
|
16
|
+
this.isCondensed = false;
|
|
17
|
+
}
|
|
18
|
+
get fileData() {
|
|
19
|
+
let data = this.file ? JSON.parse(this.file) : null;
|
|
20
|
+
// sometimes JSON numbers can be received as strings, make sure progress is always a number
|
|
21
|
+
if (data && data.progress && typeof data.progress === "string" && data.progress.match(/^[0-9]+$/)) {
|
|
22
|
+
data.progress = parseInt(data.progress.toString());
|
|
23
|
+
}
|
|
24
|
+
return data;
|
|
25
|
+
}
|
|
26
|
+
get isUploading() {
|
|
27
|
+
return this.fileData && this.fileData.hasOwnProperty("progress") && this.fileData.progress < 100;
|
|
28
|
+
}
|
|
29
|
+
get previewButtonTooltip() {
|
|
30
|
+
return intl.formatMessage({
|
|
31
|
+
id: "file.previewButtonTooltip",
|
|
32
|
+
defaultMessage: "Preview",
|
|
33
|
+
description: "Tooltip of a button that triggers a file to be previewed",
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
get downloadButtonTooltip() {
|
|
37
|
+
return intl.formatMessage({
|
|
38
|
+
id: "file.downloadButtonTooltip",
|
|
39
|
+
defaultMessage: "Download",
|
|
40
|
+
description: "Tooltip of a button that triggers a file to be downloaded",
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
get deleteButtonTooltip() {
|
|
44
|
+
return intl.formatMessage({
|
|
45
|
+
id: "file.deleteButtonTooltip",
|
|
46
|
+
defaultMessage: "Delete",
|
|
47
|
+
description: "Tooltip of a button that triggers a file to be deleted",
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
get previewActionMessage() {
|
|
51
|
+
return intl.formatMessage({
|
|
52
|
+
id: "file.previewAction",
|
|
53
|
+
defaultMessage: "Preview File",
|
|
54
|
+
description: "Label of a button that triggers a file to be previewed",
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
get downloadActionMessage() {
|
|
58
|
+
return intl.formatMessage({
|
|
59
|
+
id: "file.downloadAction",
|
|
60
|
+
defaultMessage: "Download File",
|
|
61
|
+
description: "Label of a button that triggers a file to be downloaded",
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
get deleteActionMessage() {
|
|
65
|
+
return intl.formatMessage({
|
|
66
|
+
id: "file.deleteAction",
|
|
67
|
+
defaultMessage: "Delete File",
|
|
68
|
+
description: "Label of a button that triggers a file to be delete",
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
get actionMenuLabel() {
|
|
72
|
+
return intl.formatMessage({
|
|
73
|
+
id: "file.actionMenuLabel",
|
|
74
|
+
defaultMessage: "Actions",
|
|
75
|
+
description: "Label of a button that opens a menu of file actions",
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
get clearButtonText() {
|
|
79
|
+
return intl.formatMessage({
|
|
80
|
+
id: "file.clearErrorText",
|
|
81
|
+
defaultMessage: "Clear",
|
|
82
|
+
description: "Text for a button used to clear an error",
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
generateClearButtonLabel(filename) {
|
|
86
|
+
return intl.formatMessage({
|
|
87
|
+
id: "file.clearErrorLabel",
|
|
88
|
+
defaultMessage: "Clear {fileName} error",
|
|
89
|
+
description: "Label for a button used to clear an error, including filename",
|
|
90
|
+
}, { fileName: filename });
|
|
91
|
+
}
|
|
92
|
+
componentWillLoad() {
|
|
93
|
+
const shadowRootHost = this.el.getRootNode().host;
|
|
94
|
+
if (shadowRootHost && shadowRootHost.nodeName === "WM-UPLOADER") {
|
|
95
|
+
if (shadowRootHost.type || shadowRootHost.uploaderType) {
|
|
96
|
+
this.isWithinLegacyUploader = true;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
// rerender on resize in case layout needs to change
|
|
100
|
+
const resizeObserver = new ResizeObserver(() => this.debouncedResize());
|
|
101
|
+
resizeObserver.observe(this.el);
|
|
102
|
+
}
|
|
103
|
+
componentDidRender() {
|
|
104
|
+
const fileNameEl = this.el.shadowRoot.querySelector(".filename");
|
|
105
|
+
const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
|
|
106
|
+
const rightGroup = this.el.shadowRoot.querySelector(".right-group");
|
|
107
|
+
const rightBoundary = rightGroup
|
|
108
|
+
? rightGroup.getBoundingClientRect().left
|
|
109
|
+
: this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
|
|
110
|
+
fileNameEl.textContent = truncateText(fileNameEl, fileNameEl.dataset.filename, rightBoundary - leftBoundary, 7);
|
|
111
|
+
}
|
|
112
|
+
previewFile(file) {
|
|
113
|
+
this.wmIntFilePreviewed.emit(file.id);
|
|
114
|
+
}
|
|
115
|
+
downloadFile(file) {
|
|
116
|
+
this.wmIntFileDownloaded.emit(file.id);
|
|
117
|
+
}
|
|
118
|
+
deleteFile(file) {
|
|
119
|
+
this.wmIntFileDeleted.emit(file.id);
|
|
120
|
+
}
|
|
121
|
+
handleFilenameMouseEnter(ev, filename) {
|
|
122
|
+
// only show tooltip if file name is being truncated (has ellipses)
|
|
123
|
+
if (ev.target.textContent.includes("...")) {
|
|
124
|
+
showTooltip("bottom", ev.target, filename);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
renderFileName(filename, isUploading) {
|
|
128
|
+
return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, filename), h("span", { "aria-hidden": "true", class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => hideTooltip() }), isUploading && h("span", { class: "sr-only" }, "uploading"))));
|
|
129
|
+
}
|
|
130
|
+
renderFileInfo(item, showInfo) {
|
|
131
|
+
let displayedInfo = "";
|
|
132
|
+
if (showInfo === "time" && item.lastUpdated) {
|
|
133
|
+
displayedInfo = item.lastUpdated;
|
|
134
|
+
}
|
|
135
|
+
else if (showInfo === "size" && item.size) {
|
|
136
|
+
displayedInfo = item.size;
|
|
137
|
+
}
|
|
138
|
+
return h("div", { class: "file-info" }, displayedInfo);
|
|
139
|
+
}
|
|
140
|
+
renderActionMenu(item) {
|
|
141
|
+
const defaultFileActions = "download delete";
|
|
142
|
+
const availableActions = item.fileActions || defaultFileActions;
|
|
143
|
+
const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile(item) }, this.previewActionMessage));
|
|
144
|
+
const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile(item) }, this.downloadActionMessage));
|
|
145
|
+
const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile(item) }, this.deleteActionMessage));
|
|
146
|
+
return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${item.name} ${this.actionMenuLabel}` }, availableActions.includes("preview") && previewItem, availableActions.includes("download") && downloadItem, availableActions.includes("delete") && deleteItem));
|
|
147
|
+
}
|
|
148
|
+
renderFileActionButtons(item) {
|
|
149
|
+
const defaultFileActions = "download delete";
|
|
150
|
+
const availableActions = item.fileActions || defaultFileActions;
|
|
151
|
+
const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${item.name}`, icon: "f208", onClick: () => this.previewFile(item) }));
|
|
152
|
+
const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }));
|
|
153
|
+
const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) }));
|
|
154
|
+
return (h("div", { class: "file-controls" }, availableActions.includes("preview") && previewButton, availableActions.includes("download") && downloadButton, availableActions.includes("delete") && deleteButton));
|
|
155
|
+
}
|
|
156
|
+
renderFileInProgress(item) {
|
|
157
|
+
const filename = item.type ? `${item.name}.${item.type}` : item.name;
|
|
158
|
+
return (h("div", { class: "file-wrapper" }, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
|
|
159
|
+
background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
|
|
160
|
+
} }), this.renderFileName(filename, this.isUploading))));
|
|
161
|
+
}
|
|
162
|
+
renderFileControls(item) {
|
|
163
|
+
const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
|
|
164
|
+
const showActionMenu = this.isCondensed && !hasSingleFileAction;
|
|
165
|
+
return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);
|
|
166
|
+
}
|
|
167
|
+
renderFile(item) {
|
|
168
|
+
const filename = item.type ? `${item.name}.${item.type}` : item.name;
|
|
169
|
+
const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;
|
|
170
|
+
return (h("div", { class: `file-wrapper ${showCheckmark ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(filename, this.isUploading), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.showInfo !== "none" && this.renderFileInfo(item, this.showInfo), item.fileActions !== "" && this.renderFileControls(item))), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(item.name), onClick: () => this.wmFileClearErrorClicked.emit({ name: item.name }) }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
|
|
171
|
+
}
|
|
172
|
+
render() {
|
|
173
|
+
return (h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)));
|
|
174
|
+
}
|
|
175
|
+
static get is() { return "wm-file"; }
|
|
176
|
+
static get encapsulation() { return "shadow"; }
|
|
177
|
+
static get delegatesFocus() { return true; }
|
|
178
|
+
static get originalStyleUrls() {
|
|
179
|
+
return {
|
|
180
|
+
"$": ["wm-file.scss"]
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
static get styleUrls() {
|
|
184
|
+
return {
|
|
185
|
+
"$": ["wm-file.css"]
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
static get properties() {
|
|
189
|
+
return {
|
|
190
|
+
"file": {
|
|
191
|
+
"type": "string",
|
|
192
|
+
"mutable": false,
|
|
193
|
+
"complexType": {
|
|
194
|
+
"original": "string",
|
|
195
|
+
"resolved": "string | undefined",
|
|
196
|
+
"references": {}
|
|
197
|
+
},
|
|
198
|
+
"required": false,
|
|
199
|
+
"optional": true,
|
|
200
|
+
"docs": {
|
|
201
|
+
"tags": [],
|
|
202
|
+
"text": ""
|
|
203
|
+
},
|
|
204
|
+
"attribute": "file",
|
|
205
|
+
"reflect": false
|
|
206
|
+
},
|
|
207
|
+
"showInfo": {
|
|
208
|
+
"type": "string",
|
|
209
|
+
"mutable": false,
|
|
210
|
+
"complexType": {
|
|
211
|
+
"original": "\"time\" | \"size\" | \"none\"",
|
|
212
|
+
"resolved": "\"none\" | \"size\" | \"time\"",
|
|
213
|
+
"references": {}
|
|
214
|
+
},
|
|
215
|
+
"required": false,
|
|
216
|
+
"optional": false,
|
|
217
|
+
"docs": {
|
|
218
|
+
"tags": [],
|
|
219
|
+
"text": ""
|
|
220
|
+
},
|
|
221
|
+
"attribute": "show-info",
|
|
222
|
+
"reflect": false,
|
|
223
|
+
"defaultValue": "\"time\""
|
|
224
|
+
},
|
|
225
|
+
"errorMessage": {
|
|
226
|
+
"type": "string",
|
|
227
|
+
"mutable": false,
|
|
228
|
+
"complexType": {
|
|
229
|
+
"original": "string",
|
|
230
|
+
"resolved": "string | undefined",
|
|
231
|
+
"references": {}
|
|
232
|
+
},
|
|
233
|
+
"required": false,
|
|
234
|
+
"optional": true,
|
|
235
|
+
"docs": {
|
|
236
|
+
"tags": [],
|
|
237
|
+
"text": ""
|
|
238
|
+
},
|
|
239
|
+
"attribute": "error-message",
|
|
240
|
+
"reflect": false
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
}
|
|
244
|
+
static get states() {
|
|
245
|
+
return {
|
|
246
|
+
"isCondensed": {}
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
static get events() {
|
|
250
|
+
return [{
|
|
251
|
+
"method": "wmIntFilePreviewed",
|
|
252
|
+
"name": "wmIntFilePreviewed",
|
|
253
|
+
"bubbles": true,
|
|
254
|
+
"cancelable": true,
|
|
255
|
+
"composed": true,
|
|
256
|
+
"docs": {
|
|
257
|
+
"tags": [],
|
|
258
|
+
"text": ""
|
|
259
|
+
},
|
|
260
|
+
"complexType": {
|
|
261
|
+
"original": "string",
|
|
262
|
+
"resolved": "string",
|
|
263
|
+
"references": {}
|
|
264
|
+
}
|
|
265
|
+
}, {
|
|
266
|
+
"method": "wmIntFileDownloaded",
|
|
267
|
+
"name": "wmIntFileDownloaded",
|
|
268
|
+
"bubbles": true,
|
|
269
|
+
"cancelable": true,
|
|
270
|
+
"composed": true,
|
|
271
|
+
"docs": {
|
|
272
|
+
"tags": [],
|
|
273
|
+
"text": ""
|
|
274
|
+
},
|
|
275
|
+
"complexType": {
|
|
276
|
+
"original": "string",
|
|
277
|
+
"resolved": "string",
|
|
278
|
+
"references": {}
|
|
279
|
+
}
|
|
280
|
+
}, {
|
|
281
|
+
"method": "wmIntFileDeleted",
|
|
282
|
+
"name": "wmIntFileDeleted",
|
|
283
|
+
"bubbles": true,
|
|
284
|
+
"cancelable": true,
|
|
285
|
+
"composed": true,
|
|
286
|
+
"docs": {
|
|
287
|
+
"tags": [],
|
|
288
|
+
"text": ""
|
|
289
|
+
},
|
|
290
|
+
"complexType": {
|
|
291
|
+
"original": "string",
|
|
292
|
+
"resolved": "string",
|
|
293
|
+
"references": {}
|
|
294
|
+
}
|
|
295
|
+
}, {
|
|
296
|
+
"method": "wmFileClearErrorClicked",
|
|
297
|
+
"name": "wmFileClearErrorClicked",
|
|
298
|
+
"bubbles": true,
|
|
299
|
+
"cancelable": true,
|
|
300
|
+
"composed": true,
|
|
301
|
+
"docs": {
|
|
302
|
+
"tags": [],
|
|
303
|
+
"text": ""
|
|
304
|
+
},
|
|
305
|
+
"complexType": {
|
|
306
|
+
"original": "any",
|
|
307
|
+
"resolved": "any",
|
|
308
|
+
"references": {}
|
|
309
|
+
}
|
|
310
|
+
}];
|
|
311
|
+
}
|
|
312
|
+
static get elementRef() { return "el"; }
|
|
313
|
+
}
|