@beeq/core 1.8.0-beta.0 → 1.8.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/beeq/beeq.esm.js +43 -1
- package/dist/beeq/beeq.esm.js.map +1 -1
- package/dist/beeq/index.esm.js +64 -1
- package/dist/beeq/index.esm.js.map +1 -1
- package/dist/beeq/p-063a3968.entry.js +388 -0
- package/dist/beeq/{p-9acfedb8.entry.js.map → p-063a3968.entry.js.map} +1 -1
- package/dist/beeq/p-0979fdfd.entry.js +297 -0
- package/dist/beeq/{p-7f23cde7.entry.js.map → p-0979fdfd.entry.js.map} +1 -1
- package/dist/beeq/p-0ab0b58d.js +25 -1
- package/dist/beeq/p-0ab0b58d.js.map +1 -1
- package/dist/beeq/p-0c42c08a.js +1811 -0
- package/dist/beeq/p-0c42c08a.js.map +1 -0
- package/dist/beeq/p-0f48adcc.entry.js +117 -0
- package/dist/beeq/{p-9f40249f.entry.js.map → p-0f48adcc.entry.js.map} +1 -1
- package/dist/beeq/p-115ed5b2.js +25 -1
- package/dist/beeq/p-115ed5b2.js.map +1 -1
- package/dist/beeq/p-14b44a4b.entry.js +205 -0
- package/dist/beeq/{p-8059836c.entry.js.map → p-14b44a4b.entry.js.map} +1 -1
- package/dist/beeq/p-1715ac80.entry.js +274 -0
- package/dist/beeq/{p-eab59153.entry.js.map → p-1715ac80.entry.js.map} +1 -1
- package/dist/beeq/p-1c8b6eb4.js +12 -1
- package/dist/beeq/p-1c8b6eb4.js.map +1 -1
- package/dist/beeq/p-1f3a4359.js +11 -1
- package/dist/beeq/p-1f3a4359.js.map +1 -1
- package/dist/beeq/p-242ac28a.entry.js +145 -0
- package/dist/beeq/{p-90c5851d.entry.js.map → p-242ac28a.entry.js.map} +1 -1
- package/dist/beeq/p-297fb76b.entry.js +220 -0
- package/dist/beeq/{p-79b7547b.entry.js.map → p-297fb76b.entry.js.map} +1 -1
- package/dist/beeq/p-2bb65f53.entry.js +204 -0
- package/dist/beeq/{p-a8cb8989.entry.js.map → p-2bb65f53.entry.js.map} +1 -1
- package/dist/beeq/p-2e66fc4f.entry.js +434 -0
- package/dist/beeq/{p-ddb23180.entry.js.map → p-2e66fc4f.entry.js.map} +1 -1
- package/dist/beeq/p-36652891.entry.js +102 -0
- package/dist/beeq/{p-633319f3.entry.js.map → p-36652891.entry.js.map} +1 -1
- package/dist/beeq/p-38d4bd8a.js +1934 -1
- package/dist/beeq/p-38d4bd8a.js.map +1 -1
- package/dist/beeq/p-39b7c578.entry.js +84 -0
- package/dist/beeq/{p-94d62f1b.entry.js.map → p-39b7c578.entry.js.map} +1 -1
- package/dist/beeq/p-39d77ba6.entry.js +90 -0
- package/dist/beeq/{p-be664fb0.entry.js.map → p-39d77ba6.entry.js.map} +1 -1
- package/dist/beeq/p-3fd0d92d.js +1228 -1
- package/dist/beeq/p-3fd0d92d.js.map +1 -1
- package/dist/beeq/p-4688e046.js +16 -0
- package/dist/beeq/{p-aee056e5.js.map → p-4688e046.js.map} +1 -1
- package/dist/beeq/p-49249dda.entry.js +156 -0
- package/dist/beeq/{p-235328ee.entry.js.map → p-49249dda.entry.js.map} +1 -1
- package/dist/beeq/p-548b45b7.entry.js +104 -0
- package/dist/beeq/{p-ae8ffb81.entry.js.map → p-548b45b7.entry.js.map} +1 -1
- package/dist/beeq/p-57621be1.js +9 -1
- package/dist/beeq/p-57621be1.js.map +1 -1
- package/dist/beeq/p-57a55ac5.entry.js +261 -0
- package/dist/beeq/{p-52577f3a.entry.js.map → p-57a55ac5.entry.js.map} +1 -1
- package/dist/beeq/p-5e11b866.entry.js +102 -0
- package/dist/beeq/{p-b7281046.entry.js.map → p-5e11b866.entry.js.map} +1 -1
- package/dist/beeq/p-687da041.js +20 -1
- package/dist/beeq/p-687da041.js.map +1 -1
- package/dist/beeq/p-6a4e104b.entry.js +263 -0
- package/dist/beeq/{p-3aa41d80.entry.js.map → p-6a4e104b.entry.js.map} +1 -1
- package/dist/beeq/p-6a5a79a3.entry.js +184 -0
- package/dist/beeq/{p-606c080c.entry.js.map → p-6a5a79a3.entry.js.map} +1 -1
- package/dist/beeq/p-7f301da8.entry.js +508 -0
- package/dist/beeq/p-7f301da8.entry.js.map +1 -0
- package/dist/beeq/p-81f1c3ba.entry.js +121 -0
- package/dist/beeq/{p-c9c942e6.entry.js.map → p-81f1c3ba.entry.js.map} +1 -1
- package/dist/beeq/p-822773ae.entry.js +195 -0
- package/dist/beeq/{p-a7b0fd0b.entry.js.map → p-822773ae.entry.js.map} +1 -1
- package/dist/beeq/p-951ba558.js +64 -1
- package/dist/beeq/p-951ba558.js.map +1 -1
- package/dist/beeq/p-99829fc7.js +8 -1
- package/dist/beeq/p-99829fc7.js.map +1 -1
- package/dist/beeq/p-9990889d.entry.js +222 -0
- package/dist/beeq/{p-9cd26e8d.entry.js.map → p-9990889d.entry.js.map} +1 -1
- package/dist/beeq/p-a1b43de6.entry.js +248 -0
- package/dist/beeq/{p-4ba2bec7.entry.js.map → p-a1b43de6.entry.js.map} +1 -1
- package/dist/beeq/p-a5dc1c94.js +118 -1
- package/dist/beeq/p-a5dc1c94.js.map +1 -1
- package/dist/beeq/p-a6489187.entry.js +103 -0
- package/dist/beeq/{p-b90c6de9.entry.js.map → p-a6489187.entry.js.map} +1 -1
- package/dist/beeq/p-a8cad5ab.js +5 -1
- package/dist/beeq/p-a8cad5ab.js.map +1 -1
- package/dist/beeq/p-ac969486.entry.js +330 -0
- package/dist/beeq/{p-4739f5c3.entry.js.map → p-ac969486.entry.js.map} +1 -1
- package/dist/beeq/p-af062402.js +7 -1
- package/dist/beeq/p-af062402.js.map +1 -1
- package/dist/beeq/p-afc9fd80.entry.js +144 -0
- package/dist/beeq/{p-6e026fad.entry.js.map → p-afc9fd80.entry.js.map} +1 -1
- package/dist/beeq/p-bef53750.js +79 -0
- package/dist/beeq/p-bef53750.js.map +1 -0
- package/dist/beeq/p-bf2320dd.entry.js +329 -0
- package/dist/beeq/{p-e6382462.entry.js.map → p-bf2320dd.entry.js.map} +1 -1
- package/dist/beeq/p-c34e292e.entry.js +127 -0
- package/dist/beeq/{p-268dc1e3.entry.js.map → p-c34e292e.entry.js.map} +1 -1
- package/dist/beeq/p-d7a88b16.js +87 -1
- package/dist/beeq/p-d7a88b16.js.map +1 -1
- package/dist/beeq/p-db18eba1.entry.js +173 -0
- package/dist/beeq/{p-eddb77c7.entry.js.map → p-db18eba1.entry.js.map} +1 -1
- package/dist/beeq/p-dd950c12.entry.js +309 -0
- package/dist/beeq/{p-63ad9702.entry.js.map → p-dd950c12.entry.js.map} +1 -1
- package/dist/beeq/p-e301647a.entry.js +87 -0
- package/dist/beeq/{p-3b2ce34b.entry.js.map → p-e301647a.entry.js.map} +1 -1
- package/dist/beeq/p-e3aa2886.entry.js +203 -0
- package/dist/beeq/{p-a006be9e.entry.js.map → p-e3aa2886.entry.js.map} +1 -1
- package/dist/beeq/p-e41f07ae.entry.js +173 -0
- package/dist/beeq/{p-9c6c6646.entry.js.map → p-e41f07ae.entry.js.map} +1 -1
- package/dist/beeq/p-e88257a8.entry.js +259 -0
- package/dist/beeq/{p-d2bbae3b.entry.js.map → p-e88257a8.entry.js.map} +1 -1
- package/dist/beeq/p-e9a54b49.entry.js +145 -0
- package/dist/beeq/{p-96d7f361.entry.js.map → p-e9a54b49.entry.js.map} +1 -1
- package/dist/beeq/p-ecd27cf2.js +11 -1
- package/dist/beeq/p-ecd27cf2.js.map +1 -1
- package/dist/beeq/p-f77d9b8b.entry.js +144 -0
- package/dist/beeq/{p-41bac721.entry.js.map → p-f77d9b8b.entry.js.map} +1 -1
- package/dist/beeq/p-fd658de1.entry.js +135 -0
- package/dist/beeq/{p-255fcbe4.entry.js.map → p-fd658de1.entry.js.map} +1 -1
- package/dist/beeq/p-ffb48c40.entry.js +258 -0
- package/dist/beeq/{p-b9544567.entry.js.map → p-ffb48c40.entry.js.map} +1 -1
- package/dist/beeq/p-ffddc425.entry.js +149 -0
- package/dist/beeq/{p-571b40ff.entry.js.map → p-ffddc425.entry.js.map} +1 -1
- package/dist/cjs/app-globals-b11284b9.js.map +1 -1
- package/dist/cjs/assetsPath-3938a05d.js +78 -0
- package/dist/cjs/assetsPath-3938a05d.js.map +1 -0
- package/dist/cjs/beeq.cjs.js +1 -1
- package/dist/cjs/bq-accordion-group.cjs.entry.js +2 -2
- package/dist/cjs/bq-accordion.cjs.entry.js +2 -2
- package/dist/cjs/bq-alert.cjs.entry.js +2 -2
- package/dist/cjs/bq-avatar.cjs.entry.js +2 -2
- package/dist/cjs/bq-badge.cjs.entry.js +2 -2
- package/dist/cjs/bq-breadcrumb-item.cjs.entry.js +3 -3
- package/dist/cjs/bq-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/bq-button_2.cjs.entry.js +3 -3
- package/dist/cjs/bq-card.cjs.entry.js +2 -2
- package/dist/cjs/bq-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/bq-date-picker.cjs.entry.js +3 -3
- package/dist/cjs/bq-dialog.cjs.entry.js +2 -2
- package/dist/cjs/bq-divider.cjs.entry.js +2 -2
- package/dist/cjs/bq-drawer.cjs.entry.js +3 -3
- package/dist/cjs/bq-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/bq-empty-state.cjs.entry.js +2 -2
- package/dist/cjs/bq-input.cjs.entry.js +3 -3
- package/dist/cjs/bq-notification.cjs.entry.js +2 -2
- package/dist/cjs/bq-option-group.cjs.entry.js +1 -1
- package/dist/cjs/bq-option-list_2.cjs.entry.js +2 -2
- package/dist/cjs/bq-option.cjs.entry.js +2 -2
- package/dist/cjs/bq-page-title.cjs.entry.js +2 -2
- package/dist/cjs/bq-progress.cjs.entry.js +2 -2
- package/dist/cjs/bq-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/bq-radio.cjs.entry.js +1 -1
- package/dist/cjs/bq-select.cjs.entry.js +12 -12
- package/dist/cjs/bq-select.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-side-menu-item.cjs.entry.js +2 -2
- 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 +2 -2
- package/dist/cjs/bq-status.cjs.entry.js +2 -2
- package/dist/cjs/bq-step-item.cjs.entry.js +2 -2
- package/dist/cjs/bq-steps.cjs.entry.js +2 -2
- package/dist/cjs/bq-switch.cjs.entry.js +2 -2
- package/dist/cjs/bq-tab-group.cjs.entry.js +2 -2
- package/dist/cjs/bq-tab.cjs.entry.js +2 -2
- package/dist/cjs/bq-textarea.cjs.entry.js +2 -2
- package/dist/cjs/bq-toast.cjs.entry.js +2 -2
- package/dist/cjs/bq-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/{index-e6d59dbb.js → index-1d3aac65.js} +20 -2
- package/dist/cjs/index-1d3aac65.js.map +1 -0
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/{isDefined-4f4a320b.js → isDefined-750bffc4.js} +2 -2
- package/dist/cjs/{isDefined-4f4a320b.js.map → isDefined-750bffc4.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/drawer/scss/bq-drawer.css +1 -1
- package/dist/collection/components/select/bq-select.js +10 -10
- package/dist/collection/components/select/bq-select.js.map +1 -1
- package/dist/collection/components/select/scss/bq-select.css +1 -1
- package/dist/collection/shared/utils/assetsPath.js +52 -26
- package/dist/collection/shared/utils/assetsPath.js.map +1 -1
- package/dist/components/assetsPath.js +52 -26
- package/dist/components/assetsPath.js.map +1 -1
- package/dist/components/bq-drawer.js +1 -1
- package/dist/components/bq-select.js +10 -10
- package/dist/components/bq-select.js.map +1 -1
- package/dist/esm/app-globals-de5a646b.js.map +1 -1
- package/dist/esm/assetsPath-a1b58980.js +75 -0
- package/dist/esm/assetsPath-a1b58980.js.map +1 -0
- package/dist/esm/beeq.js +2 -2
- package/dist/esm/bq-accordion-group.entry.js +2 -2
- package/dist/esm/bq-accordion.entry.js +2 -2
- package/dist/esm/bq-alert.entry.js +2 -2
- package/dist/esm/bq-avatar.entry.js +2 -2
- package/dist/esm/bq-badge.entry.js +2 -2
- package/dist/esm/bq-breadcrumb-item.entry.js +3 -3
- package/dist/esm/bq-breadcrumb.entry.js +2 -2
- package/dist/esm/bq-button_2.entry.js +3 -3
- package/dist/esm/bq-card.entry.js +2 -2
- package/dist/esm/bq-checkbox.entry.js +2 -2
- package/dist/esm/bq-date-picker.entry.js +3 -3
- package/dist/esm/bq-dialog.entry.js +2 -2
- package/dist/esm/bq-divider.entry.js +2 -2
- package/dist/esm/bq-drawer.entry.js +3 -3
- package/dist/esm/bq-dropdown_2.entry.js +1 -1
- package/dist/esm/bq-empty-state.entry.js +2 -2
- package/dist/esm/bq-input.entry.js +3 -3
- package/dist/esm/bq-notification.entry.js +2 -2
- package/dist/esm/bq-option-group.entry.js +1 -1
- package/dist/esm/bq-option-list_2.entry.js +2 -2
- package/dist/esm/bq-option.entry.js +2 -2
- package/dist/esm/bq-page-title.entry.js +2 -2
- package/dist/esm/bq-progress.entry.js +2 -2
- package/dist/esm/bq-radio-group.entry.js +2 -2
- package/dist/esm/bq-radio.entry.js +1 -1
- package/dist/esm/bq-select.entry.js +13 -13
- package/dist/esm/bq-select.entry.js.map +1 -1
- package/dist/esm/bq-side-menu-item.entry.js +2 -2
- 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 +2 -2
- package/dist/esm/bq-status.entry.js +2 -2
- package/dist/esm/bq-step-item.entry.js +2 -2
- package/dist/esm/bq-steps.entry.js +2 -2
- package/dist/esm/bq-switch.entry.js +2 -2
- package/dist/esm/bq-tab-group.entry.js +2 -2
- package/dist/esm/bq-tab.entry.js +2 -2
- package/dist/esm/bq-textarea.entry.js +2 -2
- package/dist/esm/bq-toast.entry.js +2 -2
- package/dist/esm/bq-tooltip.entry.js +1 -1
- package/dist/esm/{index-efc1c2ef.js → index-f69556fe.js} +20 -2
- package/dist/esm/index-f69556fe.js.map +1 -0
- package/dist/esm/index.js +3 -3
- package/dist/esm/{isDefined-91ae4cd3.js → isDefined-170f3095.js} +2 -2
- package/dist/esm/{isDefined-91ae4cd3.js.map → isDefined-170f3095.js.map} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/hydrate/index.js +62 -36
- package/dist/hydrate/index.mjs +62 -36
- package/dist/stencil.config.js +4 -1
- package/dist/stencil.config.js.map +1 -1
- package/dist/types/home/workflows/workspace/packages/beeq/.stencil/packages/beeq/stencil.config.d.ts +2 -0
- package/dist/types/shared/utils/assetsPath.d.ts +18 -11
- package/package.json +1 -1
- package/dist/beeq/p-235328ee.entry.js +0 -6
- package/dist/beeq/p-255fcbe4.entry.js +0 -6
- package/dist/beeq/p-268dc1e3.entry.js +0 -6
- package/dist/beeq/p-3aa41d80.entry.js +0 -6
- package/dist/beeq/p-3b2ce34b.entry.js +0 -6
- package/dist/beeq/p-41bac721.entry.js +0 -6
- package/dist/beeq/p-4739f5c3.entry.js +0 -6
- package/dist/beeq/p-4ba2bec7.entry.js +0 -6
- package/dist/beeq/p-52577f3a.entry.js +0 -6
- package/dist/beeq/p-571b40ff.entry.js +0 -6
- package/dist/beeq/p-606c080c.entry.js +0 -6
- package/dist/beeq/p-633319f3.entry.js +0 -6
- package/dist/beeq/p-63ad9702.entry.js +0 -6
- package/dist/beeq/p-6e026fad.entry.js +0 -6
- package/dist/beeq/p-6edc8a33.js +0 -6
- package/dist/beeq/p-6edc8a33.js.map +0 -1
- package/dist/beeq/p-76e714c6.js +0 -7
- package/dist/beeq/p-76e714c6.js.map +0 -1
- package/dist/beeq/p-79b7547b.entry.js +0 -6
- package/dist/beeq/p-7f23cde7.entry.js +0 -6
- package/dist/beeq/p-8059836c.entry.js +0 -6
- package/dist/beeq/p-8b7c7049.entry.js +0 -6
- package/dist/beeq/p-8b7c7049.entry.js.map +0 -1
- package/dist/beeq/p-90c5851d.entry.js +0 -6
- package/dist/beeq/p-94d62f1b.entry.js +0 -6
- package/dist/beeq/p-96d7f361.entry.js +0 -6
- package/dist/beeq/p-9acfedb8.entry.js +0 -6
- package/dist/beeq/p-9c6c6646.entry.js +0 -6
- package/dist/beeq/p-9cd26e8d.entry.js +0 -6
- package/dist/beeq/p-9f40249f.entry.js +0 -6
- package/dist/beeq/p-a006be9e.entry.js +0 -6
- package/dist/beeq/p-a7b0fd0b.entry.js +0 -6
- package/dist/beeq/p-a8cb8989.entry.js +0 -6
- package/dist/beeq/p-ae8ffb81.entry.js +0 -6
- package/dist/beeq/p-aee056e5.js +0 -6
- package/dist/beeq/p-b7281046.entry.js +0 -6
- package/dist/beeq/p-b90c6de9.entry.js +0 -6
- package/dist/beeq/p-b9544567.entry.js +0 -6
- package/dist/beeq/p-be664fb0.entry.js +0 -6
- package/dist/beeq/p-c9c942e6.entry.js +0 -6
- package/dist/beeq/p-d2bbae3b.entry.js +0 -6
- package/dist/beeq/p-ddb23180.entry.js +0 -6
- package/dist/beeq/p-e6382462.entry.js +0 -6
- package/dist/beeq/p-eab59153.entry.js +0 -6
- package/dist/beeq/p-eddb77c7.entry.js +0 -6
- package/dist/cjs/assetsPath-eac0a3bf.js +0 -52
- package/dist/cjs/assetsPath-eac0a3bf.js.map +0 -1
- package/dist/cjs/index-e6d59dbb.js.map +0 -1
- package/dist/esm/assetsPath-ae18c25e.js +0 -49
- package/dist/esm/assetsPath-ae18c25e.js.map +0 -1
- package/dist/esm/index-efc1c2ef.js.map +0 -1
- package/dist/types/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/.stencil/packages/beeq/stencil.config.d.ts +0 -2
- /package/dist/types/{Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System → home/workflows/workspace}/packages/beeq/.stencil/tailwind.config.d.ts +0 -0
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Built by Endavans
|
|
3
|
+
* © https://beeq.design - Apache 2 License.
|
|
4
|
+
*/
|
|
5
|
+
import { r, c as a, h as b, g as e } from "./p-0c42c08a.js";
|
|
6
|
+
|
|
7
|
+
const n = '::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;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.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}.absolute{position:absolute}.relative{position:relative}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:var(--bq-radius--full)}.rounded-s{border-radius:var(--bq-radius--s)}.border-\\[length\\:--bq-radio--border-width\\]{border-width:var(--bq-radio--border-width)}.border-solid{border-style:solid}.border-icon-brand{border-color:var(--bq-icon--brand)}.border-stroke-brand{border-color:var(--bq-stroke--brand)}.bg-icon-brand{background-color:var(--bq-icon--brand)}.bg-ui-brand{background-color:var(--bq-ui--brand)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.transition-\\[background-color\\]{transition-duration:.15s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\\[color\\2c background-color\\2c border-color\\2c box-shadow\\]{transition-duration:.15s;transition-property:color,background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bg-hover-ui-primary{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.border-hover-icon-brand{border-color:color-mix(in srgb,var(--bq-icon--brand),var(--bq-hover) 20%)}.border-hover-icon-primary{border-color:color-mix(in srgb,var(--bq-icon--primary),var(--bq-hover) 20%)}.border-hover-ui-brand{border-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}.bs-\\[--bq-radio--size\\]{block-size:var(--bq-radio--size)}.bs-full{block-size:100%}.is-\\[--bq-radio--size\\]{inline-size:var(--bq-radio--size)}.is-full{inline-size:100%}.p-b-0{padding-block:0}.p-b-\\[2px\\]{padding-block:2px}.p-b-\\[3px\\]{padding-block:3px}.p-b-xs{padding-block:var(--bq-spacing-xs)}.p-i-0{padding-inline:0}.p-i-\\[2px\\]{padding-inline:2px}.p-i-\\[3px\\]{padding-inline:3px}.p-i-xs{padding-inline:var(--bq-spacing-xs)}.m-b-0{margin-block:0}.m-i-0{margin-inline:0}.focus{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-radio--size:24px;--bq-radio--border-width:var(--bq-stroke-s);display:inline-block}.bq-radio{align-items:center;border-radius:var(--bq-radius--s);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:.5rem;justify-content:center;padding-block:var(--bq-spacing-xs);padding-inline:var(--bq-spacing-xs);transition-duration:.3s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-radio.is-disabled .bq-radio__circle{opacity:.6}.bq-radio.is-disabled.is-checked .bq-radio__circle{border-color:var(--bq-stroke--brand)}.bq-radio.is-disabled.is-checked .bq-radio__checked{background-color:var(--bq-icon--brand)}.bq-radio.has-background:not(.is-disabled):hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-radio.is-checked:not(.is-disabled) .bq-radio__circle{border-color:var(--bq-icon--brand)}.bq-radio.is-checked:not(.is-disabled) .bq-radio__checked{background-color:var(--bq-ui--brand)}.bq-radio:not(.is-disabled):hover .bq-radio__circle{border-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}.bq-radio.is-checked:not(.is-disabled):hover .bq-radio__checked,.bq-radio.is-checked:not(.is-disabled):hover .bq-radio__circle{border-color:color-mix(in srgb,var(--bq-icon--brand),var(--bq-hover) 20%)}.bq-radio__input{margin-block:0;margin-inline:0;opacity:0;padding-block:0;padding-inline:0;pointer-events:none;position:absolute}.bq-radio__input:focus-visible~.bq-radio__circle{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-radio__control{block-size:var(--bq-radio--size);inline-size:var(--bq-radio--size);padding-block:2px;padding-inline:2px}.bq-radio__circle,.bq-radio__control{align-items:center;border-radius:var(--bq-radius--full);box-sizing:border-box;display:flex;justify-content:center}.bq-radio__circle{block-size:100%;border-color:color-mix(in srgb,var(--bq-icon--primary),var(--bq-hover) 20%);border-style:solid;border-width:var(--bq-radio--border-width);inline-size:100%;padding-block:3px;padding-inline:3px;position:relative}.bq-radio__checked{block-size:100%;border-radius:var(--bq-radius--full);inline-size:100%}.bq-radio__label{color:var(--bq-text--primary);font-weight:var(--bq-font-weight--medium);line-height:var(--bq-font-line-height--regular)}.bq-radio__checked,.bq-radio__circle,.bq-radio__label{transition-duration:.3s;transition-property:color,background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.static{position:static}.\\!cursor-not-allowed{cursor:not-allowed!important}';
|
|
8
|
+
|
|
9
|
+
const i = n;
|
|
10
|
+
|
|
11
|
+
const q = class {
|
|
12
|
+
constructor(b) {
|
|
13
|
+
r(this, b);
|
|
14
|
+
this.bqClick = a(this, "bqClick", 7);
|
|
15
|
+
this.bqFocus = a(this, "bqFocus", 7);
|
|
16
|
+
this.bqBlur = a(this, "bqBlur", 7);
|
|
17
|
+
this.bqKeyDown = a(this, "bqKeyDown", 7);
|
|
18
|
+
// Local methods
|
|
19
|
+
// Internal business logic.
|
|
20
|
+
// These methods cannot be called from the host element.
|
|
21
|
+
// =======================================================
|
|
22
|
+
this.handleClick = () => {
|
|
23
|
+
this.checked = true;
|
|
24
|
+
this.bqClick.emit(this.el);
|
|
25
|
+
};
|
|
26
|
+
this.handleOnFocus = () => {
|
|
27
|
+
this.bqFocus.emit(this.el);
|
|
28
|
+
};
|
|
29
|
+
this.handleOnBlur = () => {
|
|
30
|
+
this.bqBlur.emit(this.el);
|
|
31
|
+
};
|
|
32
|
+
this.handleOnKeyDown = r => {
|
|
33
|
+
this.bqKeyDown.emit(r);
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* This method prevents label to steal the focus and trigger input blur
|
|
37
|
+
* details https://stackoverflow.com/a/73364174
|
|
38
|
+
*/ this.onLabelMouseDown = r => {
|
|
39
|
+
r.preventDefault();
|
|
40
|
+
};
|
|
41
|
+
this.checked = undefined;
|
|
42
|
+
this.disabled = false;
|
|
43
|
+
this.backgroundOnHover = false;
|
|
44
|
+
this.formId = undefined;
|
|
45
|
+
this.name = undefined;
|
|
46
|
+
this.required = undefined;
|
|
47
|
+
this.value = undefined;
|
|
48
|
+
}
|
|
49
|
+
// Component lifecycle events
|
|
50
|
+
// Ordered by their natural call order
|
|
51
|
+
// =====================================
|
|
52
|
+
// Listeners
|
|
53
|
+
// ==============
|
|
54
|
+
// Public methods API
|
|
55
|
+
// These methods are exposed on the host element.
|
|
56
|
+
// Always use two lines.
|
|
57
|
+
// Public Methods must be async.
|
|
58
|
+
// Requires JSDocs for public API documentation.
|
|
59
|
+
// ===============================================
|
|
60
|
+
/**
|
|
61
|
+
* Simulate a click event on the native `<input>` HTML element used under the hood.
|
|
62
|
+
* Use this method instead of the global `element.click()`.
|
|
63
|
+
*/
|
|
64
|
+
async vClick() {
|
|
65
|
+
var r;
|
|
66
|
+
(r = this.inputElement) === null || r === void 0 ? void 0 : r.click();
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Sets focus on the native `<input>` HTML element used under the hood.
|
|
70
|
+
* Use this method instead of the global `element.focus()`.
|
|
71
|
+
*/ async vFocus() {
|
|
72
|
+
var r;
|
|
73
|
+
(r = this.inputElement) === null || r === void 0 ? void 0 : r.focus();
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Remove focus from the native `<input>` HTML element used under the hood.
|
|
77
|
+
* Use this method instead of the global `element.blur()`.
|
|
78
|
+
*/ async vBlur() {
|
|
79
|
+
var r;
|
|
80
|
+
(r = this.inputElement) === null || r === void 0 ? void 0 : r.blur();
|
|
81
|
+
}
|
|
82
|
+
get tabindex() {
|
|
83
|
+
var r;
|
|
84
|
+
// NOTE: this.checked is undefined when is not part of bq-radio-group
|
|
85
|
+
return `${-1 + +((r = this.checked) !== null && r !== void 0 ? r : 1)}`;
|
|
86
|
+
}
|
|
87
|
+
// render() function
|
|
88
|
+
// Always the last one in the class.
|
|
89
|
+
// ===================================
|
|
90
|
+
render() {
|
|
91
|
+
return b("label", {
|
|
92
|
+
key: "5c3d79149753c46b5b1147d8b88b8f714b9d9327",
|
|
93
|
+
class: {
|
|
94
|
+
"bq-radio group": true,
|
|
95
|
+
"is-disabled !cursor-not-allowed": this.disabled,
|
|
96
|
+
"is-checked": this.checked,
|
|
97
|
+
"has-background": this.backgroundOnHover
|
|
98
|
+
},
|
|
99
|
+
part: "base",
|
|
100
|
+
onMouseDown: this.onLabelMouseDown
|
|
101
|
+
}, b("div", {
|
|
102
|
+
key: "25a14be66b45186217a0c05ca258bb470f5193b8",
|
|
103
|
+
class: "bq-radio__control"
|
|
104
|
+
}, b("input", {
|
|
105
|
+
key: "c1a4716ebe77085f8575a6d69114e683fa4c1827",
|
|
106
|
+
class: "bq-radio__input",
|
|
107
|
+
ref: r => this.inputElement = r,
|
|
108
|
+
type: "radio",
|
|
109
|
+
form: this.formId,
|
|
110
|
+
name: this.name,
|
|
111
|
+
value: this.value,
|
|
112
|
+
required: this.required,
|
|
113
|
+
disabled: this.disabled,
|
|
114
|
+
onBlur: this.handleOnBlur,
|
|
115
|
+
onClick: this.handleClick,
|
|
116
|
+
onFocus: this.handleOnFocus,
|
|
117
|
+
onKeyDown: this.handleOnKeyDown,
|
|
118
|
+
"aria-checked": this.checked ? "true" : "false",
|
|
119
|
+
"aria-disabled": this.disabled ? "true" : "false",
|
|
120
|
+
tabindex: this.tabindex,
|
|
121
|
+
part: "input"
|
|
122
|
+
}), b("div", {
|
|
123
|
+
key: "77239c61039c855b9a02e86630d9001f629ef446",
|
|
124
|
+
class: "bq-radio__circle",
|
|
125
|
+
part: "radio"
|
|
126
|
+
}, b("div", {
|
|
127
|
+
key: "34d9cfe32795df738e147cce4a3420242da28823",
|
|
128
|
+
class: "bq-radio__checked"
|
|
129
|
+
}))), b("span", {
|
|
130
|
+
key: "7b15c7b99c8324f9b44109b2e1f012490a07a9c8",
|
|
131
|
+
class: "bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled",
|
|
132
|
+
part: "label"
|
|
133
|
+
}, b("slot", {
|
|
134
|
+
key: "bea9789e0e442c7c665d6bc2cc37d50f9990ab5e"
|
|
135
|
+
})));
|
|
136
|
+
}
|
|
137
|
+
get el() {
|
|
138
|
+
return e(this);
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
q.style = i;
|
|
143
|
+
|
|
144
|
+
export { q as bq_radio };
|
|
145
|
+
//# sourceMappingURL=p-e9a54b49.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["bqRadioCss","BqRadioStyle0","BqRadio","this","handleClick","checked","bqClick","emit","el","handleOnFocus","bqFocus","handleOnBlur","bqBlur","handleOnKeyDown","event","bqKeyDown","onLabelMouseDown","preventDefault","vClick","_a","inputElement","click","vFocus","focus","vBlur","blur","tabindex","render","h","key","class","disabled","backgroundOnHover","part","onMouseDown","ref","element","type","form","formId","name","value","required","onBlur","onClick","onFocus","onKeyDown"],"sources":["../../packages/beeq/src/components/radio/scss/bq-radio.scss?tag=bq-radio&encapsulation=shadow","../../packages/beeq/src/components/radio/bq-radio.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Radio styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-radio.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio {\n @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;\n @apply rounded-s p-b-xs p-i-xs;\n\n &.is-disabled {\n .bq-radio__circle {\n @apply opacity-60;\n }\n\n &.is-checked .bq-radio__circle {\n @apply border-stroke-brand;\n }\n\n &.is-checked .bq-radio__checked {\n @apply bg-icon-brand;\n }\n }\n\n &.has-background:not(.is-disabled):hover {\n @apply bg-hover-ui-primary;\n }\n\n &.is-checked:not(.is-disabled) {\n .bq-radio__circle {\n @apply border-icon-brand;\n }\n\n .bq-radio__checked {\n @apply bg-ui-brand;\n }\n }\n\n &:not(.is-disabled):hover .bq-radio__circle {\n @apply border-hover-ui-brand;\n }\n\n &.is-checked:not(.is-disabled):hover {\n .bq-radio__checked,\n .bq-radio__circle {\n @apply border-hover-icon-brand;\n }\n }\n}\n\n.bq-radio__input {\n @apply pointer-events-none absolute opacity-0 m-b-0 m-i-0 p-b-0 p-i-0;\n\n &:focus-visible {\n ~ .bq-radio__circle {\n @apply focus;\n }\n }\n}\n\n.bq-radio__control {\n @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];\n}\n\n.bq-radio__circle {\n @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];\n}\n\n.bq-radio__checked {\n @apply rounded-full bs-full is-full;\n}\n\n.bq-radio__label {\n @apply font-medium leading-regular text-text-primary;\n}\n\n.bq-radio__circle,\n.bq-radio__checked,\n.bq-radio__label {\n @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\n\n/**\n * @part base - The component's internal wrapper of the radio component.\n * @part input - The native HTML `<input type=\"radio\">` used under the hood.\n * @part radio - The component's internal wrapper of the radio component.\n * @part label - The `<span>` element that holds the text content.\n */\n@Component({\n tag: 'bq-radio',\n styleUrl: './scss/bq-radio.scss',\n shadow: true,\n})\nexport class BqRadio {\n // Own Properties\n // ====================\n private inputElement: HTMLInputElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqRadioElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** If true radio input is checked */\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /** If true radio input is disabled */\n @Prop({ reflect: true }) disabled? = false;\n\n /** If true radio displays background on hover */\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /** The form ID that the radio input is associated with */\n @Prop({ reflect: true }) formId?: string;\n\n /** Name of the HTML input form control. Submitted with the form as part of a name/value pair. */\n @Prop({ reflect: true }) name!: string;\n\n /** If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted */\n @Prop({ reflect: true }) required?: boolean;\n\n /** A string representing the value of the radio. */\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when the radio state changes */\n @Event() bqClick: EventEmitter<HTMLBqRadioElement>;\n\n /** Handler to be called when the radio gets focus */\n @Event() bqFocus: EventEmitter<HTMLBqRadioElement>;\n\n /** Handler to be called when the radio loses focus */\n @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n /** Handler to be called when the radio key is pressed */\n @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n // Component lifecycle events\n // Ordered by their natural call order\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 /**\n * Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n */\n @Method()\n async vClick() {\n this.inputElement?.click();\n }\n\n /**\n * Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n */\n @Method()\n async vFocus() {\n this.inputElement?.focus();\n }\n\n /**\n * Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n */\n @Method()\n async vBlur() {\n this.inputElement?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = () => {\n this.checked = true;\n this.bqClick.emit(this.el);\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleOnKeyDown = (event: KeyboardEvent) => {\n this.bqKeyDown.emit(event);\n };\n\n private get tabindex(): string {\n // NOTE: this.checked is undefined when is not part of bq-radio-group\n return `${-1 + +(this.checked ?? 1)}`;\n }\n\n /**\n * This method prevents label to steal the focus and trigger input blur\n * details https://stackoverflow.com/a/73364174\n */\n private onLabelMouseDown = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n class={{\n 'bq-radio group': true,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'is-checked': this.checked,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n onMouseDown={this.onLabelMouseDown}\n >\n <div class=\"bq-radio__control\">\n <input\n class=\"bq-radio__input\"\n ref={(element) => (this.inputElement = element)}\n type=\"radio\"\n form={this.formId}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.tabindex}\n part=\"input\"\n />\n <div class=\"bq-radio__circle\" part=\"radio\">\n <div class=\"bq-radio__checked\" />\n </div>\n </div>\n <span\n class=\"bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled\"\n part=\"label\"\n >\n <slot></slot>\n </span>\n </label>\n );\n }\n}\n"],"mappings":";;;;oDAAA,MAAMA,EAAa,0vvBACnB,MAAAC,EAAeD,E,MCYFE,EAAO,M,+JAuGVC,KAAAC,YAAc,KACpBD,KAAKE,QAAU,KACfF,KAAKG,QAAQC,KAAKJ,KAAKK,GAAG,EAGpBL,KAAAM,cAAgB,KACtBN,KAAKO,QAAQH,KAAKJ,KAAKK,GAAG,EAGpBL,KAAAQ,aAAe,KACrBR,KAAKS,OAAOL,KAAKJ,KAAKK,GAAG,EAGnBL,KAAAU,gBAAmBC,IACzBX,KAAKY,UAAUR,KAAKO,EAAM,EAYpBX,KAAAa,iBAAoBF,IAC1BA,EAAMG,gBAAgB,E,qCA7Ga,M,uBAGS,M,uFAoD9C,YAAMC,G,OACJC,EAAAhB,KAAKiB,gBAAY,MAAAD,SAAA,SAAAA,EAAEE,O,CAQrB,YAAMC,G,OACJH,EAAAhB,KAAKiB,gBAAY,MAAAD,SAAA,SAAAA,EAAEI,O,CAQrB,WAAMC,G,OACJL,EAAAhB,KAAKiB,gBAAY,MAAAD,SAAA,SAAAA,EAAEM,M,CAyBrB,YAAYC,G,MAEV,MAAO,IAAI,MAAMP,EAAAhB,KAAKE,WAAO,MAAAc,SAAA,EAAAA,EAAI,I,CAenC,MAAAQ,GACE,OACEC,EAAA,SAAAC,IAAA,2CACEC,MAAO,CACL,iBAAkB,KAClB,kCAAmC3B,KAAK4B,SACxC,aAAc5B,KAAKE,QACnB,iBAAkBF,KAAK6B,mBAEzBC,KAAK,OACLC,YAAa/B,KAAKa,kBAElBY,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,SAAAC,IAAA,2CACEC,MAAM,kBACNK,IAAMC,GAAajC,KAAKiB,aAAegB,EACvCC,KAAK,QACLC,KAAMnC,KAAKoC,OACXC,KAAMrC,KAAKqC,KACXC,MAAOtC,KAAKsC,MACZC,SAAUvC,KAAKuC,SACfX,SAAU5B,KAAK4B,SACfY,OAAQxC,KAAKQ,aACbiC,QAASzC,KAAKC,YACdyC,QAAS1C,KAAKM,cACdqC,UAAW3C,KAAKU,gBAAe,eACjBV,KAAKE,QAAU,OAAS,QAAO,gBAC9BF,KAAK4B,SAAW,OAAS,QACxCL,SAAUvB,KAAKuB,SACfO,KAAK,UAEPL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBAAmBG,KAAK,SACjCL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBAGfF,EAAA,QAAAC,IAAA,2CACEC,MAAM,sGACNG,KAAK,SAELL,EAAA,QAAAC,IAAA,8C","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["bqRadioCss","BqRadioStyle0","BqRadio","this","handleClick","checked","bqClick","emit","el","handleOnFocus","bqFocus","handleOnBlur","bqBlur","handleOnKeyDown","event","bqKeyDown","onLabelMouseDown","preventDefault","vClick","_a","inputElement","click","vFocus","focus","vBlur","blur","tabindex","render","h","key","class","disabled","backgroundOnHover","part","onMouseDown","ref","element","type","form","formId","name","value","required","onBlur","onClick","onFocus","onKeyDown"],"sources":["../../packages/beeq/src/components/radio/scss/bq-radio.scss?tag=bq-radio&encapsulation=shadow","../../packages/beeq/src/components/radio/bq-radio.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Radio styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-radio.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio {\n @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;\n @apply rounded-s p-b-xs p-i-xs;\n\n &.is-disabled {\n .bq-radio__circle {\n @apply opacity-60;\n }\n\n &.is-checked .bq-radio__circle {\n @apply border-stroke-brand;\n }\n\n &.is-checked .bq-radio__checked {\n @apply bg-icon-brand;\n }\n }\n\n &.has-background:not(.is-disabled):hover {\n @apply bg-hover-ui-primary;\n }\n\n &.is-checked:not(.is-disabled) {\n .bq-radio__circle {\n @apply border-icon-brand;\n }\n\n .bq-radio__checked {\n @apply bg-ui-brand;\n }\n }\n\n &:not(.is-disabled):hover .bq-radio__circle {\n @apply border-hover-ui-brand;\n }\n\n &.is-checked:not(.is-disabled):hover {\n .bq-radio__checked,\n .bq-radio__circle {\n @apply border-hover-icon-brand;\n }\n }\n}\n\n.bq-radio__input {\n @apply pointer-events-none absolute opacity-0 m-b-0 m-i-0 p-b-0 p-i-0;\n\n &:focus-visible {\n ~ .bq-radio__circle {\n @apply focus;\n }\n }\n}\n\n.bq-radio__control {\n @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];\n}\n\n.bq-radio__circle {\n @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];\n}\n\n.bq-radio__checked {\n @apply rounded-full bs-full is-full;\n}\n\n.bq-radio__label {\n @apply font-medium leading-regular text-text-primary;\n}\n\n.bq-radio__circle,\n.bq-radio__checked,\n.bq-radio__label {\n @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\n\n/**\n * @part base - The component's internal wrapper of the radio component.\n * @part input - The native HTML `<input type=\"radio\">` used under the hood.\n * @part radio - The component's internal wrapper of the radio component.\n * @part label - The `<span>` element that holds the text content.\n */\n@Component({\n tag: 'bq-radio',\n styleUrl: './scss/bq-radio.scss',\n shadow: true,\n})\nexport class BqRadio {\n // Own Properties\n // ====================\n private inputElement: HTMLInputElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqRadioElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** If true radio input is checked */\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /** If true radio input is disabled */\n @Prop({ reflect: true }) disabled? = false;\n\n /** If true radio displays background on hover */\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /** The form ID that the radio input is associated with */\n @Prop({ reflect: true }) formId?: string;\n\n /** Name of the HTML input form control. Submitted with the form as part of a name/value pair. */\n @Prop({ reflect: true }) name!: string;\n\n /** If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted */\n @Prop({ reflect: true }) required?: boolean;\n\n /** A string representing the value of the radio. */\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when the radio state changes */\n @Event() bqClick: EventEmitter<HTMLBqRadioElement>;\n\n /** Handler to be called when the radio gets focus */\n @Event() bqFocus: EventEmitter<HTMLBqRadioElement>;\n\n /** Handler to be called when the radio loses focus */\n @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n /** Handler to be called when the radio key is pressed */\n @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n // Component lifecycle events\n // Ordered by their natural call order\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 /**\n * Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n */\n @Method()\n async vClick() {\n this.inputElement?.click();\n }\n\n /**\n * Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n */\n @Method()\n async vFocus() {\n this.inputElement?.focus();\n }\n\n /**\n * Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n */\n @Method()\n async vBlur() {\n this.inputElement?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = () => {\n this.checked = true;\n this.bqClick.emit(this.el);\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleOnKeyDown = (event: KeyboardEvent) => {\n this.bqKeyDown.emit(event);\n };\n\n private get tabindex(): string {\n // NOTE: this.checked is undefined when is not part of bq-radio-group\n return `${-1 + +(this.checked ?? 1)}`;\n }\n\n /**\n * This method prevents label to steal the focus and trigger input blur\n * details https://stackoverflow.com/a/73364174\n */\n private onLabelMouseDown = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n class={{\n 'bq-radio group': true,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'is-checked': this.checked,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n onMouseDown={this.onLabelMouseDown}\n >\n <div class=\"bq-radio__control\">\n <input\n class=\"bq-radio__input\"\n ref={(element) => (this.inputElement = element)}\n type=\"radio\"\n form={this.formId}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.tabindex}\n part=\"input\"\n />\n <div class=\"bq-radio__circle\" part=\"radio\">\n <div class=\"bq-radio__checked\" />\n </div>\n </div>\n <span\n class=\"bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled\"\n part=\"label\"\n >\n <slot></slot>\n </span>\n </label>\n );\n }\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;AACnB,MAAAC,IAAeD;;MCYFE,IAAO;;;;;;;;;;;QAuGVC,KAAAC,cAAc;MACpBD,KAAKE,UAAU;MACfF,KAAKG,QAAQC,KAAKJ,KAAKK;AAAG;IAGpBL,KAAAM,gBAAgB;MACtBN,KAAKO,QAAQH,KAAKJ,KAAKK;AAAG;IAGpBL,KAAAQ,eAAe;MACrBR,KAAKS,OAAOL,KAAKJ,KAAKK;AAAG;IAGnBL,KAAAU,kBAAmBC;MACzBX,KAAKY,UAAUR,KAAKO;AAAM;;;;eAYpBX,KAAAa,mBAAoBF;MAC1BA,EAAMG;AAAgB;;oBA7Ga;6BAGS;;;;;;;;;;;;;;;;;;;;;EAoD9C,YAAMC;;KACJC,IAAAhB,KAAKiB,kBAAY,QAAAD,WAAA,aAAAA,EAAEE;;;;;SAQrB,YAAMC;;KACJH,IAAAhB,KAAKiB,kBAAY,QAAAD,WAAA,aAAAA,EAAEI;;;;;SAQrB,WAAMC;;KACJL,IAAAhB,KAAKiB,kBAAY,QAAAD,WAAA,aAAAA,EAAEM;;EAyBrB,YAAYC;;;QAEV,OAAO,IAAI,OAAMP,IAAAhB,KAAKE,aAAO,QAAAc,WAAA,IAAAA,IAAI;;;;;EAenC,MAAAQ;IACE,OACEC,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,kBAAkB;QAClB,mCAAmC3B,KAAK4B;QACxC,cAAc5B,KAAKE;QACnB,kBAAkBF,KAAK6B;;MAEzBC,MAAK;MACLC,aAAa/B,KAAKa;OAElBY,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACTF,EAAA;MAAAC,KAAA;MACEC,OAAM;MACNK,KAAMC,KAAajC,KAAKiB,eAAegB;MACvCC,MAAK;MACLC,MAAMnC,KAAKoC;MACXC,MAAMrC,KAAKqC;MACXC,OAAOtC,KAAKsC;MACZC,UAAUvC,KAAKuC;MACfX,UAAU5B,KAAK4B;MACfY,QAAQxC,KAAKQ;MACbiC,SAASzC,KAAKC;MACdyC,SAAS1C,KAAKM;MACdqC,WAAW3C,KAAKU;MAAe,gBACjBV,KAAKE,UAAU,SAAS;MAAO,iBAC9BF,KAAK4B,WAAW,SAAS;MACxCL,UAAUvB,KAAKuB;MACfO,MAAK;QAEPL,EAAA;MAAAC,KAAA;MAAKC,OAAM;MAAmBG,MAAK;OACjCL,EAAA;MAAAC,KAAA;MAAKC,OAAM;UAGfF,EAAA;MAAAC,KAAA;MACEC,OAAM;MACNG,MAAK;OAELL,EAAA;MAAAC,KAAA","ignoreList":[]}
|
package/dist/beeq/p-ecd27cf2.js
CHANGED
|
@@ -2,5 +2,15 @@
|
|
|
2
2
|
* Built by Endavans
|
|
3
3
|
* © https://beeq.design - Apache 2 License.
|
|
4
4
|
*/
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Check if the value is a string or not
|
|
7
|
+
* @param value the value to be checked
|
|
8
|
+
* @returns {boolean} the value is a string
|
|
9
|
+
*/
|
|
10
|
+
const isString = t => {
|
|
11
|
+
const r = typeof t;
|
|
12
|
+
return r === "string" || r === "object" && t != null && !Array.isArray(t) && Object.prototype.toString.call(t) == "[object String]";
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { isString as i };
|
|
6
16
|
//# sourceMappingURL=p-ecd27cf2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["isString","value","type","Array","isArray","Object","prototype","toString","call"],"sources":["../../packages/beeq/src/shared/utils/isString.ts"],"sourcesContent":["/**\n * Check if the value is a string or not\n * @param value the value to be checked\n * @returns {boolean} the value is a string\n */\nexport const isString = (value: unknown): value is string => {\n const type = typeof value;\n return (\n type === 'string' ||\n (type === 'object' &&\n value != null &&\n !Array.isArray(value) &&\n Object.prototype.toString.call(value) == '[object String]')\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["isString","value","type","Array","isArray","Object","prototype","toString","call"],"sources":["../../packages/beeq/src/shared/utils/isString.ts"],"sourcesContent":["/**\n * Check if the value is a string or not\n * @param value the value to be checked\n * @returns {boolean} the value is a string\n */\nexport const isString = (value: unknown): value is string => {\n const type = typeof value;\n return (\n type === 'string' ||\n (type === 'object' &&\n value != null &&\n !Array.isArray(value) &&\n Object.prototype.toString.call(value) == '[object String]')\n );\n};\n"],"mappings":";;;;;;;;;MAKaA,WAAYC;EACvB,MAAMC,WAAcD;EACpB,OACEC,MAAS,YACRA,MAAS,YACRD,KAAS,SACRE,MAAMC,QAAQH,MACfI,OAAOC,UAAUC,SAASC,KAAKP,MAAU;AAAkB","ignoreList":[]}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Built by Endavans
|
|
3
|
+
* © https://beeq.design - Apache 2 License.
|
|
4
|
+
*/
|
|
5
|
+
import { r as a, c as r, h as e } from "./p-0c42c08a.js";
|
|
6
|
+
|
|
7
|
+
import "./p-bef53750.js";
|
|
8
|
+
|
|
9
|
+
import { i as b } from "./p-57621be1.js";
|
|
10
|
+
|
|
11
|
+
const n = '::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;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.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))}.fixed{position:fixed}.sticky{position:sticky}.top-0{top:0}.z-\\[1\\]{z-index:1}.box-content{box-sizing:content-box}.flex{display:flex}.hidden{display:none}.h-dynamic-vh{height:100dvh}.grow{flex-grow:1}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.border-0{border-width:0}.border-e-s{border-inline-end-width:var(--bq-stroke-s)}.border-solid{border-style:solid}.border-\\[color\\:--bq-side-menu--border-color\\]{border-color:var(--bq-side-menu--border-color)}.bg-\\[--bq-side-menu--bg-color\\]{background-color:var(--bq-side-menu--bg-color)}.text-\\[color\\:--bq-side-menu--brand-color\\]{color:var(--bq-side-menu--brand-color)}.transition-\\[background-color\\2c width\\]{transition-duration:.15s;transition-property:background-color,width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.is-\\[--bq-side-menu--width-collapse\\]{inline-size:var(--bq-side-menu--width-collapse)}.is-\\[--bq-side-menu--width\\]{inline-size:var(--bq-side-menu--width)}.inset-bs-0{inset-block-start:0}@-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-side-menu--bg-color:var(--bq-ui--primary);--bq-side-menu--brand-color:var(--bq-ui--brand);--bq-side-menu--border-color:var(--bq-neutral-100);display:flex;overflow:hidden}.bq-side-menu{-ms-overflow-style:none;background-color:var(--bq-side-menu--bg-color);border-color:var(--bq-side-menu--border-color);border-width:0;border-inline-end-width:var(--bq-stroke-s);border-style:solid;display:flex;flex-direction:column;flex-grow:1;height:100dvh;inline-size:var(--bq-side-menu--width);inset-block-start:0;inset-inline-start:0;position:fixed;scrollbar-width:none;transition-duration:.15s;transition-property:background-color,width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-side-menu::-webkit-scrollbar{display:none}.bq-side-menu.is-collapsed{inline-size:var(--bq-side-menu--width-collapse)}.bq-side-menu--logo{align-items:center;background-color:var(--bq-side-menu--bg-color);box-sizing:content-box;color:var(--bq-side-menu--brand-color);display:flex;padding:var(--bq-spacing-xs);position:sticky;top:0;z-index:1}:host([size=small]) ::slotted(bq-side-menu-item){--bq-side-menu-item--paddingY:var(--bq-spacing-s)}:host([appearance=brand]){--bq-focus:var(--bq-stroke--alt);--bq-side-menu--bg-color:var(--bq-ui--brand);--bq-side-menu--brand-color:var(--bq-stroke--inverse);--bq-side-menu--border-color:var(--bq-ui--brand)}:host([appearance=brand]) ::slotted(bq-side-menu-item){--bq-side-menu-item--bg-hover:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%);--bq-side-menu-item--text-default:var(--bq-text--alt);--bq-side-menu-item--text-hover:var(--bq-text--alt)}:host([appearance=brand]) .bq-side-menu--footer ::slotted([slot=footer]){--bq-ui--secondary:transparent;--bq-text--primary:var(--bq-text--inverse)}:host([appearance=inverse]){--bq-side-menu--bg-color:var(--bq-ui--inverse);--bq-side-menu--brand-color:var(--bq-stroke--inverse);--bq-side-menu--border-color:var(--bq-ui--inverse)}:host([appearance=inverse]) ::slotted(bq-side-menu-item){--bq-side-menu-item--bg-hover:color-mix(in srgb,var(--bq-ui--inverse),var(--bq-hover) 20%);--bq-side-menu-item--bg-active:color-mix(in srgb,var(--bq-ui--alt),var(--bq-active) 20%);--bq-side-menu-item--text-default:var(--bq-text--inverse);--bq-side-menu-item--text-hover:var(--bq-text--inverse);--bq-side-menu-item--text-active:var(--bq-text--primary)}:host([appearance=inverse]) .bq-side-menu--footer ::slotted([slot=footer]){--bq-ui--secondary:transparent;--bq-text--primary:var(--bq-text--inverse)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.collapse{visibility:collapse}.static{position:static}.justify-center{justify-content:center}.gap-y-xs{row-gap:var(--bq-spacing-xs)}.overflow-y-auto{overflow-y:auto}.bg-\\[var\\(--bq-side-menu--bg-color\\)\\]{background-color:var(--bq-side-menu--bg-color)}.p-xs{padding:var(--bq-spacing-xs)}.px-xs{padding-left:var(--bq-spacing-xs);padding-right:var(--bq-spacing-xs)}.pt-xs2{padding-top:var(--bq-spacing-xs2)}.inset-be-0{inset-block-end:0}.m-bs-\\[auto\\]{margin-block-start:auto}.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}}';
|
|
12
|
+
|
|
13
|
+
const q = n;
|
|
14
|
+
|
|
15
|
+
const t = class {
|
|
16
|
+
constructor(e) {
|
|
17
|
+
a(this, e);
|
|
18
|
+
this.bqCollapse = r(this, "bqCollapse", 7);
|
|
19
|
+
this.bqSelect = r(this, "bqSelect", 7);
|
|
20
|
+
// Own Properties
|
|
21
|
+
// ====================
|
|
22
|
+
this.menuItemCssSelector = "bq-side-menu-item";
|
|
23
|
+
this.bodyCss = "bq-body--side-menu";
|
|
24
|
+
this.bodyCssExpand = "bq-body--side-menu__expand";
|
|
25
|
+
this.bodyCssCollapse = "bq-body--side-menu__collapse";
|
|
26
|
+
this.documentBody = document.querySelector("body");
|
|
27
|
+
this.handleCollapse = () => {
|
|
28
|
+
if (!this.menuItems.length) return;
|
|
29
|
+
this.menuItems.forEach((a => a.collapse = this.collapse));
|
|
30
|
+
this.collapse ? this.collapseDocumentBody() : this.expandDocumentBody();
|
|
31
|
+
};
|
|
32
|
+
this.collapseDocumentBody = () => {
|
|
33
|
+
if (!this.collapse) return;
|
|
34
|
+
this.documentBody.classList.remove(this.bodyCssExpand);
|
|
35
|
+
this.documentBody.classList.add(this.bodyCssCollapse);
|
|
36
|
+
};
|
|
37
|
+
this.expandDocumentBody = () => {
|
|
38
|
+
if (this.collapse) return;
|
|
39
|
+
this.documentBody.classList.remove(this.bodyCssCollapse);
|
|
40
|
+
this.documentBody.classList.add(this.bodyCssExpand);
|
|
41
|
+
};
|
|
42
|
+
this.cleanDocumentBodyClass = () => {
|
|
43
|
+
this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);
|
|
44
|
+
};
|
|
45
|
+
this.appearance = "default";
|
|
46
|
+
this.collapse = false;
|
|
47
|
+
this.size = "medium";
|
|
48
|
+
}
|
|
49
|
+
// Prop lifecycle events
|
|
50
|
+
// =======================
|
|
51
|
+
onCollapsePropChange() {
|
|
52
|
+
this.handleCollapse();
|
|
53
|
+
this.bqCollapse.emit({
|
|
54
|
+
collapse: this.collapse
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
// Component lifecycle events
|
|
58
|
+
// Ordered by their natural call order
|
|
59
|
+
// =====================================
|
|
60
|
+
componentDidLoad() {
|
|
61
|
+
this.documentBody.classList.add(this.bodyCss);
|
|
62
|
+
this.handleCollapse();
|
|
63
|
+
}
|
|
64
|
+
disconnectedCallback() {
|
|
65
|
+
this.cleanDocumentBodyClass();
|
|
66
|
+
}
|
|
67
|
+
// Listeners
|
|
68
|
+
// ==============
|
|
69
|
+
onMenuItemClick(a) {
|
|
70
|
+
const {target: r} = a;
|
|
71
|
+
if (!b(r, "bq-side-menu-item")) return;
|
|
72
|
+
this.menuItems.forEach((a => a.active = !a.disabled && a === r));
|
|
73
|
+
this.bqSelect.emit(r);
|
|
74
|
+
}
|
|
75
|
+
// Public methods API
|
|
76
|
+
// These methods are exposed on the host element.
|
|
77
|
+
// Always use two lines.
|
|
78
|
+
// Public Methods must be async.
|
|
79
|
+
// Requires JSDocs for public API documentation.
|
|
80
|
+
// ===============================================
|
|
81
|
+
/** Toggle the collapse state of the side menu */
|
|
82
|
+
async toggleCollapse() {
|
|
83
|
+
this.collapse = !this.collapse;
|
|
84
|
+
}
|
|
85
|
+
// Local methods
|
|
86
|
+
// Internal business logic.
|
|
87
|
+
// These methods cannot be called from the host element.
|
|
88
|
+
// =======================================================
|
|
89
|
+
get menuItems() {
|
|
90
|
+
if (!this.menuElem) return [];
|
|
91
|
+
const a = this.menuElem.querySelector("slot");
|
|
92
|
+
return [ ...a.assignedElements({
|
|
93
|
+
flatten: true
|
|
94
|
+
}) ].filter((a => a.tagName.toLowerCase() === this.menuItemCssSelector));
|
|
95
|
+
}
|
|
96
|
+
// render() function
|
|
97
|
+
// Always the last one in the class.
|
|
98
|
+
// ===================================
|
|
99
|
+
render() {
|
|
100
|
+
return e("aside", {
|
|
101
|
+
key: "dc6873b0f0b1cd4f9bd34cd3ef1c9793466718b5",
|
|
102
|
+
class: {
|
|
103
|
+
"bq-side-menu overflow-y-auto": true,
|
|
104
|
+
"is-collapsed": this.collapse
|
|
105
|
+
},
|
|
106
|
+
part: "base"
|
|
107
|
+
}, e("div", {
|
|
108
|
+
key: "e013d866c5f77ae85fa8352fc8d941162a86f696",
|
|
109
|
+
class: {
|
|
110
|
+
"bq-side-menu--logo": true,
|
|
111
|
+
"is-collapsed": this.collapse
|
|
112
|
+
},
|
|
113
|
+
part: "logo"
|
|
114
|
+
}, e("slot", {
|
|
115
|
+
key: "0bd06f2bce069fc5e7a44ed2eab782421014aca7",
|
|
116
|
+
name: "logo"
|
|
117
|
+
})), e("nav", {
|
|
118
|
+
key: "113aacf9d263a4c9accc77e6f2f678c700e93ecf",
|
|
119
|
+
class: "bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2",
|
|
120
|
+
ref: a => this.menuElem = a,
|
|
121
|
+
role: "menu",
|
|
122
|
+
part: "nav"
|
|
123
|
+
}, e("slot", {
|
|
124
|
+
key: "718d2fdc561579658540069e42aa2593abfebfd5"
|
|
125
|
+
})), e("div", {
|
|
126
|
+
key: "521a498fb692a1a76a25e695d137ba60a2a001de",
|
|
127
|
+
class: "bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]",
|
|
128
|
+
part: "footer"
|
|
129
|
+
}, e("slot", {
|
|
130
|
+
key: "b05370458fbd16ee29c85fc08ebd92c137f85fda",
|
|
131
|
+
name: "footer"
|
|
132
|
+
})));
|
|
133
|
+
}
|
|
134
|
+
static get watchers() {
|
|
135
|
+
return {
|
|
136
|
+
collapse: [ "onCollapsePropChange" ]
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
t.style = q;
|
|
142
|
+
|
|
143
|
+
export { t as bq_side_menu };
|
|
144
|
+
//# sourceMappingURL=p-f77d9b8b.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["bqSideMenuCss","BqSideMenuStyle0","BqSideMenu","this","menuItemCssSelector","bodyCss","bodyCssExpand","bodyCssCollapse","documentBody","document","querySelector","handleCollapse","menuItems","length","forEach","menuItem","collapse","collapseDocumentBody","expandDocumentBody","classList","remove","add","cleanDocumentBodyClass","onCollapsePropChange","bqCollapse","emit","componentDidLoad","disconnectedCallback","onMenuItemClick","event","target","item","isHTMLElement","active","disabled","bqSelect","toggleCollapse","menuElem","slot","assignedElements","flatten","filter","el","tagName","toLowerCase","render","h","key","class","part","name","ref","navElem","role"],"sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Side menu styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu.variables';\n\n:host {\n @apply flex overflow-hidden;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Aside container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu {\n @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n @apply transition-[background-color,width] duration-150;\n @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n @apply is-[--bq-side-menu--width-collapse];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Logo container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu--logo {\n @apply sticky top-0 z-[1] p-xs;\n @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/* APPEARANCE */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n */\n\n:host([size='small']) {\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--paddingY: theme(space.s);\n }\n}\n\n:host([appearance='brand']) {\n --bq-focus: theme(colors.stroke.alt);\n --bq-side-menu--bg-color: theme(colors.ui.brand);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.brand);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.alt);\n --bq-side-menu-item--text-hover: theme(textColor.text.alt);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n\n:host([appearance='inverse']) {\n --bq-side-menu--bg-color: theme(colors.ui.inverse);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.inverse);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.inverse);\n --bq-side-menu-item--text-hover: theme(textColor.text.inverse);\n --bq-side-menu-item--text-active: theme(textColor.text.primary);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isHTMLElement } from '../../shared/utils';\n\n/**\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n */\n@Component({\n tag: 'bq-side-menu',\n styleUrl: './scss/bq-side-menu.scss',\n shadow: true,\n})\nexport class BqSideMenu {\n // Own Properties\n // ====================\n\n private menuItemCssSelector = 'bq-side-menu-item';\n\n private bodyCss = 'bq-body--side-menu';\n private bodyCssExpand = 'bq-body--side-menu__expand';\n private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n private menuElem: HTMLElement;\n private documentBody: HTMLBodyElement = document.querySelector('body');\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** It sets a predefined appearance of the side menu */\n @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n /** If true, the container will reduce its width */\n @Prop({ reflect: true }) collapse: boolean = false;\n\n /** It sets the size of the navigation menu items */\n @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('collapse')\n onCollapsePropChange() {\n this.handleCollapse();\n this.bqCollapse.emit({ collapse: this.collapse });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n /** Callback handler to be called when the active/selected menu item changes */\n @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.documentBody.classList.add(this.bodyCss);\n this.handleCollapse();\n }\n\n disconnectedCallback() {\n this.cleanDocumentBodyClass();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n onMenuItemClick(event: Event) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n this.menuItems.forEach(\n (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n );\n this.bqSelect.emit(item);\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 /** Toggle the collapse state of the side menu */\n @Method()\n async toggleCollapse() {\n this.collapse = !this.collapse;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get menuItems() {\n if (!this.menuElem) return [];\n\n const slot = this.menuElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private handleCollapse = () => {\n if (!this.menuItems.length) return;\n\n this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n this.collapse ? this.collapseDocumentBody() : this.expandDocumentBody();\n };\n\n private collapseDocumentBody = () => {\n if (!this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssExpand);\n this.documentBody.classList.add(this.bodyCssCollapse);\n };\n\n private expandDocumentBody = () => {\n if (this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssCollapse);\n this.documentBody.classList.add(this.bodyCssExpand);\n };\n\n private cleanDocumentBodyClass = () => {\n this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n {/* Company logo and name */}\n <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n <slot name=\"logo\" />\n </div>\n {/* Navigation content */}\n <nav\n class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n ref={(navElem) => (this.menuElem = navElem)}\n role=\"menu\"\n part=\"nav\"\n >\n <slot />\n </nav>\n {/* Footer */}\n <div\n class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n part=\"footer\"\n >\n <slot name=\"footer\"></slot>\n </div>\n </aside>\n );\n }\n}\n"],"mappings":";;;;8GAAA,MAAMA,EAAgB,u/tBACtB,MAAAC,EAAeD,E,MCeFE,EAAU,M,mGAIbC,KAAAC,oBAAsB,oBAEtBD,KAAAE,QAAU,qBACVF,KAAAG,cAAgB,6BAChBH,KAAAI,gBAAkB,+BAGlBJ,KAAAK,aAAgCC,SAASC,cAAc,QA8FvDP,KAAAQ,eAAiB,KACvB,IAAKR,KAAKS,UAAUC,OAAQ,OAE5BV,KAAKS,UAAUE,SAASC,GAAyCA,EAASC,SAAWb,KAAKa,WAC1Fb,KAAKa,SAAWb,KAAKc,uBAAyBd,KAAKe,oBAAoB,EAGjEf,KAAAc,qBAAuB,KAC7B,IAAKd,KAAKa,SAAU,OAEpBb,KAAKK,aAAaW,UAAUC,OAAOjB,KAAKG,eACxCH,KAAKK,aAAaW,UAAUE,IAAIlB,KAAKI,gBAAgB,EAG/CJ,KAAAe,mBAAqB,KAC3B,GAAIf,KAAKa,SAAU,OAEnBb,KAAKK,aAAaW,UAAUC,OAAOjB,KAAKI,iBACxCJ,KAAKK,aAAaW,UAAUE,IAAIlB,KAAKG,cAAc,EAG7CH,KAAAmB,uBAAyB,KAC/BnB,KAAKK,aAAaW,UAAUC,OAAOjB,KAAKE,QAASF,KAAKI,gBAAiBJ,KAAKG,cAAc,E,gBAvGjC,U,cAGd,M,UAGE,Q,CAM/C,oBAAAiB,GACEpB,KAAKQ,iBACLR,KAAKqB,WAAWC,KAAK,CAAET,SAAUb,KAAKa,U,CAiBxC,gBAAAU,GACEvB,KAAKK,aAAaW,UAAUE,IAAIlB,KAAKE,SACrCF,KAAKQ,gB,CAGP,oBAAAgB,GACExB,KAAKmB,wB,CAOP,eAAAM,CAAgBC,GACd,MAAQC,OAAQC,GAASF,EACzB,IAAKG,EAAcD,EAAM,qBAAsB,OAE/C5B,KAAKS,UAAUE,SACZC,GAAyCA,EAASkB,QAAUlB,EAASmB,UAAYnB,IAAagB,IAEjG5B,KAAKgC,SAASV,KAAKM,E,CAYrB,oBAAMK,GACJjC,KAAKa,UAAYb,KAAKa,Q,CAQxB,aAAYJ,GACV,IAAKT,KAAKkC,SAAU,MAAO,GAE3B,MAAMC,EAAOnC,KAAKkC,SAAS3B,cAAc,QACzC,MAAO,IAAI4B,EAAKC,iBAAiB,CAAEC,QAAS,QAASC,QAClDC,GAAkCA,EAAGC,QAAQC,gBAAkBzC,KAAKC,qB,CAiCzE,MAAAyC,GACE,OACEC,EAAA,SAAAC,IAAA,2CAAOC,MAAO,CAAE,+BAAgC,KAAM,eAAgB7C,KAAKa,UAAYiC,KAAK,QAE1FH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,qBAAsB,KAAM,eAAgB7C,KAAKa,UAAYiC,KAAK,QAC9EH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,UAGbJ,EAAA,OAAAC,IAAA,2CACEC,MAAM,wDACNG,IAAMC,GAAajD,KAAKkC,SAAWe,EACnCC,KAAK,OACLJ,KAAK,OAELH,EAAA,QAAAC,IAAA,8CAGFD,EAAA,OAAAC,IAAA,2CACEC,MAAM,iHACNC,KAAK,UAELH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,Y","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["bqSideMenuCss","BqSideMenuStyle0","BqSideMenu","this","menuItemCssSelector","bodyCss","bodyCssExpand","bodyCssCollapse","documentBody","document","querySelector","handleCollapse","menuItems","length","forEach","menuItem","collapse","collapseDocumentBody","expandDocumentBody","classList","remove","add","cleanDocumentBodyClass","onCollapsePropChange","bqCollapse","emit","componentDidLoad","disconnectedCallback","onMenuItemClick","event","target","item","isHTMLElement","active","disabled","bqSelect","toggleCollapse","menuElem","slot","assignedElements","flatten","filter","el","tagName","toLowerCase","render","h","key","class","part","name","ref","navElem","role"],"sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Side menu styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu.variables';\n\n:host {\n @apply flex overflow-hidden;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Aside container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu {\n @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n @apply transition-[background-color,width] duration-150;\n @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n @apply is-[--bq-side-menu--width-collapse];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Logo container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu--logo {\n @apply sticky top-0 z-[1] p-xs;\n @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/* APPEARANCE */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n */\n\n:host([size='small']) {\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--paddingY: theme(space.s);\n }\n}\n\n:host([appearance='brand']) {\n --bq-focus: theme(colors.stroke.alt);\n --bq-side-menu--bg-color: theme(colors.ui.brand);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.brand);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.alt);\n --bq-side-menu-item--text-hover: theme(textColor.text.alt);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n\n:host([appearance='inverse']) {\n --bq-side-menu--bg-color: theme(colors.ui.inverse);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.inverse);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.inverse);\n --bq-side-menu-item--text-hover: theme(textColor.text.inverse);\n --bq-side-menu-item--text-active: theme(textColor.text.primary);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isHTMLElement } from '../../shared/utils';\n\n/**\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n */\n@Component({\n tag: 'bq-side-menu',\n styleUrl: './scss/bq-side-menu.scss',\n shadow: true,\n})\nexport class BqSideMenu {\n // Own Properties\n // ====================\n\n private menuItemCssSelector = 'bq-side-menu-item';\n\n private bodyCss = 'bq-body--side-menu';\n private bodyCssExpand = 'bq-body--side-menu__expand';\n private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n private menuElem: HTMLElement;\n private documentBody: HTMLBodyElement = document.querySelector('body');\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** It sets a predefined appearance of the side menu */\n @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n /** If true, the container will reduce its width */\n @Prop({ reflect: true }) collapse: boolean = false;\n\n /** It sets the size of the navigation menu items */\n @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('collapse')\n onCollapsePropChange() {\n this.handleCollapse();\n this.bqCollapse.emit({ collapse: this.collapse });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n /** Callback handler to be called when the active/selected menu item changes */\n @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.documentBody.classList.add(this.bodyCss);\n this.handleCollapse();\n }\n\n disconnectedCallback() {\n this.cleanDocumentBodyClass();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n onMenuItemClick(event: Event) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n this.menuItems.forEach(\n (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n );\n this.bqSelect.emit(item);\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 /** Toggle the collapse state of the side menu */\n @Method()\n async toggleCollapse() {\n this.collapse = !this.collapse;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get menuItems() {\n if (!this.menuElem) return [];\n\n const slot = this.menuElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private handleCollapse = () => {\n if (!this.menuItems.length) return;\n\n this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n this.collapse ? this.collapseDocumentBody() : this.expandDocumentBody();\n };\n\n private collapseDocumentBody = () => {\n if (!this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssExpand);\n this.documentBody.classList.add(this.bodyCssCollapse);\n };\n\n private expandDocumentBody = () => {\n if (this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssCollapse);\n this.documentBody.classList.add(this.bodyCssExpand);\n };\n\n private cleanDocumentBodyClass = () => {\n this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n {/* Company logo and name */}\n <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n <slot name=\"logo\" />\n </div>\n {/* Navigation content */}\n <nav\n class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n ref={(navElem) => (this.menuElem = navElem)}\n role=\"menu\"\n part=\"nav\"\n >\n <slot />\n </nav>\n {/* Footer */}\n <div\n class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n part=\"footer\"\n >\n <slot name=\"footer\"></slot>\n </div>\n </aside>\n );\n }\n}\n"],"mappings":";;;;;;;;;;AAAA,MAAMA,IAAgB;;AACtB,MAAAC,IAAeD;;MCeFE,IAAU;;;;;;;QAIbC,KAAAC,sBAAsB;IAEtBD,KAAAE,UAAU;IACVF,KAAAG,gBAAgB;IAChBH,KAAAI,kBAAkB;IAGlBJ,KAAAK,eAAgCC,SAASC,cAAc;IA8FvDP,KAAAQ,iBAAiB;MACvB,KAAKR,KAAKS,UAAUC,QAAQ;MAE5BV,KAAKS,UAAUE,SAASC,KAAyCA,EAASC,WAAWb,KAAKa;MAC1Fb,KAAKa,WAAWb,KAAKc,yBAAyBd,KAAKe;AAAoB;IAGjEf,KAAAc,uBAAuB;MAC7B,KAAKd,KAAKa,UAAU;MAEpBb,KAAKK,aAAaW,UAAUC,OAAOjB,KAAKG;MACxCH,KAAKK,aAAaW,UAAUE,IAAIlB,KAAKI;AAAgB;IAG/CJ,KAAAe,qBAAqB;MAC3B,IAAIf,KAAKa,UAAU;MAEnBb,KAAKK,aAAaW,UAAUC,OAAOjB,KAAKI;MACxCJ,KAAKK,aAAaW,UAAUE,IAAIlB,KAAKG;AAAc;IAG7CH,KAAAmB,yBAAyB;MAC/BnB,KAAKK,aAAaW,UAAUC,OAAOjB,KAAKE,SAASF,KAAKI,iBAAiBJ,KAAKG;AAAc;sBAvGjC;oBAGd;gBAGE;;;;EAM/C,oBAAAiB;IACEpB,KAAKQ;IACLR,KAAKqB,WAAWC,KAAK;MAAET,UAAUb,KAAKa;;;;;;EAiBxC,gBAAAU;IACEvB,KAAKK,aAAaW,UAAUE,IAAIlB,KAAKE;IACrCF,KAAKQ;;EAGP,oBAAAgB;IACExB,KAAKmB;;;;EAOP,eAAAM,CAAgBC;IACd,OAAQC,QAAQC,KAASF;IACzB,KAAKG,EAAcD,GAAM,sBAAsB;IAE/C5B,KAAKS,UAAUE,SACZC,KAAyCA,EAASkB,UAAUlB,EAASmB,YAAYnB,MAAagB;IAEjG5B,KAAKgC,SAASV,KAAKM;;;;;;;;;EAYrB,oBAAMK;IACJjC,KAAKa,YAAYb,KAAKa;;;;;;EAQxB,aAAYJ;IACV,KAAKT,KAAKkC,UAAU,OAAO;IAE3B,MAAMC,IAAOnC,KAAKkC,SAAS3B,cAAc;IACzC,OAAO,KAAI4B,EAAKC,iBAAiB;MAAEC,SAAS;SAASC,QAClDC,KAAkCA,EAAGC,QAAQC,kBAAkBzC,KAAKC;;;;;EAiCzE,MAAAyC;IACE,OACEC,EAAA;MAAAC,KAAA;MAAOC,OAAO;QAAE,gCAAgC;QAAM,gBAAgB7C,KAAKa;;MAAYiC,MAAK;OAE1FH,EAAA;MAAAC,KAAA;MAAKC,OAAO;QAAE,sBAAsB;QAAM,gBAAgB7C,KAAKa;;MAAYiC,MAAK;OAC9EH,EAAA;MAAAC,KAAA;MAAMG,MAAK;SAGbJ,EAAA;MAAAC,KAAA;MACEC,OAAM;MACNG,KAAMC,KAAajD,KAAKkC,WAAWe;MACnCC,MAAK;MACLJ,MAAK;OAELH,EAAA;MAAAC,KAAA;SAGFD,EAAA;MAAAC,KAAA;MACEC,OAAM;MACNC,MAAK;OAELH,EAAA;MAAAC,KAAA;MAAMG,MAAK","ignoreList":[]}
|