@ebrains/react 0.5.0-alpha.0 → 0.7.0-alpha.0

package/eds-accordion.entry.esm.js

@@ -1,126 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-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 EdsAccordionStyle0 = edsAccordionCss;
-const EdsAccordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.accordionChange = 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 = () => {
-      var _a;
-      this.isExpanded = !this.isExpanded;
-      this.accordionChange.emit(this.isExpanded);
-      this.setPanelHeight();
-      sendAnalytics({
-        category: 'ui-component',
-        parentContext: null,
-        tag: this.el.tagName.toLowerCase(),
-        name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-        action: this.isExpanded ? 'expanded' : 'collapsed'
-      });
-    };
-    /**
-     * 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();
-    window.addEventListener('resize', this.setPanelHeight);
-  }
-  /**
-   * 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 h("div", {
-      key: '00bd9a34ceb469bef74c827bd1f48bf3d4b545b6',
-      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}`
-    }, h("h3", {
-      key: 'ab6a953797e0a8379a01a9a2f00a4988d4fc8357',
-      class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1"
-    }, this.title), h("div", {
-      key: 'cfd6f4ad2ec5e412cdf2348d188dfcf90770012d',
-      class: "ml-auto"
-    }, h("eds-button", {
-      key: 'beaee69d610727b397645fc0a507b234003fde5e',
-      id: "toggleAccordion",
-      intent: "tertiary",
-      "aria-expanded": this.isExpanded || this.shortContent,
-      "aria-label": "Toggle accordion",
-      "aria-controls": "accordionSection",
-      class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`,
-      onClick: this.handleClick,
-      icon: "chevron-down"
-    })), h("div", {
-      key: '795f14c0930a0b0862a86451cc7b7e807cb79c37',
-      class: `w-full`
-    }, this.description ? h("span", {
-      class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
-    }, this.description) : null, h("section", {
-      key: '28f6cba233cdee58743faaacc992bf7497c2ff2e',
-      id: "accordionSection",
-      role: "region",
-      "aria-labelledby": "accordionHeader",
-      "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'
-      }
-    }, h("div", {
-      key: '939e442c55babfd3f1750d20d9b95f664c3a67c8',
-      ref: el => this.childContentRef = el,
-      class: `accordion-content effect-color pt-20`,
-      "aria-hidden": !this.isExpanded
-    }, h("span", {
-      key: '648d16ed84cb3da227a10e6370004c6479789aed',
-      class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
-    }, h("slot", {
-      key: '90ca94f15e408b4b05c0eac4bd20fa21766cbb19'
-    }))))));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsAccordion.style = EdsAccordionStyle0;
-
-export { EdsAccordion as eds_accordion };