@trilogy-ds/vanilla 0.0.1-beta.9

package/.eslintrc.js

@@ -0,0 +1,82 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    env: {
+        node: true,
+    },
+    plugins: ['@typescript-eslint', 'import', 'jest', 'react', 'react-hooks'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:import/typescript',
+        'plugin:jest/recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+            tsx: true,
+        },
+    },
+    rules: {
+        'arrow-spacing': 2,
+        'block-spacing': 1,
+        'brace-style': 1,
+        camelcase: ['error', { properties: 'always' }],
+        'comma-spacing': 1,
+        'comma-style': 1,
+        'default-case': 'error',
+        'dot-location': ['warn', 'property'],
+        'eol-last': 2,
+        'func-call-spacing': 2,
+        'import/export': 0,
+        'jsx-quotes': ['warn', 'prefer-single'],
+        'key-spacing': 1,
+        'keyword-spacing': 1,
+        'lines-between-class-members': 1,
+        'max-len': ['error', { code: 170 }],
+        'no-alert': 0,
+        'no-confusing-arrow': 1,
+        'no-console': 0,
+        'no-duplicate-imports': 1,
+        'no-eval': 2,
+        'no-extend-native': 2,
+        'no-multiple-empty-lines': [1, { max: 1 }],
+        'no-trailing-spaces': 1,
+        'no-unneeded-ternary': 1,
+        'no-unused-expressions': 0,
+        'no-use-before-define': 0,
+        'react-hooks/exhaustive-deps': 'off',
+        'no-useless-constructor': 1,
+        'no-var': 1,
+        'object-curly-spacing': [1, 'always'],
+        'prefer-const': 1,
+        'prefer-destructuring': ['warn', { array: true, object: true }],
+        'prefer-rest-params': 1,
+        'prefer-spread': 1,
+        'prefer-template': 1,
+        indent: 'off',
+        quotes: 'off',
+        'quote-props': ['warn', 'as-needed'],
+        'react/display-name': 2,
+        'react/jsx-key': 2,
+        'react/jsx-no-duplicate-props': 2,
+        'react/jsx-no-useless-fragment': 1,
+        'react/jsx-no-target-blank': 2,
+        'react/prop-types': 0,
+        'rest-spread-spacing': 2,
+        semi: ['error', 'never', { beforeStatementContinuationChars: 'always' }],
+        'spaced-comment': ['warn', 'always'],
+        'switch-colon-spacing': 1,
+    },
+    settings: {
+        react: {
+            pragma: 'React',
+            version: 'detect',
+        },
+        'import/ignore': ['react-native'],
+    },
+}

package/.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  bracketSpacing: true,
+  jsxBracketSameLine: true,
+  jsxSingleQuote: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  semi: false,
+  printWidth: 120,
+  tabWidth: 2,
+  importOrder: ["^react$", "^[A-Za-z-\/]+$", "^[@]", "^[~]", "^[./]",],
+  importOrderSeparation: true,
+}

package/README.md

@@ -0,0 +1,18 @@
+# Trilogy DS Vanilla
+
+___
+
+This repository contains all the necessary Javascript components to integrate Trilogy Design System in an HTML setting.
+
+___
+
+## CDN
+
+For a faster setup, you can utilize the JSDelivr CDN to include Trilogy Vanilla in your project's HTML:
+
+```html
+<!-- ... -->
+<link href="https://cdn.jsdelivr.net/npm/@trilogy-ds/vanilla" rel="stylesheet" />
+<!-- ... -->
+```
+

package/lib/trilogy-ds-vanilla.js

@@ -0,0 +1,11 @@
+(function(A){typeof define=="function"&&define.amd?define(A):A()})(function(){"use strict";const A=()=>{let c=document.querySelectorAll("[data-modal-context]");for(let s=0;s<c.length;s++){let e=c[s],n=e.querySelectorAll("[data-modal-open]"),a=e.querySelector("[data-modal]"),u=e.querySelectorAll("[data-modal-close]"),d=e.querySelectorAll('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');for(let o=0;o<n.length;o++){let f=n[o],m=d[o];f.addEventListener("click",function(){if(i(a),m){if(m.tagName.toLowerCase()==="video"){m.play();return}m.src=m.src+(m.src.indexOf("?")<0?"?":"&")+"autoplay=1"}else return})}for(let o=0;o<u.length;o++)u[o].addEventListener("click",function(){l(a)});t(a);const r=e.querySelector(".modal-background");r&&(r.onclick=function(){l(a)}),e.setAttribute("data-modal-initialized","true")}function t(s){document.addEventListener("keyup",function(e){e=e||window.event;var n=!1;"key"in e?n=e.key==="Escape"||e.key==="Esc":n=e.keyCode===27,n&&l(s)}),document.addEventListener("click",function(e){const n=e.target;let a=n.closest("[data-modal-content]"),u=n.classList.contains("modal");a===null&&u==!0&&l(s)})}const i=s=>{s.classList.add("is-active"),document.body.style.overflow="hidden"},l=s=>{let e=s.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","")}s.classList.remove("is-active"),document.body.style.overflow=null}},E=()=>{let c=document.querySelectorAll('[data-variant="auto"]');const t=function(i){let l=0,s=i.length,e=0;if(s>0)for(;e<s;)l=(l<<5)-l+i.charCodeAt(e++)|0;return l};for(let i=0;i<c.length;i++){let l=c[i];const s=l.textContent,e=["b","g","o","q"],n=[];if(s.toLowerCase().split("").map((a,u)=>(e.indexOf(a)>-1&&n.push(u),a)),n.length){const a=t(s),u=Math.abs(a%n.length),d=s.charAt(n[u]),r=s.substring(0,n[u]),o=s.substring(n[u]+1);l.innerHTML=`${r}<span class="has-variant">${d}</span>${o}`}l.setAttribute("data-fontVariant-initialized","true")}},k=()=>{document.querySelectorAll("[data-countdown]").forEach(t=>{let n=t,a=new Date(n.dataset.date).getTime(),u=n.querySelector("[data-days]"),d=n.querySelector("[data-hours]"),r=n.querySelector("[data-minutes]"),o=n.querySelector("[data-seconds]"),f=setInterval(()=>{let m=new Date().getTime(),p=0;a-m>0&&(p=a-m),p<=0&&clearInterval(f),u.innerText=Math.floor(p/864e5).toString(),d.innerText=Math.floor(p%864e5/36e5).toString(),r.innerText=Math.floor(p%36e5/6e4).toString(),o.innerText=Math.floor(p%6e4/1e3).toString()},1e3);n.setAttribute("data-countdown-initialized","true")})},H=c=>{c.length&&c.forEach(t=>{const i=t.querySelector("button.toggle");t.classList.remove("is-active"),i.setAttribute("aria-expanded","false")})},W=c=>{const t=c.querySelectorAll("[data-accordion-context]");t.forEach(i=>{const l=i.querySelector("[data-accordion-toggle]"),s=i.querySelector("button.toggle");l.addEventListener("click",()=>{i.classList.contains("is-disabled")||(i.classList.contains("is-active")?(i.classList.remove("is-active"),s.setAttribute("aria-expanded","false")):(H(t),i.classList.toggle("is-active"),s.setAttribute("aria-expanded","true")))})}),c.setAttribute("data-accordion-initialized","true")},z=()=>{document.querySelectorAll("[data-accordion], .accordions").forEach(t=>{W(t)})},I=()=>{let c=document.querySelectorAll("[data-expandable-row]");for(let t=0;t<c.length;t++){let i=c[t];i.querySelector("[data-expandable-trigger]").addEventListener("click",function(){i.classList.toggle("is-expanded")}),i.setAttribute("data-tableexpansion-initialized","true")}},N=()=>{const c=document.querySelectorAll("[data-tabs-context]"),t=`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 { 
+        padding-right: 2rem;
+    }
+`,l=document.createElement("style");l.innerText=i,c.forEach(e=>{const n=e.clientWidth;let a=e.querySelector(".tabs");if(a||(a=e.querySelector('[data-real-class*="tabs"]')),a.scrollWidth>n&&!a.innerHTML.includes("icon is-small is-absolute")){const d=`<span class="icon is-small is-absolute" style="${t}"><i class="tri-arrow-right" aria-hidden='true'></i></span>`;a.innerHTML+=d,a.appendChild(l)}});let s=document.querySelectorAll("[data-tabs-context]");for(let e=0;e<s.length;e++){let n=s[e],a=n.querySelectorAll("[data-tab-navigation]"),u=n.querySelectorAll("[data-tab-content]");for(let o=0;o<a.length;o++){let f=a[o],m=u[o];f.addEventListener("click",function(){r(f,m)}),f.addEventListener("keyup",p=>{switch(p.preventDefault(),p.keyCode){case 35:r(a[a.length-1],u[a.length-1]);break;case 36:r(a[0],u[0]);break;case 37:let h=(o-1)%a.length;r(a[h],u[h]);break;case 39:let v=(o+1)%a.length;r(a[v],u[v]);break}})}const d=()=>{for(let o=0;o<a.length;o++)a[o].classList.remove("is-active"),a[o].setAttribute("aria-selected","false"),a[o].setAttribute("tabindex","-1");for(let o=0;o<u.length;o++)u[o].classList.remove("is-active"),u[o].setAttribute("aria-expanded","false")},r=(o,f)=>{d(),o.classList.add("is-active"),o.setAttribute("aria-selected","true"),o.setAttribute("tabindex","0"),o.focus(),f.classList.add("is-active"),f.setAttribute("aria-expanded","true")};n.setAttribute("data-tab-initialized","true")}},O=()=>{document.querySelectorAll("[data-autocomplete-context]").forEach(t=>{const i=t.querySelector("[data-autocomplete-input]"),l=t.querySelector("[data-autocomplete-menu]"),s=l.querySelectorAll(".autocomplete-item");let e=-1,n="";const a=()=>{e=-1,document.body.classList.remove("autocomplete-close"),t.classList.remove("is-active"),i.blur(),s.forEach(d=>{d.removeAttribute("data-autocomplete-item-hover")})};l.querySelectorAll(".autocomplete-item").forEach((d,r)=>{d.setAttribute("data-autocomplete-item-index",String(r))}),i.addEventListener("focus",d=>{d.stopPropagation(),t.closest(".is-autocomplete").classList.add("is-active"),document.body.classList.add("autocomplete-close");const r=[];s.forEach(o=>{o.textContent.trim().toLocaleLowerCase().includes(i.value.trim().toLocaleLowerCase())?(o.style.display="block",r.push(o)):o.style.display="none",o.removeAttribute("data-autocomplete-item-index")}),r.forEach((o,f)=>{o.setAttribute("data-autocomplete-item-index",String(f))})}),s.forEach(d=>{d.addEventListener("mousemove",()=>{s.forEach(o=>{o.removeAttribute("data-autocomplete-item-hover")});const r=d.getAttribute("data-autocomplete-item-index");e=Number(r),d.setAttribute("data-autocomplete-item-hover","true"),n=""}),d.addEventListener("mouseout",()=>{d.removeAttribute("data-autocomplete-item-hover")}),d.addEventListener("click",r=>{const o=r.target;i.value=o.textContent,a()})}),i.addEventListener("input",d=>{const r=d.target;e!==-1&&(e=-1);const o=[];s.forEach(f=>{f.textContent.trim().toLocaleLowerCase().includes(r.value.trim().toLocaleLowerCase())?(f.style.display="block",o.push(f)):f.style.display="none",f.removeAttribute("data-autocomplete-item-index"),f.removeAttribute("data-autocomplete-item-hover")}),o.forEach((f,m)=>{f.setAttribute("data-autocomplete-item-index",String(m))})}),i.addEventListener("keydown",d=>{const r=l.querySelectorAll("[data-autocomplete-item-index]");d.key==="ArrowDown"&&(e=e+1,e===r.length&&(e=0)),d.key==="ArrowUp"&&(e=e-1,e<0&&(e=r.length-1)),["ArrowDown","ArrowUp"].includes(d.key)&&(r.forEach(o=>{o.removeAttribute("data-autocomplete-item-hover")}),r[e].setAttribute("data-autocomplete-item-hover","true"),n=r[e].textContent),d.key==="Enter"&&n.trim().length>0&&(i.value=n,a())}),i.addEventListener("blur",()=>{setTimeout(()=>a(),100)}),t.setAttribute("data-autocomplete-initialized","true")})},M=()=>{document.querySelectorAll(".segmented-control-item").forEach(t=>{t.addEventListener("click",function(){this.parentElement.querySelector(".is-active").classList.remove("is-active"),t.classList.contains("is-active")||t.classList.add("is-active")}),t.setAttribute("data-segmentedControl-initialized","true")})},$=()=>{document.querySelectorAll(".textarea-wrapper").forEach(t=>{if(!t.getAttribute("data-textarea-initialized")){const s=t.querySelector("textarea.textarea"),e=s.getAttribute("maxlength");if(e){var l=0;const n=document.createElement("div");n.classList.add("counter"),n.innerHTML=`${l}/${e}`,t.appendChild(n),s.addEventListener("input",function(a){l=this.value.length,n.innerHTML=`${l}/${e}`,l===10&&a.preventDefault()})}t.setAttribute("data-textarea-initialized","true")}})},F=c=>{c.forEach(t=>{t.classList.remove("is-active")})},T=()=>{document.querySelectorAll(".chips-list").forEach(t=>{if(!t.getAttribute("data-chips-initialized")){const l=t.querySelectorAll(".chips"),s=t.classList.contains("is-multiple");l.forEach(e=>{e.classList.contains("is-disabled")||e.addEventListener("click",function(){s||F(l),e.classList.toggle("is-active")})}),t.setAttribute("data-chips-initialized","true")}})},R=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")),s="",e=0,n=0;if(l===0){const a=setInterval(()=>{e!==i?e+=1:clearInterval(a),s=`radial-gradient(white 58%, transparent 51%),
+                                       conic-gradient(#0C7B91 0deg ${360*(e/100)}deg, 
+                                                  gainsboro ${360*(e/100)}deg 360deg)`,c.style.background=s},13)}else{l+=i;const a=setInterval(()=>{e<i&&(e+=1),n<l?n+=1:clearInterval(a),s=`radial-gradient(white 58%, transparent 51%),
+                                       conic-gradient(#0C7B91 0deg ${360*(e/100)}deg,
+                                                   #25465f ${360*(e/100)}deg ${360*(n/100)}deg,
+                                                   gainsboro ${360*(n/100)}deg 360deg)`,c.style.background=s},13)}c.setAttribute("data-progress-radial-initialized","true")}},_=c=>{let t=c.querySelector(".range-cursor-min"),i=c.querySelector(".range-cursor-max"),l=c.querySelector(".range-track"),s=c.querySelector(".range-value-min"),e=c.querySelector(".range-value-max"),n=t.max,a=0;const u=()=>{let d=Number(t.value)/Number(n)*100,r=Number(i.value)/Number(n)*100;l.style.background=`linear-gradient(to right, #E1E1E1 ${d}% , #0C7B91 ${d}% , #0C7B91 ${r}%, #E1E1E1 ${r}%) `};u(),t.addEventListener("input",d=>{const r=d.target;Number(r.value)<Number(i.value)-a?t.value=r.value:t.value=String(Number(i.value)-a),s.textContent=r.value,u()}),i.addEventListener("input",d=>{const r=d.target;Number(r.value)>Number(t.value)+a?i.value=r.value:i.value=String(Number(t.value)+a),e.textContent=r.value,u()}),c.setAttribute("data-ranges-initialized","true")},G=(c,t)=>{new IntersectionObserver(l=>{l.forEach(s=>{s.isIntersecting&&t(s.target)})}).observe(c)},V=()=>{const c=document.querySelectorAll("[data-select-name]");c&&c.forEach(t=>{const i=t.querySelector("label");if(!t.classList.contains("select-disabled")){const l=t.parentNode;let s=l.querySelector("[data-is-open-options]");t.addEventListener("click",()=>{const n=s.getAttribute("data-is-open-options");n==="true"&&s.setAttribute("data-is-open-options","false"),n==="false"&&s.setAttribute("data-is-open-options","true")}),t.addEventListener("blur",()=>{s.setAttribute("data-is-open-options","false")});const e=s.querySelectorAll("[data-option-name]");e.forEach(n=>{n.classList.contains("select-options-option-disabled")||n.addEventListener("mousedown",()=>{e.forEach(u=>u.classList.remove("select-options-option-activated")),n.classList.add("select-options-option-activated");let a=t.querySelector("[data-option-selected]");a||(a=document.createElement("span"),a.classList.add("select-value"),(!i||i===null)&&a.classList.add("no-label"),t.appendChild(a)),t.setAttribute("data-option-selected",n.getAttribute("data-option-name")),a.setAttribute("data-option-selected",n.getAttribute("data-option-name")),a.textContent=n.getAttribute("data-option-name"),l.classList.add("has-dynamic-placeholder")})})}t.setAttribute("data-selects-initialized","true")})},B=()=>{const c=document.querySelectorAll("[data-has-gauge]");c&&c.forEach(t=>{var S,x;const i="#007B52",l="#707070",s="#D42D02",e="#FFBB33",n=t.querySelector("input"),a=t.querySelector("[data-gauge]"),u=(S=t.querySelector("[data-length-min]"))==null?void 0:S.getAttribute("data-length-min"),d=(x=t.querySelector("[data-length-max]"))==null?void 0:x.getAttribute("data-length-max"),r={},o={fn:g=>d&&!u?g.length>0&&g.length<=Number(d):u&&!d?g.length>=Number(u):d&&u?g.length>=Number(u)&&g.length<=Number(d):!1,ref:t.querySelector("[data-security-length]")},f={fn:g=>/[^\w\*]/.test(g),ref:t.querySelector("[data-security-special-chars]")},m={fn:g=>/[0-9]/.test(g),ref:t.querySelector("[data-security-number]")},p={fn:g=>/[A-Z]/.test(g),ref:t.querySelector("[data-security-uppercase]")},h={fn:g=>/[a-z]/.test(g),ref:t.querySelector("[data-security-lowercase]")};m.ref&&Object.assign(r,{numberVerify:m}),o.ref&&Object.assign(r,{lengthVerify:o}),h.ref&&Object.assign(r,{lowercaseVerify:h}),p.ref&&Object.assign(r,{uppercaseVerify:p}),f.ref&&Object.assign(r,{specialCharsverify:f}),Object.keys(r).length;const v=g=>{const b=[];return Object.keys(r).map(y=>{const C=r[y].fn(g),L=r[y].ref.querySelector("[data-icon-securities]").querySelector("i");b.push(C),C?(L.classList.remove("tri-times-circle"),L.classList.add("tri-check-circle","is-success")):(L.classList.remove("tri-check-circle","is-success"),L.classList.add("tri-times-circle"))}),b.filter(y=>y).length},q=g=>{const b=Number((g/Object.keys(r).length*100).toFixed(0));b<=50&&b>0?(a.style.width="50%",a.style.backgroundColor=s):b<=99&&b>50?(a.style.width="75%",a.style.backgroundColor=e):b===100?(a.style.width="100%",a.style.backgroundColor=i):(a.style.width="0%",a.style.backgroundColor=l)},w=g=>{const b=g.target.value,y=v(b);q(y)};n.addEventListener("input",w),t.setAttribute("data-gauges-initialized","true")})},j=()=>{const c=document.querySelectorAll("[data-show-pwd]");c&&c.forEach(t=>{const i=e=>{e.classList.contains("tri-eye")?(e.classList.remove("tri-eye"),e.classList.add("tri-eye-slash")):(e.classList.remove("tri-eye-slash"),e.classList.add("tri-eye"))},l=e=>{const n=e.parentNode.parentNode;let a=n.querySelector("input");a||(a=n.parentNode.querySelector("input")),a.type==="password"?a.type="text":a.type="password"},s=e=>{const n=e.target;i(n),l(n)};t.addEventListener("click",s),t.setAttribute("data-iconsShowPwd-initialized","true")})},D=()=>{N(),A(),E(),k(),I(),z(),O(),M(),$(),T(),V(),B(),j()};let P=!1;P||document.addEventListener("DOMContentLoaded",function(){D(),P=!0;const c={attributes:!0,childList:!0,subtree:!0};new MutationObserver(function(i){i.forEach(function(l){const s=l.target;if(s){const e=s.querySelectorAll("[data-modal-context]"),n=s.querySelectorAll(".accordions"),a=s.querySelectorAll(".countdown"),u=s.querySelectorAll("[data-tabs-context]"),d=s.querySelectorAll("[data-autocomplete-context]"),r=s.querySelectorAll('[data-variant="auto"]'),o=s.querySelectorAll(".segmented-control-item"),f=document.querySelectorAll(".textarea"),m=document.querySelectorAll(".progress-radial"),p=document.querySelectorAll(".range-container"),h=document.querySelectorAll(".chips-list"),v=s.querySelectorAll("[data-select-name]"),q=document.querySelectorAll("[data-has-gauge]"),w=document.querySelectorAll("[data-show-pwd]"),S=s.querySelectorAll("[data-expandable-row]");[{modal:e},{accordion:n},{tab:u},{countdown:a},{autocomplete:d},{fontVariant:r},{segmentedControl:o},{textareas:f},{ranges:p},{progressRadials:m},{chips:h},{selects:v},{gauges:q},{iconsShowPwd:w},{tableexpansion:S}].forEach(g=>{const b=Object.keys(g)[0];g[b].length&&g[b].forEach(y=>{if(y.getAttribute(`data-${b}-initialized`)!=="true")switch(y.setAttribute(`data-${b}-initialized`,"true"),b){case"modal":return A();case"tab":return N();case"accordion":return z();case"countdown":return k();case"autocomplete":return O();case"fontVariant":return E();case"segmentedControl":return M();case"textareas":return $();case"chips":return T();case"selects":return V();case"ranges":return _(y);case"progressRadials":return G(y,R);case"gauges":return B();case"iconsShowPwd":return j();case"tableexpansion":return I();default:return D()}})})}})}).observe(document.documentElement,c)})});

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@trilogy-ds/vanilla",
+  "version": "0.0.1-beta.9",
+  "author": "Bouygues Telecom",
+  "main": "lib/trilogy-ds-vanilla.js",
+  "scripts": {
+    "start": "webpack --watch",
+    "build": "vite --config vite.config.js build"
+  },
+  "repository": {
+    "type": "git"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "eslint": "4.19.1",
+    "typescript": "^4.1.5",
+    "rimraf": "^3.0.2",
+    "ts-loader": "^8.0.17",
+    "fork-ts-checker-webpack-plugin": "^6.1.0",
+    "vite": "^4.5.2",
+    "vite-tsconfig-paths": "^4.3.1"
+  }
+}

package/src/app.ts

@@ -0,0 +1,142 @@
+import { initModals } from './components/modal'
+import { initVariant } from './components/font-variant'
+import { initCountdowns } from './components/countdown'
+import { initAccordions } from './components/accordion'
+import { initTableExpansion } from './components/table-expansion'
+import { initTabs } from './components/tabs'
+import { initAutocomplete } from './components/autocomplete'
+import { initSegmentedControl } from './components/segmented-control'
+import { initTextarea } from './components/textarea'
+import { initChips } from './components/chips'
+import { initProgressRadial } from './components/progress-radial'
+import { initRange } from './components/range'
+import { intersectionObserver } from './utils/intersectionObserver'
+import { initSelects } from './components/select'
+import { initInputGauge } from './components/input-gauge'
+import { initInputIcon } from './components/input-icon'
+
+const loadVanilla = () => {
+  initTabs()
+  initModals()
+  initVariant()
+  initCountdowns()
+  initTableExpansion()
+  initAccordions()
+  initAutocomplete()
+  initSegmentedControl()
+  initTextarea()
+  initChips()
+  initSelects()
+  initInputGauge()
+  initInputIcon()
+}
+
+let isInitialized = false
+
+if (!isInitialized) {
+  // when DOM is loaded
+  document.addEventListener('DOMContentLoaded', function () {
+    loadVanilla()
+
+    // Assign variable to true
+    isInitialized = true
+
+    // Observer config
+    const observerConfig = {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    }
+
+    // Checking mutations
+    const mutationObserver = new MutationObserver(function (mutations: MutationRecord[]) {
+      mutations.forEach(function (mutation: MutationRecord) {
+        const mutationTarget = mutation.target as HTMLElement
+
+        if (mutationTarget) {
+          const modals = mutationTarget.querySelectorAll('[data-modal-context]')
+          const accordions = mutationTarget.querySelectorAll('.accordions')
+          const countdowns = mutationTarget.querySelectorAll('.countdown')
+          const tabs = mutationTarget.querySelectorAll('[data-tabs-context]')
+          const autocomplete = mutationTarget.querySelectorAll('[data-autocomplete-context]')
+          const fontVariant = mutationTarget.querySelectorAll('[data-variant="auto"]')
+          const segmentedControl = mutationTarget.querySelectorAll('.segmented-control-item')
+          const textareas = document.querySelectorAll('.textarea')
+          const progressRadials = document.querySelectorAll('.progress-radial')
+          const ranges = document.querySelectorAll('.range-container')
+          const chips = document.querySelectorAll('.chips-list')
+          const selects = mutationTarget.querySelectorAll('[data-select-name]')
+          const gauges = document.querySelectorAll<HTMLElement>('[data-has-gauge]')
+          const iconsShowPwd = document.querySelectorAll<HTMLElement>('[data-show-pwd]')
+          const tableexpansion = mutationTarget.querySelectorAll('[data-expandable-row]')
+
+          const elements = [
+            { modal: modals },
+            { accordion: accordions },
+            { tab: tabs },
+            { countdown: countdowns },
+            { autocomplete: autocomplete },
+            { fontVariant: fontVariant },
+            { segmentedControl: segmentedControl },
+            { textareas: textareas },
+            { ranges: ranges },
+            { progressRadials: progressRadials },
+            { chips: chips },
+            { selects: selects },
+            { gauges: gauges },
+            { iconsShowPwd: iconsShowPwd },
+            { tableexpansion: tableexpansion },
+          ]
+
+          elements.forEach((element: any) => {
+            const key = Object.keys(element)[0]
+            if (element[key].length) {
+              element[key].forEach((htmlElement: HTMLElement) => {
+                const initialized = htmlElement.getAttribute(`data-${key}-initialized`)
+                if (initialized !== 'true') {
+                  htmlElement.setAttribute(`data-${key}-initialized`, 'true')
+                  switch (key) {
+                    case 'modal':
+                      return initModals()
+                    case 'tab':
+                      return initTabs()
+                    case 'accordion':
+                      return initAccordions()
+                    case 'countdown':
+                      return initCountdowns()
+                    case 'autocomplete':
+                      return initAutocomplete()
+                    case 'fontVariant':
+                      return initVariant()
+                    case 'segmentedControl':
+                      return initSegmentedControl()
+                    case 'textareas':
+                      return initTextarea()
+                    case 'chips':
+                      return initChips()
+                    case 'selects':
+                      return initSelects()
+                    case 'ranges':
+                      return initRange(htmlElement)
+                    case 'progressRadials':
+                      return intersectionObserver(htmlElement, initProgressRadial)
+                    case 'gauges':
+                      return initInputGauge()
+                    case 'iconsShowPwd':
+                      return initInputIcon()
+                    case 'tableexpansion':
+                      return initTableExpansion()
+                    default:
+                      return loadVanilla()
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+    })
+
+    mutationObserver.observe(document.documentElement, observerConfig)
+  })
+}

package/src/components/accordion.ts

@@ -0,0 +1,37 @@
+const _closeAccordionContexts = (accordionsContexts: NodeListOf<HTMLElement>) => {
+  if (accordionsContexts.length) {
+    accordionsContexts.forEach((accordionContext: HTMLElement) => {
+      const accordionButton = accordionContext.querySelector('button.toggle')
+      accordionContext.classList.remove('is-active')
+      accordionButton.setAttribute('aria-expanded', 'false')
+    })
+  }
+}
+
+const _loadAccordion = (accordion: HTMLElement) => {
+  const accordionsContexts: NodeListOf<HTMLElement> = accordion.querySelectorAll('[data-accordion-context]')
+  accordionsContexts.forEach((context) => {
+    const toggle = context.querySelector('[data-accordion-toggle]')
+    const accordionButton = context.querySelector('button.toggle')
+    toggle.addEventListener('click', () => {
+      if (!context.classList.contains('is-disabled')) {
+        if (context.classList.contains('is-active')) {
+          context.classList.remove('is-active')
+          accordionButton.setAttribute('aria-expanded', 'false')
+        } else {
+          _closeAccordionContexts(accordionsContexts)
+          context.classList.toggle('is-active')
+          accordionButton.setAttribute('aria-expanded', 'true')
+        }
+      }
+    })
+  })
+  accordion.setAttribute('data-accordion-initialized', 'true')
+}
+
+export const initAccordions = () => {
+  const allAccordions = document.querySelectorAll('[data-accordion], .accordions')
+  allAccordions.forEach((accordion: HTMLElement) => {
+    _loadAccordion(accordion)
+  })
+}

package/src/components/autocomplete.ts

@@ -0,0 +1,133 @@
+export const initAutocomplete = () => {
+  const autocompleteContainer = document.querySelectorAll('[data-autocomplete-context]')
+
+  autocompleteContainer.forEach((autocompleteConainterElmt: HTMLDivElement) => {
+    const inputAutocomplete: HTMLInputElement = autocompleteConainterElmt.querySelector('[data-autocomplete-input]')
+    const autocompleteMenu: HTMLDivElement = autocompleteConainterElmt.querySelector('[data-autocomplete-menu]')
+    const autocompleteItems = autocompleteMenu.querySelectorAll('.autocomplete-item')
+
+    let currentItems = -1
+    let itemSelected = ''
+
+    const onBlur = () => {
+      currentItems = -1
+      document.body.classList.remove('autocomplete-close')
+      autocompleteConainterElmt.classList.remove('is-active')
+      inputAutocomplete.blur()
+      autocompleteItems.forEach((item: HTMLDivElement) => {
+        item.removeAttribute('data-autocomplete-item-hover')
+      })
+    }
+
+    // add data attributte on items
+    const itemsList = autocompleteMenu.querySelectorAll('.autocomplete-item')
+    itemsList.forEach((item: HTMLDivElement, index: number) => {
+      item.setAttribute('data-autocomplete-item-index', String(index))
+    })
+
+    // Open suggestions
+    inputAutocomplete.addEventListener('focus', (eventFocus: FocusEvent) => {
+      eventFocus.stopPropagation()
+      autocompleteConainterElmt.closest('.is-autocomplete').classList.add('is-active')
+      document.body.classList.add('autocomplete-close')
+      const items: HTMLDivElement[] = []
+
+      // open with suggestions filtered
+      autocompleteItems.forEach((item: HTMLDivElement) => {
+        if (item.textContent.trim().toLocaleLowerCase().includes(inputAutocomplete.value.trim().toLocaleLowerCase())) {
+          item.style.display = 'block'
+          items.push(item)
+        } else {
+          item.style.display = 'none'
+        }
+        item.removeAttribute('data-autocomplete-item-index')
+      })
+
+      items.forEach((item: HTMLDivElement, index: number) => {
+        item.setAttribute('data-autocomplete-item-index', String(index))
+      })
+    })
+
+    // on hover and blur item
+    autocompleteItems.forEach((autocompleteItem: HTMLDivElement) => {
+      autocompleteItem.addEventListener('mousemove', () => {
+        autocompleteItems.forEach((i: HTMLDivElement) => {
+          i.removeAttribute('data-autocomplete-item-hover')
+        })
+
+        const index = autocompleteItem.getAttribute('data-autocomplete-item-index')
+        currentItems = Number(index)
+        autocompleteItem.setAttribute('data-autocomplete-item-hover', 'true')
+        itemSelected = ''
+      })
+
+      autocompleteItem.addEventListener('mouseout', () => {
+        autocompleteItem.removeAttribute('data-autocomplete-item-hover')
+      })
+
+      autocompleteItem.addEventListener('click', (eventClick: MouseEvent) => {
+        const targetItem = eventClick.target as HTMLInputElement
+        inputAutocomplete.value = targetItem.textContent
+        onBlur()
+      })
+    })
+
+    // filter suggestions
+    inputAutocomplete.addEventListener('input', (eventInput: InputEvent) => {
+      const target = eventInput.target as HTMLInputElement
+      if (currentItems !== -1) currentItems = -1
+      const items: HTMLDivElement[] = []
+
+      autocompleteItems.forEach((item: HTMLDivElement) => {
+        if (item.textContent.trim().toLocaleLowerCase().includes(target.value.trim().toLocaleLowerCase())) {
+          item.style.display = 'block'
+          items.push(item)
+        } else {
+          item.style.display = 'none'
+        }
+        item.removeAttribute('data-autocomplete-item-index')
+        item.removeAttribute('data-autocomplete-item-hover')
+      })
+
+      items.forEach((item: HTMLDivElement, index: number) => {
+        item.setAttribute('data-autocomplete-item-index', String(index))
+      })
+    })
+
+    // on select items with keyboard
+    inputAutocomplete.addEventListener('keydown', (eventKeyboard: KeyboardEvent) => {
+      const itemsList = autocompleteMenu.querySelectorAll('[data-autocomplete-item-index]')
+
+      if (eventKeyboard.key === 'ArrowDown') {
+        currentItems = currentItems + 1
+        if (currentItems === itemsList.length) currentItems = 0
+      }
+
+      if (eventKeyboard.key === 'ArrowUp') {
+        currentItems = currentItems - 1
+        if (currentItems < 0) currentItems = itemsList.length - 1
+      }
+
+      if (['ArrowDown', 'ArrowUp'].includes(eventKeyboard.key)) {
+        itemsList.forEach((item: HTMLDivElement) => {
+          item.removeAttribute('data-autocomplete-item-hover')
+        })
+        itemsList[currentItems].setAttribute('data-autocomplete-item-hover', 'true')
+        itemSelected = itemsList[currentItems].textContent
+      }
+
+      if (eventKeyboard.key === 'Enter' && itemSelected.trim().length > 0) {
+        inputAutocomplete.value = itemSelected
+        onBlur()
+      }
+    })
+
+    // on blur
+    // set timeout for click item before blur input
+    inputAutocomplete.addEventListener('blur', () => {
+      setTimeout(() => onBlur(), 100)
+    })
+    
+    autocompleteConainterElmt.setAttribute(`data-autocomplete-initialized`, 'true')
+  })
+}

package/src/components/chips.ts

@@ -0,0 +1,28 @@
+const _resetChips = (chipsList: any) => {
+    chipsList.forEach((chips: any) => {
+        chips.classList.remove('is-active');
+    })
+}
+
+export const initChips = () => {
+    const allChipsLists = document.querySelectorAll(".chips-list");
+
+    allChipsLists.forEach((chipsList: any) => {
+        const isInitialized = chipsList.getAttribute('data-chips-initialized');
+        if (!isInitialized) {
+            const chips = chipsList.querySelectorAll('.chips');
+            const isMultiple = chipsList.classList.contains('is-multiple');
+            chips.forEach((chip: HTMLElement) => {
+                if (!chip.classList.contains('is-disabled')) {
+                    chip.addEventListener("click", function () {
+                        if (!isMultiple) {
+                            _resetChips(chips);
+                        }
+                        chip.classList.toggle('is-active');
+                    });
+                }
+            });
+            chipsList.setAttribute('data-chips-initialized', 'true');
+        }
+    });
+};

package/src/components/countdown.ts

@@ -0,0 +1,40 @@
+export const initCountdowns = () => {
+
+    let countdowns: NodeListOf<HTMLElement> = document.querySelectorAll('[data-countdown]');
+
+    countdowns.forEach((countdown: HTMLElement) => {
+        const second = 1000,
+            minute = second * 60,
+            hour = minute * 60,
+            day = hour * 24;
+
+        let countdownElements = countdown;
+        let countDown = new Date(countdownElements.dataset.date).getTime();
+        let numbersDays: HTMLElement = countdownElements.querySelector('[data-days]');
+        let numbersHours: HTMLElement = countdownElements.querySelector('[data-hours]');
+        let numbersMinutes: HTMLElement = countdownElements.querySelector('[data-minutes]');
+        let numbersSeconds: HTMLElement = countdownElements.querySelector('[data-seconds]');
+
+        let timer = setInterval(() => {
+
+            let now = new Date().getTime();
+            let distance = 0;
+            if ((countDown - now) > 0) {
+                distance = (countDown - now);
+            }
+            if (distance <= 0) {
+                clearInterval(timer);
+            }
+
+            numbersDays.innerText = Math.floor(distance / (day)).toString(),
+                numbersHours.innerText = Math.floor((distance % (day)) / (hour)).toString(),
+                numbersMinutes.innerText = Math.floor((distance % (hour)) / (minute)).toString(),
+                numbersSeconds.innerText = Math.floor((distance % (minute)) / second).toString();
+
+        }, second)
+        countdownElements.setAttribute(`data-countdown-initialized`, 'true')
+    })
+
+};
+
+export default initCountdowns;

package/src/components/font-variant.ts

@@ -0,0 +1,42 @@
+export const initVariant = () => {
+    let titres = document.querySelectorAll('[data-variant="auto"]');
+
+    const hashCode = function (string: string) {
+        let hashNumbers = 0;
+        let hashLength = string.length;
+        let i = 0;
+
+        if (hashLength > 0) {
+            while (i < hashLength) {
+                hashNumbers = (hashNumbers << 5) - hashNumbers + string.charCodeAt(i++) | 0;
+            }
+        }
+        return hashNumbers;
+    };
+
+    for (let i = 0; i < titres.length; i++) {
+        let titre = titres[i];
+        const content = titre.textContent;
+        const charsArray = ['b', 'g', 'o', 'q'];
+        const charsIndexes: number[] = [];
+
+        content.toLowerCase().split('').map((i, j) => {
+            if (charsArray.indexOf(i) > -1) {
+                charsIndexes.push(j);
+            }
+            return i;
+        });
+
+        if (charsIndexes.length) {
+            const hashContent = hashCode(content);
+            const position = Math.abs(hashContent % charsIndexes.length);
+            const char = content.charAt(charsIndexes[position]);
+            const beforeChar = content.substring(0, charsIndexes[position]);
+            const afterChar = content.substring(charsIndexes[position] + 1);
+            titre.innerHTML = `${beforeChar}<span class="has-variant">${char}</span>${afterChar}`;
+        }
+        titre.setAttribute(`data-fontVariant-initialized`, 'true')
+    }
+};
+
+export default initVariant;

package/src/components/input-gauge.ts

@@ -0,0 +1,111 @@
+interface IVerifies {
+  [key: string]: { fn: (e: string) => boolean; ref: HTMLElement };
+}
+
+export const initInputGauge = () => {
+  const pwdInput = document.querySelectorAll<HTMLElement>("[data-has-gauge]");
+
+  if (pwdInput) {
+    pwdInput.forEach((htmlElement: HTMLElement) => {
+      const green: string = "#007B52";
+      const grey: string = "#707070";
+      const red: string = "#D42D02";
+      const yellow: string = "#FFBB33";
+
+      const input = htmlElement.querySelector("input") as HTMLElement;
+      const gauge = htmlElement.querySelector("[data-gauge]") as HTMLElement;
+      const min = htmlElement.querySelector("[data-length-min]")?.getAttribute("data-length-min");
+      const max = htmlElement.querySelector("[data-length-max]")?.getAttribute("data-length-max");
+      const dataVerifies: IVerifies = {};
+      let nbVerified = 0;
+
+      const lengthVerify = {
+        fn: (e: string) => {
+          if (max && !min) {
+            return e.length > 0 && e.length <= Number(max);
+          }
+          if (min && !max) {
+            return e.length >= Number(min);
+          }
+          if (max && min) {
+            return e.length >= Number(min) && e.length <= Number(max);
+          }
+          return false;
+        },
+        ref: htmlElement.querySelector("[data-security-length]") as HTMLElement,
+      };
+
+      const specialCharsverify = {
+        fn: (e: string) => /[^\w\*]/.test(e),
+        ref: htmlElement.querySelector("[data-security-special-chars]") as HTMLElement,
+      };
+
+      const numberVerify = {
+        fn: (e: string) => /[0-9]/.test(e),
+        ref: htmlElement.querySelector("[data-security-number]") as HTMLElement,
+      };
+
+      const uppercaseVerify = {
+        fn: (e: string) => /[A-Z]/.test(e),
+        ref: htmlElement.querySelector("[data-security-uppercase]") as HTMLElement,
+      };
+
+      const lowercaseVerify = {
+        fn: (e: string) => /[a-z]/.test(e),
+        ref: htmlElement.querySelector("[data-security-lowercase]") as HTMLElement,
+      };
+
+      if (numberVerify.ref) Object.assign(dataVerifies, { numberVerify });
+      if (lengthVerify.ref) Object.assign(dataVerifies, { lengthVerify });
+      if (lowercaseVerify.ref) Object.assign(dataVerifies, { lowercaseVerify });
+      if (uppercaseVerify.ref) Object.assign(dataVerifies, { uppercaseVerify });
+      if (specialCharsverify.ref) Object.assign(dataVerifies, { specialCharsverify });
+      nbVerified = Object.keys(dataVerifies).length;
+
+      const handleChangeIconsVerify = (e: string): number => {
+        const verifiesTests: boolean[] = [];
+
+        Object.keys(dataVerifies).map((key: string) => {
+          const test = dataVerifies[key].fn(e);
+          const icon = dataVerifies[key].ref.querySelector("[data-icon-securities]").querySelector("i");
+          verifiesTests.push(test);
+
+          if (test) {
+            icon.classList.remove("tri-times-circle");
+            icon.classList.add("tri-check-circle", "is-success");
+          } else {
+            icon.classList.remove("tri-check-circle", "is-success");
+            icon.classList.add("tri-times-circle");
+          }
+        });
+        return verifiesTests.filter((item) => item).length;
+      };
+
+      const handleChangeGauge = (points: number) => {
+        const calc = Number(((points / Object.keys(dataVerifies).length) * 100).toFixed(0));
+        if (calc <= 50 && calc > 0) {
+          gauge.style.width = "50%";
+          gauge.style.backgroundColor = red;
+        } else if (calc <= 99 && calc > 50) {
+          gauge.style.width = "75%";
+          gauge.style.backgroundColor = yellow;
+        } else if (calc === 100) {
+          gauge.style.width = "100%";
+          gauge.style.backgroundColor = green;
+        } else {
+          gauge.style.width = "0%";
+          gauge.style.backgroundColor = grey;
+        }
+      };
+
+      const onInput = (e: InputEvent) => {
+        const value = (e.target as HTMLInputElement).value;
+        const points = handleChangeIconsVerify(value);
+        handleChangeGauge(points);
+      };
+
+      input.addEventListener("input", onInput);
+      htmlElement.setAttribute(`data-gauges-initialized`, 'true')
+    });
+  }
+};

package/src/components/input-icon.ts

@@ -0,0 +1,36 @@
+export const initInputIcon = () => {
+  const iconsShowPwd = document.querySelectorAll<HTMLElement>("[data-show-pwd]");
+
+  if (iconsShowPwd) {
+    iconsShowPwd.forEach((htmlElement: HTMLElement) => {
+      const changeIcon = (icon: HTMLElement) => {
+        if (icon.classList.contains("tri-eye")) {
+          icon.classList.remove("tri-eye");
+          icon.classList.add("tri-eye-slash");
+        } else {
+          icon.classList.remove("tri-eye-slash");
+          icon.classList.add("tri-eye");
+        }
+      };
+
+      const changeTypeInput = (icon: HTMLElement) => {
+        const parent = icon.parentNode.parentNode;
+        let input = parent.querySelector("input");
+        if (!input) input = parent.parentNode.querySelector("input");
+        if (input.type === "password") {
+          input.type = "text";
+        } else {
+          input.type = "password";
+        }
+      };
+
+      const handleClickIcon = (e: Event) => {
+        const target = e.target as HTMLElement;
+        changeIcon(target);
+        changeTypeInput(target);
+      };
+      htmlElement.addEventListener("click", handleClickIcon);
+      htmlElement.setAttribute(`data-iconsShowPwd-initialized`, 'true')
+    });
+  }
+};

package/src/components/modal.ts

@@ -0,0 +1,104 @@
+export const initModals = () => {
+
+    let modalContexts: NodeListOf<HTMLElement> = document.querySelectorAll('[data-modal-context]');
+
+    for (let i = 0; i < modalContexts.length; i++) {
+        let modalContext: HTMLElement = modalContexts[i];
+
+        let modalOpenButtons: NodeListOf<HTMLElement> = modalContext.querySelectorAll('[data-modal-open]');
+        let modalElement: HTMLElement = modalContext.querySelector('[data-modal]');
+        let modalCloseButtons: NodeListOf<HTMLElement> = modalContext.querySelectorAll('[data-modal-close]');
+        let modalVideos: NodeListOf<HTMLVideoElement> = modalContext.querySelectorAll('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');
+
+        for (let j = 0; j < modalOpenButtons.length; j++) {
+            let modalOpenButton = modalOpenButtons[j];
+            let modalVideo: HTMLVideoElement = modalVideos[j];
+
+            modalOpenButton.addEventListener('click', function () {
+                makeModalActive(modalElement);
+                if (!modalVideo) {
+                    return;
+                } else {
+                    if (modalVideo.tagName.toLowerCase() === 'video') {
+                        modalVideo.play();
+                        return;
+                    }
+                    modalVideo.src = modalVideo.src + (modalVideo.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
+                }
+            });
+        }
+
+        for (let j = 0; j < modalCloseButtons.length; j++) {
+            let modalCloseButton = modalCloseButtons[j];
+            modalCloseButton.addEventListener('click', function () {
+                makeModalInactive(modalElement);
+            });
+        }
+
+        initClosingListeners(modalElement);
+
+        // TODO: supprimer en 1.0.0
+        // rétrocompatibilité : fermeture de la modal en cliquant n'importe où
+        const background: HTMLElement = modalContext.querySelector('.modal-background');
+        if (background) {
+            background.onclick = function () {
+                makeModalInactive(modalElement);
+            }
+        }
+        modalContext.setAttribute(`data-modal-initialized`, 'true')
+    }
+
+    /**
+     * Initialise l'écoute des événements permettant de fermer une modale
+     */
+    function initClosingListeners(modalElement: HTMLElement) {
+        document.addEventListener('keyup', function (e: any) {
+            e = e || window.event;
+            var isEscape = false;
+            if ('key' in e) {
+                isEscape = (e.key === 'Escape' || e.key === 'Esc');
+            } else {
+                isEscape = (e.keyCode === 27);
+            }
+            if (isEscape) {
+                makeModalInactive(modalElement);
+            }
+        });
+
+        document.addEventListener('click', function (e: MouseEvent) {
+            const target = e.target as HTMLInputElement
+            let modalContent = target.closest('[data-modal-content]');
+            let isModal = target.classList.contains('modal');
+            if (modalContent === null && isModal == true) {
+                makeModalInactive(modalElement);
+            }
+        });
+    }
+
+    /**
+     * Make an element active
+     * @param { Element } modalElementToMakeActive element to be made active
+     */
+    const makeModalActive = (modalElementToMakeActive: HTMLElement) => {
+        modalElementToMakeActive.classList.add('is-active');
+        document.body.style.overflow = 'hidden';
+    };
+
+    /**
+     * Make an element inactive
+     * @param { Element } modalElementToMakeInactive element to be made inactive
+     */
+    const makeModalInactive = (modalElementToMakeInactive: HTMLElement) => {
+        let video: HTMLVideoElement = modalElementToMakeInactive.querySelector('iframe[src*="youtube"], iframe[src*="vimeo"], video');
+        if (video) {
+            if (video.tagName.toLowerCase() === 'video') {
+                video.pause();
+                return;
+            }
+            video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');
+        }
+        modalElementToMakeInactive.classList.remove('is-active');
+        document.body.style.overflow = null;
+    };
+
+};

package/src/components/progress-radial.ts

@@ -0,0 +1,45 @@
+export const initProgressRadial = (progressRadial: HTMLElement) => {
+    const isInitialized = progressRadial.getAttribute('data-progress-radial-initialized');
+    if (!isInitialized) {
+        let firstProgressValueMax: number = Number(progressRadial.getAttribute('data-progress-radial-first-value'));
+        let secondProgressValueMax: number = Number(progressRadial.getAttribute('data-progress-radial-second-value'));
+        let backgroundStyle: string = '';
+
+        let firstProgressCurrentValue: number = 0;
+        let secondProgressCurrentValue: number = 0;
+
+        // If second value does not exist
+        if (secondProgressValueMax === 0) {
+            const animation = setInterval(() => {
+                if (firstProgressCurrentValue !== firstProgressValueMax) {
+                    firstProgressCurrentValue += 1;
+                } else {
+                    clearInterval(animation);
+                }
+                backgroundStyle = `radial-gradient(white 58%, transparent 51%),
+                                       conic-gradient(#0C7B91 0deg ${(360 * (firstProgressCurrentValue / 100))}deg, 
+                                                  gainsboro ${(360 * (firstProgressCurrentValue / 100))}deg 360deg)`;
+                progressRadial.style.background = backgroundStyle;
+            }, 13);
+        } else {
+            secondProgressValueMax += firstProgressValueMax;
+            const animation = setInterval(() => {
+                if (firstProgressCurrentValue < firstProgressValueMax) {
+                    firstProgressCurrentValue += 1;
+                }
+                if (secondProgressCurrentValue < secondProgressValueMax) {
+                    secondProgressCurrentValue += 1;
+                } else {
+                    clearInterval(animation);
+                }
+                backgroundStyle = `radial-gradient(white 58%, transparent 51%),
+                                       conic-gradient(#0C7B91 0deg ${(360 * (firstProgressCurrentValue / 100))}deg,
+                                                   #25465f ${(360 * (firstProgressCurrentValue / 100))}deg ${(360 * (secondProgressCurrentValue / 100))}deg,
+                                                   gainsboro ${(360 * (secondProgressCurrentValue / 100))}deg 360deg)`;
+                progressRadial.style.background = backgroundStyle;
+            }, 13);
+        }
+
+        progressRadial.setAttribute('data-progress-radial-initialized', 'true');
+    }
+};

package/src/components/range.ts

@@ -0,0 +1,48 @@
+export const initRange = (rangeContainer: HTMLElement) => {
+
+    let HTMLInputRangeMin: HTMLInputElement = rangeContainer.querySelector(".range-cursor-min");
+    let HTMLInputRangeMax: HTMLInputElement = rangeContainer.querySelector(".range-cursor-max");
+    let track: HTMLDivElement = rangeContainer.querySelector(".range-track");
+    let valueMin: HTMLHtmlElement = rangeContainer.querySelector(".range-value-min");
+    let valueMax: HTMLHtmlElement = rangeContainer.querySelector(".range-value-max");
+
+    let maxValue = HTMLInputRangeMin.max;
+    let gap = 0;
+
+    const setColor = () => {
+        let percent1 =
+            (Number(HTMLInputRangeMin.value) / Number(maxValue)) * 100;
+        let percent2 =
+            (Number(HTMLInputRangeMax.value) / Number(maxValue)) * 100;
+        track.style.background = `linear-gradient(to right, #E1E1E1 ${percent1}% , #0C7B91 ${percent1}% , #0C7B91 ${percent2}%, #E1E1E1 ${percent2}%) `;
+    };
+
+    setColor();
+
+    HTMLInputRangeMin.addEventListener("input", (e: InputEvent) => {
+        const event = e.target as HTMLInputElement;
+        if (Number(event.value) < Number(HTMLInputRangeMax.value) - gap) {
+            HTMLInputRangeMin.value = event.value;
+        } else {
+            HTMLInputRangeMin.value = String(
+                Number(HTMLInputRangeMax.value) - gap
+            );
+        }
+        valueMin.textContent = event.value;
+        setColor();
+    });
+
+    HTMLInputRangeMax.addEventListener("input", (e: InputEvent) => {
+        const event = e.target as HTMLInputElement;
+        if (Number(event.value) > Number(HTMLInputRangeMin.value) + gap) {
+            HTMLInputRangeMax.value = event.value;
+        } else {
+            HTMLInputRangeMax.value = String(
+                Number(HTMLInputRangeMin.value) + gap
+            );
+        }
+        valueMax.textContent = event.value;
+        setColor();
+    });
+    rangeContainer.setAttribute(`data-ranges-initialized`, 'true')
+};

package/src/components/segmented-control.ts

@@ -0,0 +1,16 @@
+export const initSegmentedControl = () => {
+  const HTMLButtons = document.querySelectorAll(".segmented-control-item");
+
+  HTMLButtons.forEach((button: HTMLButtonElement) => {
+    button.addEventListener("click", function () {
+      this.parentElement
+        .querySelector(".is-active")
+        .classList.remove("is-active");
+
+      if (!button.classList.contains("is-active")) {
+        button.classList.add("is-active");
+      }
+    });
+    button.setAttribute(`data-segmentedControl-initialized`, 'true')
+  });
+};

package/src/components/select.ts

@@ -0,0 +1,48 @@
+export const initSelects = () => {
+  const HTMLSelects = document.querySelectorAll('[data-select-name]')
+
+  if (HTMLSelects) {
+    HTMLSelects.forEach((HTMLSelect: HTMLDivElement) => {
+      const HTMLLabel = HTMLSelect.querySelector('label')
+      if (!HTMLSelect.classList.contains('select-disabled')) {
+        const HTMLParentOfSelect = HTMLSelect.parentNode as HTMLElement
+        let HTMLOptions = HTMLParentOfSelect.querySelector('[data-is-open-options]')
+
+        HTMLSelect.addEventListener('click', () => {
+          const isOpenOptions = HTMLOptions.getAttribute('data-is-open-options')
+          if (isOpenOptions === 'true') HTMLOptions.setAttribute('data-is-open-options', 'false')
+          if (isOpenOptions === 'false') HTMLOptions.setAttribute('data-is-open-options', 'true')
+        })
+
+        HTMLSelect.addEventListener('blur', () => {
+          HTMLOptions.setAttribute('data-is-open-options', 'false')
+        })
+
+        const options = HTMLOptions.querySelectorAll('[data-option-name]')
+        options.forEach((option: HTMLElement) => {
+          if (!option.classList.contains('select-options-option-disabled')) {
+            option.addEventListener('mousedown', () => {
+              // select option
+              options.forEach((opt: HTMLElement) => opt.classList.remove('select-options-option-activated'))
+              option.classList.add('select-options-option-activated')
+
+              // insert/update otp
+              let HTMLSpan: HTMLSpanElement = HTMLSelect.querySelector('[data-option-selected]')
+              if (!HTMLSpan) {
+                HTMLSpan = document.createElement('span')
+                HTMLSpan.classList.add('select-value')
+                if (!HTMLLabel || HTMLLabel === null) HTMLSpan.classList.add('no-label')
+                HTMLSelect.appendChild(HTMLSpan)
+              }
+              HTMLSelect.setAttribute('data-option-selected', option.getAttribute('data-option-name'))
+              HTMLSpan.setAttribute('data-option-selected', option.getAttribute('data-option-name'))
+              HTMLSpan.textContent = option.getAttribute('data-option-name')
+              HTMLParentOfSelect.classList.add('has-dynamic-placeholder')
+            })
+          }
+        })
+      }
+      HTMLSelect.setAttribute(`data-selects-initialized`, 'true')
+    })
+  }
+}

package/src/components/sticky.ts

@@ -0,0 +1,14 @@
+export const initSticky = () => {
+    const navbar = document.querySelector('.navbar');
+
+    const myObserverCallback: any = (event: any) => {
+        navbar.classList.toggle('enable-transition', event.intersectionRatio < 1);
+        setTimeout(() => {
+            event.target.parentNode.classList.toggle('is-sticky', event.intersectionRatio < 1)
+        }, 100);
+    };
+
+    let observer = new IntersectionObserver(myObserverCallback, { threshold: 1 });
+    observer.observe(navbar);
+
+};

package/src/components/table-expansion.ts

@@ -0,0 +1,11 @@
+export const initTableExpansion = () => {
+    let expandableRows: NodeListOf<HTMLElement> = document.querySelectorAll('[data-expandable-row]');
+    for (let i = 0; i < expandableRows.length; i++) {
+        let expandableRow: HTMLElement = expandableRows[i];
+        let trigger: HTMLElement = expandableRow.querySelector('[data-expandable-trigger]');
+        trigger.addEventListener('click', function () {
+            expandableRow.classList.toggle('is-expanded');
+        });
+        expandableRow.setAttribute(`data-tableexpansion-initialized`, 'true')
+    }
+}

package/src/components/tabs.ts

@@ -0,0 +1,102 @@
+export const initTabs = () => {
+  const tabContexts = document.querySelectorAll('[data-tabs-context]')
+
+  const styleCusto =
+    'right: 0;' +
+    'padding-left: 16px;' +
+    'width: 4.5rem !important;' +
+    'background: linear-gradient(90deg, rgba(256,256,256, 0) -25%, white 30%);\n' +
+    'background-attachment: local, local, scroll, scroll;'
+
+  const styledTabs = `
+    .tabs { 
+        padding-right: 2rem;
+    }
+`
+
+  const styleTabAttr = document.createElement('style')
+  styleTabAttr.innerText = styledTabs
+
+  tabContexts.forEach((tabContext) => {
+    const tabContextWidth = tabContext.clientWidth
+    let tabs = tabContext.querySelector('.tabs')
+    if(!tabs) {
+      tabs = tabContext.querySelector('[data-real-class*="tabs"]')
+    }
+    const tabsWidth = tabs.scrollWidth
+
+    if (tabsWidth > tabContextWidth) {
+      if (!tabs.innerHTML.includes('icon is-small is-absolute')) {
+        const arrowIcon = `<span class="icon is-small is-absolute" style="${styleCusto}"><i class="tri-arrow-right" aria-hidden=\'true\'></i></span>`
+        tabs.innerHTML += arrowIcon
+        tabs.appendChild(styleTabAttr)
+      }
+    }
+  })
+
+  let tabsContext = document.querySelectorAll('[data-tabs-context]')
+  for (let i = 0; i < tabsContext.length; i++) {
+    let tabContext = tabsContext[i]
+    let tabs: NodeListOf<HTMLElement> = tabContext.querySelectorAll('[data-tab-navigation]')
+    let tabsContent: NodeListOf<HTMLElement> = tabContext.querySelectorAll('[data-tab-content]')
+    for (let j = 0; j < tabs.length; j++) {
+      let tabElement: HTMLElement = tabs[j]
+      let tabContent: HTMLElement = tabsContent[j]
+      tabElement.addEventListener('click', function () {
+        makeTabActive(tabElement, tabContent)
+      })
+      tabElement.addEventListener('keyup', (e: KeyboardEvent) => {
+        e.preventDefault()
+        switch (e.keyCode) {
+          case 35: // end key
+            makeTabActive(tabs[tabs.length - 1], tabsContent[tabs.length - 1])
+            break
+          case 36: // home key
+            makeTabActive(tabs[0], tabsContent[0])
+            break
+          case 37: // left arrow
+            let previous = (j - 1) % tabs.length
+            makeTabActive(tabs[previous], tabsContent[previous])
+            break
+          case 39: // right arrow
+            let next = (j + 1) % tabs.length
+            makeTabActive(tabs[next], tabsContent[next])
+            break
+        }
+      })
+    }
+
+    /**
+     * Make an element inactive
+     */
+    const makeAllTabsInactive = () => {
+      for (let i = 0; i < tabs.length; i++) {
+        tabs[i].classList.remove('is-active')
+        tabs[i].setAttribute('aria-selected', 'false')
+        tabs[i].setAttribute('tabindex', '-1')
+      }
+
+      for (let j = 0; j < tabsContent.length; j++) {
+        tabsContent[j].classList.remove('is-active')
+        tabsContent[j].setAttribute('aria-expanded', 'false')
+      }
+    }
+
+    /**
+     * Make an element active
+     * @param { Element } tabElementToMakeActive element to be made active
+     * @param tabContentToMakeActive
+     */
+    const makeTabActive = (tabElementToMakeActive: HTMLElement, tabContentToMakeActive: HTMLElement) => {
+      makeAllTabsInactive()
+      tabElementToMakeActive.classList.add('is-active')
+      tabElementToMakeActive.setAttribute('aria-selected', 'true')
+      tabElementToMakeActive.setAttribute('tabindex', '0')
+      tabElementToMakeActive.focus()
+      tabContentToMakeActive.classList.add('is-active')
+      tabContentToMakeActive.setAttribute('aria-expanded', 'true')
+    }
+    
+    tabContext.setAttribute(`data-tab-initialized`, 'true')
+  }
+}

package/src/components/textarea.ts

@@ -0,0 +1,27 @@
+export const initTextarea = () => {
+    const textareaWrappers = document.querySelectorAll(".textarea-wrapper");
+    textareaWrappers.forEach((textareaWrapper: HTMLElement) => {
+        const isInitialized = textareaWrapper.getAttribute('data-textarea-initialized');
+        if(!isInitialized) {
+            const textarea: HTMLTextAreaElement = textareaWrapper.querySelector('textarea.textarea');
+
+            const counterMaxLength = textarea.getAttribute('maxlength');
+            if (counterMaxLength) {
+                var currentLength = 0;
+                const counter = document.createElement('div');
+                counter.classList.add('counter');
+                counter.innerHTML = `${currentLength}/${counterMaxLength}`;
+                textareaWrapper.appendChild(counter);
+
+                textarea.addEventListener("input", function (e) {
+                    currentLength = this.value.length;
+                    counter.innerHTML = `${currentLength}/${counterMaxLength}`;
+                    if(currentLength === 10) {
+                        e.preventDefault();
+                    }
+                });
+            }
+            textareaWrapper.setAttribute('data-textarea-initialized', 'true');
+        }
+    });
+};

package/src/utils/intersectionObserver.ts

@@ -0,0 +1,13 @@
+type functionToPlayType = (htmlElement: HTMLElement) => void;
+
+export const intersectionObserver = (elementToObserve: HTMLElement, functionToPlay: functionToPlayType) => {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry: any) => {
+            if (entry.isIntersecting) {
+                functionToPlay(entry.target);
+            }
+        });
+    });
+
+    observer.observe(elementToObserve);
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true
+  },
+  "include": ["./src/**/*"]
+}

package/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+    plugins: [tsconfigPaths()],
+    root: resolve(__dirname, 'src/'),
+    base: './',
+    mode: 'production',
+    build: {
+        outDir: '../lib',
+        lib: {
+            entry: resolve(__dirname, 'src/app.ts'),
+            name: 'trilogy-ds-vanilla',
+            fileName: () => `trilogy-ds-vanilla.js`,
+        },
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, 'src/app.ts'),
+            },
+        },
+    }
+})