@ebrains/components 0.9.0-beta → 0.9.1-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +9 -0
  3. package/dist/cjs/components.cjs.js +1 -1
  4. package/dist/cjs/eds-accordion.cjs.entry.js +4 -4
  5. package/dist/cjs/{eds-avatar_24.cjs.entry.js → eds-avatar_26.cjs.entry.js} +186 -5
  6. package/dist/cjs/{eds-card-desc_3.cjs.entry.js → eds-card-desc_2.cjs.entry.js} +0 -35
  7. package/dist/cjs/eds-card-generic.cjs.entry.js +2 -2
  8. package/dist/cjs/eds-matomo-notice.cjs.entry.js +2 -2
  9. package/dist/cjs/eds-modal.cjs.entry.js +5 -5
  10. package/dist/cjs/eds-section-core_2.cjs.entry.js +2 -2
  11. package/dist/cjs/eds-switch.cjs.entry.js +2 -2
  12. package/dist/cjs/eds-tabs.cjs.entry.js +5 -5
  13. package/dist/cjs/eds-timeline.cjs.entry.js +1 -1
  14. package/dist/cjs/index-2f63169d.js +4 -8
  15. package/dist/cjs/loader.cjs.js +1 -1
  16. package/dist/collection/components/eds-accordion/eds-accordion.js +5 -5
  17. package/dist/collection/components/eds-breadcrump/eds-breadcrump.js +8 -1
  18. package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.css +5 -0
  19. package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.js +1 -1
  20. package/dist/collection/components/eds-link/eds-link.css +6 -6
  21. package/dist/collection/components/eds-modal/eds-modal.js +6 -6
  22. package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js +5 -2
  23. package/dist/collection/components/eds-switch/eds-switch.js +3 -3
  24. package/dist/collection/components/eds-tag/eds-tag.css +45 -0
  25. package/dist/collection/components/eds-tag/eds-tag.js +31 -5
  26. package/dist/collection/components/eds-tag/eds-tag.stories.js +11 -4
  27. package/dist/collection/components/eds-timeline/eds-timeline.css +20 -0
  28. package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js +3 -3
  29. package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js +3 -3
  30. package/dist/collection/shared-ui/eds-tabs/eds-tabs.css +20 -0
  31. package/dist/collection/shared-ui/eds-tabs/eds-tabs.js +5 -5
  32. package/dist/collection/shared-ui/eds-user/eds-user.css +20 -0
  33. package/dist/components/components.css +20 -0
  34. package/dist/components/components.esm.js +1 -1
  35. package/dist/components/eds-accordion2.js +5 -5
  36. package/dist/components/eds-breadcrumb.js +8 -1
  37. package/dist/components/eds-card-generic2.js +2 -2
  38. package/dist/components/eds-link2.js +1 -1
  39. package/dist/components/eds-matomo-notice2.js +3 -3
  40. package/dist/components/eds-modal.js +6 -6
  41. package/dist/components/eds-section-heading2.js +2 -2
  42. package/dist/components/eds-social-networks2.js +3 -3
  43. package/dist/components/eds-switch.js +2 -2
  44. package/dist/components/eds-tabs.js +6 -6
  45. package/dist/components/eds-tag2.js +15 -6
  46. package/dist/components/eds-timeline.js +1 -1
  47. package/dist/components/eds-user.js +1 -1
  48. package/dist/components/p-0467ceb5.entry.js +1 -0
  49. package/dist/components/{p-424ba743.entry.js → p-1309a74c.entry.js} +1 -1
  50. package/dist/components/p-4620ebf5.entry.js +1 -0
  51. package/dist/components/{p-bcbc7b7f.entry.js → p-94b1f974.entry.js} +1 -1
  52. package/dist/components/p-b931a634.entry.js +1 -0
  53. package/dist/components/{p-9cbcccf8.entry.js → p-c5c782e7.entry.js} +1 -1
  54. package/dist/components/p-c99745a8.entry.js +1 -0
  55. package/dist/components/p-e42eb100.entry.js +1 -0
  56. package/dist/components/{p-59d963d1.entry.js → p-e710c860.entry.js} +1 -1
  57. package/dist/components/p-f4ce515a.entry.js +1 -0
  58. package/dist/esm/components.js +1 -1
  59. package/dist/esm/eds-accordion.entry.js +4 -4
  60. package/dist/esm/{eds-avatar_24.entry.js → eds-avatar_26.entry.js} +185 -6
  61. package/dist/esm/{eds-card-desc_3.entry.js → eds-card-desc_2.entry.js} +1 -35
  62. package/dist/esm/eds-card-generic.entry.js +2 -2
  63. package/dist/esm/eds-matomo-notice.entry.js +2 -2
  64. package/dist/esm/eds-modal.entry.js +5 -5
  65. package/dist/esm/eds-section-core_2.entry.js +2 -2
  66. package/dist/esm/eds-switch.entry.js +2 -2
  67. package/dist/esm/eds-tabs.entry.js +5 -5
  68. package/dist/esm/eds-timeline.entry.js +1 -1
  69. package/dist/esm/index-8a71b9a7.js +4 -8
  70. package/dist/esm/loader.js +1 -1
  71. package/dist/hydrate/index.js +59 -40
  72. package/dist/hydrate/index.mjs +59 -40
  73. package/dist/stencil.config.js +16 -1
  74. package/dist/types/components/eds-accordion/eds-accordion.d.ts +1 -1
  75. package/dist/types/components/eds-modal/eds-modal.d.ts +1 -1
  76. package/dist/types/components/eds-section/eds-section-heading/eds-section-heading.d.ts +3 -0
  77. package/dist/types/components/eds-switch/eds-switch.d.ts +1 -1
  78. package/dist/types/components/eds-tag/eds-tag.d.ts +5 -1
  79. package/dist/types/components/eds-tag/eds-tag.stories.d.ts +7 -0
  80. package/dist/types/components.d.ts +40 -64
  81. package/dist/types/shared-ui/eds-matomo-notice/eds-matomo-notice.d.ts +1 -1
  82. package/dist/types/shared-ui/eds-social-networks/eds-social-networks.d.ts +1 -1
  83. package/dist/types/shared-ui/eds-tabs/eds-tabs.d.ts +1 -1
  84. package/package.json +3 -3
  85. package/dist/cjs/eds-breadcrumb.cjs.entry.js +0 -139
  86. package/dist/components/p-032f9f64.entry.js +0 -1
  87. package/dist/components/p-058cf100.entry.js +0 -1
  88. package/dist/components/p-1b4e9576.entry.js +0 -1
  89. package/dist/components/p-30a319d5.entry.js +0 -1
  90. package/dist/components/p-85ad681a.entry.js +0 -1
  91. package/dist/components/p-b47d115d.entry.js +0 -1
  92. package/dist/components/p-b55b0091.entry.js +0 -1
  93. package/dist/esm/eds-breadcrumb.entry.js +0 -135
@@ -0,0 +1 @@
1
+ import{r as t,c as e,h as a,g as s}from"./p-cccacbd3.js";import{m as n,a as o}from"./p-13efafb9.js";const r=class{constructor(a){t(this,a),this.consent=e(this,"consent",7),this.heading="Analytics Consent",this.description="We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.",this.optOutMessage="You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.",this.forceShow=!1,this.showNotice=!0}toggleCookiesConsent(){this.showNotice=!this.showNotice}hasCookieConsent(){return!!document.cookie.split("; ").find((t=>t.startsWith("mtm_consent=")))}optedOut(){return!!document.cookie.split("; ").find((t=>t.startsWith("mtm_consent_removed")))}getStorageKey(){return`${window.location.host}-matomo-deferred`}componentWillLoad(){if("out"===localStorage.getItem("matomo-consent-given")||this.optedOut())this.showNotice=!1;else if(this.forceShow)this.showNotice=!0;else if(this.hasCookieConsent())this.showNotice=!1;else{const t=sessionStorage.getItem(this.getStorageKey());this.showNotice=!t}}componentDidLoad(){this.el.shadowRoot.querySelectorAll("eds-button").forEach((t=>{this.emitContext(t)}))}emitContext(t){const e=new CustomEvent("parentContext",{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});t.dispatchEvent(e)}optInAnalytics(){n(),localStorage.removeItem("matomo-consent-given"),this.hideNotice(),this.consent.emit("in")}optOutAnalytics(){o(),this.hideNotice(),this.consent.emit("out")}noThanks(){localStorage.setItem("matomo-consent-given","out"),this.hideNotice()}deferDecision(){sessionStorage.setItem(this.getStorageKey(),"true"),this.hideNotice(),this.consent.emit("defer")}keepMeIn(){this.hideNotice()}hideNotice(){this.showNotice=!1}render(){return this.showNotice?a("div",{class:"fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"},a("eds-accordion",{title:this.heading,description:this.hasCookieConsent()?this.optOutMessage:this.description,switchBg:!0,expanded:!0},this.hasCookieConsent()?a("div",{class:"flex items-center gap-4"},this.optedOut()?a("eds-button",{intent:"primary",label:"Opt me in again","aria-label":"Opt me in again",onClick:()=>this.optInAnalytics()}):a("eds-button",{intent:"primary",label:"Keep Me In","aria-label":"Keep Me In",onClick:()=>this.keepMeIn()}),a("eds-button",{intent:"ghostInverse",label:"Opt-out","aria-label":"Opt-out from analytics",onClick:()=>this.optOutAnalytics()})):a("div",{class:"flex items-center gap-4"},a("eds-button",{intent:"primary",label:"I agree","aria-label":"Opt-in for analytics",onClick:()=>this.optInAnalytics()}),a("eds-button",{intent:"ghost",label:"No, thanks","aria-label":"Opt-out from analytics",onClick:()=>this.noThanks()}),a("eds-button",{intent:"ghost",label:"Ask me later","aria-label":"Defer analytics decision",onClick:()=>this.deferDecision()})))):null}get el(){return s(this)}};r.style=".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";export{r as eds_matomo_notice}
@@ -1 +1 @@
1
- import{r as t,c as s,h as i}from"./p-cccacbd3.js";const e=class{constructor(i){t(this,i),this.change=s(this,"change",7),this.toggleSwitch=()=>{this.disabled||(this.checked=!this.checked,this.change.emit(this.checked))},this.checked=!1,this.disabled=!1,this.labelOn="",this.labelOff=""}render(){const t=this.labelOn||this.labelOff?this.checked?this.labelOn:this.labelOff:"Toggle switch";return i("div",{key:"842d7ecb771ab848481c9f1f6a1aa2f5f04505a7",class:"switch-container"},this.labelOff&&i("span",{key:"f20f4293896dcbde94346e82d10ed748bdeae0f6",class:"switch-label switch-label--off"},this.labelOff),i("button",{key:"ac485fe118bae7f6a42ddb9f7edeccba2224312c",type:"button",role:"switch","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false","aria-label":t,class:{switch:!0,"switch--checked":this.checked,"switch--disabled":this.disabled},onClick:this.toggleSwitch,disabled:this.disabled},i("span",{key:"3701615162b3b8946fa5b9040e77dfa20b7de3fe",class:"switch-handle"})),this.labelOn&&i("span",{key:"b57bd428c7d6818bcec1f069a920a7aa2a2e776d",class:"switch-label switch-label--on"},this.labelOn))}};e.style=":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}";export{e as eds_switch}
1
+ import{r as t,c as s,h as i}from"./p-cccacbd3.js";const e=class{constructor(i){t(this,i),this.toggle=s(this,"toggle",7),this.toggleSwitch=()=>{this.disabled||(this.checked=!this.checked,this.toggle.emit(this.checked))},this.checked=!1,this.disabled=!1,this.labelOn="",this.labelOff=""}render(){const t=this.labelOn||this.labelOff?this.checked?this.labelOn:this.labelOff:"Toggle switch";return i("div",{key:"842d7ecb771ab848481c9f1f6a1aa2f5f04505a7",class:"switch-container"},this.labelOff&&i("span",{key:"f20f4293896dcbde94346e82d10ed748bdeae0f6",class:"switch-label switch-label--off"},this.labelOff),i("button",{key:"ac485fe118bae7f6a42ddb9f7edeccba2224312c",type:"button",role:"switch","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false","aria-label":t,class:{switch:!0,"switch--checked":this.checked,"switch--disabled":this.disabled},onClick:this.toggleSwitch,disabled:this.disabled},i("span",{key:"3701615162b3b8946fa5b9040e77dfa20b7de3fe",class:"switch-handle"})),this.labelOn&&i("span",{key:"b57bd428c7d6818bcec1f069a920a7aa2a2e776d",class:"switch-label switch-label--on"},this.labelOn))}};e.style=":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}";export{e as eds_switch}
@@ -0,0 +1 @@
1
+ import{r as e,c as i,h as t,g as n}from"./p-cccacbd3.js";import{s as o}from"./p-13efafb9.js";const r=class{constructor(t){e(this,t),this.accordion=i(this,"accordion",7),this.handleClick=()=>{var e;this.isExpanded=!this.isExpanded,this.accordion.emit(this.isExpanded),this.setPanelHeight(),o({category:"ui-component",parentContext:null,tag:this.el.tagName.toLowerCase(),name:(null===(e=this.heading)||void 0===e?void 0:e.toLowerCase())||"",action:this.isExpanded?"expanded":"collapsed"})},this.setPanelHeight=()=>{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.headerRef&&(this.headerHeight=this.headerRef.scrollHeight-30)},this.heading=void 0,this.description=void 0,this.switchBg=!0,this.expanded=!1,this.clampText=!0,this.isExpanded=this.expanded,this.panelHeight=0,this.shortContent=!1,this.headerHeight=0}componentDidLoad(){this.setPanelHeight(),window.addEventListener("resize",this.setPanelHeight)}disconnectedCallback(){window.removeEventListener("resize",this.setPanelHeight)}render(){return t("div",{key:"9545d005b8c1dab935f2dcc7d9194aacfded535e",ref:e=>this.wrapperRef=e,class:`flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 \n ${this.switchBg&&this.isExpanded?"bg-inverse":"bg-default"} \n ${this.switchBg?"hover:bg-inverse":""}\n ${this.description?"min-h-56":""}`},t("h3",{key:"243b3a8e6c168f8b7809e997c2299917f000d6ee",ref:e=>this.headerRef=e,class:"mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"},this.heading),t("div",{key:"7ecf3dca450a58169464e1482962e5cc5e8b7b5e",class:"ml-auto"},t("eds-button",{key:"4a3572e61e1054dca181d1eb05eef1d73f07ff96",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"})),t("div",{key:"f7cd77703aab8f2b56e6f7d36aeab90f7263bd76",class:"w-full",style:Number.isFinite(this.headerHeight)?{marginTop:`${this.headerHeight}px`}:{}},this.description?t("span",{class:"text-light "+(!this.isExpanded&&this.clampText?"line-clamp-1":"")},this.description):null,t("section",{key:"dbfa879d6aa14be50d18a31587e451f7e06a03df",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"}},t("div",{key:"ae5c56f8eb6597c34df4bd1cb78a00b3333baf1e",ref:e=>this.childContentRef=e,class:"accordion-content effect-color pt-4","aria-hidden":!this.isExpanded},t("span",{key:"093f851cde64acefd8b9285d4b6e15f7d2e5c592",class:!this.isExpanded&&this.clampText?"line-clamp-2":""},t("slot",{key:"68f428a78168f89637018f588ab431e1a1bef7a4"}))))))}get el(){return n(this)}};r.style="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-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}.break-words{overflow-wrap:break-word}.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}.pr-32{padding-right:2rem}.pr-36{padding-right:2.25rem}.pr-40{padding-right:2.5rem}.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-4{padding-top:0.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}";export{r as eds_accordion}