@ebrains/components 0.9.1-beta → 0.9.2-beta

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

@@ -1,204 +0,0 @@
-: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

@@ -1,141 +0,0 @@
-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";
-//import { sendAnalytics } from '../../utils/analytics';
-/**
- * A component that displays a code block with syntax highlighting.
- *
- * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
- * Python, Bash/Shell, and YAML.
- *
- * */
-export class EdsCodeBlock {
-    constructor() {
-        this.code = undefined;
-        this.language = undefined;
-        this.copied = false;
-    }
-    /**
-     * Copies the current code content to the clipboard and sets a temporary copied state.
-     *
-     * @private
-     * @returns {void}
-     */
-    copyToClipboard() {
-        navigator.clipboard.writeText(this.code).then(() => {
-            this.copied = true;
-            /*const analyticsName = this.createHumanFriendlyAnalyticsName(this.code, this.language);
-            sendAnalytics({
-              category: 'ui-component',
-              parentContext: null,
-              tag: this.el.tagName.toLowerCase(),
-              name: analyticsName || '',
-              action: 'copy'
-            });*/
-            setTimeout(() => (this.copied = false), 2000);
-        });
-    }
-    /**
-     * Utility function that creates a human-friendly analytics name based on the code and language.
-     * It uses:
-     *  - The language (in uppercase)
-     *  - The number of non-empty lines in the code
-     *  - The first non-empty line of code (truncated to 30 characters, if needed)
-     *
-     * returns A descriptive analytics name.
-     */
-    /*private createHumanFriendlyAnalyticsName(code: string, language: string): string {
-      // Count non-empty lines
-      const lines = code.split('\n').filter(line => line.trim() !== '').length;
-      
-      // Find the first non-empty line and trim it
-      let firstNonEmptyLine = code.split('\n').find(line => line.trim() !== '');
-      firstNonEmptyLine = firstNonEmptyLine ? firstNonEmptyLine.trim() : '';
-  
-      // Truncate the snippet if it’s too long
-      if (firstNonEmptyLine.length > 30) {
-        firstNonEmptyLine = firstNonEmptyLine.substring(0, 30) + '...';
-      }
-  
-      return `CodeBlock:${language.toLowerCase()}|${lines}-line(s)|${firstNonEmptyLine.toLowerCase()}`;
-    }*/
-    /**
-     * Returns the syntax-highlighted HTML for the code.
-     * If the provided language is supported by Prism, this method returns the highlighted code.
-     * Otherwise, it logs a warning and returns the raw code.
-     *
-     * @private
-     * @returns {string} The highlighted HTML string for the code block.
-     */
-    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: '98f5fe5e215e87c1eb024969b5e4f3ae1bd0cb0d', class: "relative bg-stronger rounded-sm" }, h("div", { key: '173be873a0f41398bd080758d5a0bbdcc977dcf5', 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: 'f8cb36cf89d19bf306c57168e61ccfde9a4d18ff', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '74f214c47dc647c2c254f3f9f96fba71e35133df', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '74e628574b481d68c2d2132a12fd07bb62c86fde', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '19d2b813b6e86451a8a9047b954d99340fc3cd85', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '974eb2e2ef0d7dc90e012e421d64bf5b735761d1', 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": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-}

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

@@ -1,78 +0,0 @@
-export default {
-    title: 'Components/CodeBlock',
-    component: 'eds-code-block',
-    argTypes: {
-        code: {
-            control: 'text',
-            description: 'The code content to display in the code block.'
-        },
-        language: {
-            control: 'text',
-            description: 'The language type for syntax highlighting (e.g., "javascript", "python", "bash", "yaml").'
-        }
-    },
-    args: {
-        code: "const greeting = 'Hello, world!';\nconsole.log(greeting);",
-        language: 'javascript'
-    }
-};
-export const Default = {
-    render: (args) => `
-      <eds-code-block 
-        code="${args.code}" 
-        language="${args.language}"
-      ></eds-code-block>
-    `,
-    args: {
-        code: "const greeting = 'Hello, world!';\nconsole.log(greeting);",
-        language: 'javascript'
-    }
-};
-export const PythonExample = {
-    render: (args) => `
-      <eds-code-block 
-        code="${args.code}" 
-        language="${args.language}"
-      ></eds-code-block>
-    `,
-    args: {
-        code: "def hello_world():\n    print('Hello, world!')",
-        language: 'python'
-    }
-};
-export const BashExample = {
-    render: (args) => `
-      <eds-code-block 
-        code="${args.code}" 
-        language="${args.language}"
-      ></eds-code-block>
-    `,
-    args: {
-        code: '#!/bin/bash\necho "Hello, world!"',
-        language: 'bash'
-    }
-};
-export const YamlExample = {
-    render: (args) => `
-      <eds-code-block 
-        code="${args.code}" 
-        language="${args.language}"
-      ></eds-code-block>
-    `,
-    args: {
-        code: 'greeting: "Hello, world!"',
-        language: 'yaml'
-    }
-};
-export const UnsupportedLanguage = {
-    render: (args) => `
-      <eds-code-block 
-        code="${args.code}" 
-        language="${args.language}"
-      ></eds-code-block>
-    `,
-    args: {
-        code: 'This is a code block with an unsupported language. It will render without syntax highlighting.',
-        language: 'unknown'
-    }
-};

package/dist/collection/components/eds-dropdown/eds-dropdown.css

@@ -1,117 +0,0 @@
-  .z-focus {
-      z-index: 99;
-  }
-
-  .relative {
-      position: relative;
-  }
-
-  .shadow-small {
-      --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);
-      --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .bg-inverse {
-      background-color: var(--white);
-  }
-
-  .border-softest {
-      border: 2px solid rgba(0, 0, 0, .05);
-  }
-
-  .z-10 {
-      z-index: 10;
-  }
-
-  .z-on-top {
-      z-index: 99999;
-  }
-
-  .absolute {
-      position: absolute;
-  }
-
-  .top-full {
-      top: 100%;
-  }
-
-  .mt-4 {
-      margin-top: 0.25rem;
-  }
-
-  .mt-6 {
-      margin-top: 0.375rem;
-  }
-
-  .mt-8 {
-      margin-top: 0.5rem;
-  }
-
-  .block {
-      display: block;
-  }
-
-  .inline-block {
-      display: inline-block;
-  }
-
-  .inline {
-      display: inline;
-  }
-
-  .flex {
-      display: flex;
-  }
-
-  .inline-flex {
-      display: inline-flex;
-  }
-
-  .flex-col {
-      flex-direction: column;
-  }
-
-  .gap-y-4 {
-      row-gap: 0.25rem;
-  }
-
-  .rounded-lg {
-      border-radius: 16px;
-  }
-
-  .border-2 {
-      border-width: 2px;
-  }
-
-  .p-8 {
-      padding: 0.5rem;
-  }
-
-  .left-0 {
-      left: 0rem;
-  }
-
-  .left-1\/2 {
-      left: 50%;
-  }
-
-  .left-4 {
-      left: 0.25rem;
-  }
-
-  .left-\[4px\] {
-      left: 4px;
-  }
-
-  .right-0 {
-      right: 0rem;
-  }
-
-  .right-4 {
-      right: 0.25rem;
-  }
-
-  .right-8 {
-      right: 0.5rem;
-  }