npm - @trilogy-ds/vanilla - Versions diffs - 0.0.1-alpha-prompt - Mend

@trilogy-ds/vanilla 0.0.1-alpha-prompt

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 (25) hide show

package/.eslintrc.js +82 -0
package/.prettierrc.js +12 -0
package/README.md +18 -0
package/examples/tabs.html +43 -0
package/lib/trilogy-ds-vanilla.js +6 -0
package/package.json +28 -0
package/src/app.ts +138 -0
package/src/components/autocomplete.ts +133 -0
package/src/components/chips.ts +28 -0
package/src/components/countdown.ts +40 -0
package/src/components/font-variant.ts +42 -0
package/src/components/input-gauge.ts +111 -0
package/src/components/input-icon.ts +36 -0
package/src/components/modal.ts +104 -0
package/src/components/progress-radial.ts +45 -0
package/src/components/range.ts +48 -0
package/src/components/segmented-control.ts +16 -0
package/src/components/select.ts +48 -0
package/src/components/sticky.ts +14 -0
package/src/components/table-expansion.ts +11 -0
package/src/components/tabs.ts +68 -0
package/src/components/textarea.ts +27 -0
package/src/utils/intersectionObserver.ts +13 -0
package/tsconfig.json +10 -0
package/vite.config.js +23 -0

package/.eslintrc.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/examples/tabs.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Tab List with Arrows</title>
+  <link rel="stylesheet" href="../../styles/dist/default/trilogy.css" />
+</head>
+<body>
+<div class="tabs">
+  <div data-tablist class="tab-list is-aligned-start is-arrows" id="tablist">
+    <span data-arrow-prev class="icon is-medium arrow-prev hidden">&larr;</span>
+    <button aria-selected="true" data-tab-navigation="" class="tab is-active" role="tab" data-index="0"><div>Tab 1</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="1"><div>Tab 2</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="2"><div>Tab 3</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="3"><div>Tab 4</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="4"><div>Tab 5</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="5"><div>Tab 6</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="6"><div>Tab 7</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="7"><div>Tab 8</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="8"><div>Tab 9</div></button>
+    <button aria-selected="false" data-tab-navigation="" class="tab" role="tab" data-index="9"><div>Tab 10</div></button>
+    <span data-arrow-next class="icon is-medium arrow-next">&rarr;</span>
+  </div>
+  <div class="tab-panels">
+    <div data-tab-panel class="tab-panel is-active" data-index="0"><p>Tab 1 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="1"><p>Tab 2 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="2"><p>Tab 3 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="3"><p>Tab 4 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="4"><p>Tab 5 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="5"><p>Tab 6 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="6"><p>Tab 7 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="7"><p>Tab 8 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="8"><p>Tab 9 content</p></div>
+    <div data-tab-panel class="tab-panel" data-index="9"><p>Tab 10 content</p></div>
+  </div>
+</div>
+<script src="../lib/trilogy-ds-vanilla.js"></script>
+</body>
+</html>

package/lib/trilogy-ds-vanilla.js ADDED Viewed

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

package/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "@trilogy-ds/vanilla",
+  "version": "0.0.1-alpha-prompt",
+  "author": "Bouygues Telecom",
+  "main": "lib/trilogy-ds-vanilla.js",
+  "scripts": {
+    "start": "webpack --watch",
+    "build": "rimraf ./lib && vite --config vite.config.js build",
+    "serve": "npm run build && npx http-server -p 8090 ./lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BouyguesTelecom/trilogy",
+    "directory": "packages/vanilla"
+  },
+  "license": "ISC",
+  "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",
+    "@storybook/builder-webpack5": "8.1.10",
+    "eslint": "^9.5.0",
+    "fork-ts-checker-webpack-plugin": "^6.1.0",
+    "rimraf": "^3.0.2"
+  }
+}

package/src/app.ts ADDED Viewed

@@ -0,0 +1,138 @@
+import { initModals } from './components/modal'
+import { initVariant } from './components/font-variant'
+import { initCountdowns } from './components/countdown'
+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()
+  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 '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/autocomplete.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,68 @@
+export const initTabs = (): void => {
+  const tabList = document.querySelector('[data-tablist]') as HTMLDivElement;
+  const tabs = tabList.querySelectorAll<HTMLButtonElement>('[data-tab-navigation]');
+  const arrowPrev = tabList.querySelector<HTMLSpanElement>('[data-arrow-prev]');
+  const arrowNext = tabList.querySelector<HTMLSpanElement>('[data-arrow-next]');
+  const updateArrows = (): void => {
+    if (!arrowPrev || !arrowNext) return;
+    const scrollLeft = tabList.scrollLeft;
+    const scrollWidth = tabList.scrollWidth;
+    const clientWidth = tabList.clientWidth;
+    arrowPrev.classList.toggle('hidden', scrollLeft <= 0);
+    arrowNext.classList.toggle('hidden', scrollWidth <= scrollLeft + clientWidth);
+  }
+  const scrollTabsToNext = (direction: 1 | -1): void => {
+    const tabsArray = Array.from(tabs);
+    const currentScrollLeft = tabList.scrollLeft;
+    let targetTab: HTMLButtonElement | undefined;
+    if (direction === 1) {
+      targetTab = tabsArray.find(tab => tab.offsetLeft > currentScrollLeft);
+    } else {
+      targetTab = tabsArray.slice().reverse().find(tab => tab.offsetLeft < currentScrollLeft);
+    }
+    if (targetTab) {
+      tabList.scrollTo({ left: targetTab.offsetLeft, behavior: 'smooth' });
+    } else if (direction === -1) {
+      // If we're scrolling left and no targetTab found, scroll to the very start
+      tabList.scrollTo({ left: 0, behavior: 'smooth' });
+    }
+    updateArrows();
+  }
+  if (arrowPrev) {
+    arrowPrev.addEventListener('click', () => {
+      scrollTabsToNext(-1);
+    });
+  }
+  if (arrowNext) {
+    arrowNext.addEventListener('click', () => {
+      scrollTabsToNext(1);
+    });
+  }
+  tabs.forEach((tab, index) => {
+    tab.addEventListener('click', () => {
+      tabs.forEach(t => t.classList.remove('is-active'));
+      tab.classList.add('is-active');
+      const panels = document.querySelectorAll<HTMLDivElement>('[data-tab-panel]');
+      panels.forEach(panel => panel.classList.remove('is-active'));
+      const activePanel = document.querySelector<HTMLDivElement>(`[data-tab-panel][data-index="${index}"]`);
+      if (activePanel) activePanel.classList.add('is-active');
+    });
+  });
+  tabList.addEventListener('scroll', updateArrows);
+  window.addEventListener('resize', updateArrows);
+  updateArrows();
+}

package/src/components/textarea.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/vite.config.js ADDED Viewed

@@ -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'),
+            },
+        },
+    }
+})