@ebrains/react 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/clone-dab56639.esm.js +3 -0
  2. package/color-primary-palette_6.entry.esm.js +106 -106
  3. package/components-section.entry.esm.js +3 -7
  4. package/correct-use-of-colors.entry.esm.js +33 -33
  5. package/docs-palettes.entry.esm.js +1 -1
  6. package/docs-tokens.entry.esm.js +1 -1
  7. package/download-47746956.esm.js +18 -0
  8. package/edit-3893a517.esm.js +3 -0
  9. package/eds-accordion_34.entry.esm.js +1126 -0
  10. package/eds-app-root.entry.esm.js +4 -4
  11. package/eds-card-desc_2.entry.esm.js +4 -4
  12. package/eds-card-project.entry.esm.js +10 -10
  13. package/eds-card-tags.entry.esm.js +1 -1
  14. package/eds-card-tool.entry.esm.js +4 -4
  15. package/eds-cookies-preference.entry.esm.js +2 -2
  16. package/eds-feedback.entry.esm.js +5 -5
  17. package/eds-footer.entry.esm.js +20 -16
  18. package/eds-frame.entry.esm.js +4 -4
  19. package/eds-fullscreen-menu.entry.esm.js +8 -3
  20. package/eds-gauge.entry.esm.js +4 -4
  21. package/eds-icon-arrow-diagonal.entry.esm.js +1 -1
  22. package/eds-icon-arrow-right.entry.esm.js +1 -1
  23. package/eds-icon-bin.entry.esm.js +1 -1
  24. package/eds-icon-bluesky.entry.esm.js +1 -1
  25. package/eds-icon-bookmark.entry.esm.js +1 -1
  26. package/eds-icon-chevron-down.entry.esm.js +1 -1
  27. package/eds-icon-chevron-left.entry.esm.js +1 -1
  28. package/eds-icon-chevron-right.entry.esm.js +1 -1
  29. package/eds-icon-chevron-up.entry.esm.js +1 -1
  30. package/eds-icon-clone.entry.esm.js +21 -0
  31. package/eds-icon-close.entry.esm.js +1 -1
  32. package/eds-icon-copy.entry.esm.js +1 -1
  33. package/eds-icon-download.entry.esm.js +21 -0
  34. package/eds-icon-draft.entry.esm.js +1 -1
  35. package/eds-icon-edit.entry.esm.js +2 -2
  36. package/eds-icon-eu.entry.esm.js +1 -1
  37. package/eds-icon-external.entry.esm.js +1 -1
  38. package/eds-icon-facebook.entry.esm.js +1 -1
  39. package/eds-icon-gitlab.entry.esm.js +1 -1
  40. package/eds-icon-linkedin.entry.esm.js +1 -1
  41. package/eds-icon-loader.entry.esm.js +1 -1
  42. package/eds-icon-mastodon.entry.esm.js +1 -1
  43. package/eds-icon-menu.entry.esm.js +1 -1
  44. package/eds-icon-minus.entry.esm.js +1 -1
  45. package/eds-icon-more.entry.esm.js +1 -1
  46. package/eds-icon-paper.entry.esm.js +1 -1
  47. package/eds-icon-plus.entry.esm.js +1 -1
  48. package/eds-icon-portal.entry.esm.js +1 -1
  49. package/eds-icon-private.entry.esm.js +1 -1
  50. package/eds-icon-public.entry.esm.js +1 -1
  51. package/eds-icon-search.entry.esm.js +1 -1
  52. package/eds-icon-star.entry.esm.js +1 -1
  53. package/eds-icon-start.entry.esm.js +1 -1
  54. package/eds-icon-success.entry.esm.js +1 -1
  55. package/eds-icon-thumbs-down.entry.esm.js +1 -1
  56. package/eds-icon-thumbs-up.entry.esm.js +1 -1
  57. package/eds-icon-tutorial.entry.esm.js +1 -1
  58. package/eds-icon-twitter.entry.esm.js +1 -1
  59. package/eds-icon-unknown.entry.esm.js +1 -1
  60. package/eds-icon-updown.entry.esm.js +1 -1
  61. package/eds-icon-user.entry.esm.js +1 -1
  62. package/eds-icon-view.entry.esm.js +21 -0
  63. package/eds-icon-youtube.entry.esm.js +1 -1
  64. package/eds-modal.entry.esm.js +8 -8
  65. package/eds-progress-bar.entry.esm.js +4 -4
  66. package/eds-section-core_2.entry.esm.js +5 -5
  67. package/eds-social-networks.entry.esm.js +7 -8
  68. package/eds-spinner.entry.esm.js +4 -4
  69. package/eds-timeline.entry.esm.js +4 -4
  70. package/eds-toast-manager.entry.esm.js +1 -1
  71. package/eds-trl.entry.esm.js +2 -2
  72. package/incorrect-use-of-colors.entry.esm.js +8 -8
  73. package/index.esm.js +1 -1
  74. package/index.esm2.js +17 -27
  75. package/logo-space.entry.esm.js +9 -9
  76. package/logo-variations-horizontal_2.entry.esm.js +28 -28
  77. package/logo-variations-tabs.entry.esm.js +1 -1
  78. package/logo-wrong-usage.entry.esm.js +25 -25
  79. package/package.json +1 -1
  80. package/src/components.d.ts +1 -0
  81. package/svg-repository.entry.esm.js +9 -20
  82. package/token-list_3.entry.esm.js +5 -5
  83. package/token-ratios.entry.esm.js +3 -3
  84. package/token-spacing.entry.esm.js +26 -26
  85. package/token-typography.entry.esm.js +2 -2
  86. package/view-e900f2d4.esm.js +3 -0
  87. package/edit-1dc8d11b.esm.js +0 -3
  88. package/eds-accordion.entry.esm.js +0 -133
  89. package/eds-alert.entry.esm.js +0 -112
  90. package/eds-avatar_26.entry.esm.js +0 -3409
  91. package/eds-breadcrumb.entry.esm.js +0 -179
  92. package/eds-code-block.entry.esm.js +0 -2290
  93. package/eds-matomo-notice.entry.esm.js +0 -159
  94. package/eds-switch.entry.esm.js +0 -70
  95. package/eds-tooltip.entry.esm.js +0 -47
@@ -296,7 +296,7 @@ const TokenList = class {
296
296
  [this.show]: colors[this.show]
297
297
  } : colors;
298
298
  return h("section", {
299
- key: '8fab4b610ad73943d9884c9b091f8ae0b85fec02',
299
+ key: 'c5a0dc7f4e58c77624481262b1a6ac31df5425ee',
300
300
  class: "w-full mt-28"
301
301
  }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) =>
302
302
  // Only render sections that exist in `colors`
@@ -317,10 +317,10 @@ const TokenRadii = class {
317
317
  }
318
318
  render() {
319
319
  return h("section", {
320
- key: '990ac7f9b888a50dfefb06d0999c845796e82db4',
320
+ key: 'd0e212f61414068b55b2ce1a3d9c7c2a51743908',
321
321
  class: "w-full mt-28"
322
322
  }, h("ul", {
323
- key: '447642ed7c23039532564cf640994c1ac9a1d1de',
323
+ key: 'f656822bfc1a95bb4435eec2db9573e4362d1c59',
324
324
  class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
325
325
  }, Object.entries(radii).map(([key, value]) => h("li", {
326
326
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
@@ -358,10 +358,10 @@ const TokenShadows = class {
358
358
  }
359
359
  render() {
360
360
  return h("section", {
361
- key: '481c1eed906cfd2ec0a071fde52bd284dc689583',
361
+ key: '2f8e9eef279ee176ba1c72660181a4a36a184985',
362
362
  class: "w-full mt-28"
363
363
  }, h("ul", {
364
- key: 'bf3c4068320755df5df76fd40a5f533c2814e398',
364
+ key: 'a5ddc9f6faab20c73b6dbb08364925d3b221e848',
365
365
  class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
366
366
  }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => h("li", {
367
367
  class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16"
@@ -17,15 +17,15 @@ const TokenRatios = class {
17
17
  }
18
18
  render() {
19
19
  return h("section", {
20
- key: 'be577f9c398a29f5bd996a68d102017488f8ac17',
20
+ key: '0215729c6c798288f74b3e9a589763c8a71c6fd3',
21
21
  class: "w-full"
22
22
  }, h("eds-section-core", {
23
- key: '291b8f1692e0ba050c0871af65429db95733990c',
23
+ key: '9ac3c1b933b7bb7cc6c8dd9aeface59ba3646750',
24
24
  tag: "div",
25
25
  "section-title": "Aspect Ratios",
26
26
  "heading-level": "h3"
27
27
  }, h("ul", {
28
- key: '2ac59025091444b8e14b5106d8909c54fa8227aa',
28
+ key: 'd4ae2c487aa2402740dfd1465823fe3d04c19e18',
29
29
  class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
30
30
  }, Object.entries(ratios).map(([key, value]) => h("li", {
31
31
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
@@ -9,82 +9,82 @@ const TokenSpacing = class {
9
9
  }
10
10
  render() {
11
11
  return h("div", {
12
- key: 'ccc58496f0918a9da7f1d4412391613f3f568cc9',
12
+ key: 'e01032fc0640d466fbf25d52c786c2ad09282deb',
13
13
  class: "w-full"
14
14
  }, h("ul", {
15
- key: 'e5a8d47319a9c994e7755d3576d71b634ab20063',
15
+ key: '067499a0d422c6759393a729018a0e428ac5bb73',
16
16
  class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
17
17
  }, h("li", {
18
- key: '3d0a29e2c91d351ab116ce416e00c42590d035b3',
18
+ key: '18811cd88f3627f824c09ed57522b624c905704a',
19
19
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
20
20
  }, h("div", {
21
- key: 'd2d85017b45172a0b0b092de400d9151ef539ef8',
21
+ key: '6f810ada1266d71181c85ae01f6d0f03d74c5d62',
22
22
  class: "container p-8 item-center border-2 border-soft"
23
23
  }, h("div", {
24
- key: '88de94aaba4d635cc525a67542b5d472cd896c5d',
24
+ key: 'be8c8193dd759eb651230904f482bdd29ece17d9',
25
25
  class: "spacing-sample m-16 bg-strong"
26
26
  }, h("span", {
27
- key: 'b59a5fa9df2d4083fa06c9a258ec5ba5ccf60c0a',
27
+ key: '3275ae8d2dcc26a097fcec9e47e865d122e8a7a0',
28
28
  class: "f-body-01 text-inverse"
29
29
  }, "Margin: 1rem / m-16")))), h("li", {
30
- key: '70767120c9cd4be53f96f375fd329703a963b63a',
30
+ key: '1501280856acd0f86ed6d18deb2994e2b938d550',
31
31
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
32
32
  }, h("div", {
33
- key: '855d6bacf1b1423485fbf4a6d57eaae41a7a1444',
33
+ key: '9c6bd09fb408bf28e1ff7259ee82858657055d53',
34
34
  class: "container p-8 item-center border-2 border-soft"
35
35
  }, h("div", {
36
- key: '7857867bba76856db7530bacd73f142a2b503c51',
36
+ key: '66ce0e318e1ef01c95634678d8dad929261c3559',
37
37
  class: "spacing-sample ml-64 bg-strong"
38
38
  }, h("span", {
39
- key: '14b4241fc260b9d6b690dbd141098dc61a5eded9',
39
+ key: '746c47d3d838c4a2afc3e33f97ea92e4152505a4',
40
40
  class: "f-body-01 text-inverse"
41
41
  }, "Margin Left: 4rem / ml-64")))), h("li", {
42
- key: 'fa5b994aab19f80b3fa26393844b0bed46ecfa64',
42
+ key: '1e743a6b9907f8d533b6bb0e47204ca9f2ac1540',
43
43
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
44
44
  }, h("div", {
45
- key: '3c600983badcd59dcf5735e9a4c42c87a306236b',
45
+ key: '9b127a0fc072a67d2a03af42718407f7c570981c',
46
46
  class: "container p-8 item-center border-2 border-soft"
47
47
  }, h("div", {
48
- key: '77abcf6391bc3fe5f798a7837e12e9f3581213d0',
48
+ key: '603d387bfc95e7eaaa688d9bed69d17dcdbeb023',
49
49
  class: "spacing-sample mt-32 bg-strong"
50
50
  }, h("span", {
51
- key: 'd4626346b81f99c4690853d00c097d523616db1f',
51
+ key: '19105f04e3571991899dcd237a2e88285200fa2a',
52
52
  class: "f-body-01 text-inverse"
53
53
  }, "Margin Top: 2rem / mt-32")))), h("li", {
54
- key: '2ce80fc1b53afa0e157f4b185ae70f16779b9f3f',
54
+ key: 'a4bba328ebdb74767c06aed1ddf90251ff53c774',
55
55
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
56
56
  }, h("div", {
57
- key: '95f69eac2055d60ae42808fa09f4f6a68bdff4f6',
57
+ key: '8c0ddf065902880ea676a0178d8d384696d11d44',
58
58
  class: "container p-8 item-center border-2 border-soft"
59
59
  }, h("div", {
60
- key: 'e553f7c58b018cba77b7141be6142d3c7b34194a',
60
+ key: 'c73eb82ac1b447d2441be39f1e07e4864bba2a49',
61
61
  class: "spacing-sample p-32 bg-strong"
62
62
  }, h("span", {
63
- key: '13450e5d8c07cbeb640e0b3aea1e526365f0f743',
63
+ key: '6c76e373c0827ed4449abfd0fa1b69db2e02ef10',
64
64
  class: "f-body-01 text-inverse"
65
65
  }, "Padding: 2rem / p-32")))), h("li", {
66
- key: 'dce557ae08a4800fd5d98c91b5675d4839da622f',
66
+ key: '23699817570e914c03849e8bc5ab3c72b732470c',
67
67
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
68
68
  }, h("div", {
69
- key: '9a134b12e3829b5529921ee24ba095231ea9a70f',
69
+ key: '253d94e4ddabd622302bbc38a5e866b9a9dc8826',
70
70
  class: "container p-8 item-center border-2 border-soft"
71
71
  }, h("div", {
72
- key: '2f30c7339974f96fa881b43f8b7ec9a018c2f372',
72
+ key: 'c366056f299a7fd53eb589cedbf8f40aa996d032',
73
73
  class: "spacing-sample pt-32 bg-strong"
74
74
  }, h("span", {
75
- key: '663a2b9a903effbd5eb1988d6803934c41a26b93',
75
+ key: '22b94a1f3f4605af8f11dcd10b03f112ad426798',
76
76
  class: "f-body-01 text-inverse"
77
77
  }, "Padding Top: 2rem / pt-32")))), h("li", {
78
- key: '363143700c339ab934b466ef9f84f257be3adbbc',
78
+ key: '18418c7ea84aaaefe187e484774e96d5233946ab',
79
79
  class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
80
80
  }, h("div", {
81
- key: 'e72006b92c553dfb7c3df21cbbea3a7234cbf725',
81
+ key: '953b9ebfb47560f768bdf606fdc455eae18fa351',
82
82
  class: "container p-8 item-center border-2 border-soft"
83
83
  }, h("div", {
84
- key: '251e68c910ee1d0485d630fde091e6790183f4f9',
84
+ key: '1ee32fc2918a078e421e0641c84e76c2bf48e839',
85
85
  class: "spacing-sample pl-32 bg-strong"
86
86
  }, h("span", {
87
- key: 'cf2f10404629bf2e7ab10d51b2917361cf93279b',
87
+ key: '15f50b76c805eb9fc1610d8027cd710f6c8c89b4',
88
88
  class: "f-body-01 text-inverse"
89
89
  }, "Padding Left: 2rem / pl-32"))))));
90
90
  }
@@ -202,10 +202,10 @@ const TokenTypography = class {
202
202
  }
203
203
  render() {
204
204
  return h("section", {
205
- key: '62bc664d442830ac40bc6aae9a5dbd38f5d18f05',
205
+ key: 'a50023eb5ce02aebb63994e4319450f3a330617d',
206
206
  class: "w-full"
207
207
  }, h("ul", {
208
- key: 'e8a97077420f77631e75ec99e14b22fd77a36c11',
208
+ key: '757a1845f16da440eaa8ba332b39f62ccb69ed89',
209
209
  class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
210
210
  }, Object.entries(typography.typesets).filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
211
211
  .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => h("li", {
@@ -0,0 +1,3 @@
1
+ const view = `<svg width="20" height="20" viewBox="-102.4 -102.4 1228.80 1228.80" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.01024" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#000000" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></g></svg>`;
2
+
3
+ export { view as v };
@@ -1,3 +0,0 @@
1
- const edit = `<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="edit"> <g> <path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> <polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polygon> </g> </g> </g> </g></svg>`;
2
-
3
- export { edit as e };
@@ -1,133 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
2
- import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- const edsAccordionCss = "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}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.break-words{overflow-wrap:break-word}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.pr-32{padding-right:2rem}.pr-36{padding-right:2.25rem}.pr-40{padding-right:2.5rem}.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}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-4{padding-top:0.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.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)}.text-left{text-align:left}.text-center{text-align:center}";
8
- const EdsAccordionStyle0 = edsAccordionCss;
9
- const EdsAccordion = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.accordion = createEvent(this, "accordion", 7);
13
- /**
14
- * Handles the click event on the accordion header to toggle expansion.
15
- * Toggles the `isExpanded` state and emits the `accordion` event.
16
- */
17
- this.handleClick = () => {
18
- var _a;
19
- this.isExpanded = !this.isExpanded;
20
- this.accordion.emit(this.isExpanded);
21
- this.setPanelHeight();
22
- sendAnalytics({
23
- category: 'ui-component',
24
- parentContext: null,
25
- tag: this.el.tagName.toLowerCase(),
26
- name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
27
- action: this.isExpanded ? 'expanded' : 'collapsed'
28
- });
29
- };
30
- /**
31
- * Calculates and sets the panel height based on the content height
32
- * and adjusts based on the `shortContent` and `isExpanded` states.
33
- */
34
- this.setPanelHeight = () => {
35
- if (this.childContentRef) {
36
- this.shortContent = this.wrapperRef.scrollWidth > 830 && !this.description ? this.childContentRef.scrollHeight <= 80 : this.childContentRef.scrollHeight <= 20;
37
- this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
38
- }
39
- if (this.headerRef) {
40
- this.headerHeight = this.headerRef.scrollHeight - 30;
41
- }
42
- };
43
- this.heading = undefined;
44
- this.description = undefined;
45
- this.switchBg = true;
46
- this.expanded = false;
47
- this.clampText = true;
48
- this.buttonIntent = 'tertiary';
49
- this.isExpanded = this.expanded;
50
- this.panelHeight = 0;
51
- this.shortContent = false;
52
- this.headerHeight = 0;
53
- }
54
- /**
55
- * Lifecycle method that sets up the initial panel height and adds a resize event listener
56
- * to recalculate height on window resize.
57
- */
58
- componentDidLoad() {
59
- this.setPanelHeight();
60
- window.addEventListener('resize', this.setPanelHeight);
61
- }
62
- /**
63
- * Lifecycle method that cleans up the resize event listener when the component is removed.
64
- */
65
- disconnectedCallback() {
66
- window.removeEventListener('resize', this.setPanelHeight);
67
- }
68
- /**
69
- * Renders the accordion structure, including header, content, description, and any slotted content.
70
- * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
71
- */
72
- render() {
73
- return h("div", {
74
- key: '1abfd8bfea763bc10e6f17148dbc252d0c3ffdea',
75
- ref: el => this.wrapperRef = el,
76
- class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16
77
- ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'}
78
- ${this.switchBg ? 'hover:bg-inverse' : ''}
79
- ${this.description ? 'min-h-56' : ''}`
80
- }, h("h3", {
81
- key: '137a3311195d51f46c6677558219828e5f4d06b5',
82
- ref: el => this.headerRef = el,
83
- class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"
84
- }, this.heading), h("div", {
85
- key: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270',
86
- class: "ml-auto"
87
- }, h("eds-button", {
88
- key: '61e5e7727de895a9dc9d4a9d909cabea3b82e709',
89
- id: "toggleAccordion",
90
- intent: this.buttonIntent,
91
- "aria-expanded": this.isExpanded || this.shortContent,
92
- "aria-label": "Toggle accordion",
93
- "aria-controls": "accordionSection",
94
- class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`,
95
- onClick: this.handleClick,
96
- icon: "chevron-down"
97
- })), h("div", {
98
- key: '659ad4db8fd78dea0604afce003124a7c19987dc',
99
- class: `w-full`,
100
- style: Number.isFinite(this.headerHeight) ? {
101
- marginTop: `${this.headerHeight}px`
102
- } : {}
103
- }, this.description ? h("span", {
104
- class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
105
- }, this.description) : null, h("section", {
106
- key: '0b463bb9d634b9dd1aa6c512e072bf8004e54db5',
107
- id: "accordionSection",
108
- role: "region",
109
- "aria-labelledby": "accordionHeader",
110
- "aria-hidden": !this.isExpanded,
111
- class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`,
112
- style: {
113
- height: this.isExpanded ? 'auto' : '0'
114
- }
115
- }, h("div", {
116
- key: '7f2eb016e377e3f2c08fd042e903291ad67bd20b',
117
- ref: el => this.childContentRef = el,
118
- class: `accordion-content effect-color pt-4`,
119
- "aria-hidden": !this.isExpanded
120
- }, h("span", {
121
- key: '25be3a617a42699e2adeb1c9fc711e5a55ce69ea',
122
- class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
123
- }, h("slot", {
124
- key: 'de7e5481940295571543c43f4b65f97dc7cec62c'
125
- }))))));
126
- }
127
- get el() {
128
- return getElement(this);
129
- }
130
- };
131
- EdsAccordion.style = EdsAccordionStyle0;
132
-
133
- export { EdsAccordion as eds_accordion };
@@ -1,112 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { c as cva } from './index-39c58238.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- const edsAlertCss = "*,\n::before,\n::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n\np {\n margin: 0;\n}\n\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.flex {\n display: flex;\n}\n\n.w-full {\n width: 100%;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.space-y-12> :not([hidden])~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n\n.rounded-lg {\n border-radius: 16px;\n}\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-error {\n background-color: var(--red-200);\n}\n\n.bg-success {\n background-color: var(--green-200);\n}\n\n.bg-warning {\n background-color: var(--yellow-200);\n}\n\n.p-16 {\n padding: 1rem;\n}\n\n.p-20 {\n padding: 1.25rem;\n}\n\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pr-12 {\n padding-right: 0.75rem;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n[class*=underline-] {\n text-decoration-line: underline;\n}\n\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n\n.after\\:border-softest::after {\n border-color: rgba(0, 0, 0, .05);\n}";
8
- const EdsAlertStyle0 = edsAlertCss;
9
- const alertStyles = cva(['w-full bg-dark'], {
10
- variants: {
11
- intent: {
12
- default: '',
13
- warning: 'bg-warning',
14
- error: 'bg-error',
15
- success: 'bg-success'
16
- },
17
- brd: {
18
- rounded: 'rounded-lg border-inside after:border-softest after:rounded-lg',
19
- normal: ''
20
- },
21
- direction: {
22
- vertical: 'space-y-12',
23
- horizontal: 'flex flex-row items-center justify-between gap-x-12'
24
- },
25
- withBtn: {
26
- false: '',
27
- true: ''
28
- }
29
- },
30
- compoundVariants: [{
31
- direction: 'horizontal',
32
- withBtn: true,
33
- class: 'px-20 pr-12 py-12'
34
- }, {
35
- direction: 'horizontal',
36
- withBtn: false,
37
- class: 'p-20'
38
- }, {
39
- direction: 'vertical',
40
- withBtn: true,
41
- class: 'p-16'
42
- }, {
43
- direction: 'vertical',
44
- withBtn: false,
45
- class: 'px-12 py-20'
46
- }],
47
- defaultVariants: {
48
- intent: 'default',
49
- brd: 'rounded',
50
- direction: 'horizontal'
51
- }
52
- });
53
- const EdsAlert = class {
54
- constructor(hostRef) {
55
- registerInstance(this, hostRef);
56
- this.message = undefined;
57
- this.pressableLabel = undefined;
58
- this.pressableUrl = undefined;
59
- this.direction = 'horizontal';
60
- this.intent = 'default';
61
- this.brd = 'rounded';
62
- this.withBtn = false;
63
- }
64
- componentWillLoad() {
65
- this.withBtn = Boolean(this.pressableLabel);
66
- }
67
- componentDidLoad() {
68
- var _a;
69
- // Query for the 'eds-link' element inside the shadow root.
70
- const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
71
- if (lnk) {
72
- this.emitContext(lnk);
73
- }
74
- }
75
- emitContext(linkElement) {
76
- const event = new CustomEvent('parentContext', {
77
- detail: {
78
- componentName: this.el.tagName.toLowerCase(),
79
- identifier: null
80
- }
81
- });
82
- linkElement.dispatchEvent(event);
83
- }
84
- render() {
85
- return h("div", {
86
- key: '5252aca583e87d8c3249c501e55368e340ef0d64',
87
- class: alertStyles({
88
- intent: this.intent,
89
- brd: this.brd,
90
- direction: this.direction,
91
- withBtn: this.withBtn
92
- }),
93
- role: "alert"
94
- }, h("p", {
95
- key: 'bb23c94e802ec5e287a2b8619277e83de173b498',
96
- class: "f-ui-01 py-8",
97
- innerHTML: this.message
98
- }), this.withBtn && (this.pressableUrl ? h("eds-link", {
99
- class: "eds-alert-link",
100
- label: this.pressableLabel,
101
- url: this.pressableUrl,
102
- intent: "secondary",
103
- external: true
104
- }) : null));
105
- }
106
- get el() {
107
- return getElement(this);
108
- }
109
- };
110
- EdsAlert.style = EdsAlertStyle0;
111
-
112
- export { EdsAlert as eds_alert };