@watermarkinsights/ripple 3.27.0 → 3.27.1
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-b2e0cb4e.js → chartFunctions-42cfb4d3.js} +596 -596
- package/dist/cjs/{functions-9807717e.js → functions-85c3c557.js} +498 -498
- package/dist/cjs/{global-42a24725.js → global-9982752f.js} +72 -72
- package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
- package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
- package/dist/cjs/{intl-526c75ec.js → intl-1c36fe38.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 +189 -189
- 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 +186 -186
- 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 +134 -134
- package/dist/cjs/wm-tab-item_3.cjs.entry.js +264 -264
- package/dist/cjs/wm-tag-input-row.cjs.entry.js +14 -14
- package/dist/cjs/wm-tag-input.cjs.entry.js +948 -941
- package/dist/cjs/wm-timepicker.cjs.entry.js +385 -385
- package/dist/cjs/wm-toggletip.cjs.entry.js +120 -120
- 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 +486 -486
- 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 +119 -119
- 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 +362 -362
- 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 +267 -267
- 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.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.css +21 -17
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +1302 -1295
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +605 -605
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +243 -243
- 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 +541 -541
- 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-dd9eb9ac.js → chartFunctions-0b53b301.js} +596 -596
- package/dist/esm/{functions-f32b1ca4.js → functions-cbb19d50.js} +498 -498
- package/dist/esm/{global-7ee0d78d.js → global-2c7bbfe6.js} +72 -72
- package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
- package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
- package/dist/esm/{intl-d101e1a9.js → intl-ffbca53d.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 +189 -189
- 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 +186 -186
- 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 +134 -134
- package/dist/esm/wm-tab-item_3.entry.js +264 -264
- package/dist/esm/wm-tag-input-row.entry.js +14 -14
- package/dist/esm/wm-tag-input.entry.js +948 -941
- package/dist/esm/wm-timepicker.entry.js +385 -385
- package/dist/esm/wm-toggletip.entry.js +120 -120
- package/dist/esm/wm-uploader.entry.js +441 -441
- package/dist/esm/wm-wrapper.entry.js +12 -12
- package/dist/esm-es5/{chartFunctions-dd9eb9ac.js → chartFunctions-0b53b301.js} +1 -1
- package/dist/esm-es5/{global-7ee0d78d.js → global-2c7bbfe6.js} +1 -1
- package/dist/esm-es5/{intl-d101e1a9.js → intl-ffbca53d.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-725c14b0.system.entry.js → p-00022d17.system.entry.js} +1 -1
- package/dist/ripple/{p-b97de06f.system.entry.js → p-0450cdbe.system.entry.js} +1 -1
- package/dist/ripple/{p-bfe1062d.entry.js → p-05a17658.entry.js} +1 -1
- package/dist/ripple/p-0b6a7b77.system.entry.js +1 -0
- package/dist/ripple/{p-b6bf2866.entry.js → p-0e789be7.entry.js} +1 -1
- package/dist/ripple/{p-b617b64f.system.entry.js → p-15779c22.system.entry.js} +1 -1
- package/dist/ripple/{p-04faca6b.entry.js → p-17487f1b.entry.js} +1 -1
- package/dist/ripple/{p-122da0d1.system.entry.js → p-197c83de.system.entry.js} +1 -1
- package/dist/ripple/{p-11d98b00.system.entry.js → p-1bad4efe.system.entry.js} +1 -1
- package/dist/ripple/{p-252ba295.system.entry.js → p-2ff923ee.system.entry.js} +1 -1
- package/dist/ripple/{p-a6afe65a.entry.js → p-31712996.entry.js} +1 -1
- package/dist/ripple/{p-f69276d5.system.entry.js → p-31c18f5e.system.entry.js} +1 -1
- package/dist/ripple/{p-df28f438.system.js → p-32944b70.system.js} +1 -1
- package/dist/ripple/{p-73d277ba.system.entry.js → p-36effc40.system.entry.js} +1 -1
- package/dist/ripple/{p-0be94e77.entry.js → p-3807bcae.entry.js} +1 -1
- package/dist/ripple/{p-88d17f6b.system.entry.js → p-3aa48fad.system.entry.js} +1 -1
- package/dist/ripple/{p-82a97531.system.entry.js → p-419f133c.system.entry.js} +1 -1
- package/dist/ripple/{p-13ec8ac0.entry.js → p-438a1e8e.entry.js} +1 -1
- package/dist/ripple/{p-19689aac.js → p-4698b365.js} +1 -1
- package/dist/ripple/{p-f8d45250.system.entry.js → p-54086f7b.system.entry.js} +1 -1
- package/dist/ripple/{p-47f53321.entry.js → p-5497694c.entry.js} +1 -1
- package/dist/ripple/{p-fb370a69.entry.js → p-58fbf116.entry.js} +1 -1
- package/dist/ripple/{p-14dfc4e7.entry.js → p-65a741c1.entry.js} +1 -1
- package/dist/ripple/{p-ac63b3aa.entry.js → p-7e74274b.entry.js} +1 -1
- package/dist/ripple/{p-81752607.system.js → p-81ad3fe5.system.js} +1 -1
- package/dist/ripple/{p-f3e42327.system.entry.js → p-89db9c27.system.entry.js} +1 -1
- package/dist/ripple/{p-4753fbfc.system.entry.js → p-947f01e2.system.entry.js} +1 -1
- package/dist/ripple/{p-3aee75e7.entry.js → p-978429f9.entry.js} +1 -1
- package/dist/ripple/{p-2c8fd902.system.entry.js → p-97d5b4bd.system.entry.js} +1 -1
- package/dist/ripple/{p-67c0ad56.system.entry.js → p-9d6a574b.system.entry.js} +1 -1
- package/dist/ripple/{p-c545fe1c.entry.js → p-a3ba2bdd.entry.js} +1 -1
- package/dist/ripple/{p-c7567fd3.entry.js → p-a42f5231.entry.js} +1 -1
- package/dist/ripple/p-a51aec3f.entry.js +1 -0
- package/dist/ripple/{p-b831988d.entry.js → p-a5b86b47.entry.js} +1 -1
- package/dist/ripple/{p-4cadf985.entry.js → p-a90b8a08.entry.js} +1 -1
- package/dist/ripple/{p-d9b66dca.system.entry.js → p-aabe172c.system.entry.js} +1 -1
- package/dist/ripple/{p-69121ad1.entry.js → p-ab2a0aee.entry.js} +1 -1
- package/dist/ripple/{p-5fb0aa58.js → p-aed93a25.js} +1 -1
- package/dist/ripple/{p-f39ee84b.entry.js → p-b2d75e7d.entry.js} +1 -1
- package/dist/ripple/{p-19b897ce.js → p-b410c675.js} +1 -1
- package/dist/ripple/{p-4809e419.system.entry.js → p-b6f558f7.system.entry.js} +1 -1
- package/dist/ripple/p-bb048fe7.entry.js +1 -0
- package/dist/ripple/{p-2805fed6.system.entry.js → p-bced37cf.system.entry.js} +1 -1
- package/dist/ripple/{p-c9a1834d.system.entry.js → p-bd0c1e7c.system.entry.js} +1 -1
- package/dist/ripple/{p-89f1991f.entry.js → p-c0e183f4.entry.js} +1 -1
- package/dist/ripple/{p-7eca18bd.system.entry.js → p-c27eda00.system.entry.js} +1 -1
- package/dist/ripple/{p-894bc6c4.system.entry.js → p-cd3e0b8b.system.entry.js} +1 -1
- package/dist/ripple/{p-f6b2e4ac.system.js → p-d1af63b5.system.js} +1 -1
- package/dist/ripple/{p-30572b71.system.js → p-d41ba263.system.js} +1 -1
- package/dist/ripple/{p-db7e6e89.entry.js → p-d8993992.entry.js} +1 -1
- package/dist/ripple/{p-f13b239c.system.entry.js → p-da525ed1.system.entry.js} +1 -1
- package/dist/ripple/{p-33af1eee.entry.js → p-e6f46289.entry.js} +1 -1
- package/dist/ripple/{p-e928f350.entry.js → p-fc967b2c.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 +44 -44
- 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 +16 -16
- 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 +30 -30
- 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 +137 -136
- package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +62 -62
- package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +25 -25
- 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 +40 -40
- 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/ripple/p-37de8e2f.entry.js +0 -1
- package/dist/ripple/p-b378e064.system.entry.js +0 -1
- package/dist/ripple/p-d2037549.entry.js +0 -1
- /package/dist/esm-es5/{functions-f32b1ca4.js → functions-cbb19d50.js} +0 -0
- /package/dist/esm-es5/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +0 -0
- /package/dist/esm-es5/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +0 -0
- /package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
- /package/dist/ripple/{p-cfa80f5b.js → p-91480a89.js} +0 -0
- /package/dist/ripple/{p-313b6073.system.js → p-9d02957d.system.js} +0 -0
- /package/dist/ripple/{p-9eb5a71e.system.js → p-b267e710.system.js} +0 -0
- /package/dist/ripple/{p-08b7ec08.system.js → p-f5df5903.system.js} +0 -0
- /package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
|
@@ -1,279 +1,279 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-e887b1ce.js';
|
|
2
|
-
import { d as debounce, g as generateId } from './functions-
|
|
2
|
+
import { d as debounce, g as generateId } from './functions-cbb19d50.js';
|
|
3
3
|
|
|
4
4
|
const wmTabItemCss = ":host{font-family:inherit;display:inline-block}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host.hide{display:none}";
|
|
5
5
|
|
|
6
|
-
const TabItem = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
|
|
10
|
-
this.tabSelected = createEvent(this, "tabSelected", 7);
|
|
11
|
-
this.keydownOnTabItem = createEvent(this, "keydownOnTabItem", 7);
|
|
12
|
-
this.tabItemLoaded = createEvent(this, "tabItemLoaded", 7);
|
|
13
|
-
this.tabClicked = (ev) => {
|
|
14
|
-
ev.preventDefault();
|
|
15
|
-
this.wmTabSelected.emit({ tabId: this.tabId });
|
|
16
|
-
this.tabSelected.emit({ tabId: this.tabId }); // deprecated
|
|
17
|
-
};
|
|
18
|
-
this.tabPressed = (ev) => {
|
|
19
|
-
const key = ev.key;
|
|
20
|
-
if (key === "Enter" || key === " ") {
|
|
21
|
-
ev.preventDefault();
|
|
22
|
-
this.wmTabSelected.emit({ tabId: this.tabId });
|
|
23
|
-
this.tabSelected.emit({ tabId: this.tabId }); // deprecated
|
|
24
|
-
}
|
|
25
|
-
else if (key.includes("Arrow")) {
|
|
26
|
-
ev.preventDefault();
|
|
27
|
-
this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
this.selected = false;
|
|
31
|
-
this.show = true;
|
|
32
|
-
this.tabId = "";
|
|
33
|
-
}
|
|
34
|
-
get parentTabList() {
|
|
35
|
-
return this.el.parentElement;
|
|
36
|
-
}
|
|
37
|
-
toggleTabbingOn() {
|
|
38
|
-
this.linkEl && this.linkEl.classList.add("user-is-tabbing");
|
|
39
|
-
}
|
|
40
|
-
toggleTabbingOff() {
|
|
41
|
-
this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
|
|
42
|
-
}
|
|
43
|
-
componentDidLoad() {
|
|
44
|
-
this.tabItemLoaded.emit();
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
let classes = this.show ? "" : "hide ";
|
|
48
|
-
classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
|
|
49
|
-
let styles = {};
|
|
50
|
-
const padding = this.parentTabList && this.parentTabList.customPadding;
|
|
51
|
-
if (padding) {
|
|
52
|
-
const bkgSize = parseInt(padding, 10) * 2 || 0;
|
|
53
|
-
const units = padding.split(/([0-9]+)/).pop();
|
|
54
|
-
styles = {
|
|
55
|
-
"padding-left": this.parentTabList.customPadding,
|
|
56
|
-
"padding-right": this.parentTabList.customPadding,
|
|
57
|
-
"background-size": `calc(100% - ${bkgSize}${units}) 3px`,
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
|
|
61
|
-
}
|
|
62
|
-
static get delegatesFocus() { return true; }
|
|
63
|
-
get el() { return getElement(this); }
|
|
64
|
-
};
|
|
6
|
+
const TabItem = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
|
|
10
|
+
this.tabSelected = createEvent(this, "tabSelected", 7);
|
|
11
|
+
this.keydownOnTabItem = createEvent(this, "keydownOnTabItem", 7);
|
|
12
|
+
this.tabItemLoaded = createEvent(this, "tabItemLoaded", 7);
|
|
13
|
+
this.tabClicked = (ev) => {
|
|
14
|
+
ev.preventDefault();
|
|
15
|
+
this.wmTabSelected.emit({ tabId: this.tabId });
|
|
16
|
+
this.tabSelected.emit({ tabId: this.tabId }); // deprecated
|
|
17
|
+
};
|
|
18
|
+
this.tabPressed = (ev) => {
|
|
19
|
+
const key = ev.key;
|
|
20
|
+
if (key === "Enter" || key === " ") {
|
|
21
|
+
ev.preventDefault();
|
|
22
|
+
this.wmTabSelected.emit({ tabId: this.tabId });
|
|
23
|
+
this.tabSelected.emit({ tabId: this.tabId }); // deprecated
|
|
24
|
+
}
|
|
25
|
+
else if (key.includes("Arrow")) {
|
|
26
|
+
ev.preventDefault();
|
|
27
|
+
this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
this.selected = false;
|
|
31
|
+
this.show = true;
|
|
32
|
+
this.tabId = "";
|
|
33
|
+
}
|
|
34
|
+
get parentTabList() {
|
|
35
|
+
return this.el.parentElement;
|
|
36
|
+
}
|
|
37
|
+
toggleTabbingOn() {
|
|
38
|
+
this.linkEl && this.linkEl.classList.add("user-is-tabbing");
|
|
39
|
+
}
|
|
40
|
+
toggleTabbingOff() {
|
|
41
|
+
this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
|
|
42
|
+
}
|
|
43
|
+
componentDidLoad() {
|
|
44
|
+
this.tabItemLoaded.emit();
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
let classes = this.show ? "" : "hide ";
|
|
48
|
+
classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
|
|
49
|
+
let styles = {};
|
|
50
|
+
const padding = this.parentTabList && this.parentTabList.customPadding;
|
|
51
|
+
if (padding) {
|
|
52
|
+
const bkgSize = parseInt(padding, 10) * 2 || 0;
|
|
53
|
+
const units = padding.split(/([0-9]+)/).pop();
|
|
54
|
+
styles = {
|
|
55
|
+
"padding-left": this.parentTabList.customPadding,
|
|
56
|
+
"padding-right": this.parentTabList.customPadding,
|
|
57
|
+
"background-size": `calc(100% - ${bkgSize}${units}) 3px`,
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
|
|
61
|
+
}
|
|
62
|
+
static get delegatesFocus() { return true; }
|
|
63
|
+
get el() { return getElement(this); }
|
|
64
|
+
};
|
|
65
65
|
TabItem.style = wmTabItemCss;
|
|
66
66
|
|
|
67
67
|
const wmTabListCss = ":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host *,wm-tab-list *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";
|
|
68
68
|
|
|
69
|
-
const TabList = class {
|
|
70
|
-
constructor(hostRef) {
|
|
71
|
-
registerInstance(this, hostRef);
|
|
72
|
-
this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
|
|
73
|
-
this.tabSelected = createEvent(this, "tabSelected", 7);
|
|
74
|
-
this.debouncedSetLayout = debounce(() => {
|
|
75
|
-
if (!this.listWidth) {
|
|
76
|
-
this.setListWidth();
|
|
77
|
-
}
|
|
78
|
-
forceUpdate(this.el);
|
|
79
|
-
}, 250);
|
|
80
|
-
this.customBackground = undefined;
|
|
81
|
-
this.customPadding = undefined;
|
|
82
|
-
this.selectedTab = undefined;
|
|
83
|
-
this.controllerEnabled = false;
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Set to true when the tab list exceeds the parent width. Component will render the menu layout.
|
|
87
|
-
*/
|
|
88
|
-
get menuLayout() {
|
|
89
|
-
if (this.listWidth) {
|
|
90
|
-
return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
return false; // in case listWidth couldn't get computed, we render regular tabs
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
get tabItems() {
|
|
97
|
-
return Array.from(this.el.querySelectorAll("wm-tab-item"));
|
|
98
|
-
}
|
|
99
|
-
get selectedTabItem() {
|
|
100
|
-
return this.tabItems.filter((t) => t.selected)[0];
|
|
101
|
-
}
|
|
102
|
-
getLinkEl(tab) {
|
|
103
|
-
return tab.shadowRoot.querySelector("a");
|
|
104
|
-
}
|
|
105
|
-
get panels() {
|
|
106
|
-
const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
|
|
107
|
-
const tabIds = this.tabItems.map((t) => t.tabId);
|
|
108
|
-
return allPanels.filter((p) => tabIds.includes(p.tabId));
|
|
109
|
-
}
|
|
110
|
-
getPanel(tabId) {
|
|
111
|
-
return this.panels.find((p) => p.tabId === tabId);
|
|
112
|
-
}
|
|
113
|
-
setListWidth() {
|
|
114
|
-
let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
|
|
115
|
-
this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
|
|
116
|
-
}
|
|
117
|
-
setSelected(id) {
|
|
118
|
-
this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
|
|
119
|
-
const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
|
|
120
|
-
if (singlePanel) {
|
|
121
|
-
/**
|
|
122
|
-
* If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
|
|
123
|
-
*/
|
|
124
|
-
this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
|
|
125
|
-
this.panels[0].active = true;
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
this.panels.map((panel) => (panel.active = panel.tabId === id));
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
showItems() {
|
|
132
|
-
this.tabItems.map((t) => (t.show = true));
|
|
133
|
-
}
|
|
134
|
-
hideItems() {
|
|
135
|
-
this.tabItems.map((t) => (t.show = false));
|
|
136
|
-
}
|
|
137
|
-
componentWillLoad() {
|
|
138
|
-
this.el.focus = () => {
|
|
139
|
-
// in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item
|
|
140
|
-
this.selectedTabItem && this.selectedTabItem.focus();
|
|
141
|
-
};
|
|
142
|
-
}
|
|
143
|
-
componentDidLoad() {
|
|
144
|
-
this.setLayout(); // this require measurements of DOM elements so can't be done before first paint
|
|
145
|
-
const selectedTab = this.selectedTab || this.tabItems[0].tabId;
|
|
146
|
-
this.setSelected(selectedTab);
|
|
147
|
-
}
|
|
148
|
-
tabItemLoaded(ev) {
|
|
149
|
-
this.setAriaOnPanelAndTab(ev.target);
|
|
150
|
-
}
|
|
151
|
-
setAriaOnPanelAndTab(tab) {
|
|
152
|
-
const panel = this.getPanel(tab.tabId);
|
|
153
|
-
// If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
|
|
154
|
-
if (!panel) {
|
|
155
|
-
if (this.panels.length === 1) {
|
|
156
|
-
this.setAttributesOnTab(tab, this.panels[0]);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
else {
|
|
160
|
-
// Otherwise, set attributes on each tab item that loads and its associated panel
|
|
161
|
-
this.setAttributesOnPanel(panel, tab);
|
|
162
|
-
this.setAttributesOnTab(tab, panel);
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
setAttributesOnTab(tab, panel) {
|
|
166
|
-
const link = this.getLinkEl(tab);
|
|
167
|
-
if (link) {
|
|
168
|
-
link.setAttribute("aria-controls", panel.id);
|
|
169
|
-
link.setAttribute("href", `#${panel.id}`);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
removeAttributesOnTab(tab) {
|
|
173
|
-
const link = this.getLinkEl(tab);
|
|
174
|
-
if (link) {
|
|
175
|
-
link.removeAttribute("aria-controls");
|
|
176
|
-
link.removeAttribute("href");
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
setAttributesOnPanel(panel, tab) {
|
|
180
|
-
const link = this.getLinkEl(tab);
|
|
181
|
-
if (link) {
|
|
182
|
-
panel.setAttribute("aria-labelledby", link.id);
|
|
183
|
-
panel.setAttribute("tab-id", tab.tabId);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
handleTabSelected(ev) {
|
|
187
|
-
if (this.controllerEnabled) {
|
|
188
|
-
this.setSelected(ev.detail.tabId);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
handleKeydown(ev) {
|
|
192
|
-
const key = ev.detail.key;
|
|
193
|
-
const index = this.tabItems.indexOf(ev.detail.tabItem);
|
|
194
|
-
if (key === "ArrowLeft" || key === "ArrowRight") {
|
|
195
|
-
this.handleLeftRightArrow(index, key);
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
handleLeftRightArrow(index, key) {
|
|
199
|
-
if (key) {
|
|
200
|
-
index = key === "ArrowLeft" ? index - 1 : index + 1;
|
|
201
|
-
}
|
|
202
|
-
if (index < 0) {
|
|
203
|
-
index = this.tabItems.length - 1;
|
|
204
|
-
}
|
|
205
|
-
else if (index === this.tabItems.length) {
|
|
206
|
-
index = 0;
|
|
207
|
-
}
|
|
208
|
-
const tabToFocus = this.tabItems[index];
|
|
209
|
-
this.getLinkEl(tabToFocus).focus();
|
|
210
|
-
}
|
|
211
|
-
/**
|
|
212
|
-
* Change layout if parent size drops below tab list width
|
|
213
|
-
*/
|
|
214
|
-
setLayout() {
|
|
215
|
-
this.debouncedSetLayout();
|
|
216
|
-
}
|
|
217
|
-
renderMenuOrTabs() {
|
|
218
|
-
if (this.menuLayout) {
|
|
219
|
-
this.hideItems();
|
|
220
|
-
return (h("wm-select", { label: "Tab Selection", "label-position": "none" }, this.renderOptions()));
|
|
221
|
-
}
|
|
222
|
-
else {
|
|
223
|
-
this.showItems();
|
|
224
|
-
let margins = {};
|
|
225
|
-
if (this.customPadding) {
|
|
226
|
-
margins = {
|
|
227
|
-
"margin-left": "-" + this.customPadding,
|
|
228
|
-
};
|
|
229
|
-
}
|
|
230
|
-
return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, h("slot", null)));
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
renderOptions() {
|
|
234
|
-
return this.tabItems.map((t) => (h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
|
|
235
|
-
ev.preventDefault();
|
|
236
|
-
this.wmTabSelected.emit({ tabId: t.tabId });
|
|
237
|
-
this.tabSelected.emit({ tabId: t.tabId }); // deprecated
|
|
238
|
-
} }, t.textContent)));
|
|
239
|
-
}
|
|
240
|
-
render() {
|
|
241
|
-
return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
|
|
242
|
-
}
|
|
243
|
-
static get delegatesFocus() { return true; }
|
|
244
|
-
get el() { return getElement(this); }
|
|
245
|
-
static get watchers() { return {
|
|
246
|
-
"selectedTab": ["setSelected"]
|
|
247
|
-
}; }
|
|
248
|
-
};
|
|
69
|
+
const TabList = class {
|
|
70
|
+
constructor(hostRef) {
|
|
71
|
+
registerInstance(this, hostRef);
|
|
72
|
+
this.wmTabSelected = createEvent(this, "wmTabSelected", 7);
|
|
73
|
+
this.tabSelected = createEvent(this, "tabSelected", 7);
|
|
74
|
+
this.debouncedSetLayout = debounce(() => {
|
|
75
|
+
if (!this.listWidth) {
|
|
76
|
+
this.setListWidth();
|
|
77
|
+
}
|
|
78
|
+
forceUpdate(this.el);
|
|
79
|
+
}, 250);
|
|
80
|
+
this.customBackground = undefined;
|
|
81
|
+
this.customPadding = undefined;
|
|
82
|
+
this.selectedTab = undefined;
|
|
83
|
+
this.controllerEnabled = false;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Set to true when the tab list exceeds the parent width. Component will render the menu layout.
|
|
87
|
+
*/
|
|
88
|
+
get menuLayout() {
|
|
89
|
+
if (this.listWidth) {
|
|
90
|
+
return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
return false; // in case listWidth couldn't get computed, we render regular tabs
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
get tabItems() {
|
|
97
|
+
return Array.from(this.el.querySelectorAll("wm-tab-item"));
|
|
98
|
+
}
|
|
99
|
+
get selectedTabItem() {
|
|
100
|
+
return this.tabItems.filter((t) => t.selected)[0];
|
|
101
|
+
}
|
|
102
|
+
getLinkEl(tab) {
|
|
103
|
+
return tab.shadowRoot.querySelector("a");
|
|
104
|
+
}
|
|
105
|
+
get panels() {
|
|
106
|
+
const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
|
|
107
|
+
const tabIds = this.tabItems.map((t) => t.tabId);
|
|
108
|
+
return allPanels.filter((p) => tabIds.includes(p.tabId));
|
|
109
|
+
}
|
|
110
|
+
getPanel(tabId) {
|
|
111
|
+
return this.panels.find((p) => p.tabId === tabId);
|
|
112
|
+
}
|
|
113
|
+
setListWidth() {
|
|
114
|
+
let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
|
|
115
|
+
this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
|
|
116
|
+
}
|
|
117
|
+
setSelected(id) {
|
|
118
|
+
this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
|
|
119
|
+
const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
|
|
120
|
+
if (singlePanel) {
|
|
121
|
+
/**
|
|
122
|
+
* If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
|
|
123
|
+
*/
|
|
124
|
+
this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
|
|
125
|
+
this.panels[0].active = true;
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
this.panels.map((panel) => (panel.active = panel.tabId === id));
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
showItems() {
|
|
132
|
+
this.tabItems.map((t) => (t.show = true));
|
|
133
|
+
}
|
|
134
|
+
hideItems() {
|
|
135
|
+
this.tabItems.map((t) => (t.show = false));
|
|
136
|
+
}
|
|
137
|
+
componentWillLoad() {
|
|
138
|
+
this.el.focus = () => {
|
|
139
|
+
// in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item
|
|
140
|
+
this.selectedTabItem && this.selectedTabItem.focus();
|
|
141
|
+
};
|
|
142
|
+
}
|
|
143
|
+
componentDidLoad() {
|
|
144
|
+
this.setLayout(); // this require measurements of DOM elements so can't be done before first paint
|
|
145
|
+
const selectedTab = this.selectedTab || this.tabItems[0].tabId;
|
|
146
|
+
this.setSelected(selectedTab);
|
|
147
|
+
}
|
|
148
|
+
tabItemLoaded(ev) {
|
|
149
|
+
this.setAriaOnPanelAndTab(ev.target);
|
|
150
|
+
}
|
|
151
|
+
setAriaOnPanelAndTab(tab) {
|
|
152
|
+
const panel = this.getPanel(tab.tabId);
|
|
153
|
+
// If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
|
|
154
|
+
if (!panel) {
|
|
155
|
+
if (this.panels.length === 1) {
|
|
156
|
+
this.setAttributesOnTab(tab, this.panels[0]);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
else {
|
|
160
|
+
// Otherwise, set attributes on each tab item that loads and its associated panel
|
|
161
|
+
this.setAttributesOnPanel(panel, tab);
|
|
162
|
+
this.setAttributesOnTab(tab, panel);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
setAttributesOnTab(tab, panel) {
|
|
166
|
+
const link = this.getLinkEl(tab);
|
|
167
|
+
if (link) {
|
|
168
|
+
link.setAttribute("aria-controls", panel.id);
|
|
169
|
+
link.setAttribute("href", `#${panel.id}`);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
removeAttributesOnTab(tab) {
|
|
173
|
+
const link = this.getLinkEl(tab);
|
|
174
|
+
if (link) {
|
|
175
|
+
link.removeAttribute("aria-controls");
|
|
176
|
+
link.removeAttribute("href");
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
setAttributesOnPanel(panel, tab) {
|
|
180
|
+
const link = this.getLinkEl(tab);
|
|
181
|
+
if (link) {
|
|
182
|
+
panel.setAttribute("aria-labelledby", link.id);
|
|
183
|
+
panel.setAttribute("tab-id", tab.tabId);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
handleTabSelected(ev) {
|
|
187
|
+
if (this.controllerEnabled) {
|
|
188
|
+
this.setSelected(ev.detail.tabId);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
handleKeydown(ev) {
|
|
192
|
+
const key = ev.detail.key;
|
|
193
|
+
const index = this.tabItems.indexOf(ev.detail.tabItem);
|
|
194
|
+
if (key === "ArrowLeft" || key === "ArrowRight") {
|
|
195
|
+
this.handleLeftRightArrow(index, key);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
handleLeftRightArrow(index, key) {
|
|
199
|
+
if (key) {
|
|
200
|
+
index = key === "ArrowLeft" ? index - 1 : index + 1;
|
|
201
|
+
}
|
|
202
|
+
if (index < 0) {
|
|
203
|
+
index = this.tabItems.length - 1;
|
|
204
|
+
}
|
|
205
|
+
else if (index === this.tabItems.length) {
|
|
206
|
+
index = 0;
|
|
207
|
+
}
|
|
208
|
+
const tabToFocus = this.tabItems[index];
|
|
209
|
+
this.getLinkEl(tabToFocus).focus();
|
|
210
|
+
}
|
|
211
|
+
/**
|
|
212
|
+
* Change layout if parent size drops below tab list width
|
|
213
|
+
*/
|
|
214
|
+
setLayout() {
|
|
215
|
+
this.debouncedSetLayout();
|
|
216
|
+
}
|
|
217
|
+
renderMenuOrTabs() {
|
|
218
|
+
if (this.menuLayout) {
|
|
219
|
+
this.hideItems();
|
|
220
|
+
return (h("wm-select", { label: "Tab Selection", "label-position": "none" }, this.renderOptions()));
|
|
221
|
+
}
|
|
222
|
+
else {
|
|
223
|
+
this.showItems();
|
|
224
|
+
let margins = {};
|
|
225
|
+
if (this.customPadding) {
|
|
226
|
+
margins = {
|
|
227
|
+
"margin-left": "-" + this.customPadding,
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, h("slot", null)));
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
renderOptions() {
|
|
234
|
+
return this.tabItems.map((t) => (h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
|
|
235
|
+
ev.preventDefault();
|
|
236
|
+
this.wmTabSelected.emit({ tabId: t.tabId });
|
|
237
|
+
this.tabSelected.emit({ tabId: t.tabId }); // deprecated
|
|
238
|
+
} }, t.textContent)));
|
|
239
|
+
}
|
|
240
|
+
render() {
|
|
241
|
+
return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
|
|
242
|
+
}
|
|
243
|
+
static get delegatesFocus() { return true; }
|
|
244
|
+
get el() { return getElement(this); }
|
|
245
|
+
static get watchers() { return {
|
|
246
|
+
"selectedTab": ["setSelected"]
|
|
247
|
+
}; }
|
|
248
|
+
};
|
|
249
249
|
TabList.style = wmTabListCss;
|
|
250
250
|
|
|
251
251
|
const wmTabPanelCss = "wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";
|
|
252
252
|
|
|
253
|
-
const TabPanel = class {
|
|
254
|
-
constructor(hostRef) {
|
|
255
|
-
registerInstance(this, hostRef);
|
|
256
|
-
this.tabPanelLoaded = createEvent(this, "tabPanelLoaded", 7);
|
|
257
|
-
this.active = false;
|
|
258
|
-
this.tabId = "";
|
|
259
|
-
}
|
|
260
|
-
componentWillLoad() {
|
|
261
|
-
!this.el.id && this.el.setAttribute("id", generateId());
|
|
262
|
-
}
|
|
263
|
-
componentDidLoad() {
|
|
264
|
-
this.tabPanelLoaded.emit({ tabId: this.tabId });
|
|
265
|
-
}
|
|
266
|
-
toggleTabbingOn() {
|
|
267
|
-
this.el.classList.add("user-is-tabbing");
|
|
268
|
-
}
|
|
269
|
-
toggleTabbingOff() {
|
|
270
|
-
this.el.classList.remove("user-is-tabbing");
|
|
271
|
-
}
|
|
272
|
-
render() {
|
|
273
|
-
return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
|
|
274
|
-
}
|
|
275
|
-
get el() { return getElement(this); }
|
|
276
|
-
};
|
|
253
|
+
const TabPanel = class {
|
|
254
|
+
constructor(hostRef) {
|
|
255
|
+
registerInstance(this, hostRef);
|
|
256
|
+
this.tabPanelLoaded = createEvent(this, "tabPanelLoaded", 7);
|
|
257
|
+
this.active = false;
|
|
258
|
+
this.tabId = "";
|
|
259
|
+
}
|
|
260
|
+
componentWillLoad() {
|
|
261
|
+
!this.el.id && this.el.setAttribute("id", generateId());
|
|
262
|
+
}
|
|
263
|
+
componentDidLoad() {
|
|
264
|
+
this.tabPanelLoaded.emit({ tabId: this.tabId });
|
|
265
|
+
}
|
|
266
|
+
toggleTabbingOn() {
|
|
267
|
+
this.el.classList.add("user-is-tabbing");
|
|
268
|
+
}
|
|
269
|
+
toggleTabbingOff() {
|
|
270
|
+
this.el.classList.remove("user-is-tabbing");
|
|
271
|
+
}
|
|
272
|
+
render() {
|
|
273
|
+
return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
|
|
274
|
+
}
|
|
275
|
+
get el() { return getElement(this); }
|
|
276
|
+
};
|
|
277
277
|
TabPanel.style = wmTabPanelCss;
|
|
278
278
|
|
|
279
279
|
export { TabItem as wm_tab_item, TabList as wm_tab_list, TabPanel as wm_tab_panel };
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, g as getElement } from './index-e887b1ce.js';
|
|
2
2
|
|
|
3
|
-
const TagInputRow = class {
|
|
4
|
-
constructor(hostRef) {
|
|
5
|
-
registerInstance(this, hostRef);
|
|
6
|
-
this.wmTagInputRowUpdated = createEvent(this, "wmTagInputRowUpdated", 7);
|
|
7
|
-
this.col1 = undefined;
|
|
8
|
-
this.col2 = undefined;
|
|
9
|
-
this.col3 = undefined;
|
|
10
|
-
this.col4 = undefined;
|
|
11
|
-
this.locked = false;
|
|
12
|
-
}
|
|
13
|
-
componentDidUpdate() {
|
|
14
|
-
this.wmTagInputRowUpdated.emit();
|
|
15
|
-
}
|
|
16
|
-
get el() { return getElement(this); }
|
|
3
|
+
const TagInputRow = class {
|
|
4
|
+
constructor(hostRef) {
|
|
5
|
+
registerInstance(this, hostRef);
|
|
6
|
+
this.wmTagInputRowUpdated = createEvent(this, "wmTagInputRowUpdated", 7);
|
|
7
|
+
this.col1 = undefined;
|
|
8
|
+
this.col2 = undefined;
|
|
9
|
+
this.col3 = undefined;
|
|
10
|
+
this.col4 = undefined;
|
|
11
|
+
this.locked = false;
|
|
12
|
+
}
|
|
13
|
+
componentDidUpdate() {
|
|
14
|
+
this.wmTagInputRowUpdated.emit();
|
|
15
|
+
}
|
|
16
|
+
get el() { return getElement(this); }
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
export { TagInputRow as wm_tag_input_row };
|