@ebrains/components 0.0.1-alpha.0

package/dist/cjs/correct-use-of-colors.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+const primary = [
+    {
+        background: '#9CE142'
+    },
+    {
+        background: '#00C959'
+    },
+    {
+        background: '#00A595'
+    }
+];
+const support = [
+    {
+        background: '#141414'
+    },
+    {
+        background: '#383838'
+    },
+    {
+        background: '#CCCCCC'
+    },
+    {
+        background: '#E6E6E6'
+    },
+    {
+        background: '#FFFFFF'
+    }
+];
+const blue = [
+    {
+        background: '#3FA9F5'
+    },
+    {
+        background: '#0644F4'
+    }
+];
+const purple = [
+    {
+        background: '#C461FF'
+    },
+    {
+        background: '#5D3DF9'
+    }
+];
+const red = [
+    {
+        background: '#FFA543'
+    },
+    {
+        background: '#FF4D68'
+    }
+];
+const CorrectUseOfColors = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: '74aa6fcf077ee0f8ffb30e48b388699565d027ae', class: "container" }, index.h("p", { key: '2d1ce73998a1fe581f2e0084b0d14b12896b9ea9', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '56f7b3bf0f26487ce0f3742d4cac82f9cd78cd80', label: "primary", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", index.h("eds-link", { key: 'af2f1c9dc2f3ce3e53ddaa4d116841201815369c', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), index.h("div", { key: 'df3f4033ee166a0eb59f5e6d34c6573a74cb0a41', class: "flex" }, index.h("div", { key: '4805b4ab6c53e01d303df8683e6e279da29749fa', class: "w-full" }, index.h("ul", { key: '80e5def16148d8377731cb92f865eeacd2558750', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'f0dcc515f6b9dcfcaeb65f0d9a68bd8c81e85e76', class: "w-full" }, index.h("ul", { key: '507ddd79c0ccf5dfcfca36de9b9d7ad2a3c2fff4', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: '696a40e2fde6810d4652768e6e3aa94b785073a7', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: '69999f902476bce4b6e3d67264b4c707b07b7501', label: "purple", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", index.h("eds-link", { key: '51321fa3a7c219dec8f43559c97a9b8654f45bbd', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), index.h("div", { key: 'f0c8a66e81cd968b40b6b40547118d29957822ed', class: "flex" }, index.h("div", { key: 'e5df5ea36c4953943eec98b252d8f7cb16ba7691', class: "w-full" }, index.h("ul", { key: '8786457bdfd058c75bd4100398549ad4cf54a974', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '8c2c4be0b5cef8219cfdfffe2bba7da6745af720', class: "w-full" }, index.h("ul", { key: '4bb7edfb7048522b18c338b0190760e755a7859f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: 'cde93ab4d8198cf0f1e04c8af9617c2a1afc8804', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: 'ce6d84aa369f1509e9ef2d9418282d1307aba27e', label: "blue", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", index.h("eds-link", { key: '9033315eae2e61ee1f50c473c5171bba151b9f26', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), index.h("div", { key: '3b28d87bd0824e84b8a1b36c50f36f214dd6f58f', class: "flex" }, index.h("div", { key: '3a088d08c67c43fb5a4bf70a703f8a0667c40877', class: "w-full" }, index.h("ul", { key: 'd773d5c724306bfdffcfb8685cabbc570f2c347b', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '526015f7431ade04dcc569b71fe9b0d7ee853fb9', class: "w-full" }, index.h("ul", { key: 'ea6f0569fac6c7678df0f431605a1b52c2cf3198', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), index.h("p", { key: 'ea15819fa41c0f0303a849ba50dbf889f7b06171', class: "f-body-01" }, "This guide demonstrates the correct usage of the", index.h("eds-link", { key: 'd1a5d00980846fb31014b9bc9631fe6fecc406ab', label: "redish", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", index.h("eds-link", { key: 'b5111ad668077a29d2b89caf182ce1d6f7c83941', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), index.h("div", { key: '3418135ed8af2a53b819c062c4090513c706895c', class: "flex" }, index.h("div", { key: 'e304ed3c2895a699b703cae1041bc1f495d4df9d', class: "w-full" }, index.h("ul", { key: '9bd9ec31d7239b5adcd48842ae7507bc9a4f938c', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'a5d47f7a62e5d5af432915cb43a3ecfd84ee9ef3', class: "w-full" }, index.h("ul", { key: '9fb1be5f4635f01482db671998990b688d63d310', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+    }
+};
+
+exports.correct_use_of_colors = CorrectUseOfColors;

package/dist/cjs/eds-accordion.cjs.entry.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-383d2951.js');
+
+const edsAccordionCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-36{min-height:2.25rem}.min-h-44{min-height:2.75rem}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.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}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-20{padding-top:1.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.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)}.text-left{text-align:left}.text-center{text-align:center}";
+
+const EdsAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.accordionChange = index.createEvent(this, "accordionChange", 7);
+        /**
+         * Handles the click event on the accordion header to toggle expansion.
+         * Toggles the `isExpanded` state and emits the `accordionChange` event.
+         */
+        this.handleClick = () => {
+            this.isExpanded = !this.isExpanded;
+            this.accordionChange.emit(this.isExpanded);
+            this.setPanelHeight();
+        };
+        /**
+         * Calculates and sets the panel height based on the content height
+         * and adjusts based on the `shortContent` and `isExpanded` states.
+         */
+        this.setPanelHeight = () => {
+            if (this.childContentRef) {
+                this.shortContent =
+                    this.wrapperRef.scrollWidth > 830 && !this.description
+                        ? this.childContentRef.scrollHeight <= 80
+                        : this.childContentRef.scrollHeight <= 20;
+                this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
+            }
+        };
+        this.title = undefined;
+        this.description = undefined;
+        this.switchBg = true;
+        this.expanded = false;
+        this.clampText = true;
+        this.minHeightContent = false;
+        this.isExpanded = this.expanded;
+        this.panelHeight = 0;
+        this.shortContent = false;
+    }
+    /**
+     * Lifecycle method that sets up the initial panel height and adds a resize event listener
+     * to recalculate height on window resize.
+     */
+    componentDidLoad() {
+        this.setPanelHeight();
+        // Emit context for each eds-link element after the component is fully loaded
+        const btn = this.el.shadowRoot.querySelector('eds-button');
+        this.emitContext(btn);
+        window.addEventListener('resize', this.setPanelHeight);
+    }
+    /**
+     * 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.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    /**
+     * Lifecycle method that cleans up the resize event listener when the component is removed.
+     */
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.setPanelHeight);
+    }
+    /**
+     * Renders the accordion structure, including header, content, description, and any slotted content.
+     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
+     */
+    render() {
+        const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
+        return (index.h("div", { key: 'fc5727e75b74058ee2ce86f99f77cf0b09fca4aa', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
+          ${this.switchBg ? 'hover:bg-inverse' : ''} 
+          ${minHeightContentClass}` }, index.h("h3", { key: 'e58c2839cf6ee75be7752acc5c54497fe8bf3dde', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), index.h("div", { key: '55724b741d8654b66da22c88a764cca1af240e78', class: "ml-auto" }, index.h("eds-button", { key: '9020e6cf183bdbc6dc83fe5c7d387f53e248bc98', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), index.h("div", { key: '2e0510604a57a9f4c9aee0de3c9b295e22946363', class: `w-full` }, this.description ? (index.h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, index.h("section", { key: 'f39f19fe2e1a6489853b5fea2ac2da2b9e954787', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, index.h("div", { key: '91c64ddbc22197fb929f55f8b6a9022c92ed729e', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, index.h("span", { key: 'c1c496948b8bfdc22573b9ec83dfbaab484db901', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, index.h("slot", { key: '758757e3cb9d4d71ecfab9764cffda697fabeaf8' })))))));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsAccordion.style = edsAccordionCss;
+
+exports.eds_accordion = EdsAccordion;