@ebrains/components 0.9.0-beta → 0.9.2-beta

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

@@ -1,228 +0,0 @@
-import { h } from "@stencil/core";
-import { sendAnalytics } from "../../../utils/analytics";
-import { gradientBGColorVariants } from "../../../utils/color";
-/**
- * @internal
- */
-export class EdsCardProject {
-    constructor() {
-        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();
-        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
-                ? 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 (h("article", { key: '067a30c2b0860d71dc13d1d3d875a7e288de842b', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '3e2e62ecc9ad5973c359b7bbceefd8c2ac682d0b', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: 'e07a666f80d6955b5cf16c18a999a756dcfe10f0', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'b1ef62c888e9d69f1146fc218a7012015ddc78e1', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '79cf1af876a0a358a9f65036a1ff1c4944604435', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'ce7e525b0bdbbc94d3e2ec8055c692be9d521042', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: '23e3527a3772970642dcb07a4abc381415132155', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '178ef2273b2506070c045c3f2e7a287d4b175414', class: imageClasses }, h("div", { key: 'f77fb56cd2ed1bdcafd07db9adcf0f7b6a44cdb7', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'b9734f48ab685280b801cfb75cc96f5aa109ca6f', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
-    }
-    static get is() { return "eds-card-project"; }
-    static get properties() {
-        return {
-            "image": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Image data for the card. Expects a JSON string with image attributes (src, alt, srcset, sizes, etc.)."
-                },
-                "attribute": "image",
-                "reflect": false
-            },
-            "editorialTitle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional editorial title displayed in the card."
-                },
-                "attribute": "editorial-title",
-                "reflect": false
-            },
-            "headingLevel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
-                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the heading level for the project title. Defaults to 'h3'.\nAccepts values: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'."
-                },
-                "attribute": "heading-level",
-                "reflect": false,
-                "defaultValue": "'h3'"
-            },
-            "categoryTitle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The category title for the card, displayed as a tag."
-                },
-                "attribute": "category-title",
-                "reflect": false
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Color variant for the card background. It affects the background and border styles."
-                },
-                "attribute": "color",
-                "reflect": false
-            },
-            "bgOnHover": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines if the background color changes on hover. Defaults to `false`."
-                },
-                "attribute": "bg-on-hover",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "vertical": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the card will be displayed vertically. Defaults to `false`."
-                },
-                "attribute": "vertical",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "titleProject": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Title of the project displayed in the card."
-                },
-                "attribute": "title-project",
-                "reflect": false
-            },
-            "url": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "URL that the project title links to."
-                },
-                "attribute": "url",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "parsedImage": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-}

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

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

@@ -1,314 +0,0 @@
-import { sendAnalytics } from "../../../utils/analytics";
-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: '5ecce6667d066e78586f795ab260bed569434c4f', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: 'a6ff863ade669db7494c763d563809dbfddb3f2c', "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: '6f5328fba79a564e6e0d737b2d64a31e50ea6434', 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: 'b1a42a1db9274ebf1098143d56e1ad8a08825c4c', 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"; }
-}