@ebrains/components 0.0.1-alpha.0

package/dist/cjs/eds-card-desc.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+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}";
+
+const EdsCardDesc = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.description = undefined;
+        this.descClass = 'f-ui-03-light';
+        this.truncate = true;
+        this.truncateLines = '3';
+    }
+    getTruncateClass() {
+        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+    }
+    render() {
+        return (index.h("p", { key: '017c115ebff999c74cff1eaeb5c63f97e0f6554d', class: `text-light ${this.descClass}` }, index.h("span", { key: 'f87b9b3d593e417ef351882f426d24c0b206ccab', class: this.getTruncateClass() }, this.description)));
+    }
+};
+EdsCardDesc.style = edsCardDescCss;
+
+exports.eds_card_desc = EdsCardDesc;

package/dist/cjs/eds-card-desc_3.cjs.entry.js

@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2cc3495f.js');
+const index$1 = require('./index-ab9fbefe.js');
+
+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}";
+const EdsCardDescStyle0 = edsCardDescCss;
+
+const EdsCardDesc = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.description = undefined;
+        this.descClass = 'f-ui-03-light';
+        this.truncate = true;
+        this.truncateLines = '3';
+    }
+    getTruncateClass() {
+        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+    }
+    render() {
+        return (index.h("p", { key: '017c115ebff999c74cff1eaeb5c63f97e0f6554d', class: `text-light ${this.descClass}` }, index.h("span", { key: 'f87b9b3d593e417ef351882f426d24c0b206ccab', class: this.getTruncateClass() }, this.description)));
+    }
+};
+EdsCardDesc.style = EdsCardDescStyle0;
+
+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}";
+const EdsCardTitleStyle0 = edsCardTitleCss;
+
+const EdsCardTitle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.url = undefined;
+        this.titleClass = undefined;
+        this.headingLevel = 'h3';
+        this.externalLink = false;
+        this.cardTitle = undefined;
+        this.hierarchy = true;
+    }
+    /**
+     * Dynamically generate the title class based on the heading level.
+     */
+    getTitleClass() {
+        const levelMap = this.hierarchy
+            ? {
+                h1: '05',
+                h2: '05',
+                h3: '05',
+                h4: '05',
+                h5: '05',
+                h6: '06'
+            }
+            : {
+                h1: '01',
+                h2: '02',
+                h3: '03',
+                h4: '04',
+                h5: '05',
+                h6: '06'
+            };
+        return `f-heading-${levelMap[this.headingLevel]}`;
+    }
+    /*private getTag() {
+      if (this.url) {
+        return 'a';
+      }
+      return 'span';
+    }*/
+    render() {
+        //const Tag = this.getTag();
+        const Heading = this.headingLevel;
+        return (index.h(Heading, { key: '8aee3bcb0e04508dd21a03ea0f695e040f37c767', class: this.getTitleClass() }, index.h("a", { key: 'c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+    }
+};
+EdsCardTitle.style = EdsCardTitleStyle0;
+
+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)}";
+const EdsTagStyle0 = edsTagCss;
+
+// Define the CVA for the tag styles
+const tagStyles = index$1.cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'], // Base classes
+{
+    variants: {
+        intent: {
+            default: 'border-default',
+            strong: 'text-inverse bg-strongest border-default',
+            accent: 'text-[#0034CB] border-[#0034CB]',
+            weak: 'text-light bg-strongest-soft border-transparent',
+            inverse: 'border-inverse text-inverse',
+            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+        }
+    },
+    defaultVariants: {
+        intent: 'default'
+    }
+});
+const EdsTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = undefined;
+        this.intent = 'default';
+    }
+    /**
+     * Render the component.
+     * @returns The rendered HTML for the tag component with the applied styles and label.
+     */
+    render() {
+        const classes = tagStyles({ intent: this.intent });
+        return index.h("span", { key: '546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3', class: classes }, this.label);
+    }
+};
+EdsTag.style = EdsTagStyle0;
+
+exports.eds_card_desc = EdsCardDesc;
+exports.eds_card_title = EdsCardTitle;
+exports.eds_tag = EdsTag;

package/dist/cjs/eds-card-generic.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+const index$1 = require('./index-96a4261e.js');
+require('./index-1ff5f25c.js');
+
+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}";
+
+const EdsCardGeneric = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cardTitle = undefined;
+        this.url = undefined;
+        this.description = undefined;
+        this.image = undefined;
+        this.avatar = undefined;
+        this.shortAbbreviation = undefined;
+        this.headingLevel = 'h3';
+        this.tags = '';
+        this.tiny = false;
+        this.bg = true;
+        this.withHover = true;
+        this.hierarchy = true;
+        this.parsedImage = null;
+    }
+    componentWillLoad() {
+        if (this.image) {
+            try {
+                if (typeof this.image === 'object') {
+                    // If image is already an object, assign it directly
+                    this.parsedImage = this.image;
+                }
+                else if (typeof this.image === 'string') {
+                    // If image is a string, try to parse it
+                    this.parsedImage = JSON.parse(this.image);
+                }
+            }
+            catch (error) {
+                // eslint-disable-next-line
+                console.error('Error parsing image prop:', error);
+                this.parsedImage = {}; // Assign a fallback empty object in case of an error
+            }
+        }
+    }
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags() {
+        if (typeof this.tags === 'object') {
+            return this.tags;
+        }
+        else if (typeof this.tags === 'string') {
+            try {
+                return JSON.parse(this.tags);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing tags prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    articleClasses() {
+        return [
+            this.description ? (this.tiny ? 'min-h-120' : 'min-h-156') : 'h-auto',
+            this.bg ? 'bg-inverse' : 'bg-default',
+            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
+            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
+        ].join(' ');
+    }
+    handleClick() {
+        var _a;
+        index$1.sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (index.h("article", { key: 'e8965da0703c85bcba94c324028c0d8c0b6c8e13', class: this.articleClasses(), onClick: () => this.handleClick() }, index.h("eds-card-title", { key: '54b1fff3f3a32c26ef68cd33c85c2f2fd8a0fc52', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (index.h("eds-card-desc", { key: '8ee395e5f84e6bdf7651554d9806147d03a9324c', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (index.h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (index.h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, index.h("div", { key: 'd73e14a888d2015a39f86913b6cc9428fda67f59', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.style, label: tag.label })))), ' '));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsCardGeneric.style = edsCardGenericCss;
+
+exports.eds_card_generic = EdsCardGeneric;

package/dist/cjs/eds-card-project.cjs.entry.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+const index$1 = require('./index-96a4261e.js');
+require('./index-1ff5f25c.js');
+
+const EdsCardProject = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.image = undefined;
+        this.editorialTitle = undefined;
+        this.headingLevel = 'h3';
+        this.categoryTitle = undefined;
+        this.color = undefined;
+        this.bgOnHover = false;
+        this.vertical = false;
+        this.titleProject = undefined;
+        this.url = undefined;
+        this.parsedImage = null;
+    }
+    componentWillLoad() {
+        // Parse the image prop if it's provided
+        if (this.image) {
+            try {
+                this.parsedImage = JSON.parse(this.image);
+                //console.log(this.parsedImage);
+            }
+            catch (error) {
+                //console.error('Error parsing image prop:', error);
+            }
+        }
+    }
+    handleClick(event) {
+        var _a;
+        event.preventDefault();
+        index$1.sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.titleProject) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        var _a;
+        const cardClasses = [
+            'min-h-156 border-inside after:border-softest @container overflow-hidden border-0 after:rounded-lg',
+            this.color
+                ? index$1.gradientBGColorVariants({
+                    color: this.color,
+                    hover: this.bgOnHover,
+                    class: 'before:border-2 before:rounded-lg before:border-softest'
+                })
+                : 'bg-default',
+            this.bgOnHover && this.color
+                ? 'effect-background bg-default focus-within:bg-transparent hover:bg-transparent'
+                : 'effect-background hover:bg-default',
+            this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'
+        ].join(' ');
+        const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
+        return (index.h("article", { key: '6af49754300ded8748ac3f40175e262480054969', class: cardClasses, onClick: (event) => this.handleClick(event) }, index.h("div", { key: '91e8501312957c44d9dc075f2ec3a9e5a5d425cb', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, index.h("div", { key: '44e3cf2d67255bb5669b6c721741ed060ba599e7', class: "lg:max-w-[720px]" }, index.h("eds-card-title", { key: '0cf1d124b975e4d7223bab58db0d5861d348ceb2', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (index.h("span", { key: '85e1158691ae876bc0f3c6d0c5557f394ae935cb', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (index.h("div", { key: '9ffdc9f14709600b623c3a5f878b2700864ced79', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && index.h("eds-tag", { key: 'ecc5e55430df355c13420add9969855d1d54c27f', label: this.categoryTitle })))), this.parsedImage && (index.h("div", { key: '97de7a06a13d9843cb18fe4eb19303f436e2ce16', class: imageClasses }, index.h("div", { key: '532d3c8252316a68976b4587c3d5b63167c0c598', class: "aspect-1x1 w-full" }, index.h("eds-img", Object.assign({ key: '37ee3dbbc99ec8c9139b0a89f9c725768eac5f6d', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.eds_card_project = EdsCardProject;

package/dist/cjs/eds-card-section.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+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}}";
+
+const EdsCardSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cards = undefined;
+        this.cols = 4;
+    }
+    /**
+     * Parses the `cards` JSON string prop into an array of card objects.
+     * If parsing fails, returns an empty array.
+     *
+     * @returns {any[]} An array of parsed card objects.
+     */
+    get parsedCards() {
+        try {
+            return JSON.parse(this.cards);
+        }
+        catch (e) {
+            //console.error('Error parsing links JSON', e);
+            return [];
+        }
+    }
+    /**
+     * Renders the card section as a grid layout.
+     * Each parsed card object is mapped to an `<eds-card-generic>` component,
+     * displaying card details such as title, description, avatar, etc.
+     *
+     * @returns {JSX.Element} The rendered section containing a list of cards.
+     */
+    render() {
+        return (index.h("section", { key: '587f8d95e27862e855a7aab3d157b3b26c12181e', class: "w-full" }, index.h("ul", { key: 'e655546e5e92dbbfb5640f448409584b4f83a98d', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (index.h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, index.h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+    }
+};
+EdsCardSection.style = edsCardSectionCss;
+
+exports.eds_card_section = EdsCardSection;

package/dist/cjs/eds-card-tags.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+const edsCardTagsCss = ".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}";
+
+const EdsCardTags = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.accent = false;
+        this.tags = [];
+    }
+    render() {
+        return (index.h("div", { key: 'b201dc6df5e809d828a055fb5f01fe798e228361', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: this.accent ? 'accent' : 'default', label: tag })))));
+    }
+};
+EdsCardTags.style = edsCardTagsCss;
+
+exports.eds_card_tags = EdsCardTags;

package/dist/cjs/eds-card-title.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+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}";
+
+const EdsCardTitle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.url = undefined;
+        this.titleClass = undefined;
+        this.headingLevel = 'h3';
+        this.externalLink = false;
+        this.cardTitle = undefined;
+        this.hierarchy = true;
+    }
+    /**
+     * Dynamically generate the title class based on the heading level.
+     */
+    getTitleClass() {
+        const levelMap = this.hierarchy
+            ? {
+                h1: '05',
+                h2: '05',
+                h3: '05',
+                h4: '05',
+                h5: '05',
+                h6: '06'
+            }
+            : {
+                h1: '01',
+                h2: '02',
+                h3: '03',
+                h4: '04',
+                h5: '05',
+                h6: '06'
+            };
+        return `f-heading-${levelMap[this.headingLevel]}`;
+    }
+    /*private getTag() {
+      if (this.url) {
+        return 'a';
+      }
+      return 'span';
+    }*/
+    render() {
+        //const Tag = this.getTag();
+        const Heading = this.headingLevel;
+        return (index.h(Heading, { key: '8aee3bcb0e04508dd21a03ea0f695e040f37c767', class: this.getTitleClass() }, index.h("a", { key: 'c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+    }
+};
+EdsCardTitle.style = edsCardTitleCss;
+
+exports.eds_card_title = EdsCardTitle;

package/dist/cjs/eds-card-tool.cjs.entry.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+const index$1 = require('./index-96a4261e.js');
+require('./index-1ff5f25c.js');
+
+const edsCardToolCss = ".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}";
+
+const EdsCardTool = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cardTitle = undefined;
+        this.url = undefined;
+        this.description = undefined;
+        this.image = undefined;
+        this.avatar = undefined;
+        this.shortAbbreviation = undefined;
+        this.headingLevel = 'h5';
+        this.tags = '';
+        this.tiny = false;
+        this.bg = true;
+        this.withHover = true;
+        this.external = false;
+        this.hierarchy = true;
+    }
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags() {
+        if (typeof this.tags === 'object') {
+            return this.tags;
+        }
+        else if (typeof this.tags === 'string') {
+            try {
+                return JSON.parse(this.tags);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    componentWillLoad() { }
+    parseTags() {
+        return this.tags.split(',');
+    }
+    articleClasses() {
+        return [
+            this.tiny ? 'min-h-120' : 'min-h-156',
+            this.bg ? 'bg-inverse' : 'bg-default',
+            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
+            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
+        ].join(' ');
+    }
+    handleClick() {
+        var _a;
+        //event.preventDefault();
+        index$1.sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (index.h("article", { key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, index.h("eds-card-title", { key: 'a4da791280db14754b445b1a52e33cc9a25f765e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (index.h("eds-card-desc", { key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (index.h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (index.h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, index.h("div", { key: '46307b57160f908aa7066b2a636c4db38e0e7a8e', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.style, label: tag.label }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsCardTool.style = edsCardToolCss;
+
+exports.eds_card_tool = EdsCardTool;

package/dist/cjs/eds-card-wrapper.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+const EdsCardWrapper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tiny = false;
+        this.withBg = true;
+        this.withHover = true;
+    }
+    hasSlot(name) {
+        if (name) {
+            return !!this.el.querySelector(`[slot="${name}"]`);
+        }
+        return !!this.el.querySelector(':not([slot])');
+    }
+    render() {
+        const articleClasses = [
+            this.tiny ? 'min-h-120' : 'min-h-156',
+            this.withBg ? '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(' ');
+        return (index.h("article", { key: 'c52f6ad7873050c052b8c0e68b2c812d74f2ddf1', class: articleClasses }, index.h("slot", { key: 'dac6f9fe339c8baa191ee2fd622332ddf25ec08d' }), this.hasSlot('footer') && (index.h("div", { key: '301862515ba88f320d1af722bec6120bc3e7d723', class: "mt-auto" }, index.h("slot", { key: '85d939150663a4586934413c9965aa92a9babeef', name: "footer" })))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.eds_card_wrapper = EdsCardWrapper;