@ebrains/components 0.0.1-alpha.0 → 0.2.0-alpha.0

package/dist/esm/eds-header.entry.js

@@ -1,92 +0,0 @@
-import { r as registerInstance, a as createEvent, h, g as getElement } from './index-b384416e.js';
-
-const edsHeaderCss = "";
-
-const EdsHeader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.toggleMenu = createEvent(this, "toggleMenu", 7);
-        this.homeUrl = '/';
-        this.links = undefined;
-        this.inverseHeader = false;
-        this.userFeature = false;
-        this.menuEnabled = false;
-        this.keycloakUrl = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
-        this.isMenuOpen = false;
-        this.isUserMenuOpen = false;
-        this.isAuthenticated = false;
-    }
-    onAuthStatusChanged(event) {
-        var _a;
-        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
-    }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
-     */
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.hostEl.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.hostEl.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    /** Emits an event to open or close the menu */
-    handleToggleMenu() {
-        this.toggleMenu.emit(!this.isMenuOpen);
-    }
-    /**
-     * Toggles the visibility of the user menu.
-     * Opens the user menu if closed, and closes it if open.
-     */
-    toggleUserMenu() {
-        this.isUserMenuOpen = !this.isUserMenuOpen;
-    }
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
-     */
-    get parsedLinks() {
-        if (typeof this.links === 'object') {
-            return this.links;
-        }
-        else if (typeof this.links === 'string') {
-            try {
-                return JSON.parse(this.links);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing links prop:', e);
-                return [];
-            }
-        }
-        return [];
-    }
-    render() {
-        return (h("header", { key: 'ada0f6cf611eb63a4963e9298ecdd45e0f1db9ad', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: 'f45518003994b6d65d4adc96d8964c522ca1f0b1', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'e3cc9f3e073db38a589e07c2bcefa7b7a073f04e', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'adc24fa98544deb24e9f3a4617ffd2f88971ad13', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'e17167277f917f80dd5a692a974d7a0dac29e5cf', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '8bee016a6055fb4f7689aa5c0ce0a6666c1ce52b' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
-    }
-    get hostEl() { return getElement(this); }
-};
-EdsHeader.style = edsHeaderCss;
-
-export { EdsHeader as eds_header };

package/dist/esm/eds-icon-wrapper.entry.js

@@ -1,36 +0,0 @@
-import { r as registerInstance, h } from './index-b384416e.js';
-
-const EdsIconWrapper = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.TagName = null;
-        this.icon = 'arrow-right';
-        this.class = '';
-        this.IconComponent = null;
-    }
-    componentWillLoad() {
-        this.loadIconComponent(this.icon);
-    }
-    iconChanged(newValue) {
-        this.loadIconComponent(newValue);
-    }
-    async loadIconComponent(iconName) {
-        try {
-            // Dynamically import the Stencil icon component based on the icon name
-            this.IconComponent = `eds-icon-${iconName}`;
-        }
-        catch (error) {
-            //console.error(`Failed to load icon component: ${iconName}`, error);
-            this.IconComponent = `eds-icon-unknown`;
-        }
-    }
-    render() {
-        const IconComponent = this.IconComponent;
-        return IconComponent ? h(IconComponent, { class: this.class }) : null;
-    }
-    static get watchers() { return {
-        "icon": ["iconChanged"]
-    }; }
-};
-
-export { EdsIconWrapper as eds_icon_wrapper };

package/dist/esm/eds-img.entry.js

@@ -1,53 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
-
-const edsImgCss = "/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n    display: block;\n    /* 1 */\n    vertical-align: middle;\n    /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n    max-width: 100%;\n    height: auto;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.justify-between {\n    justify-content: space-between;\n}\n\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n    position: relative;\n    z-index: 1;\n\n    &::before {\n        position: absolute;\n        content: '';\n        z-index: -1;\n        inset: 0;\n        background-color: rgba(208, 208, 208, 0.75);\n        opacity: 0.75;\n        background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n        background-position: 0 0, 8px 8px;\n        background-size: 16px 16px;\n    }\n}\n\n.effect-opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.object-cover {\n    -o-object-fit: cover;\n    object-fit: cover;\n}\n\n.object-center {\n    -o-object-position: center;\n    object-position: center;\n}\n\n.opacity-0 {\n    opacity: 0;\n}\n\n.opacity-100 {\n    opacity: 1;\n}";
-
-const EdsImg = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.img = null;
-        this.handleLoad = () => {
-            this.loaded = true;
-            this.showBg = false;
-        };
-        this.handleTransitionEnd = () => {
-            this.showBg = false;
-        };
-        this.src = undefined;
-        this.alt = undefined;
-        this.width = undefined;
-        this.height = undefined;
-        this.srcset = undefined;
-        this.sizes = undefined;
-        this.formats = [];
-        this.lazyload = true;
-        this.withBg = true;
-        this.loaded = !this.lazyload;
-        this.showBg = this.withBg;
-    }
-    componentDidLoad() {
-        if (this.img && this.img.complete) {
-            this.loaded = true;
-            this.showBg = false;
-        }
-    }
-    render() {
-        const imgOpts = {};
-        if (this.lazyload) {
-            imgOpts['loading'] = 'lazy';
-            imgOpts['decoding'] = 'async';
-        }
-        return (h("div", { key: 'fde8a77bb251e3be2ec3a42b8d83f585eae65b2c', class: {
-                'items-center justify-center': true,
-                'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'e512cbd9134f14f5418856cf451cddfb93ca1760' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '98339035b8d055d8bb8de654ce1f4ba410ef3865', ref: (el) => (this.img = el), class: {
-                'effect-opacity object-cover object-center': true,
-                'opacity-100': this.loaded,
-                'opacity-0': !this.loaded
-            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onTransitionEnd: this.handleTransitionEnd })))));
-    }
-    get imgElement() { return getElement(this); }
-};
-EdsImg.style = edsImgCss;
-
-export { EdsImg as eds_img };