@ebrains/react 0.5.0-alpha.0 → 0.6.0-alpha.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.
@@ -1,193 +0,0 @@
1
- import { r as registerInstance, h } from './index.esm2.js';
2
- import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
3
- import { c as cva } from './index-39c58238.esm.js';
4
- import 'react';
5
- import 'react/jsx-runtime';
6
- import 'react-dom';
7
-
8
- const edsAvatarCss = ".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: 2px solid rgba(0, 0, 0, .1);\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n\n &::after {\n content: '';\n }\n}\n\n.border-inside-inverse {\n &::after {\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n &::after {\n content: '';\n }\n}\n\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n\n.flex {\n display: flex;\n}\n\n.inline-flex {\n display: inline-flex;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.rounded-pill {\n border-radius: 100px;\n}\n\n.rounded-sm {\n border-radius: 8px;\n}\n\n.rounded-xs {\n border-radius: 4px;\n}\n\n\n.bg-dark {\n background-color: var(--grey-300);\n}\n\n.bg-darker {\n background-color: var(--grey-400);\n}\n\n.bg-stronger {\n background-color: var(--grey-900);\n}\n\n.bg-strongest {\n background-color: var(--black);\n}\n\n.text-accent {\n color: var(--green-500);\n}\n\n.text-default {\n color: var(--black);\n}\n\n.\\!no-underline {\n text-decoration-line: none !important;\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.w-32 {\n width: 2rem;\n}\n\n.w-44 {\n width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n width: 54px;\n}";
9
- const EdsAvatarStyle0 = edsAvatarCss;
10
- const EdsAvatar = class {
11
- constructor(hostRef) {
12
- registerInstance(this, hostRef);
13
- this.firstName = 'User';
14
- this.lastName = 'Avatar';
15
- this.picture = undefined;
16
- this.initials = undefined;
17
- this.color = undefined;
18
- this.rounded = false;
19
- this.initialsStrong = false;
20
- }
21
- /**
22
- * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
23
- * @returns {string | undefined} Initials for display in the avatar.
24
- */
25
- get computedInitials() {
26
- if (this.initials) {
27
- return (this.initials.match(/.{1,3}/g) || [])[0] || '';
28
- } else if (this.firstName && this.lastName) {
29
- return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
30
- }
31
- return undefined;
32
- }
33
- /**
34
- * Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
35
- * @returns {string} List of CSS classes to apply to the avatar container.
36
- */
37
- get containerClasses() {
38
- 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 ? gradientBGColorVariants({
39
- color: this.color,
40
- direction: 'top',
41
- pseudo: false
42
- }) : !this.picture ? 'bg-strongest text-accent' : ''].join(' ');
43
- }
44
- /**
45
- * Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
46
- * @returns {JSX.Element} The rendered avatar component.
47
- */
48
- render() {
49
- return h("div", {
50
- key: '47ee5ffd12c0f90c536dea77b3ffa9120d67f37f',
51
- class: this.containerClasses
52
- }, this.picture ? h("eds-img", {
53
- src: this.picture,
54
- width: 54,
55
- height: 54,
56
- sizes: "120px",
57
- alt: `${this.firstName} ${this.lastName}`,
58
- lazyload: true,
59
- withBg: true
60
- }) : h("abbr", {
61
- title: this.computedInitials || `${this.firstName} ${this.lastName}`,
62
- class: "!no-underline f-ui-01"
63
- }, this.computedInitials));
64
- }
65
- };
66
- EdsAvatar.style = EdsAvatarStyle0;
67
- 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}";
68
- const EdsCardDescStyle0 = edsCardDescCss;
69
- const EdsCardDesc = class {
70
- constructor(hostRef) {
71
- registerInstance(this, hostRef);
72
- this.description = undefined;
73
- this.descClass = 'f-ui-03-light';
74
- this.truncate = true;
75
- this.truncateLines = '3';
76
- }
77
- getTruncateClass() {
78
- return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
79
- }
80
- render() {
81
- return h("p", {
82
- key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb',
83
- class: `text-light ${this.descClass}`
84
- }, h("span", {
85
- key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8',
86
- class: this.getTruncateClass()
87
- }, this.description));
88
- }
89
- };
90
- EdsCardDesc.style = EdsCardDescStyle0;
91
- 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}";
92
- const EdsCardTitleStyle0 = edsCardTitleCss;
93
- const EdsCardTitle = class {
94
- constructor(hostRef) {
95
- registerInstance(this, hostRef);
96
- this.url = undefined;
97
- this.titleClass = undefined;
98
- this.headingLevel = 'h3';
99
- this.externalLink = false;
100
- this.cardTitle = undefined;
101
- this.hierarchy = true;
102
- }
103
- /**
104
- * Dynamically generate the title class based on the heading level.
105
- */
106
- getTitleClass() {
107
- const levelMap = this.hierarchy ? {
108
- h1: '05',
109
- h2: '05',
110
- h3: '05',
111
- h4: '05',
112
- h5: '05',
113
- h6: '06'
114
- } : {
115
- h1: '01',
116
- h2: '02',
117
- h3: '03',
118
- h4: '04',
119
- h5: '05',
120
- h6: '06'
121
- };
122
- return `f-heading-${levelMap[this.headingLevel]}`;
123
- }
124
- /*private getTag() {
125
- if (this.url) {
126
- return 'a';
127
- }
128
- return 'span';
129
- }*/
130
- render() {
131
- //const Tag = this.getTag();
132
- const Heading = this.headingLevel;
133
- return h(Heading, {
134
- key: 'bb97dc6dd53adda14ef251b2ec32952791438986',
135
- class: this.getTitleClass()
136
- }, h("a", {
137
- key: '37b6ac0668257d27fb3f03a6225a2d48e1fd1f79',
138
- class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
139
- href: this.url,
140
- target: this.externalLink ? '_blank' : undefined,
141
- rel: this.externalLink ? 'noopener noreferrer' : undefined
142
- }, this.cardTitle));
143
- }
144
- };
145
- EdsCardTitle.style = EdsCardTitleStyle0;
146
- 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)}";
147
- const EdsTagStyle0 = edsTagCss;
148
-
149
- // Define the CVA for the tag styles
150
- const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'],
151
- // Base classes
152
- {
153
- variants: {
154
- intent: {
155
- default: 'border-default',
156
- strong: 'text-inverse bg-strongest border-default',
157
- accent: 'text-[#0034CB] border-[#0034CB]',
158
- weak: 'text-light bg-strongest-soft border-transparent',
159
- inverse: 'border-inverse text-inverse',
160
- 'inverse-strong': 'bg-inverse border-inverse text-lighter'
161
- }
162
- },
163
- defaultVariants: {
164
- intent: 'default'
165
- }
166
- });
167
- const EdsTag = class {
168
- constructor(hostRef) {
169
- registerInstance(this, hostRef);
170
- this.label = undefined;
171
- this.ariaLabel = '';
172
- this.intent = 'default';
173
- }
174
- /**
175
- * Render the component.
176
- * @returns The rendered HTML for the tag component with the applied styles and label.
177
- */
178
- render() {
179
- var _a;
180
- const classes = tagStyles({
181
- intent: this.intent
182
- });
183
- const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
184
- return h("span", {
185
- key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6',
186
- class: classes,
187
- "aria-label": accessibleLabel
188
- }, this.label);
189
- }
190
- };
191
- EdsTag.style = EdsTagStyle0;
192
-
193
- export { EdsAvatar as eds_avatar, EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title, EdsTag as eds_tag };
@@ -1,124 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
3
- import 'react';
4
- import 'react/jsx-runtime';
5
- import 'react-dom';
6
-
7
- 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}";
8
- const EdsCardGenericStyle0 = edsCardGenericCss;
9
- const EdsCardGeneric = class {
10
- constructor(hostRef) {
11
- registerInstance(this, hostRef);
12
- this.parentContext = null; // Accepts the entire event detail or null
13
- this.cardTitle = undefined;
14
- this.url = undefined;
15
- this.description = undefined;
16
- this.image = undefined;
17
- this.avatar = undefined;
18
- this.shortAbbreviation = undefined;
19
- this.headingLevel = 'h3';
20
- this.tags = [];
21
- this.tiny = false;
22
- this.bg = true;
23
- this.withHover = true;
24
- this.hierarchy = true;
25
- this.parsedImage = null;
26
- }
27
- componentWillLoad() {
28
- if (this.image) {
29
- try {
30
- if (typeof this.image === 'object') {
31
- // If image is already an object, assign it directly
32
- this.parsedImage = this.image;
33
- } else if (typeof this.image === 'string') {
34
- // If image is a string, try to parse it
35
- this.parsedImage = JSON.parse(this.image);
36
- }
37
- } catch (error) {
38
- // eslint-disable-next-line
39
- console.error('Error parsing image prop:', error);
40
- this.parsedImage = {}; // Assign a fallback empty object in case of an error
41
- }
42
- }
43
- }
44
- handleParentContext(event) {
45
- if (event.target !== this.el) {
46
- // Ignore the event if it's not targeted at this specific instance
47
- return;
48
- }
49
- //console.log(event.detail);
50
- this.parentContext = event.detail;
51
- event.stopPropagation();
52
- }
53
- /**
54
- * Parses the `tags` prop into an array of link objects.
55
- * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
56
- *
57
- * @returns {any[]} Array of parsed link objects
58
- */
59
- get parsedTags() {
60
- if (typeof this.tags === 'object') {
61
- return this.tags;
62
- } else if (typeof this.tags === 'string') {
63
- try {
64
- return JSON.parse(this.tags);
65
- } catch (e) {
66
- // eslint-disable-next-line
67
- console.error('Error parsing tags prop:', e);
68
- return [];
69
- }
70
- }
71
- return [];
72
- }
73
- articleClasses() {
74
- 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(' ');
75
- }
76
- handleClick() {
77
- var _a;
78
- sendAnalytics({
79
- category: 'ui-component',
80
- parentContext: this.parentContext,
81
- tag: this.el.tagName.toLowerCase(),
82
- name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
83
- action: 'click'
84
- });
85
- }
86
- render() {
87
- return h("article", {
88
- key: 'dcb7cea87bfb52f8886f7ee3dbc3484d615bc00c',
89
- class: this.articleClasses(),
90
- onClick: () => this.handleClick()
91
- }, h("eds-card-title", {
92
- key: '94dd6ff2679ce9ac4d25ec921cd1162b1584e4fd',
93
- "heading-level": this.headingLevel,
94
- titleClass: this.image ? 'f-ui-01' : undefined,
95
- "card-title": this.cardTitle,
96
- url: this.url,
97
- hierarchy: this.hierarchy
98
- }), this.description && h("eds-card-desc", {
99
- key: '433c4fe3a518153d89d48af54455286fa415a688',
100
- class: "mt-8",
101
- "truncate-lines": "3",
102
- description: this.description
103
- }), this.parsedImage ? h("eds-img", Object.assign({
104
- class: "mt-8"
105
- }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
106
- class: "order-first mb-12",
107
- picture: this.avatar,
108
- initials: this.shortAbbreviation
109
- }) : null, h("div", {
110
- key: '97b75afb4b8de1183d4b212054ff556ba3db8fcb',
111
- class: "flex flex-wrap gap-y-4"
112
- }, this.parsedTags.map((tag, index) => h("eds-tag", {
113
- key: index,
114
- intent: tag.style,
115
- label: tag.label
116
- }))), ' ');
117
- }
118
- get el() {
119
- return getElement(this);
120
- }
121
- };
122
- EdsCardGeneric.style = EdsCardGenericStyle0;
123
-
124
- export { EdsCardGeneric as eds_card_generic };
@@ -1,70 +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 edsCardSectionCss = ".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-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.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-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.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}}";
7
- const EdsCardSectionStyle0 = edsCardSectionCss;
8
- const EdsCardSection = class {
9
- constructor(hostRef) {
10
- registerInstance(this, hostRef);
11
- this.cards = [];
12
- this.cols = 4;
13
- }
14
- /**
15
- * Parses the `cards` JSON string prop into an array of card objects.
16
- * If parsing fails, returns an empty array.
17
- *
18
- * @returns {any[]} An array of parsed card objects.
19
- */
20
- get parsedCards() {
21
- // If it's already an array, return it immediately.
22
- if (Array.isArray(this.cards)) {
23
- return this.cards;
24
- }
25
- if (typeof this.cards === 'object') {
26
- return this.cards;
27
- } else if (typeof this.cards === 'string') {
28
- try {
29
- return JSON.parse(this.cards);
30
- } catch (e) {
31
- // eslint-disable-next-line
32
- console.error('Error parsing cards prop:', e);
33
- return [];
34
- }
35
- }
36
- return [];
37
- }
38
- /**
39
- * Renders the card section as a grid layout.
40
- * Each parsed card object is mapped to an `<eds-card-generic>` component,
41
- * displaying card details such as title, description, avatar, etc.
42
- *
43
- * @returns {JSX.Element} The rendered section containing a list of cards.
44
- */
45
- render() {
46
- return h("section", {
47
- key: '1f221e1ec7c3cdd0e3aed18f6f930c2c5456c64b',
48
- class: "w-full"
49
- }, h("ul", {
50
- key: '36f984994bb2dc247475c20422f7e6e7da7d058d',
51
- class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"
52
- }, this.parsedCards.map(card => h("li", {
53
- class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col`
54
- }, h("eds-card-generic", {
55
- cardTitle: card.title,
56
- description: card.description,
57
- avatar: card.avatar,
58
- headingLevel: card.headingLevel,
59
- tags: card.tags,
60
- url: card.url,
61
- bg: card.bg,
62
- tiny: card.tiny,
63
- image: card.image,
64
- withHover: card.withHover
65
- })))));
66
- }
67
- };
68
- EdsCardSection.style = EdsCardSectionStyle0;
69
-
70
- export { EdsCardSection as eds_card_section };
@@ -1,128 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index.esm2.js';
2
- import { t as toast } from './toastManager-d9eee791.esm.js';
3
- import { m as matomoOptIn } from './analytics-1cde8e4a.esm.js';
4
- import 'react';
5
- import 'react/jsx-runtime';
6
- import 'react-dom';
7
-
8
- const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
9
- const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
10
- const EdsMatomoNotice = class {
11
- constructor(hostRef) {
12
- registerInstance(this, hostRef);
13
- this.title = 'Analytics Consent';
14
- this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
15
- this.showNotice = true;
16
- }
17
- /**
18
- * Lifecycle method called before the component is rendered.
19
- * Checks for the presence of the "mtm_consent" cookie to determine
20
- * if the notice should be displayed.
21
- */
22
- componentWillLoad() {
23
- this.checkConsentCookie();
24
- }
25
- /**
26
- * Lifecycle method called after the component has been rendered.
27
- * Emits `parentContext` events for each `eds-button` in the shadow DOM.
28
- */
29
- componentDidLoad() {
30
- const btns = this.el.shadowRoot.querySelectorAll('eds-button');
31
- btns.forEach(b => {
32
- this.emitContext(b);
33
- });
34
- }
35
- /**
36
- * Emits a custom `parentContext` event for a given button element.
37
- * This can be used to provide context information about the component.
38
- *
39
- * @param linkElement - The button element to which the event will be dispatched.
40
- */
41
- emitContext(linkElement) {
42
- const event = new CustomEvent('parentContext', {
43
- detail: {
44
- componentName: this.el.tagName.toLowerCase(),
45
- identifier: null
46
- }
47
- });
48
- linkElement.dispatchEvent(event);
49
- }
50
- /**
51
- * Checks if the Matomo "mtm_consent" cookie exists in the browser.
52
- * If the cookie is found, the notice is hidden.
53
- */
54
- checkConsentCookie() {
55
- const consentCookie = document.cookie.split('; ').find(row => row.startsWith('mtm_consent='));
56
- //this.showNotice = !consentCookie;
57
- const sessionDeferred = sessionStorage.getItem('matomo-deferred');
58
- this.showNotice = !consentCookie && !sessionDeferred;
59
- }
60
- /**
61
- * Handles user consent for analytics tracking.
62
- * Calls the `matomoOptIn` utility and shows a success toast notification.
63
- */
64
- optInAnalytics() {
65
- matomoOptIn();
66
- toast.show('You have opted in to analytics.', 'success');
67
- this.hideNotice();
68
- }
69
- /**
70
- * Handles user opt-out from analytics tracking.
71
- * Calls the `matomoOptOut` utility and shows a warning toast notification.
72
-
73
- private optOutAnalytics() {
74
- matomoOptOut();
75
- toast.show('You have opted out of analytics.', 'warning');
76
- this.hideNotice();
77
- }*/
78
- /**
79
- * Handles "Ask me later" action by storing a session storage entry
80
- * and hiding the notice for the rest of the session.
81
- */
82
- deferDecision() {
83
- sessionStorage.setItem('matomo-deferred', 'true');
84
- toast.show('You can decide later.', 'warning');
85
- this.hideNotice();
86
- }
87
- /**
88
- * Hides the notice by updating the `showNotice` state.
89
- */
90
- hideNotice() {
91
- this.showNotice = false;
92
- }
93
- /**
94
- * Renders the Matomo consent notice with user options.
95
- * Includes an accordion for the description and two buttons for user consent.
96
- */
97
- render() {
98
- if (!this.showNotice) {
99
- return null;
100
- }
101
- return h("div", {
102
- class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"
103
- }, h("eds-accordion", {
104
- title: this.title,
105
- description: this.description,
106
- switchBg: true,
107
- expanded: true
108
- }, h("div", {
109
- class: "flex items-center gap-4"
110
- }, h("eds-button", {
111
- intent: "primary",
112
- label: "Yes, I agree",
113
- "aria-label": "Opt-in for analytics",
114
- onClick: () => this.optInAnalytics()
115
- }), h("eds-button", {
116
- intent: "ghost",
117
- label: "Ask me later",
118
- "aria-label": "Defer analytics decision",
119
- onClick: () => this.deferDecision()
120
- }))));
121
- }
122
- get el() {
123
- return getElement(this);
124
- }
125
- };
126
- EdsMatomoNotice.style = EdsMatomoNoticeStyle0;
127
-
128
- export { EdsMatomoNotice as eds_matomo_notice };