@ebrains/components 0.0.1-alpha.0

package/dist/collection/components/eds-cards/eds-card-tool/eds-card-tool.css

@@ -0,0 +1,103 @@
+.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;
+  }

package/dist/collection/components/eds-cards/eds-card-tool/eds-card-tool.js

@@ -0,0 +1,314 @@
+import { sendAnalytics } from "../../../../../../../../packages/utils/src/index";
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsCardTool {
+    constructor() {
+        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();
+        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 (h("article", { key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, 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 && (h("eds-card-desc", { key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '46307b57160f908aa7066b2a636c4db38e0e7a8e', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+    }
+    static get is() { return "eds-card-tool"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-tool.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-tool.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the card. This is required and displayed prominently."
+                },
+                "attribute": "card-title",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that the card title links to. If provided, the title becomes a clickable link."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text displayed within the card."
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "image": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The image associated with the card. Can be passed as an object with image attributes."
+                },
+                "attribute": "image",
+                "reflect": false
+            },
+            "avatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL or path to the avatar image. Used as a fallback when no card image is available."
+                },
+                "attribute": "avatar",
+                "reflect": false
+            },
+            "shortAbbreviation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short abbreviation or initials for displaying when no image or avatar is provided."
+                },
+                "attribute": "short-abbreviation",
+                "reflect": false
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading level for the card title, such as 'h1', 'h2', etc.\nDefault is 'h3'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h5'"
+            },
+            "tags": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A comma-separated string of tags related to the card content."
+                },
+                "attribute": "tags",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "tiny": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should be displayed with a smaller height.\nIf true, the card will use the 'tiny' height class."
+                },
+                "attribute": "tiny",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should have a background color.\nIf true, the card will have a background, otherwise it will not."
+                },
+                "attribute": "bg",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "withHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should display a hover effect.\nIf true, the card will have a shadow effect and change its cursor on hover."
+                },
+                "attribute": "with-hover",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the link should open in a new tab if the URL is provided.\nDefault is `false`."
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hierarchy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the hierarchy is enabled.\nIf true, all headings except 'h6' map to '05', and 'h6' maps to '06'."
+                },
+                "attribute": "hierarchy",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/eds-code-block/eds-code-block.css

@@ -0,0 +1,177 @@
+:host {
+  display: block;
+  font-family: var(--font-family, 'Courier New', monospace);
+}
+
+pre[class*="language-"] {
+  white-space: pre-wrap; /* Preserve line breaks */
+  word-break: break-word; /* Prevent horizontal scrolling for long lines */
+}
+
+.language {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+pre {
+  margin: 0;
+  border-radius: 8px;
+  color: var(--purple-200);
+  overflow: auto;
+}
+
+code {
+  font-family: 'Courier New', monospace;
+}
+
+/* Example color coding for syntax highlighting */
+.token.keyword {
+  color: var(--purple-500);
+}
+
+.token.string {
+  color: var(--green-500);
+}
+
+.token.function {
+  color: var(--cyan-500);
+}
+
+.token.comment {
+  color: var(--grey-700);
+}
+
+.relative {
+  position: relative;
+}
+
+.bg-stronger {
+  background-color: var(--grey-900);
+}
+
+.rounded-sm {
+  border-radius: 8px;
+}
+.rounded-xs {
+  border-radius: 4px;
+}
+
+.text-inverse {
+  color: var(--white);
+}
+.text-light {
+  color: var(--grey-700);
+}
+.text-lighter {
+  color: var(--grey-600);
+}
+.text-lightest {
+  color: var(--grey-500);
+}
+
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+.p-0 {
+  padding: 0rem;
+}
+.p-12 {
+  padding: 0.75rem;
+}
+.p-16 {
+  padding: 1rem;
+}
+.p-20 {
+  padding: 1.25rem;
+}
+.p-6 {
+  padding: 0.375rem;
+}
+.p-8 {
+  padding: 0.5rem;
+}
+.pl-8 {
+  padding-left: 0.5rem;
+}
+
+.mb-10 {
+  margin-bottom: 0.625rem;
+}
+.mb-12 {
+  margin-bottom: 0.75rem;
+}
+.mb-28 {
+  margin-bottom: 1.75rem;
+}
+.pb-16 {
+  padding-bottom: 1rem;
+}
+.pb-20 {
+  padding-bottom: 1.25rem;
+}
+.pb-28 {
+  padding-bottom: 1.75rem;
+}
+.pb-60 {
+  padding-bottom: 3.75rem;
+}
+.pb-8 {
+  padding-bottom: 0.5rem;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}
+.mt-2 {
+  margin-top: 0.125rem;
+}
+.mt-20 {
+  margin-top: 1.25rem;
+}
+.mt-28 {
+  margin-top: 1.75rem;
+}
+
+.w-20 {
+  width: 1.25rem;
+}
+.h-20 {
+  height: 1.25rem;
+}
+
+.f-ui-03 {
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  line-height: var(--f-ui-03-lineHeight);
+  letter-spacing: var(--f-ui-03-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);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/dist/collection/components/eds-code-block/eds-code-block.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+import Prism from "prismjs"; // Import Prism.js
+import "prismjs/components/prism-python"; // Import Python language support
+import "prismjs/components/prism-bash"; // Add support for Bash/Shell
+import "prismjs/components/prism-yaml"; // Add YAML support
+//import 'prismjs/components/prism-html';
+import "prismjs/components/prism-css";
+export class EdsCodeBlock {
+    constructor() {
+        this.code = undefined;
+        this.language = undefined;
+        this.copied = false;
+    }
+    copyToClipboard() {
+        navigator.clipboard.writeText(this.code).then(() => {
+            this.copied = true;
+            setTimeout(() => (this.copied = false), 2000);
+        });
+    }
+    getHighlightedCode() {
+        if (this.language && Prism.languages[this.language]) {
+            return Prism.highlight(this.code, Prism.languages[this.language], this.language);
+        }
+        // eslint-disable-next-line
+        console.warn(`Unsupported or missing language: ${this.language}`);
+        return this.code; // Fallback if language is not provided or unsupported
+    }
+    render() {
+        return (h("div", { key: 'a99c0c8b9546b80bb3f9e21cd53c29540e8b6e06', class: "relative bg-stronger rounded-sm" }, h("div", { key: '5856f9d30bb52f791e0d8bb03a6438bc01247f66', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: 'dfb0f69dbbd1032ace5afb7fe98d899816f36610', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'b399384638265f9fcc9a824c47fe73c75bcade33', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '47c2d00b2cf86b99522dbc438726e0fc57fb6a44', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '038321e9d3d2a38963857ab8b719653f3e8385e3', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '72be161dd9781d9bc2f4d9495969175f34c19249', innerHTML: this.getHighlightedCode() })))));
+    }
+    static get is() { return "eds-code-block"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-code-block.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-code-block.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The code content to display"
+                },
+                "attribute": "code",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language type for syntax highlighting (e.g., 'javascript', 'html', 'css')"
+                },
+                "attribute": "language",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copied": {}
+        };
+    }
+}