@ebrains/vue 0.7.0-alpha.0 → 0.9.0-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/bookmark-c200037c-CIcZ51ZQ.js +14 -0
- package/bookmark-c200037c-ClkCtyRY.mjs +17 -0
- package/color-primary-palette_6.entry-B00J5gKq.js +1 -0
- package/color-primary-palette_6.entry-DJl4iXuX.mjs +300 -0
- package/components-section.entry-Bp5Ot0Sn.js +162 -0
- package/{eds-components-section.entry-BgfCSxk1.mjs → components-section.entry-CMHPm3bn.mjs} +159 -122
- package/correct-use-of-colors.entry-BRM7osKs.js +1 -0
- package/correct-use-of-colors.entry-BcZ8MzKb.mjs +59 -0
- package/{eds-docs-palettes.entry-C1EcBwSy.js → docs-palettes.entry-BoEjXr5K.js} +1 -1
- package/{eds-docs-palettes.entry-TXbXKJJN.mjs → docs-palettes.entry-CkVHcQbL.mjs} +3 -3
- package/{eds-docs-tokens.entry-BJVBVsOy.js → docs-tokens.entry-C22LSw0P.js} +1 -1
- package/{eds-docs-tokens.entry-B1xc8BFa.mjs → docs-tokens.entry-D38mtdPC.mjs} +4 -4
- package/eds-accordion.entry-B25YfdGD.js +4 -0
- package/eds-accordion.entry-ivh1zjpt.mjs +48 -0
- package/{eds-alert.entry-DZcz_4Dj.js → eds-alert.entry-C0p3qeqh.js} +224 -93
- package/{eds-alert.entry-BqjTTCgj.mjs → eds-alert.entry-DOCbYqvG.mjs} +233 -96
- package/{eds-app-root.entry-DobAtes_.mjs → eds-app-root.entry-AYVIYcb1.mjs} +4 -4
- package/{eds-app-root.entry-Cz-9z7Za.js → eds-app-root.entry-DfPrDdc_.js} +1 -1
- package/{eds-accordion_22.entry-Lqf1NKBk.mjs → eds-avatar_24.entry-BcY_4aZT.mjs} +19408 -16304
- package/eds-avatar_24.entry-DBYYqNco.js +31821 -0
- package/{eds-breadcrumb.entry-N3NSBwJL.mjs → eds-breadcrumb.entry-BTYLNHlm.mjs} +11 -11
- package/eds-breadcrumb.entry-Drb48V7S.js +1 -0
- package/eds-card-desc_3.entry-BlQBUPMR.js +1 -0
- package/eds-card-desc_3.entry-DtsrKQS6.mjs +83 -0
- package/{eds-card-generic.entry-zKJ2hHOe.mjs → eds-card-generic.entry-Dtfs4XKl.mjs} +2 -2
- package/eds-card-generic.entry-w0E2hhjp.js +1 -0
- package/eds-card-project.entry-Cek2GMTn.js +1 -0
- package/{eds-card-project.entry-DDo4ZJs8.mjs → eds-card-project.entry-Cy_NC5av.mjs} +7 -7
- package/{eds-card-section.entry-C8nt6j3h.mjs → eds-card-section.entry-D1yKOTXz.mjs} +1 -1
- package/{eds-card-section.entry-CeznIbCo.js → eds-card-section.entry-DLE2WAV_.js} +1 -1
- package/eds-card-tags.entry-CmRv-oB4.js +1 -0
- package/eds-card-tags.entry-Q9xxbeAG.mjs +13 -0
- package/{eds-card-tool.entry-DnVIn9BX.js → eds-card-tool.entry-DF_jWDUL.js} +1 -1
- package/{eds-card-tool.entry-BewNCjRU.mjs → eds-card-tool.entry-Dgi1G1RH.mjs} +7 -7
- package/{eds-card-wrapper.entry-BzKcrwEf.js → eds-card-wrapper.entry-DZZOVhcJ.js} +1 -1
- package/{eds-card-wrapper.entry-DMj1bZ4i.mjs → eds-card-wrapper.entry-k-aNj4Ms.mjs} +4 -4
- package/{eds-code-block.entry-fqrA-Frf.mjs → eds-code-block.entry-BjrDmUCm.mjs} +2 -2
- package/{eds-code-block.entry-DUeN87Fw.js → eds-code-block.entry-DoUacOW1.js} +2 -2
- package/{eds-cookies-preference.entry-BGx0tglE.js → eds-cookies-preference.entry-B7gp0J-S.js} +1 -1
- package/{eds-cookies-preference.entry-B1a8qild.mjs → eds-cookies-preference.entry-DkA2HKmI.mjs} +2 -2
- package/eds-feedback.entry-C9Ir38bt.mjs +53 -0
- package/eds-feedback.entry-GNZz9ODR.js +1 -0
- package/eds-frame.entry-CcmLaVze.mjs +67 -0
- package/eds-frame.entry-XyeUo6pB.js +1 -0
- package/eds-icon-arrow-diagonal.entry-B0dxbX_o.mjs +13 -0
- package/eds-icon-arrow-diagonal.entry-o5Ev_oO7.js +1 -0
- package/{eds-icon-arrow-right.entry-BH0zDB1H.js → eds-icon-arrow-right.entry-DUHmdP-V.js} +1 -1
- package/eds-icon-arrow-right.entry-DpdjX5aS.mjs +13 -0
- package/{eds-icon-bluesky.entry-CDZCjWCh.js → eds-icon-bluesky.entry-Bv0-EDnj.js} +1 -1
- package/{eds-icon-bluesky.entry-DwvxMR1q.mjs → eds-icon-bluesky.entry-DkSAjnck.mjs} +1 -1
- package/eds-icon-bookmark.entry-Bjzq8uze.js +1 -0
- package/eds-icon-bookmark.entry-C_0B6YJU.mjs +13 -0
- package/eds-icon-chevron-down.entry-BERHGaTB.js +1 -0
- package/eds-icon-chevron-down.entry-DnKTBqKv.mjs +13 -0
- package/eds-icon-chevron-left.entry-Bo8LqkIz.js +1 -0
- package/eds-icon-chevron-left.entry-DT2At_f6.mjs +13 -0
- package/{eds-icon-chevron-right.entry-BG7_qznz.mjs → eds-icon-chevron-right.entry-BFoMlLTp.mjs} +2 -2
- package/eds-icon-chevron-right.entry-DyqeLE1B.js +1 -0
- package/eds-icon-chevron-up.entry-Bpy8lbif.js +1 -0
- package/eds-icon-chevron-up.entry-JSrFaEET.mjs +13 -0
- package/eds-icon-close.entry-CzIoe2p3.mjs +13 -0
- package/{eds-icon-close.entry-DNhXNl8O.js → eds-icon-close.entry-cabdCuVg.js} +1 -1
- package/eds-icon-copy.entry-C08qTrZl.mjs +13 -0
- package/eds-icon-copy.entry-CvpG2Kxo.js +1 -0
- package/eds-icon-eu.entry-ChZ09s02.mjs +13 -0
- package/eds-icon-eu.entry-H2skG2J6.js +1 -0
- package/eds-icon-external.entry-DKbmbXLG.mjs +13 -0
- package/eds-icon-external.entry-DVlEoMZl.js +1 -0
- package/{eds-icon-facebook.entry--ctHhWkj.mjs → eds-icon-facebook.entry-4bvKyXXu.mjs} +1 -1
- package/{eds-icon-facebook.entry-Bjkse_bn.js → eds-icon-facebook.entry-COSHMM4W.js} +1 -1
- package/eds-icon-gitlab.entry-BXLfky5G.mjs +13 -0
- package/{eds-icon-gitlab.entry-DUQcgTMM.js → eds-icon-gitlab.entry-D_zX1Jsy.js} +1 -1
- package/{eds-icon-linkedin.entry-D-D3hmxE.js → eds-icon-linkedin.entry-CjXcA0DQ.js} +1 -1
- package/{eds-icon-linkedin.entry-Cq13-Zdb.mjs → eds-icon-linkedin.entry-_3H4M1ch.mjs} +1 -1
- package/{eds-icon-loader.entry-rKBBXz_C.js → eds-icon-loader.entry-BA-W8oxC.js} +1 -1
- package/eds-icon-loader.entry-Cp3B6C_B.mjs +13 -0
- package/{eds-icon-mastodon.entry-OpdPcGQ7.mjs → eds-icon-mastodon.entry-Bmb_O0hs.mjs} +1 -1
- package/{eds-icon-mastodon.entry-CCn_r682.js → eds-icon-mastodon.entry-DUFdG1dJ.js} +1 -1
- package/eds-icon-menu.entry-DOdmibhy.mjs +13 -0
- package/{eds-icon-menu.entry-DUxzhro5.js → eds-icon-menu.entry-Qg4r_OkP.js} +1 -1
- package/eds-icon-minus.entry-8htg5ASo.mjs +13 -0
- package/eds-icon-minus.entry-Diem-PL4.js +1 -0
- package/{eds-icon-more.entry-CBDi0LJC.js → eds-icon-more.entry-BY-mI4ec.js} +1 -1
- package/eds-icon-more.entry-DyWgD7vJ.mjs +13 -0
- package/eds-icon-paper.entry-BI3DMxCS.mjs +13 -0
- package/eds-icon-paper.entry-D2mmnsXf.js +1 -0
- package/eds-icon-plus.entry-B8KAaEGT.js +1 -0
- package/eds-icon-plus.entry-Ccr7jseH.mjs +13 -0
- package/eds-icon-portal.entry-BLhT9_Nz.js +1 -0
- package/eds-icon-portal.entry-D2iNYdZW.mjs +13 -0
- package/eds-icon-private.entry-CK2gzDym.mjs +13 -0
- package/eds-icon-private.entry-ToYtRpET.js +1 -0
- package/eds-icon-public.entry-BOnTLyd7.js +1 -0
- package/eds-icon-public.entry-N8tks7_E.mjs +13 -0
- package/{eds-icon-search.entry-Bok3Oo0Q.js → eds-icon-search.entry-C9tMq1XC.js} +1 -1
- package/{eds-icon-search.entry-CvnFqzlk.mjs → eds-icon-search.entry-DuG-zesK.mjs} +2 -2
- package/eds-icon-star.entry-B-PeifnZ.mjs +13 -0
- package/{eds-icon-star.entry-CkeEbwgJ.js → eds-icon-star.entry-CHoursjw.js} +1 -1
- package/eds-icon-success.entry-BJm--l5m.mjs +13 -0
- package/{eds-icon-success.entry-DA4C5Hwg.js → eds-icon-success.entry-ED6eDDgi.js} +1 -1
- package/eds-icon-thumbs-down.entry-BzEfZ1AX.mjs +13 -0
- package/{eds-icon-thumbs-down.entry-BqEOrmiW.js → eds-icon-thumbs-down.entry-zjkeVdJJ.js} +1 -1
- package/{eds-icon-thumbs-up.entry-Dkqv6r_x.js → eds-icon-thumbs-up.entry-CZJlAqFh.js} +1 -1
- package/eds-icon-thumbs-up.entry-DutZ0Kki.mjs +13 -0
- package/eds-icon-tutorial.entry-DRMLIdl4.mjs +13 -0
- package/eds-icon-tutorial.entry-D_9AQ-6-.js +1 -0
- package/{eds-icon-twitter.entry-CqalD8Wf.mjs → eds-icon-twitter.entry-CJhiAxNu.mjs} +1 -1
- package/{eds-icon-twitter.entry-BcZ2atce.js → eds-icon-twitter.entry-DDsRqP6N.js} +1 -1
- package/eds-icon-unknown.entry-57uXdegM.mjs +13 -0
- package/eds-icon-unknown.entry-7Mmqc2BG.js +1 -0
- package/eds-icon-updown.entry-BwdgdGgR.mjs +13 -0
- package/eds-icon-updown.entry-b0BvWM4f.js +1 -0
- package/{eds-icon-user.entry-DU8EF-lQ.mjs → eds-icon-user.entry-BJ7Wi5JO.mjs} +1 -1
- package/{eds-icon-user.entry-DpvoOnVA.js → eds-icon-user.entry-czB7LMt8.js} +1 -1
- package/{eds-icon-youtube.entry-vFg7QtYg.mjs → eds-icon-youtube.entry-BWP1dBVD.mjs} +1 -1
- package/{eds-icon-youtube.entry-DbPAn4pN.js → eds-icon-youtube.entry-v007UjBQ.js} +1 -1
- package/{eds-login_2.entry-DD8g9nqu.mjs → eds-login_2.entry-BfzeZBGw.mjs} +106 -93
- package/{eds-login_2.entry-6Hxmqih9.js → eds-login_2.entry-DmBDAFIz.js} +3 -3
- package/eds-matomo-notice.entry-B-MlwGCp.mjs +90 -0
- package/eds-matomo-notice.entry-CCiq7z7U.js +1 -0
- package/eds-modal.entry-DU5qpx-i.js +1 -0
- package/eds-modal.entry-puAN0sn-.mjs +96 -0
- package/eds-pagination_2.entry-CuaStxZg.js +1 -0
- package/eds-pagination_2.entry-DWzfLRgF.mjs +258 -0
- package/{eds-progress-bar.entry-BP6AqtI7.mjs → eds-progress-bar.entry-BRTtAttw.mjs} +1 -1
- package/{eds-progress-bar.entry-23-I0rSz.js → eds-progress-bar.entry-qScp3MQj.js} +1 -1
- package/{eds-rating.entry-CHo7h3Y4.mjs → eds-rating.entry-CEI0zBir.mjs} +1 -1
- package/{eds-rating.entry-dDYfYR7o.js → eds-rating.entry-DOTYJZZ6.js} +1 -1
- package/{eds-section-core_2.entry-DTItYLUC.mjs → eds-section-core_2.entry-BZpOdGAA.mjs} +4 -4
- package/{eds-section-core_2.entry-BdnBCBit.js → eds-section-core_2.entry-Cmly0OqW.js} +1 -1
- package/{eds-spinner.entry-CXLe8IAk.js → eds-spinner.entry-C_3hil-u.js} +1 -1
- package/{eds-spinner.entry-BwTZAz8I.mjs → eds-spinner.entry-DLqey9r7.mjs} +1 -1
- package/{eds-switch.entry-DjT9dev_.mjs → eds-switch.entry-BPHya25S.mjs} +5 -5
- package/{eds-switch.entry-4a3DLV-c.js → eds-switch.entry-IoOUDh10.js} +1 -1
- package/{eds-tabs.entry-BYxiMlkR.mjs → eds-tabs.entry-DEOntaY1.mjs} +65 -63
- package/{eds-tabs.entry-DJKEg0Gs.js → eds-tabs.entry-lqdai_rD.js} +65 -63
- package/eds-timeline.entry-CC0zKwha.js +7777 -0
- package/eds-timeline.entry-c1YpsWVJ.mjs +7822 -0
- package/{eds-toast-manager.entry-BV-sP7cR.mjs → eds-toast-manager.entry-BvunvxZX.mjs} +2 -2
- package/{eds-toast-manager.entry-BopxpC3o.js → eds-toast-manager.entry-DMZSCFoE.js} +1 -1
- package/{eds-toast.entry-DDBTRdmP.mjs → eds-toast.entry-DW3toqwW.mjs} +1 -1
- package/{eds-toast.entry-DPibhM-Z.js → eds-toast.entry-rudQ7nhp.js} +1 -1
- package/{eds-tooltip.entry-Cf6bse_x.js → eds-tooltip.entry-CcGgCRMO.js} +1 -1
- package/{eds-tooltip.entry-B53fpM9t.mjs → eds-tooltip.entry-CoHV78jm.mjs} +7 -7
- package/{eds-trl.entry-C0cSVG_Q.mjs → eds-trl.entry-CQOb5dk-.mjs} +4 -4
- package/{eds-trl.entry-fYVgYPts.js → eds-trl.entry-L0XqQYCq.js} +1 -1
- package/generated/components.d.ts +1 -5
- package/incorrect-use-of-colors.entry-C1QG9658.js +1 -0
- package/incorrect-use-of-colors.entry-C3Qt3gSE.mjs +42 -0
- package/index-cHrGUVDM.js +21 -0
- package/{index-E1PpO1J3.mjs → index-xVeSZU9j.mjs} +463 -456
- package/index.js +1 -1
- package/index.mjs +31 -35
- package/logo-space.entry-H3itdzkq.mjs +19 -0
- package/logo-space.entry-epl_-703.js +6 -0
- package/logo-variations-horizontal_2.entry-CKLOzzOx.mjs +29 -0
- package/logo-variations-horizontal_2.entry-k6KqYji6.js +7 -0
- package/{eds-logo-variations.entry-dLBnZPi7.js → logo-variations-tabs.entry-BpYl8Gpo.js} +1 -1
- package/logo-variations-tabs.entry-Df5DuYk-.mjs +22 -0
- package/logo-wrong-usage.entry-Bkg9gp3h.mjs +14 -0
- package/logo-wrong-usage.entry-DhlWm8es.js +1 -0
- package/minus-b30a7c71-BPAvqHzH.mjs +12 -0
- package/minus-b30a7c71-DqCTe6Qh.js +9 -0
- package/package.json +1 -1
- package/paper-8e74ea31-BvGrc1Vo.mjs +16 -0
- package/paper-8e74ea31-C4CV6tlB.js +13 -0
- package/plus-89c07be2-BTXnjg5K.js +10 -0
- package/plus-89c07be2-DyT9I4-L.mjs +13 -0
- package/portal-d6c8ce56-Cj61ldo8.mjs +19 -0
- package/portal-d6c8ce56-NpSrdNZ_.js +16 -0
- package/private-1c25ff8e-D3Fo36q6.js +23 -0
- package/private-1c25ff8e-Dz82_Xf8.mjs +26 -0
- package/public-d4d8c585-BJKDD5F6.mjs +17 -0
- package/public-d4d8c585-lV6QxdPw.js +14 -0
- package/{eds-svg-repository.entry-DoYT85te.mjs → svg-repository.entry-C1TKYvU7.mjs} +94 -92
- package/{eds-svg-repository.entry-CKQ6S13R.js → svg-repository.entry-DxVwTMCv.js} +12 -31
- package/{token-list_3.entry-DJ-cqa3_.mjs → token-list_3.entry-CABw7-9O.mjs} +16 -16
- package/token-list_3.entry-CawIyAia.js +1 -0
- package/{token-ratios.entry-FKky7w4Z.mjs → token-ratios.entry-BGWJSHfY.mjs} +2 -2
- package/token-ratios.entry-B_FOHsNq.js +1 -0
- package/{token-typography.entry-CKyKPdVF.mjs → token-typography.entry-BHvTpH4i.mjs} +4 -4
- package/{token-typography.entry-CuHfxHRU.js → token-typography.entry-FXRD_KVv.js} +2 -2
- package/tutotial-150ee1fd-DFdyoHVA.mjs +28 -0
- package/tutotial-150ee1fd-DjN_JBL5.js +25 -0
- package/unknown-ed01a24c-B0AcMuip.js +20 -0
- package/unknown-ed01a24c-DonOUpIC.mjs +23 -0
- package/up-and-down-d747abee-CWoZjUyq.js +10 -0
- package/up-and-down-d747abee-D7g6H0T0.mjs +13 -0
- package/color-primary-palette_6.entry-BDyyrFB5.mjs +0 -300
- package/color-primary-palette_6.entry-BhxgE7ff.js +0 -1
- package/correct-use-of-colors.entry-DXASqwFp.js +0 -1
- package/correct-use-of-colors.entry-z7k3YWpg.mjs +0 -59
- package/eds-accordion_22.entry-LksMmZ4o.js +0 -28813
- package/eds-avatar_4.entry-BYrgwmj2.mjs +0 -278
- package/eds-avatar_4.entry-Bqr0d5Cj.js +0 -149
- package/eds-breadcrumb.entry-elqbS74P.js +0 -1
- package/eds-card-generic.entry-D5pTUUco.js +0 -1
- package/eds-card-project.entry-e4n5lQbW.js +0 -1
- package/eds-card-tags.entry-Bl3YXNtv.js +0 -1
- package/eds-card-tags.entry-Do9kx7rP.mjs +0 -13
- package/eds-components-section.entry-CLJMns6h.js +0 -141
- package/eds-dropdown.entry-CMK8E_J2.mjs +0 -83
- package/eds-dropdown.entry-FqX7fOIb.js +0 -1
- package/eds-feedback.entry-B-Lue8P0.js +0 -1
- package/eds-feedback.entry-fz73-syB.mjs +0 -53
- package/eds-form.entry-0saB-Hm9.js +0 -7153
- package/eds-form.entry-BB1gfXVy.mjs +0 -7355
- package/eds-frame.entry-BvJCKWMT.mjs +0 -73
- package/eds-frame.entry-dX3nZxD0.js +0 -1
- package/eds-icon-arrow-diagonal.entry-BD3xdvR4.mjs +0 -13
- package/eds-icon-arrow-diagonal.entry-DkQFuVkT.js +0 -1
- package/eds-icon-arrow-right.entry-Diax6KZB.mjs +0 -13
- package/eds-icon-chevron-down.entry-CGsA1rJ0.js +0 -1
- package/eds-icon-chevron-down.entry-CiJcqZuh.mjs +0 -13
- package/eds-icon-chevron-left.entry-Dt2WsKob.mjs +0 -13
- package/eds-icon-chevron-left.entry-nBBudzCb.js +0 -1
- package/eds-icon-chevron-right.entry-CjhJFKog.js +0 -1
- package/eds-icon-chevron-up.entry-DfsbHKk1.mjs +0 -13
- package/eds-icon-chevron-up.entry-Dy81hGw-.js +0 -1
- package/eds-icon-close.entry-CpGzc34L.mjs +0 -13
- package/eds-icon-copy.entry-CsD2FpUS.mjs +0 -13
- package/eds-icon-copy.entry-DD2HXgFK.js +0 -1
- package/eds-icon-eu.entry-BRuCbl7O.mjs +0 -13
- package/eds-icon-eu.entry-ChKv8iZB.js +0 -1
- package/eds-icon-gitlab.entry-BDqNL5zl.mjs +0 -13
- package/eds-icon-loader.entry-DgpUjCng.mjs +0 -13
- package/eds-icon-menu.entry-B3mQ8ma1.mjs +0 -13
- package/eds-icon-more.entry-CDDxBiBM.mjs +0 -13
- package/eds-icon-star.entry-BRQ07hMQ.mjs +0 -13
- package/eds-icon-success.entry-nWUVTFzX.mjs +0 -13
- package/eds-icon-thumbs-down.entry-Dme-Ippn.mjs +0 -13
- package/eds-icon-thumbs-up.entry-Dp-eslmx.mjs +0 -13
- package/eds-logo-variations.entry-CDTTH-iG.mjs +0 -22
- package/eds-modal.entry-CV3bf08X.mjs +0 -96
- package/eds-modal.entry-DJybVbNk.js +0 -1
- package/eds-steps.entry-Nz_XqcUl.mjs +0 -28
- package/eds-steps.entry-ceVyrSe-.js +0 -1
- package/eds-timeline.entry-DKx-pd67.js +0 -1
- package/eds-timeline.entry-DOSKCjPH.mjs +0 -45
- package/eds-user.entry-hUkYJDp4.js +0 -1
- package/eds-user.entry-qM0swzIt.mjs +0 -26
- package/eds-vertical-stepper.entry-Bb6dUinj.mjs +0 -27
- package/eds-vertical-stepper.entry-CvadBA1x.js +0 -1
- package/formUtils-ac68474d-BDuxB0K8.js +0 -1
- package/formUtils-ac68474d-D2e59S7S.mjs +0 -122
- package/incorrect-use-of-colors.entry-B6fKAvAx.mjs +0 -42
- package/incorrect-use-of-colors.entry-DZ_SBoa8.js +0 -1
- package/index-D4alMZtT.js +0 -21
- package/logo-space.entry-BOh7Odfh.js +0 -1
- package/logo-space.entry-xGhYUj5r.mjs +0 -14
- package/logo-variations-horizontal_2.entry-BWlXcmRe.js +0 -7
- package/logo-variations-horizontal_2.entry-CIUDEw3Y.mjs +0 -29
- package/logo-wrong-usage.entry-CtPXf-5h.js +0 -1
- package/logo-wrong-usage.entry-D4aBJ6Wk.mjs +0 -14
- package/token-list_3.entry-DVoMZtdK.js +0 -1
- package/token-ratios.entry-JS-ffZPx.js +0 -1
- package/token-spacing.entry-Cf5LP8jh.mjs +0 -12
- package/token-spacing.entry-YJWgDaTr.js +0 -1
|
@@ -1,278 +0,0 @@
|
|
|
1
|
-
import { r as n, h as t } from "./index-E1PpO1J3.mjs";
|
|
2
|
-
import { g as i } from "./color-2554aad6-CCcV5UJZ.mjs";
|
|
3
|
-
import { c as r } from "./index-39c58238-BwYCDOHZ.mjs";
|
|
4
|
-
const a = `.border-inside {
|
|
5
|
-
position: relative;
|
|
6
|
-
|
|
7
|
-
&::after {
|
|
8
|
-
pointer-events: none;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&::after {
|
|
12
|
-
position: absolute;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&::after {
|
|
16
|
-
inset: 0rem;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&::after {
|
|
20
|
-
z-index: 1;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&::after {
|
|
24
|
-
border-radius: 8px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&::after {
|
|
28
|
-
border-width: 1px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&::after {
|
|
32
|
-
border-width: 2px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&::after {
|
|
36
|
-
border: 2px solid rgba(0, 0, 0, .1);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&::after {
|
|
40
|
-
content: '';
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.border-inside-pill {
|
|
45
|
-
&::after {
|
|
46
|
-
border-radius: 100px;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&::after {
|
|
50
|
-
content: '';
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.border-inside-inverse {
|
|
55
|
-
&::after {
|
|
56
|
-
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&::after {
|
|
60
|
-
content: '';
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.aspect-1x1 {
|
|
65
|
-
aspect-ratio: 1/1;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.flex {
|
|
69
|
-
display: flex;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.inline-flex {
|
|
73
|
-
display: inline-flex;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.items-center {
|
|
77
|
-
align-items: center;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.justify-center {
|
|
81
|
-
justify-content: center;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.overflow-hidden {
|
|
85
|
-
overflow: hidden;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.px-4 {
|
|
89
|
-
padding-left: 0.25rem;
|
|
90
|
-
padding-right: 0.25rem;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.rounded-pill {
|
|
94
|
-
border-radius: 100px;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.rounded-sm {
|
|
98
|
-
border-radius: 8px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.rounded-xs {
|
|
102
|
-
border-radius: 4px;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
.bg-dark {
|
|
107
|
-
background-color: var(--grey-300);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.bg-darker {
|
|
111
|
-
background-color: var(--grey-400);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.bg-stronger {
|
|
115
|
-
background-color: var(--grey-900);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.bg-strongest {
|
|
119
|
-
background-color: var(--black);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.text-accent {
|
|
123
|
-
color: var(--green-500);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.text-default {
|
|
127
|
-
color: var(--black);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.\\!no-underline {
|
|
131
|
-
text-decoration-line: none !important;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.f-ui-01 {
|
|
135
|
-
font-family: var(--f-ui-01-fontFamily);
|
|
136
|
-
font-weight: var(--f-ui-01-fontWeight);
|
|
137
|
-
font-size: var(--f-ui-01-fontSize);
|
|
138
|
-
line-height: var(--f-ui-01-lineHeight);
|
|
139
|
-
letter-spacing: var(--f-ui-01-letterSpacing);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.w-32 {
|
|
143
|
-
width: 2rem;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.w-44 {
|
|
147
|
-
width: 2.75rem;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.w-\\[54px\\] {
|
|
151
|
-
width: 54px;
|
|
152
|
-
}`, s = a, o = class {
|
|
153
|
-
constructor(e) {
|
|
154
|
-
n(this, e), this.firstName = "User", this.lastName = "Avatar", this.picture = void 0, this.initials = void 0, this.color = void 0, this.rounded = !1, this.initialsStrong = !1;
|
|
155
|
-
}
|
|
156
|
-
/**
|
|
157
|
-
* Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
|
|
158
|
-
* @returns {string | undefined} Initials for display in the avatar.
|
|
159
|
-
*/
|
|
160
|
-
get computedInitials() {
|
|
161
|
-
if (this.initials)
|
|
162
|
-
return (this.initials.match(/.{1,3}/g) || [])[0] || "";
|
|
163
|
-
if (this.firstName && this.lastName)
|
|
164
|
-
return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
|
|
165
|
-
}
|
|
166
|
-
/**
|
|
167
|
-
* Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
|
|
168
|
-
* @returns {string} List of CSS classes to apply to the avatar container.
|
|
169
|
-
*/
|
|
170
|
-
get containerClasses() {
|
|
171
|
-
return [
|
|
172
|
-
"border-inside",
|
|
173
|
-
"aspect-1x1",
|
|
174
|
-
"flex",
|
|
175
|
-
"items-center",
|
|
176
|
-
"justify-center",
|
|
177
|
-
"overflow-hidden",
|
|
178
|
-
this.picture ? "" : "px-4",
|
|
179
|
-
this.rounded ? "rounded-pill border-inside-pill w-32" : "w-[54px] rounded-sm",
|
|
180
|
-
this.color ? "border-inside-inverse" : "",
|
|
181
|
-
this.color === "grey" ? "bg-dark" : this.color && !this.picture ? i({
|
|
182
|
-
color: this.color,
|
|
183
|
-
direction: "top",
|
|
184
|
-
pseudo: !1
|
|
185
|
-
}) : this.picture ? "" : "bg-strongest text-accent"
|
|
186
|
-
].join(" ");
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
|
|
190
|
-
* @returns {JSX.Element} The rendered avatar component.
|
|
191
|
-
*/
|
|
192
|
-
render() {
|
|
193
|
-
return t("div", { key: "47ee5ffd12c0f90c536dea77b3ffa9120d67f37f", class: this.containerClasses }, this.picture ? t("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: !0, withBg: !0 }) : t("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials));
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
o.style = s;
|
|
197
|
-
const l = ".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}", d = l, f = class {
|
|
198
|
-
constructor(e) {
|
|
199
|
-
n(this, e), this.description = void 0, this.descClass = "f-ui-03-light", this.truncate = !0, this.truncateLines = "3";
|
|
200
|
-
}
|
|
201
|
-
getTruncateClass() {
|
|
202
|
-
return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : "";
|
|
203
|
-
}
|
|
204
|
-
render() {
|
|
205
|
-
return t("p", { key: "71495cbd6ef4e7d66c4c22a37f8120624ecf57fb", class: `text-light ${this.descClass}` }, t("span", { key: "8708178f7b48cc1f31aac749f50fe92b72c39ab8", class: this.getTruncateClass() }, this.description));
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
f.style = d;
|
|
209
|
-
const h = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}", c = h, g = class {
|
|
210
|
-
constructor(e) {
|
|
211
|
-
n(this, e), this.url = void 0, this.titleClass = void 0, this.headingLevel = "h3", this.externalLink = !1, this.cardTitle = void 0, this.hierarchy = !0;
|
|
212
|
-
}
|
|
213
|
-
/**
|
|
214
|
-
* Dynamically generate the title class based on the heading level.
|
|
215
|
-
*/
|
|
216
|
-
getTitleClass() {
|
|
217
|
-
return `f-heading-${(this.hierarchy ? {
|
|
218
|
-
h1: "05",
|
|
219
|
-
h2: "05",
|
|
220
|
-
h3: "05",
|
|
221
|
-
h4: "05",
|
|
222
|
-
h5: "05",
|
|
223
|
-
h6: "06"
|
|
224
|
-
} : {
|
|
225
|
-
h1: "01",
|
|
226
|
-
h2: "02",
|
|
227
|
-
h3: "03",
|
|
228
|
-
h4: "04",
|
|
229
|
-
h5: "05",
|
|
230
|
-
h6: "06"
|
|
231
|
-
})[this.headingLevel]}`;
|
|
232
|
-
}
|
|
233
|
-
/*private getTag() {
|
|
234
|
-
if (this.url) {
|
|
235
|
-
return 'a';
|
|
236
|
-
}
|
|
237
|
-
return 'span';
|
|
238
|
-
}*/
|
|
239
|
-
render() {
|
|
240
|
-
const e = this.headingLevel;
|
|
241
|
-
return t(e, { key: "bb97dc6dd53adda14ef251b2ec32952791438986", class: this.getTitleClass() }, t("a", { key: "37b6ac0668257d27fb3f03a6225a2d48e1fd1f79", class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? "_blank" : void 0, rel: this.externalLink ? "noopener noreferrer" : void 0 }, this.cardTitle));
|
|
242
|
-
}
|
|
243
|
-
};
|
|
244
|
-
g.style = c;
|
|
245
|
-
const u = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}", p = u, b = r(
|
|
246
|
-
["f-ui-05 py-1 px-4 border-2 rounded-pill"],
|
|
247
|
-
// Base classes
|
|
248
|
-
{
|
|
249
|
-
variants: {
|
|
250
|
-
intent: {
|
|
251
|
-
default: "border-default",
|
|
252
|
-
strong: "text-inverse bg-strongest border-default",
|
|
253
|
-
accent: "text-[#0034CB] border-[#0034CB]",
|
|
254
|
-
weak: "text-light bg-strongest-soft border-transparent",
|
|
255
|
-
inverse: "border-inverse text-inverse",
|
|
256
|
-
"inverse-strong": "bg-inverse border-inverse text-lighter"
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
defaultVariants: {
|
|
260
|
-
intent: "default"
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
), v = class {
|
|
264
|
-
constructor(e) {
|
|
265
|
-
n(this, e), this.label = void 0, this.intent = "default";
|
|
266
|
-
}
|
|
267
|
-
render() {
|
|
268
|
-
const e = b({ intent: this.intent });
|
|
269
|
-
return t("span", { key: "2f4b0011094538aaa0a7cc855eadc1b39c9dc028", class: e }, this.label);
|
|
270
|
-
}
|
|
271
|
-
};
|
|
272
|
-
v.style = p;
|
|
273
|
-
export {
|
|
274
|
-
o as eds_avatar,
|
|
275
|
-
f as eds_card_desc,
|
|
276
|
-
g as eds_card_title,
|
|
277
|
-
v as eds_tag
|
|
278
|
-
};
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-D4alMZtT.js"),s=require("./color-2554aad6-D1hFGX4H.js"),o=require("./index-39c58238-SQ-JC-LH.js"),l=`.border-inside {
|
|
2
|
-
position: relative;
|
|
3
|
-
|
|
4
|
-
&::after {
|
|
5
|
-
pointer-events: none;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
&::after {
|
|
9
|
-
position: absolute;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&::after {
|
|
13
|
-
inset: 0rem;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&::after {
|
|
17
|
-
z-index: 1;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&::after {
|
|
21
|
-
border-radius: 8px;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&::after {
|
|
25
|
-
border-width: 1px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&::after {
|
|
29
|
-
border-width: 2px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&::after {
|
|
33
|
-
border: 2px solid rgba(0, 0, 0, .1);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&::after {
|
|
37
|
-
content: '';
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.border-inside-pill {
|
|
42
|
-
&::after {
|
|
43
|
-
border-radius: 100px;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&::after {
|
|
47
|
-
content: '';
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.border-inside-inverse {
|
|
52
|
-
&::after {
|
|
53
|
-
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
&::after {
|
|
57
|
-
content: '';
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.aspect-1x1 {
|
|
62
|
-
aspect-ratio: 1/1;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.flex {
|
|
66
|
-
display: flex;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.inline-flex {
|
|
70
|
-
display: inline-flex;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.items-center {
|
|
74
|
-
align-items: center;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.justify-center {
|
|
78
|
-
justify-content: center;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.overflow-hidden {
|
|
82
|
-
overflow: hidden;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.px-4 {
|
|
86
|
-
padding-left: 0.25rem;
|
|
87
|
-
padding-right: 0.25rem;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.rounded-pill {
|
|
91
|
-
border-radius: 100px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.rounded-sm {
|
|
95
|
-
border-radius: 8px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.rounded-xs {
|
|
99
|
-
border-radius: 4px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
.bg-dark {
|
|
104
|
-
background-color: var(--grey-300);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.bg-darker {
|
|
108
|
-
background-color: var(--grey-400);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.bg-stronger {
|
|
112
|
-
background-color: var(--grey-900);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.bg-strongest {
|
|
116
|
-
background-color: var(--black);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.text-accent {
|
|
120
|
-
color: var(--green-500);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.text-default {
|
|
124
|
-
color: var(--black);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.\\!no-underline {
|
|
128
|
-
text-decoration-line: none !important;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.f-ui-01 {
|
|
132
|
-
font-family: var(--f-ui-01-fontFamily);
|
|
133
|
-
font-weight: var(--f-ui-01-fontWeight);
|
|
134
|
-
font-size: var(--f-ui-01-fontSize);
|
|
135
|
-
line-height: var(--f-ui-01-lineHeight);
|
|
136
|
-
letter-spacing: var(--f-ui-01-letterSpacing);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.w-32 {
|
|
140
|
-
width: 2rem;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.w-44 {
|
|
144
|
-
width: 2.75rem;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.w-\\[54px\\] {
|
|
148
|
-
width: 54px;
|
|
149
|
-
}`,d=l,n=class{constructor(e){t.registerInstance(this,e),this.firstName="User",this.lastName="Avatar",this.picture=void 0,this.initials=void 0,this.color=void 0,this.rounded=!1,this.initialsStrong=!1}get computedInitials(){if(this.initials)return(this.initials.match(/.{1,3}/g)||[])[0]||"";if(this.firstName&&this.lastName)return`${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase()}get containerClasses(){return["border-inside","aspect-1x1","flex","items-center","justify-center","overflow-hidden",this.picture?"":"px-4",this.rounded?"rounded-pill border-inside-pill w-32":"w-[54px] rounded-sm",this.color?"border-inside-inverse":"",this.color==="grey"?"bg-dark":this.color&&!this.picture?s.gradientBGColorVariants({color:this.color,direction:"top",pseudo:!1}):this.picture?"":"bg-strongest text-accent"].join(" ")}render(){return t.h("div",{key:"47ee5ffd12c0f90c536dea77b3ffa9120d67f37f",class:this.containerClasses},this.picture?t.h("eds-img",{src:this.picture,width:54,height:54,sizes:"120px",alt:`${this.firstName} ${this.lastName}`,lazyload:!0,withBg:!0}):t.h("abbr",{title:this.computedInitials||`${this.firstName} ${this.lastName}`,class:"!no-underline f-ui-01"},this.computedInitials))}};n.style=d;const f=".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}",h=f,i=class{constructor(e){t.registerInstance(this,e),this.description=void 0,this.descClass="f-ui-03-light",this.truncate=!0,this.truncateLines="3"}getTruncateClass(){return this.truncate&&this.truncateLines?`line-clamp-${this.truncateLines}`:""}render(){return t.h("p",{key:"71495cbd6ef4e7d66c4c22a37f8120624ecf57fb",class:`text-light ${this.descClass}`},t.h("span",{key:"8708178f7b48cc1f31aac749f50fe92b72c39ab8",class:this.getTruncateClass()},this.description))}};i.style=h;const c="a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}",g=c,r=class{constructor(e){t.registerInstance(this,e),this.url=void 0,this.titleClass=void 0,this.headingLevel="h3",this.externalLink=!1,this.cardTitle=void 0,this.hierarchy=!0}getTitleClass(){return`f-heading-${(this.hierarchy?{h1:"05",h2:"05",h3:"05",h4:"05",h5:"05",h6:"06"}:{h1:"01",h2:"02",h3:"03",h4:"04",h5:"05",h6:"06"})[this.headingLevel]}`}render(){const e=this.headingLevel;return t.h(e,{key:"bb97dc6dd53adda14ef251b2ec32952791438986",class:this.getTitleClass()},t.h("a",{key:"37b6ac0668257d27fb3f03a6225a2d48e1fd1f79",class:"break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",href:this.url,target:this.externalLink?"_blank":void 0,rel:this.externalLink?"noopener noreferrer":void 0},this.cardTitle))}};r.style=g;const u=".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}",p=u,b=o.cva(["f-ui-05 py-1 px-4 border-2 rounded-pill"],{variants:{intent:{default:"border-default",strong:"text-inverse bg-strongest border-default",accent:"text-[#0034CB] border-[#0034CB]",weak:"text-light bg-strongest-soft border-transparent",inverse:"border-inverse text-inverse","inverse-strong":"bg-inverse border-inverse text-lighter"}},defaultVariants:{intent:"default"}}),a=class{constructor(e){t.registerInstance(this,e),this.label=void 0,this.intent="default"}render(){const e=b({intent:this.intent});return t.h("span",{key:"2f4b0011094538aaa0a7cc855eadc1b39c9dc028",class:e},this.label)}};a.style=p;exports.eds_avatar=n;exports.eds_card_desc=i;exports.eds_card_title=r;exports.eds_tag=a;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-D4alMZtT.js"),d=require("./sharedUtils-a550989c-m4pF1Vqy.js"),c="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}",h=c,n=class{constructor(e){s.registerInstance(this,e),this.updateScreenSize=()=>{const t=window.innerWidth;t<769?(this.maxVisibleItems=3,this.isSmallScreen=!0):t<=1024?(this.maxVisibleItems=4,this.isSmallScreen=!0):(this.maxVisibleItems=6,this.isSmallScreen=!1)},this.items=[],this.intent="ghost",this.parsedItems=[],this.isSmallScreen=!1,this.maxVisibleItems=6}parseItems(e){this.parsedItems=d.parseData(e)}componentWillLoad(){this.parseItems(this.items),this.updateScreenSize(),window.addEventListener("resize",this.updateScreenSize)}disconnectedCallback(){window.removeEventListener("resize",this.updateScreenSize)}componentDidLoad(){var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("eds-link");t==null||t.forEach(l=>{this.emitContext(l)})}emitContext(e){const t=new CustomEvent("parentContext",{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});e.dispatchEvent(t)}getTruncatedItems(){const e=this.parsedItems.length,t={label:"...",url:"",isHidden:!0};if(e>this.maxVisibleItems){const l=this.parsedItems[0],i=this.parsedItems.slice(-2);if(this.maxVisibleItems===3)return[l,t,...i];if(this.maxVisibleItems===4){const a=this.parsedItems[Math.floor(e/2)];return[l,a,t,...i]}}return this.parsedItems}getLabels(e,t){return!t&&e.label.length>15?{displayLabel:`${e.label.slice(0,15)}...`,fullLabel:e.label}:{displayLabel:e.label,fullLabel:e.label}}render(){const e=this.getTruncatedItems();return s.h("nav",{key:"02537ec4208124f8a5ba564f7487f6fad552f7da","aria-label":"Breadcrumb"},s.h("ol",{key:"ac6e2ecd59a8ddef52e004d95fbb492f78a9b248",class:"flex items-center space-x-2"},e.map((t,l)=>{const i=l===e.length-1;return s.h("li",{class:"flex items-center"},t.isHidden?s.h("span",{class:"truncate px-2","aria-hidden":"true"},"..."):(()=>{const{displayLabel:a,fullLabel:r}=this.getLabels(t,i);return s.h("eds-link",Object.assign({label:a,url:t.url,intent:this.intent,current:i,"aria-label":r,size:"small","icon-small":"false"},i?{"aria-current":"page"}:{}))})(),!i&&!t.isHidden&&s.h("eds-icon-wrapper",{icon:"chevron-right",class:"w-20 h-20"}))})))}get el(){return s.getElement(this)}static get watchers(){return{items:["parseItems"]}}};n.style=h;exports.eds_breadcrumb=n;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-D4alMZtT.js"),s=require("./sharedUtils-a550989c-m4pF1Vqy.js"),a=require("./analytics-44b1416b-ol77SdQE.js"),o=".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}",n=o,i=class{constructor(e){t.registerInstance(this,e),this.parentContext=null,this.cardTitle=void 0,this.url=void 0,this.description=void 0,this.image=void 0,this.avatar=void 0,this.shortAbbreviation=void 0,this.headingLevel="h3",this.tags=[],this.tiny=!1,this.bg=!0,this.withHover=!0,this.hierarchy=!0,this.parsedImage=null}componentWillLoad(){if(this.image)try{typeof this.image=="object"?this.parsedImage=this.image:typeof this.image=="string"&&(this.parsedImage=JSON.parse(this.image))}catch(e){console.error("Error parsing image prop:",e),this.parsedImage={}}}handleParentContext(e){e.target===this.el&&(this.parentContext=e.detail,e.stopPropagation())}get parsedTags(){return s.parseData(this.tags)}articleClasses(){return[this.description?this.tiny?"min-h-120":"min-h-156":"h-auto",this.bg?"bg-inverse":"bg-default",this.withHover?"effect-shadow hover:shadow-hover cursor-pointer":"","border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16"].join(" ")}handleClick(){var e;a.sendAnalytics({category:"ui-component",parentContext:this.parentContext,tag:this.el.tagName.toLowerCase(),name:((e=this.cardTitle)===null||e===void 0?void 0:e.toLowerCase())||"",action:"click"})}render(){return t.h("article",{key:"440a448c841370838c0c66610bd1266b46f66541",class:this.articleClasses(),onClick:()=>this.handleClick()},t.h("eds-card-title",{key:"292d93a9a993c6dcbfd276097a21d3984b1794c4","heading-level":this.headingLevel,titleClass:this.image?"f-ui-01":void 0,"card-title":this.cardTitle,url:this.url,hierarchy:this.hierarchy}),this.description&&t.h("eds-card-desc",{key:"4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7",class:"mt-8","truncate-lines":"3",description:this.description}),this.parsedImage?t.h("eds-img",Object.assign({class:"mt-8"},this.parsedImage)):this.avatar||this.shortAbbreviation?t.h("eds-avatar",{class:"order-first mb-12",picture:this.avatar,initials:this.shortAbbreviation}):null,t.h("div",{key:"cb5c191f6c190fb6edb46446187dbf6b8c1b778b",class:"flex flex-wrap gap-y-4"},this.parsedTags.map((e,r)=>t.h("eds-tag",{key:r,intent:e.style,label:e.label})))," ")}get el(){return t.getElement(this)}};i.style=n;exports.eds_card_generic=i;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D4alMZtT.js"),r=require("./analytics-44b1416b-ol77SdQE.js"),d=require("./color-2554aad6-D1hFGX4H.js"),l=class{constructor(t){e.registerInstance(this,t),this.image=void 0,this.editorialTitle=void 0,this.headingLevel="h3",this.categoryTitle=void 0,this.color=void 0,this.bgOnHover=!1,this.vertical=!1,this.titleProject=void 0,this.url=void 0,this.parsedImage=null}componentWillLoad(){if(this.image)try{this.parsedImage=JSON.parse(this.image)}catch{}}handleClick(t){var i;t.preventDefault(),r.sendAnalytics({category:"ui-component",tag:this.el.tagName.toLowerCase(),name:((i=this.titleProject)===null||i===void 0?void 0:i.toLowerCase())||"",action:"click"})}render(){var t;const i=["min-h-156 border-inside after:border-softest @container overflow-hidden border-0 after:rounded-lg",this.color?d.gradientBGColorVariants({color:this.color,hover:this.bgOnHover,class:"before:border-2 before:rounded-lg before:border-softest"}):"bg-default",this.bgOnHover&&this.color?"effect-background bg-default focus-within:bg-transparent hover:bg-transparent":"effect-background hover:bg-default",this.vertical?"flex-col gap-y-16":"flex-col gap-x-16 gap-y-12 lg:flex-row"].join(" "),a=this.vertical?"":"max-w-120 @md:max-w-192 order-first w-full lg:order-last";return e.h("article",{key:"98c5dbd033ec05d08965559e00f32d9fe18698ef",class:i,onClick:s=>this.handleClick(s)},e.h("div",{key:"e083c43e38c3c24fcd996a90267f7cd92d3651b3",class:`flex grow flex-col ${this.vertical?"min-h-156":""}`},e.h("div",{key:"37de1e46023b533fd8595a3077c4e68c11fb01af",class:"lg:max-w-[720px]"},e.h("eds-card-title",{key:"ee31ae2804d2c17c82e8f4c0c3269ac8254331df","heading-level":this.headingLevel,titleClass:this.image?"f-ui-01":void 0,"card-title":this.titleProject,url:this.url}),this.editorialTitle&&e.h("span",{key:"c6f74ba9b5b522f713e25d3339f541efa68cdddd",class:`block ${this.vertical?"f-ui-02":"mt-4 f-heading-06"}`},this.editorialTitle)),this.categoryTitle&&e.h("div",{key:"ab18e55046777cf4a4f58ebd057641db9b9e0328",class:"mt-auto flex items-center gap-x-12 pt-12"},((t=this.categoryTitle)===null||t===void 0?void 0:t.length)&&e.h("eds-tag",{key:"3714ee86a74dce7f33a8f953fd726db349ba9271",label:this.categoryTitle}))),this.parsedImage&&e.h("div",{key:"2818d15f7ab671b7b2dfb34ec3085b390150f38d",class:a},e.h("div",{key:"5166feef3674631298f699449b956655f38f0db9",class:"aspect-1x1 w-full"},e.h("eds-img",Object.assign({key:"86555a43491da5b2aa3b287e539e603a2c2adaf3",sizes:this.vertical?this.parsedImage.sizes||"":"192px"},this.parsedImage)))))}get el(){return e.getElement(this)}};exports.eds_card_project=l;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-D4alMZtT.js"),r=".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}",c=r,s=class{constructor(e){a.registerInstance(this,e),this.accent=!1,this.tags=[]}render(){return a.h("div",{key:"272d53abb9be9086881cb2f8e99f7fb7aae1bb59",class:"flex flex-wrap gap-y-4"},this.tags.map((e,t)=>a.h("eds-tag",{key:t,intent:this.accent?"accent":"default",label:e})))}};s.style=c;exports.eds_card_tags=s;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { r as t, h as s } from "./index-E1PpO1J3.mjs";
|
|
2
|
-
const r = ".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}", c = r, l = class {
|
|
3
|
-
constructor(a) {
|
|
4
|
-
t(this, a), this.accent = !1, this.tags = [];
|
|
5
|
-
}
|
|
6
|
-
render() {
|
|
7
|
-
return s("div", { key: "272d53abb9be9086881cb2f8e99f7fb7aae1bb59", class: "flex flex-wrap gap-y-4" }, this.tags.map((a, e) => s("eds-tag", { key: e, intent: this.accent ? "accent" : "default", label: a })));
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
l.style = c;
|
|
11
|
-
export {
|
|
12
|
-
l as eds_card_tags
|
|
13
|
-
};
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D4alMZtT.js"),t=()=>e.h("div",{class:"static-content container"},e.h("h2",null,"Load the module"),e.h("p",null,"Integrating EDSs components to a project without a JavaScript framework is straight forward. If you’re working on a simple HTML page, you can start using the components immediately by adding the tags below to the"," ",e.h("code",null,"head"),"."),e.h("eds-code-block",{code:`<script type='module'>
|
|
2
|
-
import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js';
|
|
3
|
-
// Define custom elements
|
|
4
|
-
defineCustomElements(window);
|
|
5
|
-
<\/script>`,language:"javascript","copy-label":"Copy Code"}),e.h("h2",null,"Load the styles"),e.h("p",null,"To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the"," ",e.h("code",null,"head")),e.h("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>',language:"css","copy-label":"Copy Code"}),e.h("div",{class:"my-4"},e.h("eds-alert",{message:"Note that, loading the predefined CSS framework above, automatically loads the fonts so you can skip loading them separately.",intent:"warning"})),e.h("h2",null,"Load the fonts"),e.h("p",null,"To load the webfonts, add the tag below to the ",e.h("code",null,"head")),e.h("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>',language:"css","copy-label":"Copy Code"}),e.h("h2",null,"Component Usage"),e.h("p",null,"Once included, components can be used in your markup like any other regular HTML elements:"),e.h("eds-code-block",{code:`<eds-button
|
|
6
|
-
label="my bytton"
|
|
7
|
-
intent="primary">
|
|
8
|
-
</eds-button>`,language:"html","copy-label":"Copy Code"})),a=()=>e.h("div",null,e.h("p",null,"Before proceeding, ensure that Node.js is installed on your machine—you can download the latest version from the official website. If your project doesn’t already use npm and you plan to integrate EBRAINS Components, you'll need to create a package.json file by running npm init and following the on-screen instructions."),e.h("div",{class:"my-8"},e.h("eds-code-block",{code:"npm install @ebrains/components",language:"html","copy-label":"Copy Code"})),e.h("div",{class:"my-8"},e.h("eds-code-block",{code:"npm install @ebrains/assets",language:"html","copy-label":"Copy Code"})),e.h("div",{class:"my-8"},e.h("eds-code-block",{code:"npm install @ebrains/react",language:"html","copy-label":"Copy Code"})),e.h("div",{class:"my-8"},e.h("eds-code-block",{code:"npm install @ebrains/vue",language:"html","copy-label":"Copy Code"})),e.h("div",{class:"my-8"},e.h("eds-code-block",{code:"npm install @ebrains/angular",language:"html","copy-label":"Copy Code"}))),s=()=>e.h("div",null,e.h("h2",null,"React Wrappers"),e.h("p",null,"Learn how to use our components in a React Application.Simple install the package below and check out the examples"),e.h("div",{class:"my-8"},e.h("eds-code-block",{code:"npm install @ebrains/react",language:"javascript","copy-label":"Copy Code"})),e.h("eds-section-core",{"section-title":"Example React App","heading-level":"h3"},e.h("eds-code-block",{code:`
|
|
9
|
-
import {
|
|
10
|
-
EdsHeader,
|
|
11
|
-
EdsFullscreenMenu,
|
|
12
|
-
EdsUser
|
|
13
|
-
} from "@ebrains/react";
|
|
14
|
-
|
|
15
|
-
interface User {
|
|
16
|
-
firstname: string;
|
|
17
|
-
lastname: string;
|
|
18
|
-
// Add any other properties your user object might have
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
interface AuthStatus {
|
|
22
|
-
authenticated: boolean;
|
|
23
|
-
user: User | null;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
import { useEffect, useState } from "react";
|
|
27
|
-
|
|
28
|
-
export function App() {
|
|
29
|
-
const [authStatus, setAuthStatus] = useState<AuthStatus>({
|
|
30
|
-
authenticated: false,
|
|
31
|
-
user: null,
|
|
32
|
-
});
|
|
33
|
-
const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
|
|
34
|
-
|
|
35
|
-
// Use useEffect to render Stencil components dynamically after the component mounts
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
const handleAuthStatusChange = (event: CustomEvent) => {
|
|
38
|
-
console.log(event.detail);
|
|
39
|
-
setAuthStatus(event.detail); // Set the entire object
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
document.addEventListener(
|
|
43
|
-
"authStatusChanged",
|
|
44
|
-
handleAuthStatusChange as EventListener,
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
return () => {
|
|
48
|
-
document.removeEventListener(
|
|
49
|
-
"authStatusChanged",
|
|
50
|
-
handleAuthStatusChange as EventListener,
|
|
51
|
-
);
|
|
52
|
-
};
|
|
53
|
-
}, []);
|
|
54
|
-
|
|
55
|
-
return (
|
|
56
|
-
<div>
|
|
57
|
-
<EdsHeader
|
|
58
|
-
homeUrl="/"
|
|
59
|
-
menuEnabled={true}
|
|
60
|
-
inverseHeader={false}
|
|
61
|
-
links={[
|
|
62
|
-
{ label: "About", url: "#" },
|
|
63
|
-
{ label: "Focus Areas", url: "#" },
|
|
64
|
-
{ label: "News & Events", url: "#" },
|
|
65
|
-
{ label: "Contact", url: "#" }
|
|
66
|
-
]}
|
|
67
|
-
>
|
|
68
|
-
<div className="px-16">
|
|
69
|
-
<EdsUser
|
|
70
|
-
keycloak-url="http://localhost:8080"
|
|
71
|
-
keycloak-realm="nigeor-realm"
|
|
72
|
-
keycloak-client-id="stencil-app"
|
|
73
|
-
></EdsUser>
|
|
74
|
-
</div>
|
|
75
|
-
</EdsHeader>
|
|
76
|
-
|
|
77
|
-
<EdsFullscreenMenu
|
|
78
|
-
home-url="/"
|
|
79
|
-
links={[
|
|
80
|
-
{ label: "About", url: "#" },
|
|
81
|
-
{ label: "Focus Areas", url: "#" },
|
|
82
|
-
{ label: "News & Events", url: "#" },
|
|
83
|
-
{ label: "Contact", url: "#" }
|
|
84
|
-
]}
|
|
85
|
-
></EdsFullscreenMenu>
|
|
86
|
-
|
|
87
|
-
<div>
|
|
88
|
-
User is{" "}
|
|
89
|
-
{authStatus.authenticated ? "authenticated" : "not authenticated"}
|
|
90
|
-
</div>
|
|
91
|
-
{authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}
|
|
92
|
-
|
|
93
|
-
<div id="main"></div>
|
|
94
|
-
</div>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export default App;
|
|
99
|
-
|
|
100
|
-
`,language:"javascript","copy-label":"Copy Code"}))),o=()=>e.h("div",null,e.h("h2",null,"Vue Wrappers"),e.h("p",null,"Learn how to use our components in a Vue Application."),e.h("p",null,"Simply install the latest version of our NPM package."),e.h("eds-code-block",{code:"npm install @ebrains/vue",language:"javascript","copy-label":"Copy Code"}),e.h("p",null,'Our NPM package already includes the custom elements definitions. However, you can use the components as they are by simply importing and executing the initialization command in your "main.ts" file.'),e.h("eds-code-block",{code:`import { defineCustomElements } from '@ebrains/components/loader';
|
|
101
|
-
defineCustomElements();`,language:"javascript","copy-label":"Copy Code"}),e.h("h2",null,"Passing Properties to Custom Elements Using the ",e.h("b",null,".prop")," Modifier in Vue Wrappers"),e.h("p",null,"When using Vue wrappers for Stencil components (or any custom elements), you might encounter issues with property names being altered due to HTML’s attribute handling. By default, Vue binds values as HTML attributes, and HTML attributes are case-insensitive. This means that camelCase property names can be transformed into lowercase strings, which can prevent your component from receiving the correct data."),e.h("h3",null,"How to Use the ",e.h("b",null,".prop")," Modifier"),e.h("p",null,"When using Vue wrappers, you can pass properties with the .prop modifier by adding it to your binding expression. Here’s an example of how to do it:"),e.h("div",{class:"mt-8"},e.h("eds-alert",{message:"This may lead to issues because Vue binds these as attributes .",intent:"error"})),e.h("eds-code-block",{code:`<EdsAlert
|
|
102
|
-
message="This is a default informational alert."
|
|
103
|
-
intent="default"
|
|
104
|
-
:pressableLabel="Press Me"
|
|
105
|
-
:pressableUrl="https://ebrains.eu"
|
|
106
|
-
></EdsAlert>`,language:"javascript","copy-label":"Copy Code"}),e.h("div",{class:"mt-8"},e.h("eds-alert",{message:"Use the .prop modifier to ensure properties are passed correctly.",intent:"success"})),e.h("eds-code-block",{code:`<EdsAlert
|
|
107
|
-
message="This is a default informational alert."
|
|
108
|
-
intent="default"
|
|
109
|
-
:pressableLabel.prop="Press Me"
|
|
110
|
-
:pressableUrl.prop="https://ebrains.eu"
|
|
111
|
-
></EdsAlert>`,language:"javascript","copy-label":"Copy Code"}),e.h("p",null,"Using the ",e.h("b",null,".prop")," modifier in Vue ensures that the data you pass to your custom elements is received as intended. It prevents Vue (and the browser) from transforming camelCase property names into lowercase attributes, thereby maintaining the correct data mapping in your Stencil components."),e.h("eds-section-core",{"section-title":"Example Vue App","heading-level":"h3"},e.h("eds-code-block",{code:`
|
|
112
|
-
<template>
|
|
113
|
-
<EdsHeader
|
|
114
|
-
:inverseHeader.prop="true"
|
|
115
|
-
:menuEnabled.prop="true">
|
|
116
|
-
</EdsHeader>
|
|
117
|
-
</template>
|
|
118
|
-
|
|
119
|
-
<script>
|
|
120
|
-
|
|
121
|
-
import { EdsHeader } from "@ebrains/vue";
|
|
122
|
-
|
|
123
|
-
export default {
|
|
124
|
-
name: "App",
|
|
125
|
-
components: {
|
|
126
|
-
EdsHeader,
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
<\/script>
|
|
130
|
-
`,language:"javascript","copy-label":"Copy Code"}))),l=()=>e.h("div",null,e.h("h2",null,"Angular Wrappers"),e.h("p",null,"Learn how to use our components in a Angular Application."),e.h("eds-code-block",{code:"npm install @ebrains/angular",language:"javascript","copy-label":"Copy Code"}),e.h("p",null,"Define the custom elements"),e.h("eds-code-block",{code:`import { defineCustomElements } from '@ebrains/components/loader';
|
|
131
|
-
defineCustomElements();`,language:"javascript","copy-label":"Copy Code"}),e.h("p",null,"Angular Custom Elements Schema"),e.h("eds-code-block",{code:'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";',language:"javascript","copy-label":"Copy Code"}),e.h("eds-section-core",{"section-title":"Example Angular App","heading-level":"h3"},e.h("eds-code-block",{code:`
|
|
132
|
-
<div class="container">
|
|
133
|
-
<eds-breadcrumb
|
|
134
|
-
intent="tertiary"
|
|
135
|
-
items="[
|
|
136
|
-
{ "label": "Home", "url": "#" },
|
|
137
|
-
{ "label": "Products", "url": "#" },
|
|
138
|
-
]">
|
|
139
|
-
</eds-breadcrumb>
|
|
140
|
-
<eds-footer></eds-footer>
|
|
141
|
-
</div>`,language:"javascript","copy-label":"Copy Code"}))),r=class{constructor(n){e.registerInstance(this,n),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e.h(t,null);case 1:return e.h(a,null);case 2:return e.h(s,null);case 3:return e.h(o,null);case 4:return e.h(l,null);default:return e.h("p",null,"Content not available.")}}render(){return e.h("div",{key:"69eda93b8845c5fdf5edc0f58ede763866b5f8c7",class:"container"},this.renderContent())}};exports.eds_components_section=r;
|