@ebrains/react 0.9.0-beta → 0.9.2-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.
Files changed (182) hide show
  1. package/.babelrc +12 -0
  2. package/LICENSE +21 -0
  3. package/README.md +5 -1
  4. package/package.json +2 -6
  5. package/project.json +10 -0
  6. package/rollup.config.js +43 -0
  7. package/src/components.ts +49 -0
  8. package/src/generated/components.ts +47 -0
  9. package/src/generated/react-component-lib/attachProps.ts +125 -0
  10. package/src/generated/react-component-lib/case.ts +7 -0
  11. package/src/generated/react-component-lib/createComponent.tsx +106 -0
  12. package/src/generated/react-component-lib/createOverlayComponent.tsx +142 -0
  13. package/src/generated/react-component-lib/dev.ts +14 -0
  14. package/src/generated/react-component-lib/index.tsx +50 -0
  15. package/src/generated/react-component-lib/interfaces.ts +34 -0
  16. package/src/generated/react-component-lib/utils/attachProps.ts +125 -0
  17. package/src/generated/react-component-lib/utils/case.ts +7 -0
  18. package/src/generated/react-component-lib/utils/dev.ts +14 -0
  19. package/src/generated/react-component-lib/utils/index.tsx +50 -0
  20. package/src/react-component-lib/attachProps.ts +125 -0
  21. package/src/react-component-lib/case.ts +7 -0
  22. package/src/react-component-lib/createComponent.tsx +106 -0
  23. package/src/react-component-lib/createOverlayComponent.tsx +142 -0
  24. package/src/react-component-lib/dev.ts +14 -0
  25. package/src/react-component-lib/index.tsx +50 -0
  26. package/src/react-component-lib/interfaces.ts +34 -0
  27. package/src/react-component-lib/utils/attachProps.ts +125 -0
  28. package/src/react-component-lib/utils/case.ts +7 -0
  29. package/src/react-component-lib/utils/index.tsx +50 -0
  30. package/tsconfig.json +17 -0
  31. package/tsconfig.lib.json +23 -0
  32. package/analytics-44b1416b.esm.js +0 -55
  33. package/arrow-diagonal-black-8f0494c3.esm.js +0 -3
  34. package/arrow-right-9322ba8a.esm.js +0 -5
  35. package/bluesky-cc5edd2d.esm.js +0 -14
  36. package/bookmark-c200037c.esm.js +0 -16
  37. package/chevron-down-6144c823.esm.js +0 -12
  38. package/chevron-left-ca6c66e1.esm.js +0 -11
  39. package/chevron-right-b88ed2d4.esm.js +0 -5
  40. package/chevron-up-c66bd477.esm.js +0 -12
  41. package/close-87fc0d63.esm.js +0 -5
  42. package/color-2554aad6.esm.js +0 -122
  43. package/color-primary-palette_6.entry.esm.js +0 -778
  44. package/components-section.entry.esm.js +0 -165
  45. package/copy-03b72cb6.esm.js +0 -5
  46. package/correct-use-of-colors.entry.esm.js +0 -243
  47. package/docs-palettes.entry.esm.js +0 -29
  48. package/docs-tokens.entry.esm.js +0 -45
  49. package/eds-accordion.entry.esm.js +0 -132
  50. package/eds-alert.entry.esm.js +0 -112
  51. package/eds-app-root.entry.esm.js +0 -53
  52. package/eds-avatar_24.entry.esm.js +0 -275
  53. package/eds-breadcrumb.entry.esm.js +0 -174
  54. package/eds-card-desc_3.entry.esm.js +0 -125
  55. package/eds-card-generic.entry.esm.js +0 -114
  56. package/eds-card-project.entry.esm.js +0 -93
  57. package/eds-card-section.entry.esm.js +0 -56
  58. package/eds-card-tags.entry.esm.js +0 -27
  59. package/eds-card-tool.entry.esm.js +0 -105
  60. package/eds-card-wrapper.entry.esm.js +0 -39
  61. package/eds-code-block.entry.esm.js +0 -2290
  62. package/eds-cookies-preference.entry.esm.js +0 -47
  63. package/eds-feedback.entry.esm.js +0 -82
  64. package/eds-frame.entry.esm.js +0 -112
  65. package/eds-icon-arrow-diagonal.entry.esm.js +0 -21
  66. package/eds-icon-arrow-right.entry.esm.js +0 -21
  67. package/eds-icon-bluesky.entry.esm.js +0 -21
  68. package/eds-icon-bookmark.entry.esm.js +0 -21
  69. package/eds-icon-chevron-down.entry.esm.js +0 -21
  70. package/eds-icon-chevron-left.entry.esm.js +0 -21
  71. package/eds-icon-chevron-right.entry.esm.js +0 -21
  72. package/eds-icon-chevron-up.entry.esm.js +0 -21
  73. package/eds-icon-close.entry.esm.js +0 -21
  74. package/eds-icon-copy.entry.esm.js +0 -21
  75. package/eds-icon-eu.entry.esm.js +0 -21
  76. package/eds-icon-external.entry.esm.js +0 -21
  77. package/eds-icon-facebook.entry.esm.js +0 -21
  78. package/eds-icon-gitlab.entry.esm.js +0 -21
  79. package/eds-icon-linkedin.entry.esm.js +0 -21
  80. package/eds-icon-loader.entry.esm.js +0 -21
  81. package/eds-icon-mastodon.entry.esm.js +0 -21
  82. package/eds-icon-menu.entry.esm.js +0 -21
  83. package/eds-icon-minus.entry.esm.js +0 -21
  84. package/eds-icon-more.entry.esm.js +0 -21
  85. package/eds-icon-paper.entry.esm.js +0 -21
  86. package/eds-icon-plus.entry.esm.js +0 -21
  87. package/eds-icon-portal.entry.esm.js +0 -21
  88. package/eds-icon-private.entry.esm.js +0 -21
  89. package/eds-icon-public.entry.esm.js +0 -21
  90. package/eds-icon-search.entry.esm.js +0 -21
  91. package/eds-icon-star.entry.esm.js +0 -21
  92. package/eds-icon-success.entry.esm.js +0 -21
  93. package/eds-icon-thumbs-down.entry.esm.js +0 -21
  94. package/eds-icon-thumbs-up.entry.esm.js +0 -21
  95. package/eds-icon-tutorial.entry.esm.js +0 -21
  96. package/eds-icon-twitter.entry.esm.js +0 -21
  97. package/eds-icon-unknown.entry.esm.js +0 -21
  98. package/eds-icon-updown.entry.esm.js +0 -21
  99. package/eds-icon-user.entry.esm.js +0 -21
  100. package/eds-icon-youtube.entry.esm.js +0 -21
  101. package/eds-login_2.entry.esm.js +0 -1828
  102. package/eds-matomo-notice.entry.esm.js +0 -162
  103. package/eds-modal.entry.esm.js +0 -142
  104. package/eds-pagination_2.entry.esm.js +0 -493
  105. package/eds-progress-bar.entry.esm.js +0 -41
  106. package/eds-rating.entry.esm.js +0 -79
  107. package/eds-section-core_2.entry.esm.js +0 -69
  108. package/eds-spinner.entry.esm.js +0 -67
  109. package/eds-switch.entry.esm.js +0 -58
  110. package/eds-tabs.entry.esm.js +0 -143
  111. package/eds-timeline.entry.esm.js +0 -117
  112. package/eds-toast-manager.entry.esm.js +0 -62
  113. package/eds-toast.entry.esm.js +0 -92
  114. package/eds-tooltip.entry.esm.js +0 -125
  115. package/eds-trl.entry.esm.js +0 -68
  116. package/eu-9ddde93a.esm.js +0 -30
  117. package/facebook-9cb5c17f.esm.js +0 -14
  118. package/incorrect-use-of-colors.entry.esm.js +0 -71
  119. package/index-39c58238.esm.js +0 -58
  120. package/index.esm.d.ts +0 -1
  121. package/index.esm.js +0 -4
  122. package/index.esm2.js +0 -4840
  123. package/linkedin-e8650abb.esm.js +0 -28
  124. package/loader-c9628637.esm.js +0 -30
  125. package/logo-color-7f1fd803.esm.js +0 -115
  126. package/logo-color-margins-ff8ce71b.esm.js +0 -118
  127. package/logo-space.entry.esm.js +0 -48
  128. package/logo-variations-horizontal_2.entry.esm.js +0 -123
  129. package/logo-variations-tabs.entry.esm.js +0 -29
  130. package/logo-white-no-bg-f382f86f.esm.js +0 -1021
  131. package/logo-wrong-usage.entry.esm.js +0 -101
  132. package/mastodon-3703ec61.esm.js +0 -14
  133. package/menu-340ea948.esm.js +0 -11
  134. package/minus-b30a7c71.esm.js +0 -11
  135. package/mono-53f70232.esm.js +0 -11
  136. package/more-4449d549.esm.js +0 -13
  137. package/paper-8e74ea31.esm.js +0 -15
  138. package/plus-89c07be2.esm.js +0 -12
  139. package/portal-d6c8ce56.esm.js +0 -18
  140. package/private-1c25ff8e.esm.js +0 -25
  141. package/public-d4d8c585.esm.js +0 -16
  142. package/search-fbcd79c2.esm.js +0 -12
  143. package/sharedUtils-a550989c.esm.js +0 -17
  144. package/src/components.d.ts +0 -41
  145. package/src/generated/components.d.ts +0 -38
  146. package/src/generated/react-component-lib/attachProps.d.ts +0 -16
  147. package/src/generated/react-component-lib/case.d.ts +0 -2
  148. package/src/generated/react-component-lib/createComponent.d.ts +0 -10
  149. package/src/generated/react-component-lib/createOverlayComponent.d.ts +0 -21
  150. package/src/generated/react-component-lib/dev.d.ts +0 -2
  151. package/src/generated/react-component-lib/interfaces.d.ts +0 -29
  152. package/src/generated/react-component-lib/utils/attachProps.d.ts +0 -16
  153. package/src/generated/react-component-lib/utils/case.d.ts +0 -2
  154. package/src/generated/react-component-lib/utils/dev.d.ts +0 -2
  155. package/src/generated/react-component-lib/utils/index.d.ts +0 -10
  156. package/src/react-component-lib/attachProps.d.ts +0 -16
  157. package/src/react-component-lib/case.d.ts +0 -2
  158. package/src/react-component-lib/createComponent.d.ts +0 -10
  159. package/src/react-component-lib/createOverlayComponent.d.ts +0 -21
  160. package/src/react-component-lib/dev.d.ts +0 -2
  161. package/src/react-component-lib/interfaces.d.ts +0 -29
  162. package/src/react-component-lib/utils/attachProps.d.ts +0 -16
  163. package/src/react-component-lib/utils/case.d.ts +0 -2
  164. package/src/react-component-lib/utils/index.d.ts +0 -10
  165. package/star-0da9b5e9.esm.js +0 -5
  166. package/success-443809da.esm.js +0 -18
  167. package/svg-repository.entry.esm.js +0 -337
  168. package/thumbs-down-a18fd049.esm.js +0 -5
  169. package/thumbs-up-c19a71bc.esm.js +0 -6
  170. package/toastManager-d9eee791.esm.js +0 -34
  171. package/token-list_3.entry.esm.js +0 -385
  172. package/token-ratios.entry.esm.js +0 -49
  173. package/token-typography.entry.esm.js +0 -267
  174. package/tutotial-150ee1fd.esm.js +0 -27
  175. package/twitter-ac21b505.esm.js +0 -14
  176. package/unknown-ed01a24c.esm.js +0 -22
  177. package/up-and-down-d747abee.esm.js +0 -12
  178. package/user-71ebdc15.esm.js +0 -16
  179. package/youtube-efbfbdc4.esm.js +0 -14
  180. /package/src/generated/react-component-lib/{index.d.ts → index.ts} +0 -0
  181. /package/src/{index.d.ts → index.ts} +0 -0
  182. /package/src/react-component-lib/{index.d.ts → index.ts} +0 -0
@@ -1,174 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { p as parseData } from './sharedUtils-a550989c.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- const edsBreadcrumbCss = "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}}";
8
- const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
9
- const EdsBreadcrumb = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- /**
13
- * Updates the maximum number of visible items and tracks if the screen is small.
14
- */
15
- this.updateScreenSize = () => {
16
- const width = window.innerWidth;
17
- if (width < 769) {
18
- this.maxVisibleItems = 3;
19
- this.isSmallScreen = true;
20
- } else if (width <= 1024) {
21
- this.maxVisibleItems = 3;
22
- this.isSmallScreen = true;
23
- } else if (width <= 2200) {
24
- this.maxVisibleItems = 4;
25
- this.isSmallScreen = false;
26
- } else {
27
- this.maxVisibleItems = 6;
28
- this.isSmallScreen = false;
29
- }
30
- };
31
- this.items = [];
32
- this.intent = 'ghost';
33
- this.parsedItems = [];
34
- this.isSmallScreen = false;
35
- this.maxVisibleItems = 6;
36
- }
37
- /**
38
- * Watches for changes to the `items` prop and parses it.
39
- */
40
- parseItems(newValue) {
41
- this.parsedItems = parseData(newValue);
42
- }
43
- /**
44
- * Lifecycle method that runs when the component is about to be loaded.
45
- * It parses the initial `items` prop value.
46
- */
47
- componentWillLoad() {
48
- this.parseItems(this.items);
49
- this.updateScreenSize();
50
- window.addEventListener('resize', this.updateScreenSize);
51
- }
52
- disconnectedCallback() {
53
- window.removeEventListener('resize', this.updateScreenSize);
54
- }
55
- /**
56
- * Lifecycle method that runs when the component has fully loaded.
57
- * It emits a custom event for each `eds-link` element contained within the breadcrumb.
58
- */
59
- componentDidLoad() {
60
- var _a;
61
- const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
62
- links === null || links === void 0 ? void 0 : links.forEach(link => {
63
- this.emitContext(link);
64
- });
65
- }
66
- /**
67
- * Emits a custom event called `parentContext` for a given link element.
68
- * This event provides context information about the breadcrumb component.
69
- *
70
- * @param linkElement - The link element to which the event will be dispatched.
71
- */
72
- emitContext(linkElement) {
73
- const event = new CustomEvent('parentContext', {
74
- detail: {
75
- componentName: this.el.tagName.toLowerCase(),
76
- identifier: null
77
- }
78
- });
79
- linkElement.dispatchEvent(event);
80
- }
81
- /**
82
- * Returns breadcrumb items with potential truncation if there are too many.
83
- * It inserts an ellipsis item where necessary.
84
- */
85
- getTruncatedItems() {
86
- const totalItems = this.parsedItems.length;
87
- const ellipsis = {
88
- label: '...',
89
- url: '',
90
- isHidden: true
91
- };
92
- if (totalItems > this.maxVisibleItems) {
93
- const firstItem = this.parsedItems[0];
94
- const lastItems = this.parsedItems.slice(-2);
95
- if (this.maxVisibleItems === 3) {
96
- return [firstItem, ellipsis, ...lastItems];
97
- } else if (this.maxVisibleItems === 4) {
98
- const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
99
- return [firstItem, middleItem, ellipsis, ...lastItems];
100
- }
101
- }
102
- return this.parsedItems;
103
- }
104
- /**
105
- * Helper to determine the display label and full label.
106
- * If the label is longer than 15 characters and the item is not the current (last) item,
107
- * we display a truncated version but use the full label for aria attributes.
108
- */
109
- getLabels(item, isCurrent) {
110
- if (!isCurrent && item.label.length > 15) {
111
- return {
112
- displayLabel: `${item.label.slice(0, 15)}...`,
113
- fullLabel: item.label
114
- };
115
- }
116
- return {
117
- displayLabel: item.label,
118
- fullLabel: item.label
119
- };
120
- }
121
- /**
122
- * Render method for the breadcrumb component.
123
- * It creates a navigation element with an ordered list of breadcrumb links.
124
- * The last link is marked as the current page.
125
- */
126
- render() {
127
- const itemsToRender = this.getTruncatedItems();
128
- return h("nav", {
129
- key: '75bb5629a10de2a2a7bd0b2bbef04e5f699f5fe2',
130
- "aria-label": "Breadcrumb"
131
- }, h("ol", {
132
- key: '7a5cc115b70d60bc878aa3d865802662f30948c1',
133
- class: "flex items-center space-x-2"
134
- }, itemsToRender.map((item, index) => {
135
- const isLast = index === itemsToRender.length - 1;
136
- return h("li", {
137
- class: "flex items-center"
138
- }, !item.isHidden ? (() => {
139
- const {
140
- displayLabel,
141
- fullLabel
142
- } = this.getLabels(item, isLast);
143
- return h("eds-link", Object.assign({
144
- label: displayLabel,
145
- url: item.url,
146
- intent: this.intent,
147
- current: isLast,
148
- "aria-label": fullLabel,
149
- size: "small",
150
- "icon-small": "false"
151
- }, isLast ? {
152
- 'aria-current': 'page'
153
- } : {}));
154
- })() : h("span", {
155
- class: "truncate px-2",
156
- "aria-hidden": "true"
157
- }, "..."), !isLast && !item.isHidden && h("eds-icon-wrapper", {
158
- icon: "chevron-right",
159
- class: "w-20 h-20"
160
- }));
161
- })));
162
- }
163
- get el() {
164
- return getElement(this);
165
- }
166
- static get watchers() {
167
- return {
168
- "items": ["parseItems"]
169
- };
170
- }
171
- };
172
- EdsBreadcrumb.style = EdsBreadcrumbStyle0;
173
-
174
- export { EdsBreadcrumb as eds_breadcrumb };
@@ -1,125 +0,0 @@
1
- import { r as registerInstance, h } 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 edsCardDescCss = ".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}";
8
- const EdsCardDescStyle0 = edsCardDescCss;
9
- const EdsCardDesc = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.description = undefined;
13
- this.descClass = 'f-ui-03-light';
14
- this.truncate = true;
15
- this.truncateLines = '3';
16
- }
17
- getTruncateClass() {
18
- return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
19
- }
20
- render() {
21
- return h("p", {
22
- key: '96ba520be4ef9acf871a6e992d5ea74aaf17c962',
23
- class: `text-light ${this.descClass}`
24
- }, h("span", {
25
- key: '951358bd0c992426175e3c1b3c580f2f9be4027f',
26
- class: this.getTruncateClass()
27
- }, this.description));
28
- }
29
- };
30
- EdsCardDesc.style = EdsCardDescStyle0;
31
- const edsCardTitleCss = "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}";
32
- const EdsCardTitleStyle0 = edsCardTitleCss;
33
- const EdsCardTitle = class {
34
- constructor(hostRef) {
35
- registerInstance(this, hostRef);
36
- this.url = undefined;
37
- this.titleClass = undefined;
38
- this.headingLevel = 'h3';
39
- this.externalLink = false;
40
- this.cardTitle = undefined;
41
- this.hierarchy = true;
42
- }
43
- /**
44
- * Dynamically generate the title class based on the heading level.
45
- */
46
- getTitleClass() {
47
- const levelMap = this.hierarchy ? {
48
- h1: '05',
49
- h2: '05',
50
- h3: '05',
51
- h4: '05',
52
- h5: '05',
53
- h6: '06'
54
- } : {
55
- h1: '01',
56
- h2: '02',
57
- h3: '03',
58
- h4: '04',
59
- h5: '05',
60
- h6: '06'
61
- };
62
- return `f-heading-${levelMap[this.headingLevel]}`;
63
- }
64
- /*private getTag() {
65
- if (this.url) {
66
- return 'a';
67
- }
68
- return 'span';
69
- }*/
70
- render() {
71
- //const Tag = this.getTag();
72
- const Heading = this.headingLevel;
73
- return h(Heading, {
74
- key: '57ce97f35ee52623d32fac0b6b1a576ca8b5aa70',
75
- class: this.getTitleClass()
76
- }, h("a", {
77
- key: '60fb313d2b8753974658f73aaddd359a63548a79',
78
- class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
79
- href: this.url,
80
- target: this.externalLink ? '_blank' : undefined,
81
- rel: this.externalLink ? 'noopener noreferrer' : undefined
82
- }, this.cardTitle));
83
- }
84
- };
85
- EdsCardTitle.style = EdsCardTitleStyle0;
86
- const edsTagCss = ".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)}";
87
- const EdsTagStyle0 = edsTagCss;
88
-
89
- // Define the CVA for the tag styles
90
- const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'],
91
- // Base classes
92
- {
93
- variants: {
94
- intent: {
95
- default: 'border-default',
96
- strong: 'text-inverse bg-strongest border-default',
97
- accent: 'text-[#0034CB] border-[#0034CB]',
98
- weak: 'text-light bg-strongest-soft border-transparent',
99
- inverse: 'border-inverse text-inverse',
100
- 'inverse-strong': 'bg-inverse border-inverse text-lighter'
101
- }
102
- },
103
- defaultVariants: {
104
- intent: 'default'
105
- }
106
- });
107
- const EdsTag = class {
108
- constructor(hostRef) {
109
- registerInstance(this, hostRef);
110
- this.label = undefined;
111
- this.intent = 'default';
112
- }
113
- render() {
114
- const classes = tagStyles({
115
- intent: this.intent
116
- });
117
- return h("span", {
118
- key: '55a6039b040436e5dded9aaf1007668b97091ba3',
119
- class: classes
120
- }, this.label);
121
- }
122
- };
123
- EdsTag.style = EdsTagStyle0;
124
-
125
- export { EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title, EdsTag as eds_tag };
@@ -1,114 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { p as parseData } from './sharedUtils-a550989c.esm.js';
3
- import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
4
- import 'react';
5
- import 'react/jsx-runtime';
6
- import 'react-dom';
7
-
8
- const edsCardGenericCss = ".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}";
9
- const EdsCardGenericStyle0 = edsCardGenericCss;
10
- const EdsCardGeneric = class {
11
- constructor(hostRef) {
12
- registerInstance(this, hostRef);
13
- this.parentContext = null; // Accepts the entire event detail or null
14
- this.cardTitle = undefined;
15
- this.url = undefined;
16
- this.description = undefined;
17
- this.image = undefined;
18
- this.avatar = undefined;
19
- this.shortAbbreviation = undefined;
20
- this.headingLevel = 'h3';
21
- this.tags = [];
22
- this.tiny = false;
23
- this.bg = true;
24
- this.withHover = true;
25
- this.hierarchy = true;
26
- this.parsedImage = null;
27
- }
28
- componentWillLoad() {
29
- if (this.image) {
30
- try {
31
- if (typeof this.image === 'object') {
32
- // If image is already an object, assign it directly
33
- this.parsedImage = this.image;
34
- } else if (typeof this.image === 'string') {
35
- // If image is a string, try to parse it
36
- this.parsedImage = JSON.parse(this.image);
37
- }
38
- } catch (error) {
39
- // eslint-disable-next-line
40
- console.error('Error parsing image prop:', error);
41
- this.parsedImage = {}; // Assign a fallback empty object in case of an error
42
- }
43
- }
44
- }
45
- handleParentContext(event) {
46
- if (event.target !== this.el) {
47
- // Ignore the event if it's not targeted at this specific instance
48
- return;
49
- }
50
- //console.log(event.detail);
51
- this.parentContext = event.detail;
52
- event.stopPropagation();
53
- }
54
- /**
55
- * Parses the `tags` prop into an array of link objects.
56
- * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
57
- *
58
- * @returns {any[]} Array of parsed link objects
59
- */
60
- get parsedTags() {
61
- return parseData(this.tags);
62
- }
63
- articleClasses() {
64
- 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(' ');
65
- }
66
- handleClick() {
67
- var _a;
68
- sendAnalytics({
69
- category: 'ui-component',
70
- parentContext: this.parentContext,
71
- tag: this.el.tagName.toLowerCase(),
72
- name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
73
- action: 'click'
74
- });
75
- }
76
- render() {
77
- return h("article", {
78
- key: '440a448c841370838c0c66610bd1266b46f66541',
79
- class: this.articleClasses(),
80
- onClick: () => this.handleClick()
81
- }, h("eds-card-title", {
82
- key: '292d93a9a993c6dcbfd276097a21d3984b1794c4',
83
- "heading-level": this.headingLevel,
84
- titleClass: this.image ? 'f-ui-01' : undefined,
85
- "card-title": this.cardTitle,
86
- url: this.url,
87
- hierarchy: this.hierarchy
88
- }), this.description && h("eds-card-desc", {
89
- key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7',
90
- class: "mt-8",
91
- "truncate-lines": "3",
92
- description: this.description
93
- }), this.parsedImage ? h("eds-img", Object.assign({
94
- class: "mt-8"
95
- }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
96
- class: "order-first mb-12",
97
- picture: this.avatar,
98
- initials: this.shortAbbreviation
99
- }) : null, h("div", {
100
- key: 'cb5c191f6c190fb6edb46446187dbf6b8c1b778b',
101
- class: "flex flex-wrap gap-y-4"
102
- }, this.parsedTags.map((tag, index) => h("eds-tag", {
103
- key: index,
104
- intent: tag.style,
105
- label: tag.label
106
- }))), ' ');
107
- }
108
- get el() {
109
- return getElement(this);
110
- }
111
- };
112
- EdsCardGeneric.style = EdsCardGenericStyle0;
113
-
114
- export { EdsCardGeneric as eds_card_generic };
@@ -1,93 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
3
- import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
4
- import 'react';
5
- import 'react/jsx-runtime';
6
- import 'react-dom';
7
- import './index-39c58238.esm.js';
8
-
9
- const EdsCardProject = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.image = undefined;
13
- this.editorialTitle = undefined;
14
- this.headingLevel = 'h3';
15
- this.categoryTitle = undefined;
16
- this.color = undefined;
17
- this.bgOnHover = false;
18
- this.vertical = false;
19
- this.titleProject = undefined;
20
- this.url = undefined;
21
- this.parsedImage = null;
22
- }
23
- componentWillLoad() {
24
- // Parse the image prop if it's provided
25
- if (this.image) {
26
- try {
27
- this.parsedImage = JSON.parse(this.image);
28
- //console.log(this.parsedImage);
29
- } catch (error) {
30
- //console.error('Error parsing image prop:', error);
31
- }
32
- }
33
- }
34
- handleClick(event) {
35
- var _a;
36
- event.preventDefault();
37
- sendAnalytics({
38
- category: 'ui-component',
39
- tag: this.el.tagName.toLowerCase(),
40
- name: ((_a = this.titleProject) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
41
- action: 'click'
42
- });
43
- }
44
- render() {
45
- var _a;
46
- const cardClasses = ['min-h-156 border-inside after:border-softest @container overflow-hidden border-0 after:rounded-lg', this.color ? gradientBGColorVariants({
47
- color: this.color,
48
- hover: this.bgOnHover,
49
- class: 'before:border-2 before:rounded-lg before:border-softest'
50
- }) : '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(' ');
51
- const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
52
- return h("article", {
53
- key: '067a30c2b0860d71dc13d1d3d875a7e288de842b',
54
- class: cardClasses,
55
- onClick: event => this.handleClick(event)
56
- }, h("div", {
57
- key: '3e2e62ecc9ad5973c359b7bbceefd8c2ac682d0b',
58
- class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}`
59
- }, h("div", {
60
- key: 'e07a666f80d6955b5cf16c18a999a756dcfe10f0',
61
- class: "lg:max-w-[720px]"
62
- }, h("eds-card-title", {
63
- key: 'b1ef62c888e9d69f1146fc218a7012015ddc78e1',
64
- "heading-level": this.headingLevel,
65
- titleClass: this.image ? 'f-ui-01' : undefined,
66
- "card-title": this.titleProject,
67
- url: this.url
68
- }), this.editorialTitle && h("span", {
69
- key: '79cf1af876a0a358a9f65036a1ff1c4944604435',
70
- class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}`
71
- }, this.editorialTitle)), this.categoryTitle && h("div", {
72
- key: 'ce7e525b0bdbbc94d3e2ec8055c692be9d521042',
73
- class: "mt-auto flex items-center gap-x-12 pt-12"
74
- }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", {
75
- key: '23e3527a3772970642dcb07a4abc381415132155',
76
- label: this.categoryTitle
77
- }))), this.parsedImage && h("div", {
78
- key: '178ef2273b2506070c045c3f2e7a287d4b175414',
79
- class: imageClasses
80
- }, h("div", {
81
- key: 'f77fb56cd2ed1bdcafd07db9adcf0f7b6a44cdb7',
82
- class: "aspect-1x1 w-full"
83
- }, h("eds-img", Object.assign({
84
- key: 'b9734f48ab685280b801cfb75cc96f5aa109ca6f',
85
- sizes: this.vertical ? this.parsedImage.sizes || '' : '192px'
86
- }, this.parsedImage)))));
87
- }
88
- get el() {
89
- return getElement(this);
90
- }
91
- };
92
-
93
- export { EdsCardProject as eds_card_project };
@@ -1,56 +0,0 @@
1
- import { r as registerInstance, h } from './index.esm2.js';
2
- import { p as parseData } from './sharedUtils-a550989c.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- const edsCardSectionCss = "ol,ul,menu{list-style:none;margin:0;padding:0}.w-full{width:100%}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-4[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1)::before{inset-inline-start:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+4)::before{inset-inline-end:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1):nth-last-child(-n+4)::before{border-bottom-width:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1):nth-last-child(-n+4)~*::before{border-bottom-width:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+4)::after{border-inline-end-width:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+4)::after{top:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+1):nth-last-child(-n+4)::after{bottom:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+1):nth-last-child(-n+4)~li::after{bottom:0}.grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 750px){.md\\:grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.md\\:grid-col-span-2{--container-grid-columns:2;grid-column:span 2 / span 2}.md\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.md\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-8-cols>*{--container-grid-columns:8}.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}";
8
- const EdsCardSectionStyle0 = edsCardSectionCss;
9
- const EdsCardSection = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.cards = [];
13
- this.occupyCols = 1;
14
- }
15
- /**
16
- * Parses the `cards` JSON string prop into an array of card objects.
17
- * If parsing fails, returns an empty array.
18
- *
19
- * @returns {any[]} An array of parsed card objects.
20
- */
21
- get parsedCards() {
22
- return parseData(this.cards);
23
- }
24
- /**
25
- * Renders the card section as a grid layout.
26
- * Each parsed card object is mapped to an `<eds-card-generic>` component,
27
- * displaying card details such as title, description, avatar, etc.
28
- *
29
- * @returns {JSX.Element} The rendered section containing a list of cards.
30
- */
31
- render() {
32
- return h("section", {
33
- key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8',
34
- class: "w-full"
35
- }, h("ul", {
36
- key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff',
37
- class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16"
38
- }, this.parsedCards.map(card => h("li", {
39
- class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col`
40
- }, h("eds-card-generic", {
41
- cardTitle: card.title,
42
- description: card.description,
43
- avatar: card.avatar,
44
- headingLevel: card.headingLevel,
45
- tags: card.tags,
46
- url: card.url,
47
- bg: card.bg,
48
- tiny: card.tiny,
49
- image: card.image,
50
- withHover: card.withHover
51
- })))));
52
- }
53
- };
54
- EdsCardSection.style = EdsCardSectionStyle0;
55
-
56
- export { EdsCardSection as eds_card_section };
@@ -1,27 +0,0 @@
1
- import { r as registerInstance, h } from './index.esm2.js';
2
- import 'react';
3
- import 'react/jsx-runtime';
4
- import 'react-dom';
5
-
6
- const edsCardTagsCss = ".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}";
7
- const EdsCardTagsStyle0 = edsCardTagsCss;
8
- const EdsCardTags = class {
9
- constructor(hostRef) {
10
- registerInstance(this, hostRef);
11
- this.accent = false;
12
- this.tags = [];
13
- }
14
- render() {
15
- return h("div", {
16
- key: 'df8937e32907eb978f27565d04f7ca56f2485c87',
17
- class: "flex flex-wrap gap-y-4"
18
- }, this.tags.map((tag, index) => h("eds-tag", {
19
- key: index,
20
- intent: this.accent ? 'accent' : 'default',
21
- label: tag
22
- })));
23
- }
24
- };
25
- EdsCardTags.style = EdsCardTagsStyle0;
26
-
27
- export { EdsCardTags as eds_card_tags };