@trilogy-ds/vanilla 4.2.2-beta-17 → 4.2.2-beta-19

package/lib/trilogy-ds-vanilla.js

@@ -1,6 +1,6 @@
 (function(A){typeof define=="function"&&define.amd?define(A):A()})(function(){"use strict";const A=()=>{let c=document.querySelectorAll("[data-modal-context]");for(let n=0;n<c.length;n++){let e=c[n],s=e.querySelectorAll("[data-modal-open]"),t=e.querySelector("[data-modal]"),d=e.querySelectorAll("[data-modal-close]"),u=e.querySelectorAll('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');for(let r=0;r<s.length;r++){let f=s[r],g=u[r];f.addEventListener("click",function(){if(i(t),g){if(g.tagName.toLowerCase()==="video"){g.play();return}g.src=g.src+(g.src.indexOf("?")<0?"?":"&")+"autoplay=1"}else return})}for(let r=0;r<d.length;r++)d[r].addEventListener("click",function(){l(t)});a(t);const o=e.querySelector(".modal-background");o&&(o.onclick=function(){l(t)}),e.setAttribute("data-modal-initialized","true")}function a(n){document.addEventListener("keyup",function(e){e=e||window.event;var s=!1;"key"in e?s=e.key==="Escape"||e.key==="Esc":s=e.keyCode===27,s&&l(n)}),document.addEventListener("click",function(e){const s=e.target;let t=s.closest("[data-modal-content]"),d=s.classList.contains("modal");t===null&&d==!0&&l(n)})}const i=n=>{n.classList.add("is-active"),document.body.style.overflow="hidden"},l=n=>{let e=n.querySelector('iframe[src*="youtube"], iframe[src*="vimeo"], video');if(e){if(e.tagName.toLowerCase()==="video"){e.pause();return}e.src=e.src.replace("&autoplay=1","").replace("?autoplay=1","")}n.classList.remove("is-active"),document.body.style.overflow=null}},k=()=>{let c=document.querySelectorAll('[data-variant="auto"]');const a=function(i){let l=0,n=i.length,e=0;if(n>0)for(;e<n;)l=(l<<5)-l+i.charCodeAt(e++)|0;return l};for(let i=0;i<c.length;i++){let l=c[i];const n=l.textContent,e=["b","g","o","q"],s=[];if(n.toLowerCase().split("").map((t,d)=>(e.indexOf(t)>-1&&s.push(d),t)),s.length){const t=a(n),d=Math.abs(t%s.length),u=n.charAt(s[d]),o=n.substring(0,s[d]),r=n.substring(s[d]+1);l.innerHTML=`${o}<span class="has-variant">${u}</span>${r}`}l.setAttribute("data-fontVariant-initialized","true")}},E=()=>{document.querySelectorAll("[data-countdown]").forEach(a=>{let s=a,t=new Date(s.dataset.date).getTime(),d=s.querySelector("[data-days]"),u=s.querySelector("[data-hours]"),o=s.querySelector("[data-minutes]"),r=s.querySelector("[data-seconds]"),f=setInterval(()=>{let g=new Date().getTime(),p=0;t-g>0&&(p=t-g),p<=0&&clearInterval(f),d.innerText=Math.floor(p/864e5).toString(),u.innerText=Math.floor(p%864e5/36e5).toString(),o.innerText=Math.floor(p%36e5/6e4).toString(),r.innerText=Math.floor(p%6e4/1e3).toString()},1e3);s.setAttribute("data-countdown-initialized","true")})},z=()=>{let c=document.querySelectorAll("[data-expandable-row]");for(let a=0;a<c.length;a++){let i=c[a];i.querySelector("[data-expandable-trigger]").addEventListener("click",function(){i.classList.toggle("is-expanded")}),i.setAttribute("data-tableexpansion-initialized","true")}},I=()=>{const c=document.querySelectorAll("[data-tabs-context]"),a=`right: 0;padding-left: 16px;width: 4.5rem !important;background: linear-gradient(90deg, rgba(256,256,256, 0) -25%, white 30%);
 background-attachment: local, local, scroll, scroll;`,i=`
-    .tabs { 
+    .tabs {
         padding-right: 2rem;
     }
 `,l=document.createElement("style");l.innerText=i,c.forEach(e=>{const s=e.clientWidth;let t=e.querySelector(".tabs");if(t||(t=e.querySelector('[data-real-class*="tabs"]')),t.scrollWidth>s&&!t.innerHTML.includes("icon is-small is-absolute")){const u=`<span class="icon is-small is-absolute" style="${a}"><i class="tri-arrow-right" aria-hidden='true'></i></span>`;t.innerHTML+=u,t.appendChild(l)}});let n=document.querySelectorAll("[data-tabs-context]");for(let e=0;e<n.length;e++){let s=n[e],t=s.querySelectorAll("[data-tab-navigation]"),d=s.querySelectorAll("[data-tab-content]");for(let r=0;r<t.length;r++){let f=t[r],g=d[r];f.addEventListener("click",function(){o(f,g)}),f.addEventListener("keyup",p=>{switch(p.preventDefault(),p.keyCode){case 35:o(t[t.length-1],d[t.length-1]);break;case 36:o(t[0],d[0]);break;case 37:let h=(r-1)%t.length;o(t[h],d[h]);break;case 39:let v=(r+1)%t.length;o(t[v],d[v]);break}})}const u=()=>{for(let r=0;r<t.length;r++)t[r].classList.remove("is-active"),t[r].setAttribute("aria-selected","false"),t[r].setAttribute("tabindex","-1");for(let r=0;r<d.length;r++)d[r].classList.remove("is-active"),d[r].setAttribute("aria-expanded","false")},o=(r,f)=>{u(),r.classList.add("is-active"),r.setAttribute("aria-selected","true"),r.setAttribute("tabindex","0"),r.focus(),f.classList.add("is-active"),f.setAttribute("aria-expanded","true")};s.setAttribute("data-tab-initialized","true")}},N=()=>{document.querySelectorAll("[data-autocomplete-context]").forEach(a=>{const i=a.querySelector("[data-autocomplete-input]"),l=a.querySelector("[data-autocomplete-menu]"),n=l.querySelectorAll(".autocomplete-item");let e=-1,s="";const t=()=>{e=-1,document.body.classList.remove("autocomplete-close"),a.classList.remove("is-active"),i.blur(),n.forEach(u=>{u.removeAttribute("data-autocomplete-item-hover")})};l.querySelectorAll(".autocomplete-item").forEach((u,o)=>{u.setAttribute("data-autocomplete-item-index",String(o))}),i.addEventListener("focus",u=>{u.stopPropagation(),a.closest(".is-autocomplete").classList.add("is-active"),document.body.classList.add("autocomplete-close");const o=[];n.forEach(r=>{r.textContent.trim().toLocaleLowerCase().includes(i.value.trim().toLocaleLowerCase())?(r.style.display="block",o.push(r)):r.style.display="none",r.removeAttribute("data-autocomplete-item-index")}),o.forEach((r,f)=>{r.setAttribute("data-autocomplete-item-index",String(f))})}),n.forEach(u=>{u.addEventListener("mousemove",()=>{n.forEach(r=>{r.removeAttribute("data-autocomplete-item-hover")});const o=u.getAttribute("data-autocomplete-item-index");e=Number(o),u.setAttribute("data-autocomplete-item-hover","true"),s=""}),u.addEventListener("mouseout",()=>{u.removeAttribute("data-autocomplete-item-hover")}),u.addEventListener("click",o=>{const r=o.target;i.value=r.textContent,t()})}),i.addEventListener("input",u=>{const o=u.target;e!==-1&&(e=-1);const r=[];n.forEach(f=>{f.textContent.trim().toLocaleLowerCase().includes(o.value.trim().toLocaleLowerCase())?(f.style.display="block",r.push(f)):f.style.display="none",f.removeAttribute("data-autocomplete-item-index"),f.removeAttribute("data-autocomplete-item-hover")}),r.forEach((f,g)=>{f.setAttribute("data-autocomplete-item-index",String(g))})}),i.addEventListener("keydown",u=>{const o=l.querySelectorAll("[data-autocomplete-item-index]");u.key==="ArrowDown"&&(e=e+1,e===o.length&&(e=0)),u.key==="ArrowUp"&&(e=e-1,e<0&&(e=o.length-1)),["ArrowDown","ArrowUp"].includes(u.key)&&(o.forEach(r=>{r.removeAttribute("data-autocomplete-item-hover")}),o[e].setAttribute("data-autocomplete-item-hover","true"),s=o[e].textContent),u.key==="Enter"&&s.trim().length>0&&(i.value=s,t())}),i.addEventListener("blur",()=>{setTimeout(()=>t(),100)}),a.setAttribute("data-autocomplete-initialized","true")})},O=()=>{document.querySelectorAll(".segmented-control-item").forEach(a=>{a.addEventListener("click",function(){this.parentElement.querySelector(".is-active").classList.remove("is-active"),a.classList.contains("is-active")||a.classList.add("is-active")}),a.setAttribute("data-segmentedControl-initialized","true")})},M=()=>{document.querySelectorAll(".textarea-wrapper").forEach(a=>{if(!a.getAttribute("data-textarea-initialized")){const n=a.querySelector("textarea.textarea"),e=n.getAttribute("maxlength");if(e){var l=0;const s=document.createElement("div");s.classList.add("counter"),s.innerHTML=`${l}/${e}`,a.appendChild(s),n.addEventListener("input",function(t){l=this.value.length,s.innerHTML=`${l}/${e}`,l===10&&t.preventDefault()})}a.setAttribute("data-textarea-initialized","true")}})},P=c=>{c.forEach(a=>{a.classList.remove("is-active")})},$=()=>{document.querySelectorAll(".chips-list").forEach(a=>{if(!a.getAttribute("data-chips-initialized")){const l=a.querySelectorAll(".chips"),n=a.classList.contains("is-multiple");l.forEach(e=>{e.classList.contains("is-disabled")||e.addEventListener("click",function(){n||P(l),e.classList.toggle("is-active")})}),a.setAttribute("data-chips-initialized","true")}})},H=c=>{if(!c.getAttribute("data-progress-radial-initialized")){let i=Number(c.getAttribute("data-progress-radial-first-value")),l=Number(c.getAttribute("data-progress-radial-second-value")),n="",e=0,s=0;if(l===0){const t=setInterval(()=>{e!==i?e+=1:clearInterval(t),n=`radial-gradient(white 58%, transparent 51%),

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@trilogy-ds/vanilla",
-  "version": "4.2.2-beta-17",
+  "version": "4.2.2-beta-19",
   "author": "Bouygues Telecom",
   "main": "lib/trilogy-ds-vanilla.js",
   "scripts": {
     "start": "webpack --watch",
-    "build": "vite --config vite.config.js build"
+    "build": "rimraf ./lib && vite --config vite.config.js build",
+    "serve": "npm run build && npx http-server -p 8090 ./lib"
   },
   "repository": {
     "type": "git"
   },
   "license": "ISC",
-  "dependencies": {
-    "@storybook/builder-webpack5": "8.1.10",
-    "eslint": "^9.5.0",
-    "fork-ts-checker-webpack-plugin": "^6.1.0",
-    "rimraf": "^3.0.2",
+  "devDependencies": {
+    "http-server": "^14.1.1",
     "ts-loader": "^8.0.17",
     "typescript": "^4.1.5",
     "vite": "^4.5.2",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite-tsconfig-paths": "^4.3.1",
+    "@storybook/builder-webpack5": "8.1.10",
+    "eslint": "^9.5.0",
+    "fork-ts-checker-webpack-plugin": "^6.1.0",
+    "rimraf": "^3.0.2"
   }
 }

package/src/components/tabs.ts

@@ -9,7 +9,7 @@ export const initTabs = () => {
     'background-attachment: local, local, scroll, scroll;'
 
   const styledTabs = `
-    .tabs { 
+    .tabs {
         padding-right: 2rem;
     }
 `
@@ -96,7 +96,7 @@ export const initTabs = () => {
       tabContentToMakeActive.classList.add('is-active')
       tabContentToMakeActive.setAttribute('aria-expanded', 'true')
     }
-    
+
     tabContext.setAttribute(`data-tab-initialized`, 'true')
   }
 }