@beeq/core 1.3.3 → 1.4.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/dist/beeq/beeq.esm.js +1 -1
- package/dist/beeq/beeq.esm.js.map +1 -1
- package/dist/beeq/{p-28a9a23d.entry.js → p-02c15c4b.entry.js} +2 -2
- package/dist/beeq/{p-2f7137e0.entry.js → p-0628de9f.entry.js} +2 -2
- package/dist/beeq/{p-cbca544b.entry.js → p-1a7d3fbe.entry.js} +2 -2
- package/dist/beeq/p-299455bd.js +7 -0
- package/dist/beeq/p-299455bd.js.map +1 -0
- package/dist/beeq/{p-32134085.entry.js → p-3c4fbdd7.entry.js} +2 -2
- package/dist/beeq/p-3ddd1c36.entry.js +6 -0
- package/dist/beeq/p-3ddd1c36.entry.js.map +1 -0
- package/dist/beeq/{p-c14e94e0.entry.js → p-3e4c9374.entry.js} +2 -2
- package/dist/beeq/{p-7d3c9c9a.entry.js → p-4ba46a90.entry.js} +2 -2
- package/dist/beeq/{p-7d3c9c9a.entry.js.map → p-4ba46a90.entry.js.map} +1 -1
- package/dist/beeq/{p-d58a7c27.entry.js → p-54c58ae3.entry.js} +2 -2
- package/dist/beeq/{p-ada3ca0a.entry.js → p-5ca47d1e.entry.js} +2 -2
- package/dist/beeq/{p-c893951f.entry.js → p-61ada51d.entry.js} +2 -2
- package/dist/beeq/{p-6c1ddc44.entry.js → p-64f8af01.entry.js} +2 -2
- package/dist/beeq/{p-354f52d1.entry.js → p-68aaabee.entry.js} +2 -2
- package/dist/beeq/p-6a9bb294.entry.js +6 -0
- package/dist/beeq/p-6a9bb294.entry.js.map +1 -0
- package/dist/beeq/{p-ab632829.entry.js → p-741c4780.entry.js} +2 -2
- package/dist/beeq/{p-6d5d2460.entry.js → p-7b5e46cb.entry.js} +2 -2
- package/dist/beeq/{p-8593ad98.entry.js → p-7bf832f5.entry.js} +2 -2
- package/dist/beeq/{p-981797b1.entry.js → p-7fbceff7.entry.js} +2 -2
- package/dist/beeq/p-8343145d.entry.js +6 -0
- package/dist/beeq/p-8343145d.entry.js.map +1 -0
- package/dist/beeq/{p-1f370b12.entry.js → p-8cd96f23.entry.js} +2 -2
- package/dist/beeq/{p-e2b64861.entry.js → p-900b24fc.entry.js} +2 -2
- package/dist/beeq/{p-1c789890.entry.js → p-93e38159.entry.js} +2 -2
- package/dist/beeq/{p-51603d69.entry.js → p-9d4b982c.entry.js} +2 -2
- package/dist/beeq/{p-d27ad8a0.entry.js → p-bd15cc60.entry.js} +2 -2
- package/dist/beeq/p-c0692037.entry.js +6 -0
- package/dist/beeq/p-c0692037.entry.js.map +1 -0
- package/dist/beeq/{p-852c54d8.entry.js → p-c09305af.entry.js} +2 -2
- package/dist/beeq/{p-81a34a07.entry.js → p-c435eb9d.entry.js} +2 -2
- package/dist/beeq/{p-de827971.entry.js → p-c63164ef.entry.js} +2 -2
- package/dist/beeq/{p-a30ba2bd.entry.js → p-c6c2ce93.entry.js} +2 -2
- package/dist/beeq/{p-bb8f8b78.entry.js → p-c98276b3.entry.js} +2 -2
- package/dist/beeq/{p-31472c1f.entry.js → p-d29eef16.entry.js} +2 -2
- package/dist/beeq/{p-0af526fc.entry.js → p-d5dcd933.entry.js} +2 -2
- package/dist/beeq/p-d871936d.entry.js +6 -0
- package/dist/beeq/p-d871936d.entry.js.map +1 -0
- package/dist/beeq/{p-0b6e3137.entry.js → p-d969800e.entry.js} +2 -2
- package/dist/beeq/{p-e67a6252.entry.js → p-d97d4712.entry.js} +2 -2
- package/dist/beeq/{p-d11fafe0.entry.js → p-dafa2581.entry.js} +2 -2
- package/dist/beeq/{p-8b57cd5e.entry.js → p-e068ede6.entry.js} +2 -2
- package/dist/beeq/{p-42c5530c.entry.js → p-e1162d1c.entry.js} +2 -2
- package/dist/beeq/p-e2c645ae.js +6 -0
- package/dist/beeq/p-e2c645ae.js.map +1 -0
- package/dist/beeq/{p-36eb59f9.entry.js → p-f4b40086.entry.js} +2 -2
- package/dist/cjs/app-globals-eca46908.js +1122 -0
- package/dist/cjs/app-globals-eca46908.js.map +1 -0
- package/dist/cjs/beeq.cjs.js +4 -4
- package/dist/cjs/beeq.cjs.js.map +1 -1
- package/dist/cjs/bq-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/bq-accordion.cjs.entry.js +1 -1
- package/dist/cjs/bq-alert.cjs.entry.js +1 -1
- package/dist/cjs/bq-avatar.cjs.entry.js +1 -1
- package/dist/cjs/bq-badge.cjs.entry.js +1 -1
- package/dist/cjs/bq-breadcrumb-item.cjs.entry.js +1 -1
- package/dist/cjs/bq-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/bq-button_2.cjs.entry.js +307 -0
- package/dist/cjs/bq-button_2.cjs.entry.js.map +1 -0
- package/dist/cjs/bq-card.cjs.entry.js +1 -1
- package/dist/cjs/bq-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/bq-date-picker.cjs.entry.js +260 -0
- package/dist/cjs/bq-date-picker.cjs.entry.js.map +1 -0
- package/dist/cjs/bq-dialog.cjs.entry.js +4 -4
- package/dist/cjs/bq-divider.cjs.entry.js +3 -3
- package/dist/cjs/bq-drawer.cjs.entry.js +6 -6
- package/dist/cjs/bq-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/{bq-panel.cjs.entry.js → bq-dropdown_2.cjs.entry.js} +108 -3
- package/dist/cjs/bq-dropdown_2.cjs.entry.js.map +1 -0
- package/dist/cjs/bq-empty-state.cjs.entry.js +5 -5
- package/dist/cjs/bq-input.cjs.entry.js +5 -5
- package/dist/cjs/bq-notification.cjs.entry.js +3 -3
- package/dist/cjs/bq-option-group.cjs.entry.js +2 -2
- package/dist/cjs/{bq-dropdown_3.cjs.entry.js → bq-option-list_2.cjs.entry.js} +6 -111
- package/dist/cjs/bq-option-list_2.cjs.entry.js.map +1 -0
- package/dist/cjs/bq-option.cjs.entry.js +5 -5
- package/dist/cjs/bq-progress.cjs.entry.js +5 -5
- package/dist/cjs/bq-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/bq-radio.cjs.entry.js +3 -3
- package/dist/cjs/bq-select.cjs.entry.js +2 -2
- package/dist/cjs/bq-select.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-side-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/bq-side-menu.cjs.entry.js +2 -2
- package/dist/cjs/bq-slider.cjs.entry.js +2 -2
- package/dist/cjs/bq-spinner.cjs.entry.js +5 -5
- package/dist/cjs/bq-status.cjs.entry.js +2 -2
- package/dist/cjs/bq-step-item.cjs.entry.js +5 -5
- package/dist/cjs/bq-steps.cjs.entry.js +2 -2
- package/dist/cjs/bq-switch.cjs.entry.js +3 -3
- package/dist/cjs/bq-tab-group.cjs.entry.js +2 -2
- package/dist/cjs/bq-tab.cjs.entry.js +3 -3
- package/dist/cjs/bq-textarea.cjs.entry.js +4 -4
- package/dist/cjs/bq-toast.cjs.entry.js +2 -2
- package/dist/cjs/bq-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/{index-d55cdb65.js → index-58b1a597.js} +34 -18
- package/dist/cjs/index-58b1a597.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/collection/collection-manifest.json +4 -2
- package/dist/collection/components/button/scss/bq-button.css +1 -1
- package/dist/collection/components/date-picker/__tests__/bq-date-picker.e2e.js +67 -0
- package/dist/collection/components/date-picker/__tests__/bq-date-picker.e2e.js.map +1 -0
- package/dist/collection/components/date-picker/bq-date-picker.js +920 -0
- package/dist/collection/components/date-picker/bq-date-picker.js.map +1 -0
- package/dist/collection/components/date-picker/bq-date-picker.types.js +6 -0
- package/dist/collection/components/date-picker/bq-date-picker.types.js.map +1 -0
- package/dist/collection/components/date-picker/scss/bq-date-picker.css +1 -0
- package/dist/collection/components/dialog/bq-dialog.js +3 -3
- package/dist/collection/components/divider/bq-divider.js +2 -2
- package/dist/collection/components/drawer/bq-drawer.js +4 -4
- package/dist/collection/components/drawer/bq-drawer.js.map +1 -1
- package/dist/collection/components/drawer/scss/bq-drawer.css +1 -1
- package/dist/collection/components/dropdown/bq-dropdown.js +1 -1
- package/dist/collection/components/empty-state/bq-empty-state.js +4 -4
- package/dist/collection/components/icon/bq-icon.js +1 -1
- package/dist/collection/components/input/bq-input.js +4 -4
- package/dist/collection/components/notification/bq-notification.js +2 -2
- package/dist/collection/components/option/bq-option.js +4 -4
- package/dist/collection/components/option-group/bq-option-group.js +1 -1
- package/dist/collection/components/option-list/bq-option-list.js +1 -1
- package/dist/collection/components/panel/bq-panel.js +1 -1
- package/dist/collection/components/progress/bq-progress.js +4 -4
- package/dist/collection/components/radio/bq-radio.js +2 -2
- package/dist/collection/components/radio-group/bq-radio-group.js +1 -1
- package/dist/collection/components/select/scss/bq-select.css +1 -1
- package/dist/collection/components/side-menu/bq-side-menu.js +1 -1
- package/dist/collection/components/slider/bq-slider.js +1 -1
- package/dist/collection/components/spinner/bq-spinner.js +4 -4
- package/dist/collection/components/status/bq-status.js +1 -1
- package/dist/collection/components/step-item/bq-step-item.js +4 -4
- package/dist/collection/components/steps/bq-steps.js +1 -1
- package/dist/collection/components/switch/bq-switch.js +2 -2
- package/dist/collection/components/tab/bq-tab.js +2 -2
- package/dist/collection/components/tab-group/bq-tab-group.js +1 -1
- package/dist/collection/components/tag/bq-tag.js +3 -3
- package/dist/collection/components/textarea/bq-textarea.js +3 -3
- package/dist/collection/components/toast/bq-toast.js +1 -1
- package/dist/collection/components/tooltip/bq-tooltip.js +1 -1
- package/dist/{beeq/p-45800965.js → collection/global/scripts/global.js} +2 -2
- package/dist/collection/global/scripts/global.js.map +1 -0
- package/dist/collection/index.js +0 -3
- package/dist/collection/index.js.map +1 -1
- package/dist/components/bq-button2.js +1 -1
- package/dist/components/bq-button2.js.map +1 -1
- package/dist/components/bq-date-picker.d.ts +11 -0
- package/dist/components/bq-date-picker.js +333 -0
- package/dist/components/bq-date-picker.js.map +1 -0
- package/dist/components/bq-dialog.js +3 -3
- package/dist/components/bq-divider2.js +2 -2
- package/dist/components/bq-drawer.js +5 -5
- package/dist/components/bq-drawer.js.map +1 -1
- package/dist/components/bq-dropdown2.js +1 -1
- package/dist/components/bq-empty-state.js +4 -4
- package/dist/components/bq-icon2.js +1 -1
- package/dist/components/bq-input.js +4 -4
- package/dist/components/bq-notification.js +2 -2
- package/dist/components/bq-option-group.js +1 -1
- package/dist/components/bq-option-list2.js +1 -1
- package/dist/components/bq-option.js +4 -4
- package/dist/components/bq-panel2.js +1 -1
- package/dist/components/bq-progress.js +4 -4
- package/dist/components/bq-radio-group.js +1 -1
- package/dist/components/bq-radio.js +2 -2
- package/dist/components/bq-select.js +1 -1
- package/dist/components/bq-select.js.map +1 -1
- package/dist/components/bq-side-menu.js +1 -1
- package/dist/components/bq-slider.js +1 -1
- package/dist/components/bq-spinner.js +4 -4
- package/dist/components/bq-status.js +1 -1
- package/dist/components/bq-step-item.js +4 -4
- package/dist/components/bq-steps.js +1 -1
- package/dist/components/bq-switch.js +2 -2
- package/dist/components/bq-tab-group.js +1 -1
- package/dist/components/bq-tab.js +2 -2
- package/dist/components/bq-tag2.js +3 -3
- package/dist/components/bq-textarea.js +3 -3
- package/dist/components/bq-toast.js +1 -1
- package/dist/components/bq-tooltip2.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1110 -0
- package/dist/components/index.js.map +1 -1
- package/dist/esm/app-globals-059f0651.js +1120 -0
- package/dist/esm/app-globals-059f0651.js.map +1 -0
- package/dist/esm/beeq.js +5 -5
- package/dist/esm/beeq.js.map +1 -1
- package/dist/esm/bq-accordion-group.entry.js +1 -1
- package/dist/esm/bq-accordion.entry.js +1 -1
- package/dist/esm/bq-alert.entry.js +1 -1
- package/dist/esm/bq-avatar.entry.js +1 -1
- package/dist/esm/bq-badge.entry.js +1 -1
- package/dist/esm/bq-breadcrumb-item.entry.js +1 -1
- package/dist/esm/bq-breadcrumb.entry.js +1 -1
- package/dist/esm/bq-button_2.entry.js +302 -0
- package/dist/esm/bq-button_2.entry.js.map +1 -0
- package/dist/esm/bq-card.entry.js +1 -1
- package/dist/esm/bq-checkbox.entry.js +1 -1
- package/dist/esm/bq-date-picker.entry.js +256 -0
- package/dist/esm/bq-date-picker.entry.js.map +1 -0
- package/dist/esm/bq-dialog.entry.js +4 -4
- package/dist/esm/bq-divider.entry.js +3 -3
- package/dist/esm/bq-drawer.entry.js +6 -6
- package/dist/esm/bq-drawer.entry.js.map +1 -1
- package/dist/esm/{bq-panel.entry.js → bq-dropdown_2.entry.js} +108 -4
- package/dist/esm/bq-dropdown_2.entry.js.map +1 -0
- package/dist/esm/bq-empty-state.entry.js +5 -5
- package/dist/esm/bq-input.entry.js +5 -5
- package/dist/esm/bq-notification.entry.js +3 -3
- package/dist/esm/bq-option-group.entry.js +2 -2
- package/dist/esm/{bq-dropdown_3.entry.js → bq-option-list_2.entry.js} +7 -111
- package/dist/esm/bq-option-list_2.entry.js.map +1 -0
- package/dist/esm/bq-option.entry.js +5 -5
- package/dist/esm/bq-progress.entry.js +5 -5
- package/dist/esm/bq-radio-group.entry.js +2 -2
- package/dist/esm/bq-radio.entry.js +3 -3
- package/dist/esm/bq-select.entry.js +2 -2
- package/dist/esm/bq-select.entry.js.map +1 -1
- package/dist/esm/bq-side-menu-item.entry.js +1 -1
- package/dist/esm/bq-side-menu.entry.js +2 -2
- package/dist/esm/bq-slider.entry.js +2 -2
- package/dist/esm/bq-spinner.entry.js +5 -5
- package/dist/esm/bq-status.entry.js +2 -2
- package/dist/esm/bq-step-item.entry.js +5 -5
- package/dist/esm/bq-steps.entry.js +2 -2
- package/dist/esm/bq-switch.entry.js +3 -3
- package/dist/esm/bq-tab-group.entry.js +2 -2
- package/dist/esm/bq-tab.entry.js +3 -3
- package/dist/esm/bq-textarea.entry.js +4 -4
- package/dist/esm/bq-toast.entry.js +2 -2
- package/dist/esm/bq-tooltip.entry.js +2 -2
- package/dist/esm/{index-d71ec085.js → index-179da433.js} +34 -18
- package/dist/esm/index-179da433.js.map +1 -0
- package/dist/esm/loader.js +4 -4
- package/dist/hydrate/index.js +408 -72
- package/dist/stencil.config.js +1 -0
- package/dist/stencil.config.js.map +1 -1
- package/dist/types/components/date-picker/bq-date-picker.d.ts +188 -0
- package/dist/types/components/date-picker/bq-date-picker.types.d.ts +3 -0
- package/dist/types/components.d.ts +269 -4
- package/dist/types/global/scripts/global.d.ts +13 -0
- package/dist/types/index.d.ts +1 -2
- package/dist/types/shared/test-utils/setProperties.d.ts +1 -1
- package/dist/types/stencil-public-runtime.d.ts +2 -8
- package/package.json +14 -4
- package/dist/beeq/p-250b8476.entry.js +0 -6
- package/dist/beeq/p-250b8476.entry.js.map +0 -1
- package/dist/beeq/p-45800965.js.map +0 -1
- package/dist/beeq/p-47d89d61.entry.js +0 -6
- package/dist/beeq/p-47d89d61.entry.js.map +0 -1
- package/dist/beeq/p-70d07837.entry.js +0 -6
- package/dist/beeq/p-70d07837.entry.js.map +0 -1
- package/dist/beeq/p-ae379467.entry.js +0 -6
- package/dist/beeq/p-ae379467.entry.js.map +0 -1
- package/dist/beeq/p-d5c5b299.entry.js +0 -6
- package/dist/beeq/p-d5c5b299.entry.js.map +0 -1
- package/dist/beeq/p-fbd8dd21.js +0 -7
- package/dist/beeq/p-fbd8dd21.js.map +0 -1
- package/dist/cjs/app-globals-42eaedec.js +0 -11
- package/dist/cjs/app-globals-42eaedec.js.map +0 -1
- package/dist/cjs/bq-button.cjs.entry.js +0 -135
- package/dist/cjs/bq-button.cjs.entry.js.map +0 -1
- package/dist/cjs/bq-dropdown_3.cjs.entry.js.map +0 -1
- package/dist/cjs/bq-icon.cjs.entry.js +0 -186
- package/dist/cjs/bq-icon.cjs.entry.js.map +0 -1
- package/dist/cjs/bq-panel.cjs.entry.js.map +0 -1
- package/dist/cjs/index-d55cdb65.js.map +0 -1
- package/dist/esm/app-globals-7655df21.js +0 -9
- package/dist/esm/app-globals-7655df21.js.map +0 -1
- package/dist/esm/bq-button.entry.js +0 -131
- package/dist/esm/bq-button.entry.js.map +0 -1
- package/dist/esm/bq-dropdown_3.entry.js.map +0 -1
- package/dist/esm/bq-icon.entry.js +0 -182
- package/dist/esm/bq-icon.entry.js.map +0 -1
- package/dist/esm/bq-panel.entry.js.map +0 -1
- package/dist/esm/index-d71ec085.js.map +0 -1
- /package/dist/beeq/{p-28a9a23d.entry.js.map → p-02c15c4b.entry.js.map} +0 -0
- /package/dist/beeq/{p-2f7137e0.entry.js.map → p-0628de9f.entry.js.map} +0 -0
- /package/dist/beeq/{p-cbca544b.entry.js.map → p-1a7d3fbe.entry.js.map} +0 -0
- /package/dist/beeq/{p-32134085.entry.js.map → p-3c4fbdd7.entry.js.map} +0 -0
- /package/dist/beeq/{p-c14e94e0.entry.js.map → p-3e4c9374.entry.js.map} +0 -0
- /package/dist/beeq/{p-d58a7c27.entry.js.map → p-54c58ae3.entry.js.map} +0 -0
- /package/dist/beeq/{p-ada3ca0a.entry.js.map → p-5ca47d1e.entry.js.map} +0 -0
- /package/dist/beeq/{p-c893951f.entry.js.map → p-61ada51d.entry.js.map} +0 -0
- /package/dist/beeq/{p-6c1ddc44.entry.js.map → p-64f8af01.entry.js.map} +0 -0
- /package/dist/beeq/{p-354f52d1.entry.js.map → p-68aaabee.entry.js.map} +0 -0
- /package/dist/beeq/{p-ab632829.entry.js.map → p-741c4780.entry.js.map} +0 -0
- /package/dist/beeq/{p-6d5d2460.entry.js.map → p-7b5e46cb.entry.js.map} +0 -0
- /package/dist/beeq/{p-8593ad98.entry.js.map → p-7bf832f5.entry.js.map} +0 -0
- /package/dist/beeq/{p-981797b1.entry.js.map → p-7fbceff7.entry.js.map} +0 -0
- /package/dist/beeq/{p-1f370b12.entry.js.map → p-8cd96f23.entry.js.map} +0 -0
- /package/dist/beeq/{p-e2b64861.entry.js.map → p-900b24fc.entry.js.map} +0 -0
- /package/dist/beeq/{p-1c789890.entry.js.map → p-93e38159.entry.js.map} +0 -0
- /package/dist/beeq/{p-51603d69.entry.js.map → p-9d4b982c.entry.js.map} +0 -0
- /package/dist/beeq/{p-d27ad8a0.entry.js.map → p-bd15cc60.entry.js.map} +0 -0
- /package/dist/beeq/{p-852c54d8.entry.js.map → p-c09305af.entry.js.map} +0 -0
- /package/dist/beeq/{p-81a34a07.entry.js.map → p-c435eb9d.entry.js.map} +0 -0
- /package/dist/beeq/{p-de827971.entry.js.map → p-c63164ef.entry.js.map} +0 -0
- /package/dist/beeq/{p-a30ba2bd.entry.js.map → p-c6c2ce93.entry.js.map} +0 -0
- /package/dist/beeq/{p-bb8f8b78.entry.js.map → p-c98276b3.entry.js.map} +0 -0
- /package/dist/beeq/{p-31472c1f.entry.js.map → p-d29eef16.entry.js.map} +0 -0
- /package/dist/beeq/{p-0af526fc.entry.js.map → p-d5dcd933.entry.js.map} +0 -0
- /package/dist/beeq/{p-0b6e3137.entry.js.map → p-d969800e.entry.js.map} +0 -0
- /package/dist/beeq/{p-e67a6252.entry.js.map → p-d97d4712.entry.js.map} +0 -0
- /package/dist/beeq/{p-d11fafe0.entry.js.map → p-dafa2581.entry.js.map} +0 -0
- /package/dist/beeq/{p-8b57cd5e.entry.js.map → p-e068ede6.entry.js.map} +0 -0
- /package/dist/beeq/{p-42c5530c.entry.js.map → p-e1162d1c.entry.js.map} +0 -0
- /package/dist/beeq/{p-36eb59f9.entry.js.map → p-f4b40086.entry.js.map} +0 -0
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by Endavans
|
|
3
|
-
* © https://beeq.design - Apache 2 License.
|
|
4
|
-
*/
|
|
5
|
-
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-d71ec085.js';
|
|
6
|
-
import './assetsPath-4b5ef75f.js';
|
|
7
|
-
import { i as isNil } from './isNil-2290f64e.js';
|
|
8
|
-
import { i as isDefined } from './isDefined-4f676ecc.js';
|
|
9
|
-
import { v as validatePropValue } from './props-3bf7f546.js';
|
|
10
|
-
import { b as hasSlotContent } from './slot-179d109d.js';
|
|
11
|
-
import './isString-9820a2b7.js';
|
|
12
|
-
|
|
13
|
-
const BUTTON_SIZE = ['small', 'medium', 'large'];
|
|
14
|
-
const BUTTON_TYPE = ['button', 'submit', 'reset'];
|
|
15
|
-
const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'];
|
|
16
|
-
const BUTTON_VARIANT = ['standard', 'ghost', 'danger'];
|
|
17
|
-
|
|
18
|
-
const bqButtonCss = "::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-\\[var\\(--bq-button--large-height\\)\\]{height:var(--bq-button--large-height)}.h-\\[var\\(--bq-button--medium-height\\)\\]{height:var(--bq-button--medium-height)}.h-\\[var\\(--bq-button--small-height\\)\\]{height:var(--bq-button--small-height)}.w-auto{width:auto}.w-full{width:100%}.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.cursor-\\[inherit\\]{cursor:inherit}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.rounded-\\[--bq-button--border-radius\\]{border-radius:var(--bq-button--border-radius)}.border-2{border-width:2px}.border-\\[length\\:--bq-button--border-width\\]{border-width:var(--bq-button--border-width)}.border-solid{border-style:solid}.border-\\[color\\:--bq-button--border-color\\]{border-color:var(--bq-button--border-color)}.border-stroke-brand{border-color:var(--bq-stroke--brand)}.bg-transparent{background-color:transparent}.bg-ui-brand{background-color:var(--bq-ui--brand)}.bg-ui-danger{background-color:var(--bq-ui--danger)}.bg-ui-secondary{background-color:var(--bq-ui--secondary)}.px-\\[var\\(--bq-button--large-paddingX\\)\\]{padding-left:var(--bq-button--large-paddingX);padding-right:var(--bq-button--large-paddingX)}.px-\\[var\\(--bq-button--medium-paddingX\\)\\]{padding-left:var(--bq-button--medium-paddingX);padding-right:var(--bq-button--medium-paddingX)}.px-\\[var\\(--bq-button--small-paddingX\\)\\]{padding-left:var(--bq-button--small-paddingX);padding-right:var(--bq-button--small-paddingX)}.py-\\[var\\(--bq-button--large-paddingY\\)\\]{padding-bottom:var(--bq-button--large-paddingY);padding-top:var(--bq-button--large-paddingY)}.py-\\[var\\(--bq-button--medium-paddingY\\)\\]{padding-bottom:var(--bq-button--medium-paddingY);padding-top:var(--bq-button--medium-paddingY)}.py-\\[var\\(--bq-button--small-paddingY\\)\\]{padding-bottom:var(--bq-button--small-paddingY);padding-top:var(--bq-button--small-paddingY)}.pe-xs2{padding-inline-end:var(--bq-spacing-xs2)}.ps-xs2{padding-inline-start:var(--bq-spacing-xs2)}.text-\\[length\\:--bq-button--large-font-size\\]{font-size:var(--bq-button--large-font-size)}.text-\\[length\\:--bq-button--medium-font-size\\]{font-size:var(--bq-button--medium-font-size)}.text-\\[length\\:--bq-button--small-font-size\\]{font-size:var(--bq-button--small-font-size)}.font-medium{font-weight:var(--bq-font-weight--medium)}.text-text-brand{color:var(--bq-text--brand)}.opacity-60{opacity:.6}.transition-\\[background-color\\2c border-color\\2c color\\]{transition-duration:.15s;transition-property:background-color,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-button,.duration-300{transition-duration:.3s}.bq-button{align-items:center;border-color:var(--bq-button--border-color);border-radius:var(--bq-button--border-radius);border-width:var(--bq-button--border-width);box-sizing:border-box;cursor:inherit;display:flex;font-weight:var(--bq-font-weight--medium);justify-content:center;line-height:var(--bq-font-line-height--regular);transition-property:background-color,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-button:disabled{cursor:not-allowed;opacity:.6}.bq-button:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-button--border-color:transparent;--bq-button--border-radius:var(--bq-radius--m);--bq-button--border-style:solid;--bq-button--border-width:0px;--bq-button--small-height:32px;--bq-button--small-paddingX:var(--bq-spacing-xs);--bq-button--small-paddingY:var(--bq-spacing-xs2);--bq-button--small-font-size:var(--bq-font-size--m);--bq-button--medium-height:48px;--bq-button--medium-paddingX:var(--bq-spacing-m);--bq-button--medium-paddingY:var(--bq-spacing-s);--bq-button--medium-font-size:var(--bq-font-size--m);--bq-button--large-height:56px;--bq-button--large-paddingX:var(--bq-spacing-l);--bq-button--large-paddingY:var(--bq-spacing-m);--bq-button--large-font-size:var(--bq-font-size--m);cursor:pointer;display:inline-block;position:relative;width:auto}.block,:host([block]){width:100%}.bq-button--primary{background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-button--primary:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}.bq-button--primary:enabled:active,.bq-button--primary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.bq-button--primary.ghost{background-color:transparent;border-color:var(--bq-stroke--brand);border-style:solid;border-width:2px;color:var(--bq-text--brand)}.bq-button--primary.ghost:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--primary.ghost:enabled:active,.bq-button--primary.ghost:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.bq-button--primary.danger{background-color:var(--bq-ui--danger);color:var(--bq-text--alt)}.bq-button--primary.danger:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-hover) 20%)}.bq-button--primary.danger:enabled:active,.bq-button--primary.danger:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.bq-button--secondary{background-color:var(--bq-ui--secondary);color:var(--bq-text--primary)}.bq-button--secondary:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-button--secondary:enabled:active,.bq-button--secondary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--link{background-color:transparent;color:var(--bq-text--brand);text-decoration-line:none}.bq-button--link:hover:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--link:active:not(.disabled),.bq-button--link:hover:active:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--link.disabled{cursor:not-allowed;opacity:.6}.bq-button--text{background-color:transparent;color:var(--bq-text--primary)}.bq-button--text:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--text:enabled:active,.bq-button--text:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.small{font-size:var(--bq-button--small-font-size);height:var(--bq-button--small-height);padding:var(--bq-button--small-paddingY) var(--bq-button--small-paddingX)}.medium{font-size:var(--bq-button--medium-font-size);height:var(--bq-button--medium-height);padding:var(--bq-button--medium-paddingY) var(--bq-button--medium-paddingX)}.large{font-size:var(--bq-button--large-font-size);height:var(--bq-button--large-height);padding:var(--bq-button--large-paddingY) var(--bq-button--large-paddingX)}.bq-button__label ::slotted(bq-icon){display:flex}.content-left{justify-content:flex-start}.content-right{justify-content:flex-end}.bq-button__prefix,.bq-button__suffix{align-items:center;display:flex;flex-basis:auto;flex-grow:0;flex-shrink:0;pointer-events:none}.bq-button.has-prefix .bq-button__label{padding-inline-start:var(--bq-spacing-xs2)}.bq-button.has-suffix .bq-button__label{padding-inline-end:var(--bq-spacing-xs2)}.bq-button.loading{cursor:wait;position:relative}.bq-button.loading .bq-button__label,.bq-button.loading .bq-button__prefix,.bq-button.loading .bq-button__suffix{visibility:hidden}.bq-button__loader{-webkit-animation:spin 1s linear 0s infinite;animation:spin 1s linear 0s infinite;position:absolute}.focus-visible\\:focus:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.active\\:enabled\\:bg-active-ui-brand:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.active\\:enabled\\:bg-active-ui-danger:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.active\\:enabled\\:bg-active-ui-primary:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.active\\:enabled\\:bg-active-ui-secondary:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.active\\:enabled\\:hover\\:bg-active-ui-brand:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.active\\:enabled\\:hover\\:bg-active-ui-danger:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.active\\:enabled\\:hover\\:bg-active-ui-primary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.active\\:enabled\\:hover\\:bg-active-ui-secondary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.\\[\\&\\:not\\(\\.disabled\\)\\]\\:active\\:bg-active-ui-secondary:active:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.static{position:static}.hidden{display:none}.border{border-width:1px}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.h-\\[var\\(--bq-icon--size\\)\\]{height:var(--bq-icon--size)}.w-\\[var\\(--bq-icon--size\\)\\]{width:var(--bq-icon--size)}.text-\\[color\\:var\\(--bq-icon--color\\)\\]{color:var(--bq-icon--color)}";
|
|
19
|
-
const BqButtonStyle0 = bqButtonCss;
|
|
20
|
-
|
|
21
|
-
const BqButton = class {
|
|
22
|
-
constructor(hostRef) {
|
|
23
|
-
registerInstance(this, hostRef);
|
|
24
|
-
this.bqBlur = createEvent(this, "bqBlur", 7);
|
|
25
|
-
this.bqFocus = createEvent(this, "bqFocus", 7);
|
|
26
|
-
this.bqClick = createEvent(this, "bqClick", 7);
|
|
27
|
-
// Listeners
|
|
28
|
-
// ==============
|
|
29
|
-
// Public methods API
|
|
30
|
-
// These methods are exposed on the host element.
|
|
31
|
-
// Always use two lines.
|
|
32
|
-
// Public Methods must be async.
|
|
33
|
-
// Requires JSDocs for public API documentation.
|
|
34
|
-
// ===============================================
|
|
35
|
-
// Local methods
|
|
36
|
-
// Internal business logic.
|
|
37
|
-
// These methods cannot be called from the host element.
|
|
38
|
-
// =======================================================
|
|
39
|
-
this.handleBlur = () => {
|
|
40
|
-
this.bqBlur.emit(this.el);
|
|
41
|
-
};
|
|
42
|
-
this.handleFocus = () => {
|
|
43
|
-
this.bqFocus.emit(this.el);
|
|
44
|
-
};
|
|
45
|
-
this.handleClick = (ev) => {
|
|
46
|
-
if (this.disabled || this.loading) {
|
|
47
|
-
ev.preventDefault();
|
|
48
|
-
ev.stopPropagation();
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
if (this.type === 'submit' || this.type === 'reset') {
|
|
52
|
-
const wrapperForm = this.el.closest('form');
|
|
53
|
-
if (!isNil(wrapperForm)) {
|
|
54
|
-
const btn = document.createElement('button');
|
|
55
|
-
btn.type = this.type;
|
|
56
|
-
btn.hidden = true;
|
|
57
|
-
wrapperForm.append(btn);
|
|
58
|
-
btn.click();
|
|
59
|
-
btn.remove();
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
this.bqClick.emit(this.el);
|
|
63
|
-
};
|
|
64
|
-
this.handleSlotChange = () => {
|
|
65
|
-
this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');
|
|
66
|
-
this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');
|
|
67
|
-
};
|
|
68
|
-
this.hasPrefix = false;
|
|
69
|
-
this.hasSuffix = false;
|
|
70
|
-
this.appearance = 'primary';
|
|
71
|
-
this.block = false;
|
|
72
|
-
this.border = 'm';
|
|
73
|
-
this.disabled = false;
|
|
74
|
-
this.download = undefined;
|
|
75
|
-
this.href = undefined;
|
|
76
|
-
this.justifyContent = 'center';
|
|
77
|
-
this.loading = false;
|
|
78
|
-
this.size = 'medium';
|
|
79
|
-
this.target = undefined;
|
|
80
|
-
this.type = 'button';
|
|
81
|
-
this.variant = 'standard';
|
|
82
|
-
}
|
|
83
|
-
// Prop lifecycle events
|
|
84
|
-
// =======================
|
|
85
|
-
checkPropValues() {
|
|
86
|
-
validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');
|
|
87
|
-
validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');
|
|
88
|
-
validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');
|
|
89
|
-
validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');
|
|
90
|
-
}
|
|
91
|
-
// Component lifecycle events
|
|
92
|
-
// Ordered by their natural call order
|
|
93
|
-
// =====================================
|
|
94
|
-
componentWillLoad() {
|
|
95
|
-
this.checkPropValues();
|
|
96
|
-
}
|
|
97
|
-
// render() function
|
|
98
|
-
// Always the last one in the class.
|
|
99
|
-
// ===================================
|
|
100
|
-
render() {
|
|
101
|
-
const isLink = isDefined(this.href);
|
|
102
|
-
const TagElem = isLink ? 'a' : 'button';
|
|
103
|
-
const style = {
|
|
104
|
-
...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),
|
|
105
|
-
};
|
|
106
|
-
return (h(Host, { key: 'ffd2e2c8c77d4997e519a62f6f3059f2cef3390d', style: style }, h(TagElem, { key: 'e40804d31f3d876a834541820898e0fbef7ac9dd', class: {
|
|
107
|
-
'bq-button': true,
|
|
108
|
-
[`bq-button--${this.appearance}`]: true,
|
|
109
|
-
[`content-${this.justifyContent}`]: true,
|
|
110
|
-
[`${this.variant}`]: true,
|
|
111
|
-
[`${this.size}`]: true,
|
|
112
|
-
block: this.block,
|
|
113
|
-
disabled: this.disabled,
|
|
114
|
-
'has-prefix': this.hasPrefix,
|
|
115
|
-
'has-suffix': this.hasSuffix,
|
|
116
|
-
loading: this.loading,
|
|
117
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, download: isLink ? this.download : undefined, href: isLink ? this.href : undefined, part: "button", rel: isLink && this.target ? 'noreferrer noopener' : undefined, target: isLink ? this.target : undefined, type: this.type, tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick }, h("span", { key: 'da0967bea268496333a5903f655233161d41db1e', class: "bq-button__prefix", ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'dbe186894d3316080f061f3d4affec3e4d8fa725', name: "prefix", onSlotchange: this.handleSlotChange })), h("span", { key: '78ac243c4cc838a154c92d09c554835eaf398db3', class: "bq-button__label", part: "label" }, h("slot", { key: '6e90d88b283a7709135ffc3652e0c6880e09f5cc' })), h("span", { key: '1bbcda918b7edca996b9e8c55c530c280e18e0b8', class: "bq-button__suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'e687304b93ac79c580b55ccc92ead8153904bf12', name: "suffix", onSlotchange: this.handleSlotChange })), this.loading && (h("bq-icon", { key: 'd21d3420d249a36edf758ef1f361cdc0b6af03b2', class: "bq-button__loader", name: "spinner-gap", role: "img", title: `${this.appearance} button loader` })))));
|
|
118
|
-
}
|
|
119
|
-
get el() { return getElement(this); }
|
|
120
|
-
static get watchers() { return {
|
|
121
|
-
"appearance": ["checkPropValues"],
|
|
122
|
-
"type": ["checkPropValues"],
|
|
123
|
-
"size": ["checkPropValues"],
|
|
124
|
-
"variant": ["checkPropValues"]
|
|
125
|
-
}; }
|
|
126
|
-
};
|
|
127
|
-
BqButton.style = BqButtonStyle0;
|
|
128
|
-
|
|
129
|
-
export { BqButton as bq_button };
|
|
130
|
-
|
|
131
|
-
//# sourceMappingURL=bq-button.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"bq-button.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/* Button styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-button.variables';\n\n@layer components {\n // Common button base style\n .bq-button {\n @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n // `DISABLED` state\n @apply disabled:cursor-not-allowed disabled:opacity-60;\n // `FOCUS` state\n @apply focus-visible:focus;\n }\n}\n\n:host {\n @apply relative inline-block w-auto cursor-pointer;\n}\n\n:host([block]),\n.block {\n @apply w-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Appearance */\n/* -------------------------------------------------------------------------- */\n\n.bq-button--primary {\n @apply bg-ui-brand text-text-alt;\n // Primary `HOVER` state\n @apply hover:enabled:bg-hover-ui-brand;\n // Primary `ACTIVE` state\n @apply active:enabled:bg-active-ui-brand active:enabled:hover:bg-active-ui-brand;\n}\n\n.bq-button--primary.ghost {\n @apply border-2 border-solid border-stroke-brand bg-transparent text-text-brand;\n // Primary `HOVER` state\n @apply hover:enabled:bg-hover-ui-primary;\n // Primary `ACTIVE` state\n @apply active:enabled:bg-active-ui-primary active:enabled:hover:bg-active-ui-primary;\n}\n\n.bq-button--primary.danger {\n @apply bg-ui-danger text-text-alt;\n // Primary `HOVER` state\n @apply hover:enabled:bg-hover-ui-danger;\n // Primary `ACTIVE` state\n @apply active:enabled:bg-active-ui-danger active:enabled:hover:bg-active-ui-danger;\n}\n\n.bq-button--secondary {\n @apply bg-ui-secondary text-text-primary;\n // Primary `HOVER` state\n @apply hover:enabled:bg-hover-ui-secondary;\n // Primary `ACTIVE` state\n @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--link {\n @apply bg-transparent text-text-brand no-underline;\n // Primary `HOVER` state\n @apply [&:not(.disabled)]:hover:bg-hover-ui-primary;\n // Primary `ACTIVE` state\n @apply [&:not(.disabled)]:active:bg-active-ui-secondary [&:not(.disabled)]:active:hover:bg-active-ui-secondary;\n // HTML `<a>` elements does not have a `disabled` state so we need to handle it manually\n &.disabled {\n @apply cursor-not-allowed opacity-60;\n }\n}\n\n.bq-button--text {\n @apply bg-transparent text-text-primary;\n // Primary `HOVER` state\n @apply hover:enabled:bg-hover-ui-primary;\n // Primary `ACTIVE` state\n @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Size */\n/* -------------------------------------------------------------------------- */\n\n.small {\n @apply h-[var(--bq-button--small-height)] px-[var(--bq-button--small-paddingX)] py-[var(--bq-button--small-paddingY)] text-[length:--bq-button--small-font-size];\n}\n\n.medium {\n @apply h-[var(--bq-button--medium-height)] px-[var(--bq-button--medium-paddingX)] py-[var(--bq-button--medium-paddingY)] text-[length:--bq-button--medium-font-size];\n}\n\n.large {\n @apply h-[var(--bq-button--large-height)] px-[var(--bq-button--large-paddingX)] py-[var(--bq-button--large-paddingY)] text-[length:--bq-button--large-font-size];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Label */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__label ::slotted(bq-icon) {\n @apply flex;\n}\n\n.content-left {\n @apply justify-start;\n}\n\n.content-right {\n @apply justify-end;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Prefix and Suffix slots */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__prefix,\n.bq-button__suffix {\n @apply pointer-events-none flex shrink-0 grow-0 basis-auto items-center;\n}\n\n.bq-button.has-prefix .bq-button__label {\n @apply ps-xs2;\n}\n\n.bq-button.has-suffix .bq-button__label {\n @apply pe-xs2;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Loading */\n/* -------------------------------------------------------------------------- */\n\n.bq-button.loading {\n @apply relative cursor-wait;\n}\n\n.bq-button.loading .bq-button__prefix,\n.bq-button.loading .bq-button__label,\n.bq-button.loading .bq-button__suffix {\n @apply invisible;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Spinner icon */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__loader {\n @include animation-spin;\n @apply absolute;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n BUTTON_APPEARANCE,\n BUTTON_SIZE,\n BUTTON_TYPE,\n BUTTON_VARIANT,\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n */\n@Component({\n tag: 'bq-button',\n styleUrl: './scss/bq-button.scss',\n shadow: true,\n})\nexport class BqButton {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqButtonElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /** The appearance style to apply to the button */\n @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n /** If `true`, it will make the button fit to its parent width. */\n @Prop({ reflect: true }) block: boolean = false;\n\n /** The corner radius of the button */\n @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n /** If true, the button will be disabled (no interaction allowed) */\n @Prop() disabled = false;\n\n /**\n * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n */\n @Prop() download?: string;\n\n /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n @Prop({ reflect: true }) href: string;\n\n /** It determinate how the content should be aligned */\n @Prop({ reflect: true }) justifyContent: 'left' | 'center' | 'right' = 'center';\n\n /** If `true` it will display the button in a loading state */\n @Prop() loading = false;\n\n /** The size of the button */\n @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n */\n @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n /** The default behavior of the button */\n @Prop({ reflect: true }) type: TButtonType = 'button';\n\n /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('type')\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when the button loses focus */\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /** Handler to be called when the button is clicked */\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /** Handler to be called when button gets focus */\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleClick = (ev: Event) => {\n if (this.disabled || this.loading) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (this.type === 'submit' || this.type === 'reset') {\n const wrapperForm = this.el.closest('form');\n if (!isNil(wrapperForm)) {\n const btn = document.createElement('button');\n btn.type = this.type;\n btn.hidden = true;\n wrapperForm.append(btn);\n\n btn.click();\n btn.remove();\n }\n }\n\n this.bqClick.emit(this.el);\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const isLink = isDefined(this.href);\n const TagElem = isLink ? 'a' : 'button';\n const style = {\n ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host style={style}>\n <TagElem\n class={{\n 'bq-button': true,\n [`bq-button--${this.appearance}`]: true,\n [`content-${this.justifyContent}`]: true,\n [`${this.variant}`]: true,\n [`${this.size}`]: true,\n block: this.block,\n disabled: this.disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n loading: this.loading,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n target={isLink ? this.target : undefined}\n type={this.type}\n tabIndex={this.disabled ? -1 : 0}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && (\n <bq-icon\n class=\"bq-button__loader\"\n name=\"spinner-gap\"\n role=\"img\"\n title={`${this.appearance} button loader`}\n />\n )}\n </TagElem>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"bq-dropdown.bq-option-list.bq-tag.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/dropdown/scss/bq-dropdown.scss?tag=bq-dropdown&encapsulation=shadow","../../packages/beeq/src/components/dropdown/bq-dropdown.tsx","../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx","../../packages/beeq/src/components/tag/bq-tag.types.ts","../../packages/beeq/src/components/tag/helper/index.ts","../../packages/beeq/src/components/tag/scss/bq-tag.scss?tag=bq-tag&encapsulation=shadow","../../packages/beeq/src/components/tag/bq-tag.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Dropdown styles */\n/* -------------------------------------------------------------------------- */\n\n:host {\n @apply relative inline-block;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { FloatingUIPlacement } from '../../services/interfaces';\n\nlet id = 0;\n\n/**\n * @part base - The component's internal wrapper.\n * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel\n * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element\n * @part trigger - The `<div>` element that hosts the trigger element\n */\n@Component({\n tag: 'bq-dropdown',\n styleUrl: './scss/bq-dropdown.scss',\n shadow: true,\n})\nexport class BqDropdown {\n // Own Properties\n // ====================\n\n private dropdownPanelId = `bq-dropdown-panel-${++id}`;\n private triggerElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqDropdownElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** If true, the dropdown panel will be visible and won't be shown. */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n @Prop({ reflect: true }) distance?: number = 4;\n\n /** If true, the panel will remain open after a selection is made. */\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /** Position of the panel */\n @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom-start';\n\n /** If true, the panel will be visible. */\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /** When set, it will override the height of the dropdown panel */\n @Prop({ reflect: true }) panelHeight?: string;\n\n /** Whether the panel should have the same width as the trigger element */\n @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n /** Represents the skidding between the panel and the trigger element. */\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /** Defines the strategy to position the panel */\n @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('open')\n onOpenChange() {\n this.bqOpen.emit({ open: this.open });\n }\n\n @Watch('disabled')\n handleDisabledChange() {\n if (!this.triggerElem) return;\n\n // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling\n this.disabled ? this.triggerElem?.setAttribute('disabled', 'true') : this.triggerElem?.removeAttribute('disabled');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the dropdown panel is opened or closed. */\n @Event() bqOpen: EventEmitter<{ open: boolean }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.triggerElem = this.el.querySelector('[slot=\"trigger\"]');\n this.handleDisabledChange();\n }\n\n // Listeners\n // ==============\n\n /** Listens for the 'click' event on the document object\n * and closes the dropdown panel if the click is outside the component.\n */\n @Listen('click', { target: 'document', passive: true })\n onClickOutside(event: MouseEvent) {\n if (!this.open) return;\n\n // Close when clicking outside of the close element\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.open = false;\n }\n }\n\n /**\n * Listens for the 'keyup' event on the window object\n * and closes the dropdown panel if the 'Escape' key or 'Tab' key outside the component is pressed.\n */\n @Listen('keyup', { target: 'window', passive: true })\n onEscape(event: KeyboardEvent) {\n if (!this.open) return;\n\n if (event.key === 'Escape' || (event.key === 'Tab' && !event.composedPath().includes(this.el))) {\n this.open = false;\n }\n }\n\n @Listen('bqSelect', { passive: true })\n onItemSelect() {\n if (this.keepOpenOnSelect) return;\n\n this.open = false;\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private togglePanel = (): void => {\n // Don't toggle the panel if the component is disabled or the trigger element is disabled\n if (this.disabled || this.triggerElem?.hasAttribute('disabled')) return;\n\n this.open = !this.open;\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),\n };\n\n return (\n <div class=\"bq-dropdown\" part=\"base\">\n {/* TRIGGER CONTAINER */}\n <div\n class=\"bq-dropdown__trigger block\"\n aria-controls={this.dropdownPanelId}\n aria-haspopup=\"true\"\n onClick={this.togglePanel}\n part=\"trigger\"\n >\n <slot name=\"trigger\" />\n </div>\n {/* PANEL */}\n <bq-panel\n style={style}\n id={this.dropdownPanelId}\n class=\"bq-dropdown__panel\"\n distance={this.distance}\n placement={this.placement}\n open={this.open}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n role=\"group\"\n part=\"dropdown\"\n exportparts=\"panel\"\n >\n <slot />\n </bq-panel>\n </div>\n );\n }\n}\n","/* -------------------------------------------------------------------------- */\n/* Option list styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-option-list.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper.\n */\n@Component({\n tag: 'bq-option-list',\n styleUrl: './scss/bq-option-list.scss',\n shadow: true,\n})\nexport class BqOptionList {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionListElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n /** Aria label for the list. */\n @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when `bq-option` is selected (on click/enter press). */\n @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.el.setAttribute('role', 'listbox');\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n @Listen('bqEnter', { passive: true })\n onBqSelect(event: CustomEvent<HTMLElement>) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-option') || !isEventTargetChildOfElement(event, this.el)) return;\n\n this.bqSelect.emit({ item, value: item.value });\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n","export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;\nexport type TTagSize = (typeof TAG_SIZE)[number];\n\nexport const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;\nexport type TTagColor = (typeof TAG_COLOR)[number];\n\nexport const TAG_VARIANT = ['outline', 'filled'] as const;\nexport type TTagVariant = (typeof TAG_VARIANT)[number];\n\nexport const TAG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TTagBorderRadius = (typeof TAG_BORDER_RADIUS)[number];\n","import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagColor, TTagSize, TTagVariant } from '../bq-tag.types';\n\n/**\n * Function to determine the icon size based on the provided tag size.\n *\n * @param {TTagSize} size - The size of the tag.\n * @returns {number} The corresponding icon size. If the provided size does not match any predefined sizes, the function returns the size for 'medium'.\n */\nexport const iconSize = (size: TTagSize): number => {\n const xsmall = TAG_SIZE[0];\n const small = TAG_SIZE[1];\n const medium = TAG_SIZE[2];\n\n const SIZE = {\n [xsmall]: 16,\n [small]: 20,\n [medium]: 24,\n };\n\n return SIZE[size] || SIZE[medium];\n};\n\n/**\n * Function to determine the tag text color scheme for a given tag type.\n *\n * @param {TTagType} color - The color of the tag.\n * @returns {Object} An object containing the color scheme for the given tag type. If the provided type does not match any predefined types, the function returns the color scheme for 'default'.\n */\nexport const textColor = (color: TTagColor): Partial<{ [K in TTagVariant]: string }> => {\n const typeError = TAG_COLOR[0];\n const typeGray = TAG_COLOR[1];\n const typeInfo = TAG_COLOR[2];\n const typeSuccess = TAG_COLOR[3];\n const typeWarning = TAG_COLOR[4];\n\n const variantOutline = TAG_VARIANT[0];\n const variantFilled = TAG_VARIANT[1];\n\n const COLORS = {\n [typeError]: {\n [variantOutline]: 'text--danger',\n [variantFilled]: 'text--alt',\n },\n [typeGray]: {\n [variantOutline]: 'text--primary',\n [variantFilled]: 'text--alt',\n },\n [typeInfo]: {\n [variantOutline]: 'text--brand',\n [variantFilled]: 'text--alt',\n },\n [typeSuccess]: {\n [variantOutline]: 'text--success',\n [variantFilled]: 'text--alt',\n },\n [typeWarning]: {\n [variantOutline]: 'text--warning',\n [variantFilled]: 'text--alt',\n },\n };\n\n return COLORS[color];\n};\n","/* -------------------------------------------------------------------------- */\n/* Tag styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tag.variables';\n\n:host {\n @apply relative inline-block;\n}\n\n:host([removable][hidden]) {\n @apply hidden;\n}\n\n.bq-tag {\n @apply box-border inline-flex select-none flex-row items-center justify-center bg-[--bq-tag--background-color];\n @apply gap-[--bq-tag--medium-gap] px-[--bq-tag--medium-padding-x] py-[--bq-tag--medium-padding-y] font-medium leading-regular text-text-primary;\n @apply rounded-[--bq-tag--border-radius] border-[length:--bq-tag--border-width] border-[color:--bq-tag--border-color];\n @apply transition-colors duration-300 ease-in-out;\n\n border-style: var(--bq-tag--border-style);\n}\n\n/* ---------------------------------- Size ---------------------------------- */\n\n.bq-tag__xsmall,\n.bq-tag__small {\n @apply gap-[--bq-tag--small-gap] px-[--bq-tag--small-padding-x] py-[--bq-tag--small-padding-y];\n\n /* Apply predefined border radius only if the border property have NO VALUE */\n &:not(.has-border) {\n @apply rounded-[--bq-tag--small-border-radius];\n }\n}\n\n/* --------------------------------- Action --------------------------------- */\n\n.bq-tag__default.is-clickable {\n @apply cursor-pointer;\n // Focus\n @apply focus-visible:focus;\n // Hover\n @apply hover:enabled:bg-[color-mix(in_srgb,_var(--bq-tag--background-color),_white_20%)];\n // Active/Selected\n @apply [&.active]:text-[--bq-text--alt] [&.active]:[--bq-tag--background-color:--bq-ui--brand];\n // Disabled\n @apply disabled:cursor-not-allowed disabled:border-none disabled:opacity-60;\n}\n\n/* ------------------------------ Color styles ------------------------------ */\n\n.bq-tag__error {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--danger] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--danger-alt] text-[color:--bq-text--danger] [--bq-tag--border-color:--bq-stroke--danger];\n }\n}\n\n.bq-tag__gray {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--tertiary] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--primary] text-[color:--bq-text--primary] [--bq-tag--border-color:--bq-stroke--tertiary];\n }\n}\n\n.bq-tag__info {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--brand] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--brand-alt] text-[color:--bq-text--brand] [--bq-tag--border-color:--bq-stroke--brand];\n }\n}\n\n.bq-tag__success {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--success] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--success-alt] text-[color:--bq-text--success] [--bq-tag--border-color:--bq-tag--border-success];\n }\n}\n\n.bq-tag__warning {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--warning] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply border-[color:--bq-stroke--warning] bg-[color:--bq-ui--warning-alt] text-[color:--bq-text--warning];\n }\n}\n\n/* ------------------------------ Close button ------------------------------ */\n\n.bq-tag__close::part(button) {\n @apply pointer-events-none h-fit border-0 p-0;\n}\n\n/* --------------- Apply the right size to the bq-icon prefix --------------- */\n\n.bq-tag__prefix ::slotted(bq-icon) {\n --bq-icon--size: var(--bq-tag--icon-prefix-size) !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';\nimport { iconSize, textColor } from './helper';\nimport { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.\n * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n * @part text - The `<div>` element containing the text of the tag component.\n * @part btn-close - The close button element to remove the tag component.\n */\n@Component({\n tag: 'bq-tag',\n styleUrl: './scss/bq-tag.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqTag {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTagElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n\n // Public Property API\n // ========================\n\n /** The corner radius of the Tag (will override size's predefined border) */\n @Prop({ reflect: true }) border: TTagBorderRadius;\n\n /** If true, the Tag can be clickable */\n @Prop({ reflect: true }) clickable: boolean = false;\n\n /** The color style of the Tag */\n @Prop({ reflect: true }) color: TTagColor;\n\n /** If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /** If true, the Tag component will hidden (only if removable = `true`) */\n @Prop({ reflect: true, mutable: true }) hidden: boolean;\n\n /** If true, the Tag component can be removed */\n @Prop({ reflect: true }) removable: boolean = false;\n\n /** If true, the Tag is selected (only if clickable = `true`) */\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /** The size of the Tag component */\n @Prop({ reflect: true }) size: TTagSize = 'medium';\n\n /** The variant of Tag to apply on top of the variant */\n @Prop({ reflect: true }) variant: TTagVariant = 'filled';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(TAG_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAG_VARIANT, 'filled', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the tag is close/hidden */\n @Event() bqClose: EventEmitter;\n\n /** Callback handler to be called when the tag is not open/shown */\n @Event() bqOpen: EventEmitter;\n\n /** Handler to be called when tag loses focus */\n @Event() bqBlur: EventEmitter<HTMLBqTagElement>;\n\n /** Handler to be called when tag is clicked */\n @Event() bqClick: EventEmitter<HTMLBqTagElement>;\n\n /** Handler to be called when tag is focused */\n @Event() bqFocus: EventEmitter<HTMLBqTagElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /** Method to be called to remove the tag component */\n @Method()\n async hide(): Promise<void> {\n this.handleHide();\n }\n\n /** Method to be called to show the tag component */\n @Method()\n async show(): Promise<void> {\n this.handleShow();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = () => {\n if (!this.isRemovable) return;\n\n const ev = this.bqClose.emit(this.el);\n if (!ev.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n private handleShow = () => {\n if (!this.isRemovable) return;\n\n const ev = this.bqOpen.emit(this.el);\n if (!ev.defaultPrevented) {\n this.hidden = false;\n }\n };\n\n private handleClick = () => {\n // If the tag is not clickable or the tag is disabled, we don't want to handle the click\n if (!this.isClickable || this.disabled) return;\n\n // Emit a click event on the element\n const ev = this.bqClick.emit(this.el);\n // If the event was not prevented, toggle the clickable state\n if (!ev.defaultPrevented) {\n this.selected = !this.selected;\n }\n };\n\n private handleBlur = () => {\n if (!this.isClickable) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (!this.isClickable) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private get isClickable(): boolean {\n return this.clickable && !this.color && !this.hasCustomColor && !this.removable;\n }\n\n private get isRemovable(): boolean {\n return this.removable && !this.isClickable;\n }\n\n private get isHidden(): boolean {\n return this.isRemovable && this.hidden;\n }\n\n private get hasCustomColor(): boolean {\n return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,\n ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),\n ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),\n ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--alt)` }),\n };\n\n return (\n <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>\n <button\n class={{\n [`bq-tag bq-tag__${this.size}`]: true,\n [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,\n 'is-clickable': this.isClickable,\n 'is-removable': this.removable,\n // Active/Selected state when clickable\n active: this.isClickable && this.selected,\n // Fixed border radius\n 'has-border': !!this.border,\n }}\n disabled={this.disabled}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n tabindex={this.isClickable ? 0 : -1}\n part=\"wrapper\"\n >\n <span\n class={{ 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <div\n class={{\n 'text-xs': this.size === 'xsmall',\n 'text-s': this.size === 'small',\n 'text-m': this.size === 'medium',\n }}\n part=\"text\"\n >\n <slot />\n </div>\n {this.isRemovable && !this.disabled && (\n <bq-button class=\"bq-tag__close\" appearance=\"text\" size=\"small\" onClick={this.handleHide} part=\"btn-close\">\n <bq-icon\n size={iconSize(this.size)}\n name=\"x-circle\"\n color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}\n />\n </bq-button>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by Endavans
|
|
3
|
-
* © https://beeq.design - Apache 2 License.
|
|
4
|
-
*/
|
|
5
|
-
import { r as registerInstance, c as createEvent, h, a as Host } from './index-d71ec085.js';
|
|
6
|
-
import { g as getBasePath } from './assetsPath-4b5ef75f.js';
|
|
7
|
-
import { i as isString } from './isString-9820a2b7.js';
|
|
8
|
-
import { g as getColorCSSVariable } from './cssVariables-5ffccc29.js';
|
|
9
|
-
|
|
10
|
-
/* -------------------------------------------------------------------------- */
|
|
11
|
-
const requests = new Map();
|
|
12
|
-
const fetchSvg = async (url, sanitize) => {
|
|
13
|
-
let req;
|
|
14
|
-
if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
|
|
15
|
-
const rsp = await fetch(url);
|
|
16
|
-
if (rsp.ok) {
|
|
17
|
-
return rsp.text().then((svgContent) => {
|
|
18
|
-
if (svgContent && sanitize !== false)
|
|
19
|
-
svgContent = validateContent(svgContent);
|
|
20
|
-
iconContent.set(url, svgContent || '');
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
iconContent.set(url, '');
|
|
24
|
-
// cache for the same requests
|
|
25
|
-
requests.set(url, req);
|
|
26
|
-
return req;
|
|
27
|
-
}
|
|
28
|
-
iconContent.set(url, '');
|
|
29
|
-
return Promise.resolve();
|
|
30
|
-
};
|
|
31
|
-
const iconContent = new Map();
|
|
32
|
-
const getSvgContent = async (url, sanitize) => {
|
|
33
|
-
// see if we already have a request for this SVG file
|
|
34
|
-
const req = await requests.get(url);
|
|
35
|
-
if (!req)
|
|
36
|
-
return fetchSvg(url, sanitize);
|
|
37
|
-
return req;
|
|
38
|
-
};
|
|
39
|
-
const validateContent = (svgContent) => {
|
|
40
|
-
const svgTag = 'svg';
|
|
41
|
-
const iconCssClass = 'bq-icon__svg';
|
|
42
|
-
const div = document.createElement('div');
|
|
43
|
-
div.innerHTML = svgContent;
|
|
44
|
-
for (let i = div.childNodes.length - 1; i >= 0; i--) {
|
|
45
|
-
if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {
|
|
46
|
-
div.removeChild(div.childNodes[i]);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
// must only have 1 root element
|
|
50
|
-
const svgElm = div.firstElementChild;
|
|
51
|
-
if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {
|
|
52
|
-
// keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class
|
|
53
|
-
const othersCssClasses = svgElm.getAttribute('class') || '';
|
|
54
|
-
svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());
|
|
55
|
-
// set the shadow DOM part for the SVG element
|
|
56
|
-
svgElm.setAttribute('part', svgTag);
|
|
57
|
-
// remove height and width attribute, if for some reason they are still present in the SVG tag
|
|
58
|
-
svgElm.removeAttribute('height');
|
|
59
|
-
svgElm.removeAttribute('width');
|
|
60
|
-
// root element must be an svg
|
|
61
|
-
// lets double check we've got valid elements
|
|
62
|
-
// do not allow scripts
|
|
63
|
-
if (isValid(svgElm))
|
|
64
|
-
return div.innerHTML;
|
|
65
|
-
}
|
|
66
|
-
return '';
|
|
67
|
-
};
|
|
68
|
-
const isValid = (elm) => {
|
|
69
|
-
if (elm.nodeType === Node.ELEMENT_NODE) {
|
|
70
|
-
if (elm.nodeName.toLowerCase() === 'script')
|
|
71
|
-
return false;
|
|
72
|
-
for (const attribute of Array.from(elm.attributes)) {
|
|
73
|
-
const value = attribute.value;
|
|
74
|
-
if (isString(value) && value.toLowerCase().startsWith('on')) {
|
|
75
|
-
return false;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
for (const childNode of Array.from(elm.children)) {
|
|
79
|
-
if (!isValid(childNode))
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
return true;
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
const bqIconCss = "::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.inline-block{display:inline-block}.fill-current{fill:currentColor}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-icon--color:inherit;--bq-icon--size:24px;display:inline-block}.bq-icon__svg{fill:currentColor}.static{position:static}.flex{display:flex}.h-\\[var\\(--bq-icon--size\\)\\]{height:var(--bq-icon--size)}.w-\\[var\\(--bq-icon--size\\)\\]{width:var(--bq-icon--size)}.text-\\[color\\:var\\(--bq-icon--color\\)\\]{color:var(--bq-icon--color)}";
|
|
87
|
-
const BqIconStyle0 = bqIconCss;
|
|
88
|
-
|
|
89
|
-
const BqIcon = class {
|
|
90
|
-
constructor(hostRef) {
|
|
91
|
-
registerInstance(this, hostRef);
|
|
92
|
-
this.svgLoaded = createEvent(this, "svgLoaded", 7);
|
|
93
|
-
// Listeners
|
|
94
|
-
// ==============
|
|
95
|
-
// Public methods API
|
|
96
|
-
// These methods are exposed on the host element.
|
|
97
|
-
// Always use two lines.
|
|
98
|
-
// Public Methods must be async.
|
|
99
|
-
// Requires JSDocs for public API documentation.
|
|
100
|
-
// ===============================================
|
|
101
|
-
// Local methods
|
|
102
|
-
// Internal business logic.
|
|
103
|
-
// These methods cannot be called from the host element.
|
|
104
|
-
// =======================================================
|
|
105
|
-
this.getIconSource = () => {
|
|
106
|
-
if (!this.name && !this.src)
|
|
107
|
-
return;
|
|
108
|
-
// Return the src if it is set
|
|
109
|
-
if (this.src)
|
|
110
|
-
return this.src;
|
|
111
|
-
const { iconPath } = this.getIconDetails();
|
|
112
|
-
return getBasePath(iconPath);
|
|
113
|
-
};
|
|
114
|
-
this.loadIcon = () => {
|
|
115
|
-
const url = this.getIconSource();
|
|
116
|
-
getSvgContent(url, true).then(() => {
|
|
117
|
-
this._svgContent = iconContent.get(url);
|
|
118
|
-
this.svgLoaded.emit(this._svgContent);
|
|
119
|
-
});
|
|
120
|
-
};
|
|
121
|
-
this.getIconDetails = () => {
|
|
122
|
-
const REGULAR = 'regular';
|
|
123
|
-
const SVG_EXTENSION = '.svg';
|
|
124
|
-
const LOCAL_SVG_PATH = './svg/';
|
|
125
|
-
// Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.
|
|
126
|
-
// Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.
|
|
127
|
-
const isWeightedIcon = this.weight !== REGULAR;
|
|
128
|
-
// If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.
|
|
129
|
-
// Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.
|
|
130
|
-
const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';
|
|
131
|
-
// Construct the icon name by appending the weight suffix (if any) and the file extension.
|
|
132
|
-
// Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.
|
|
133
|
-
const iconName = `${this.name}${weightSuffix}${SVG_EXTENSION}`;
|
|
134
|
-
// Construct the path to the icon file.
|
|
135
|
-
// Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.
|
|
136
|
-
const iconPath = `${LOCAL_SVG_PATH}${iconName}`;
|
|
137
|
-
// Return the icon name and path.
|
|
138
|
-
return { iconName, iconPath };
|
|
139
|
-
};
|
|
140
|
-
this._svgContent = undefined;
|
|
141
|
-
this.label = undefined;
|
|
142
|
-
this.color = undefined;
|
|
143
|
-
this.name = undefined;
|
|
144
|
-
this.size = 24;
|
|
145
|
-
this.src = undefined;
|
|
146
|
-
this.weight = 'regular';
|
|
147
|
-
}
|
|
148
|
-
// Prop lifecycle events
|
|
149
|
-
// =======================
|
|
150
|
-
handlePropsChange() {
|
|
151
|
-
this.loadIcon();
|
|
152
|
-
}
|
|
153
|
-
// Component lifecycle events
|
|
154
|
-
// Ordered by their natural call order
|
|
155
|
-
// =====================================
|
|
156
|
-
componentWillLoad() {
|
|
157
|
-
this.handlePropsChange();
|
|
158
|
-
}
|
|
159
|
-
// render() function
|
|
160
|
-
// Always the last one in the class.
|
|
161
|
-
// ===================================
|
|
162
|
-
render() {
|
|
163
|
-
var _a;
|
|
164
|
-
const styles = {
|
|
165
|
-
...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),
|
|
166
|
-
...(this.size && { '--bq-icon--size': `${this.size}px` }),
|
|
167
|
-
};
|
|
168
|
-
return (h(Host, { key: '93064986f0beaecc9b96e85a0f4fb1b86ea35f35', style: styles }, h("div", { key: '2d9320d4cfcd0ca171bfd0bcef6459ee369503c4', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : `${this.name} icon`, class: "flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]", innerHTML: this._svgContent, part: "base", role: "img" })));
|
|
169
|
-
}
|
|
170
|
-
static get assetsDirs() { return ["svg"]; }
|
|
171
|
-
static get watchers() { return {
|
|
172
|
-
"color": ["handlePropsChange"],
|
|
173
|
-
"name": ["handlePropsChange"],
|
|
174
|
-
"size": ["handlePropsChange"],
|
|
175
|
-
"weight": ["handlePropsChange"]
|
|
176
|
-
}; }
|
|
177
|
-
};
|
|
178
|
-
BqIcon.style = BqIconStyle0;
|
|
179
|
-
|
|
180
|
-
export { BqIcon as bq_icon };
|
|
181
|
-
|
|
182
|
-
//# sourceMappingURL=bq-icon.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"bq-icon.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Icon request helper */\n/* -------------------------------------------------------------------------- */\n\nimport { isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n let req: Promise<unknown>;\n\n if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n const rsp = await fetch(url);\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n iconContent.set(url, svgContent || '');\n });\n }\n iconContent.set(url, '');\n // cache for the same requests\n requests.set(url, req);\n return req;\n }\n\n iconContent.set(url, '');\n return Promise.resolve();\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n // see if we already have a request for this SVG file\n const req = await requests.get(url);\n if (!req) return fetchSvg(url, sanitize);\n\n return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n const svgTag = 'svg';\n const iconCssClass = 'bq-icon__svg';\n\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n const othersCssClasses = svgElm.getAttribute('class') || '';\n svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n // set the shadow DOM part for the SVG element\n svgElm.setAttribute('part', svgTag);\n\n // remove height and width attribute, if for some reason they are still present in the SVG tag\n svgElm.removeAttribute('height');\n svgElm.removeAttribute('width');\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n }\n\n return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n if (elm.nodeType === Node.ELEMENT_NODE) {\n if (elm.nodeName.toLowerCase() === 'script') return false;\n\n for (const attribute of Array.from(elm.attributes)) {\n const value = attribute.value;\n if (isString(value) && value.toLowerCase().startsWith('on')) {\n return false;\n }\n }\n\n for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n if (!isValid(childNode)) return false;\n }\n }\n return true;\n};\n","/* -------------------------------------------------------------------------- */\n/* Icon styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n @apply fill-current;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private _svgContent: string;\n\n // Public Property API\n // ========================\n\n /** Label for the icon, used for accessibility */\n @Prop({ reflect: true }) label?: string;\n\n /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n @Prop({ reflect: true }) color?: string;\n\n /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n @Prop({ reflect: true }) name!: string;\n\n /** Set the size of the SVG */\n @Prop({ reflect: true }) size?: string | number = 24;\n\n /** Set the source of the SVG. If the source is set, the name property will be ignored */\n @Prop({ reflect: true }) src?: string;\n\n /** It set the icon weight/style */\n @Prop({ reflect: true }) weight?: TIconWeight = 'regular';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n @Watch('weight')\n handlePropsChange() {\n this.loadIcon();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handlePropsChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private getIconSource = () => {\n if (!this.name && !this.src) return;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const { iconPath } = this.getIconDetails();\n return getBasePath(iconPath);\n };\n\n private loadIcon = () => {\n const url = this.getIconSource();\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n private getIconDetails = (): { iconName: string; iconPath: string } => {\n const REGULAR = 'regular';\n const SVG_EXTENSION = '.svg';\n const LOCAL_SVG_PATH = './svg/';\n\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const isWeightedIcon = this.weight !== REGULAR;\n\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}${SVG_EXTENSION}`;\n\n // Construct the path to the icon file.\n // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.\n const iconPath = `${LOCAL_SVG_PATH}${iconName}`;\n\n // Return the icon name and path.\n return { iconName, iconPath };\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={this.label ?? `${this.name} icon`}\n class=\"flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"bq-panel.entry.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,wpqBAAwpqB,CAAC;AAC5qqB,sBAAe,UAAU;;MCaZ,OAAO;;;wBAqB2B,CAAC;yBAGa,cAAc;oBAGhB,KAAK;yBAGf,KAAK;wBAGP,CAAC;wBAGa,OAAO;;;;IAMlE,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,OAAO;SACR;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAOD,YAAY;;QACV,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAC5C;;;;;;;IAUD,gBAAgB;;QAEd,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACjF,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,IAAI,CAAC,OAAO,GAAG;YACb,qBAAqB,EAAE,MAAM,aAAa,CAAC,qBAAqB,EAAE;YAClE,cAAc,EAAE,aAAa;SAC9B,CAAC;QAEF,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAChF,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,EAAE,CAAC;KAC5B;;;;;;;;;;;;;IAiBO,SAAS;;QACf,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,EAAE,CAAC;KAC3B;IAEO,MAAM,SAAS;QACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,IAAY,OAAO;QACjB,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;KACH;;;;IAMD,MAAM;QACJ,QACE,4DACE,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,iBACjB,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,EAClB,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/panel/scss/bq-panel.scss?tag=bq-panel&encapsulation=shadow","../../packages/beeq/src/components/panel/bq-panel.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Panel styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-panel.variables';\n\n:host {\n @apply block;\n}\n\n.bq-panel {\n @include animation-fade-in;\n @apply fixed z-[--bq-panel-z-index] max-h-[--bq-panel--height] w-[--bq-panel--width] overflow-y-auto overflow-x-hidden;\n @apply rounded-[--bq-panel--border-radius] bg-[--bq-panel--background] shadow-[shadow:--bq-panel--box-shadow];\n @apply py-[--bq-panel--paddingY] pe-[--bq-panel--padding-end] ps-[--bq-panel--padding-start];\n @apply border-[length:--bq-panel--border-width] border-[color:--bq-panel--border-color];\n\n border-style: var(--bq-panel--border-style);\n}\n","import { ReferenceElement } from '@floating-ui/dom';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { FloatingUIPlacement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\n\n/**\n * @part panel - The `<div>` element used to display and style the panel\n */\n@Component({\n tag: 'bq-panel',\n styleUrl: './scss/bq-panel.scss',\n shadow: true,\n})\nexport class BqPanel {\n // Own Properties\n // ====================\n\n private panel: HTMLElement;\n private floatingUI: FloatingUI;\n private trigger: ReferenceElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqPanelElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n @Prop({ reflect: true }) distance?: number = 4;\n\n /** Position of the panel */\n @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom-start';\n\n /** If true, the panel will be visible. */\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /** Whether the panel should have the same width as the trigger element */\n @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n /** Represents the skidding between the panel and the trigger element. */\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /** Defines the strategy to position the panel */\n @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('open')\n handleOpenChange() {\n if (!this.open) {\n this.hidePanel();\n return;\n }\n\n this.showPanel();\n }\n\n @Watch('distance')\n @Watch('placement')\n @Watch('sameWidth')\n @Watch('skidding')\n @Watch('strategy')\n onPropChange() {\n this.floatingUI?.init({ ...this.options });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n // We need to find the trigger element from the parent to position the panel relative to it.\n const parentTrigger = this.el.parentElement.querySelector('div[part=\"trigger\"]');\n if (!parentTrigger) return;\n\n this.trigger = {\n getBoundingClientRect: () => parentTrigger.getBoundingClientRect(),\n contextElement: parentTrigger,\n };\n\n this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });\n this.handleOpenChange();\n }\n\n disconnectedCallback() {\n this.floatingUI?.destroy();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private showPanel() {\n this.floatingUI?.update();\n }\n\n private async hidePanel() {\n this.open = false;\n }\n\n private get options() {\n return {\n distance: this.distance,\n placement: this.placement,\n sameWidth: this.sameWidth,\n skidding: this.skidding,\n strategy: this.strategy,\n };\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class=\"bq-panel\"\n ref={(el) => (this.panel = el)}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open}\n part=\"panel\"\n >\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
|