@ebrains/components 0.5.0-alpha.0 → 0.6.0-alpha.0

package/dist/components/{p-59405ecf.entry.js → p-bd43d83c.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,h as r,g as i}from"./p-7a8b9de5.js";import{s}from"./p-89227919.js";import{c as a}from"./p-112122d6.js";const o=class{constructor(r){t(this,r),this.tabChange=e(this,"tabChange",7),this.tabCva=a(["relative px-16 py-12","f-ui-03 whitespace-nowrap","effect-color","focus-visible:text-default hover:text-default","border-2","after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0","outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100"],{variants:{position:{left:"rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16",right:"rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16",center:"",first:"rounded-t-lg"},active:{false:"text-lighter bg-dark hover:bg-darker border-softest",true:["bg-default text-default z-99","rounded-t-lg","before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default","border-[#d2d2d2]"]}}}),this.id=void 0,this.navAriaLabel="Tabs",this.tabs=void 0,this.parsedTabs=[],this.activeIndex=-1}componentWillLoad(){this.parseTabs(),this.setActiveIndex(),this.tabChange.emit({tabId:this.id,index:0})}parseTabs(){if(Array.isArray(this.tabs))this.parsedTabs=this.tabs;else if("string"==typeof this.tabs)try{this.parsedTabs=JSON.parse(this.tabs)}catch(t){this.parsedTabs=[]}else this.parsedTabs=[]}componentDidLoad(){this.scrollToActiveTab()}setActiveIndex(){this.activeIndex=this.parsedTabs.findIndex((t=>t.active))}scrollToActiveTab(){var t;const e=null===(t=this.tabContainer)||void 0===t?void 0:t.querySelector("[data-tab-active]");e&&setTimeout((()=>{e.scrollIntoView({inline:"center",block:"nearest"})}),316)}getTabOptions(t,e){const r=t?"center":-1===this.activeIndex&&0===e?"first":e<this.activeIndex?"left":"right";return Object.assign({class:this.tabCva({active:t,position:r}),style:{zIndex:`${t?this.parsedTabs.length+99:"left"===r?e:this.parsedTabs.length+1-e}`}},t?{"data-tab-active":"true"}:{})}handleTabClick(t,e){this.activeIndex=t,this.parsedTabs=this.parsedTabs.map(((e,r)=>Object.assign(Object.assign({},e),{active:r===t}))),this.tabChange.emit({tabId:this.id,index:t,name:e}),s({category:"ui-component",tag:this.el.tagName.toLowerCase(),name:(null==e?void 0:e.toLowerCase())||"",action:"click"})}render(){return r("div",{key:"f5c9e076fc1fb95b57e0148d85865ce62c14fbe7",id:`${this.id}`,class:"after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"},r("div",{key:"7d382167fb62999e39b784ce8bfba24267c87a64",class:"scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"},r("nav",{key:"99bbfabd817bada1984ddf87a274bf9304a1e6a0",ref:t=>this.tabContainer=t,class:"inline-flex","aria-label":this.navAriaLabel},this.parsedTabs.map(((t,e)=>{const i=this.getTabOptions(t.active,e);return r("eds-tab",Object.assign({},i,{label:t.label||t.ariaLabel,url:t.url,active:e===this.activeIndex,onClick:()=>this.handleTabClick(e,t.label)}))})))))}get el(){return i(this)}static get watchers(){return{tabs:["parseTabs"]}}};o.style="";export{o as eds_tabs}
+import{r as t,c as e,h as r,g as i}from"./p-7a8b9de5.js";import{s}from"./p-13efafb9.js";import{c as a}from"./p-112122d6.js";const o=class{constructor(r){t(this,r),this.tabChange=e(this,"tabChange",7),this.tabCva=a(["relative px-16 py-12","f-ui-03 whitespace-nowrap","effect-color","focus-visible:text-default hover:text-default","border-2","after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0","outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100"],{variants:{position:{left:"rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16",right:"rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16",center:"",first:"rounded-t-lg"},active:{false:"text-lighter bg-dark hover:bg-darker border-softest",true:["bg-default text-default z-99","rounded-t-lg","before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default","border-[#d2d2d2]"]}}}),this.id=void 0,this.navAriaLabel="Tabs",this.tabs=void 0,this.parsedTabs=[],this.activeIndex=-1}componentWillLoad(){this.parseTabs(),this.setActiveIndex(),this.tabChange.emit({tabId:this.id,index:0})}parseTabs(){if(Array.isArray(this.tabs))this.parsedTabs=this.tabs;else if("string"==typeof this.tabs)try{this.parsedTabs=JSON.parse(this.tabs)}catch(t){this.parsedTabs=[]}else this.parsedTabs=[]}componentDidLoad(){this.scrollToActiveTab()}setActiveIndex(){this.activeIndex=this.parsedTabs.findIndex((t=>t.active))}scrollToActiveTab(){var t;const e=null===(t=this.tabContainer)||void 0===t?void 0:t.querySelector("[data-tab-active]");e&&setTimeout((()=>{e.scrollIntoView({inline:"center",block:"nearest"})}),316)}getTabOptions(t,e){const r=t?"center":-1===this.activeIndex&&0===e?"first":e<this.activeIndex?"left":"right";return Object.assign({class:this.tabCva({active:t,position:r}),style:{zIndex:`${t?this.parsedTabs.length+99:"left"===r?e:this.parsedTabs.length+1-e}`}},t?{"data-tab-active":"true"}:{})}handleTabClick(t,e){this.activeIndex=t,this.parsedTabs=this.parsedTabs.map(((e,r)=>Object.assign(Object.assign({},e),{active:r===t}))),this.tabChange.emit({tabId:this.id,index:t,name:e}),s({category:"ui-component",tag:this.el.tagName.toLowerCase(),name:(null==e?void 0:e.toLowerCase())||"",action:"click"})}render(){return r("div",{key:"5a0c7dbdd059b2a1efdf31e91725dd1d49c88bd4",id:`${this.id}`,class:"after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"},r("div",{key:"74bb7e66b88d845359caf285430fca079abfab03",class:"scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"},r("nav",{key:"71ca3465da106b2d1ed59eca28eabfe60a1ac0fc",ref:t=>this.tabContainer=t,class:"inline-flex","aria-label":this.navAriaLabel},this.parsedTabs.map(((t,e)=>{const i=this.getTabOptions(t.active,e);return r("eds-tab",Object.assign({},i,{label:t.label||t.ariaLabel,url:t.url,active:e===this.activeIndex,onClick:()=>this.handleTabClick(e,t.label)}))})))))}get el(){return i(this)}static get watchers(){return{tabs:["parseTabs"]}}};o.style="";export{o as eds_tabs}

package/dist/components/p-c683be2c.entry.js

@@ -0,0 +1 @@
+import{r as e,c as i,h as t}from"./p-7a8b9de5.js";const a=class{constructor(t){e(this,t),this.ratingChange=i(this,"ratingChange",7),this.stars=5,this.label="Rate your experience",this.textMapping=["Very Poor","Poor","Average","Good","Excellent"],this.selectedRating=0}get parsedMappings(){if("object"==typeof this.textMapping)return this.textMapping;if("string"==typeof this.textMapping)try{return JSON.parse(this.textMapping)}catch(e){return[]}return[]}handleClick(e){this.selectedRating=e,this.ratingChange.emit(e)}render(){return t("div",{key:"b613863ad54ae9b381a5741bce4b188eff806ef0",class:"relative w-full flex flex-col"},t("span",{key:"f35cef9c3691aab73995e2ca6e2554cc19bae837",class:"f-heading-05"},this.label),t("div",{key:"37082eb4bbadf5c211c197f3f81501d0b0e61404",role:"radiogroup","aria-label":this.label,class:"stars flex space-x-2"},Array.from({length:this.stars},((e,i)=>{const a=i+1,n=a<=this.selectedRating;return t("eds-button",{label:"★",role:"radio","aria-checked":n?"true":"false","aria-label":this.parsedMappings[a-1]||`Rating ${a}`,onClick:()=>this.handleClick(a),tabIndex:0===this.selectedRating&&0===i||n?0:-1,intent:n?"primary":"ghost",size:"small","extra-class":"p-2"})}))),this.selectedRating>0&&this.parsedMappings[this.selectedRating-1]&&t("span",{key:"61b4b92e476cfa0dd9bf405cb080dedd995ff9c6",class:"f-ui-04 text-lighter mt-4"},this.parsedMappings[this.selectedRating-1]))}};a.style=":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.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)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}";export{a as eds_rating}

package/dist/components/{p-209fa119.entry.js → p-d2a0b896.entry.js}

@@ -1 +1 @@
-import{r as t,c as s,h as i,g as a}from"./p-7a8b9de5.js";import{l as e,a as r,c as o,i as h,b as l,g as n}from"./p-8eab748d.js";import{t as c}from"./p-22f9e720.js";const d=class{constructor(i){t(this,i),this.authStatusChanged=s(this,"authStatusChanged",7),this.handleLogin=()=>{if(!this.authenticated)try{e()}catch(t){c.show(t.message,"error")}},this.handleLogout=async()=>{try{await r()}catch(t){c.show(t.message,"error")}this.authenticated=!1,this.user=null},this.keycloakUrl=void 0,this.keycloakRealm=void 0,this.keycloakClientId=void 0,this.user=null,this.authenticated=!1,this.username="",this.serverAvailable=!1}async componentWillLoad(){this.keycloakUrl&&this.keycloakRealm&&this.keycloakClientId?(this.serverAvailable=await o(`${this.keycloakUrl}/realms/${this.keycloakRealm}`),this.serverAvailable?await this.initAuth():c.show("Keycloak server is unavailable.","error")):console.error("Keycloak configuration props are missing.")}async initAuth(){try{await h({url:this.keycloakUrl,realm:this.keycloakRealm,clientId:this.keycloakClientId},!0),l()&&(this.user=n(),this.authenticated=!0,this.authStatusChanged.emit({authenticated:this.authenticated,user:this.user}))}catch(t){c.show(t.message,"error")}}render(){var t;return i("div",{key:"22ee744979511dd2f8a1e1a15bb99215eadd535b",class:"block"},this.authenticated?i("div",{class:"flex items-center"},i("eds-dropdown",{label:`Welcome, ${null===(t=this.user)||void 0===t?void 0:t.username}`,intent:"tertiary","aria-label":"User Menu","dropdown-pos":"right","dropdown-offset":"false",icon:"chevron-down",class:"text-default"},i("eds-user-modal",{user:JSON.stringify(this.user),onLogout:this.handleLogout.bind(this)}))):i("eds-button",{label:"Login",intent:"primary",onClick:this.handleLogin,"extra-class":"text-default"}))}get hostEl(){return a(this)}};export{d as eds_user}
+import{r as t,c as s,h as i,g as a}from"./p-7a8b9de5.js";import{l as e,a as r,c as o,i as h,b as l,g as n}from"./p-8eab748d.js";import{t as c}from"./p-22f9e720.js";const d=class{constructor(i){t(this,i),this.authStatusChanged=s(this,"authStatusChanged",7),this.handleLogin=()=>{if(!this.authenticated)try{e()}catch(t){c.show(t.message,"error")}},this.handleLogout=async()=>{try{await r()}catch(t){c.show(t.message,"error")}this.authenticated=!1,this.user=null},this.keycloakUrl=void 0,this.keycloakRealm=void 0,this.keycloakClientId=void 0,this.user=null,this.authenticated=!1,this.username="",this.serverAvailable=!1}async componentWillLoad(){this.keycloakUrl&&this.keycloakRealm&&this.keycloakClientId?(this.serverAvailable=await o(`${this.keycloakUrl}/realms/${this.keycloakRealm}`),this.serverAvailable?await this.initAuth():c.show("Keycloak server is unavailable.","error")):console.error("Keycloak configuration props are missing.")}async initAuth(){try{await h({url:this.keycloakUrl,realm:this.keycloakRealm,clientId:this.keycloakClientId},!0),l()&&(this.user=n(),this.authenticated=!0,this.authStatusChanged.emit({authenticated:this.authenticated,user:this.user}))}catch(t){c.show(t.message,"error")}}render(){var t;return i("div",{key:"8fe0aaf06ed421d8ca6e512247b4d15b092c895f",class:"block"},this.authenticated?i("div",{class:"flex items-center"},i("eds-dropdown",{label:`Welcome, ${null===(t=this.user)||void 0===t?void 0:t.username}`,intent:"tertiary","aria-label":"User Menu","dropdown-pos":"right","dropdown-offset":"false",icon:"chevron-down",class:"text-default"},i("eds-user-modal",{user:JSON.stringify(this.user),onLogout:this.handleLogout.bind(this)}))):i("eds-button",{label:"Login",intent:"primary",onClick:this.handleLogin,"extra-class":"text-default"}))}get hostEl(){return a(this)}};export{d as eds_user}

package/dist/components/p-d56d9dda.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as i}from"./p-7a8b9de5.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:"d4c727cbb562921b2bcba269e84f25c359c7061b",class:"switch-container"},this.labelOff&&i("span",{key:"90b18fff27bd21501466deb5879e5fe6ff607043",class:"switch-label switch-label--off"},this.labelOff),i("button",{key:"8675f5d9f972d3932710fa7f9b28f74f95a83003",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:"26aa30a01b10419c1665b1fd58b5696a02d1504a",class:"switch-handle"})),this.labelOn&&i("span",{key:"3680d67555e9193a97e129c0639b411263e070a8",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}

package/dist/components/p-d5850ab3.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t}from"./p-7a8b9de5.js";const i=class{constructor(t){e(this,t),this.socialNetworks=[{label:"Twitter",url:"https://twitter.com/ebrains_eu",icon:"twitter"},{label:"Linkedin",url:"https://www.linkedin.com/company/ebrains-eu/about/",icon:"linkedin"},{label:"Facebook",url:"https://www.facebook.com/people/Ebrains_eu/100046659909324/",icon:"facebook"},{label:"Youtube",url:"https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ",icon:"youtube"},{label:"Mastodon",url:"https://mastodon.social/@ebrains",icon:"mastodon"},{label:"Bluesky",url:"https://bsky.app/profile/ebrains.bsky.social",icon:"bluesky"}],this.title="Follow EBRAINS to keep up-to-date"}render(){return t("div",{key:"9efc31261e88c70f9c808251124178d807140594"},t("p",{key:"383101de2aaba05e1024f3ba86d788ad5d92173c",class:"f-ui-02"},this.title),t("ul",{key:"e27243a4e7b8aab085c4ef091d67df57dba70664",class:"mt-12 flex gap-4"},this.socialNetworks.map(((e,i)=>t("li",{key:i},t("eds-link",{"extra-class":"effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm",external:!0,"aria-label":e.label,url:e.url,icon:e.icon,intent:"strong"}))))))}};i.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}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.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)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";export{i as eds_social_networks}