hr-design-system-handlebars 0.56.7 → 0.56.10

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.56.10 (Fri Sep 02 2022)
+
+#### 🐛 Bug Fix
+
+- DPE-1689 : new JSON Key 'isListOrFlow' and some design tweaks [#315](https://github.com/mumprod/hr-design-system-handlebars/pull/315) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.9 (Fri Sep 02 2022)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 1567 [#314](https://github.com/mumprod/hr-design-system-handlebars/pull/314) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.56.8 (Thu Sep 01 2022)
+
+#### 🐛 Bug Fix
+
+- Content nav part9 [#313](https://github.com/mumprod/hr-design-system-handlebars/pull/313) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.56.7 (Thu Sep 01 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/ifCond.js

@@ -0,0 +1,28 @@
+const handlebars = require("handlebars");
+module.exports = function (v1, operator, v2, options) {
+  var options = arguments[3];
+  switch (operator) {
+    case '==':
+        return (v1 == v2) ? options.fn(this) : options.inverse(this);
+    case '===':
+        return (v1 === v2) ? options.fn(this) : options.inverse(this);
+    case '!=':
+        return (v1 != v2) ? options.fn(this) : options.inverse(this);
+    case '!==':
+        return (v1 !== v2) ? options.fn(this) : options.inverse(this);
+    case '<':
+        return (v1 < v2) ? options.fn(this) : options.inverse(this);
+    case '<=':
+        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
+    case '>':
+        return (v1 > v2) ? options.fn(this) : options.inverse(this);
+    case '>=':
+        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
+    case '&&':
+        return (v1 && v2) ? options.fn(this) : options.inverse(this);
+    case '||':
+        return (v1 || v2) ? options.fn(this) : options.inverse(this);
+    default:
+        return options.inverse(this);
+}
+};

package/dist/assets/index.css

@@ -434,7 +434,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
+.btn--secondary, .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -689,6 +689,14 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -709,10 +717,6 @@ video {
   margin-left: 1px;
   margin-right: 1px;
 }
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
-}
 .mx-1\.5 {
   margin-left: 0.375rem;
   margin-right: 0.375rem;
@@ -733,12 +737,12 @@ video {
 .mt-0 {
   margin-top: 0px;
 }
-.mt-1 {
-  margin-top: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -748,9 +752,6 @@ video {
 .-mt-10 {
   margin-top: -2.5rem;
 }
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
 .\!mb-0 {
   margin-bottom: 0px !important;
 }
@@ -1295,6 +1296,10 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-grey-light {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 248, 248, var(--tw-bg-opacity));
+}
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
@@ -1683,6 +1688,10 @@ video {
   --tw-text-opacity: 1 !important;
   color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
 }
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgba(250, 204, 21, var(--tw-text-opacity));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -1699,6 +1708,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(29, 78, 216, var(--tw-text-opacity));
 }
+.text-grey-dark {
+  --tw-text-opacity: 1;
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
+}
 .text-blue-congress {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
@@ -1776,14 +1789,14 @@ video {
 .opacity-80 {
   opacity: 0.8;
 }
-.shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
-  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10);
-  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color);
-  -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-          box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-          box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
+  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
+  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
+  -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+          box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
 }
 .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
   --tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
@@ -1896,7 +1909,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1662050483686;
+  counter-reset: cnt1662131944866;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2279,7 +2292,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1662050483686 1;
+  counter-increment: cnt1662131944866 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2296,7 +2309,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1662050483686);
+  content: counter(cnt1662131944866);
 }
 /*! purgecss start ignore */
 :root,
@@ -2664,25 +2677,25 @@ video {
     right: 0;
     bottom: 0;
 }
-.placeholder\:text-gray-800::-webkit-input-placeholder {
+.placeholder\:text-grey-dark::-webkit-input-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800::-moz-placeholder {
+.placeholder\:text-grey-dark::-moz-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800:-ms-input-placeholder {
+.placeholder\:text-grey-dark:-ms-input-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800::-ms-input-placeholder {
+.placeholder\:text-grey-dark::-ms-input-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800::placeholder {
+.placeholder\:text-grey-dark::placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
 .first\:border-t:first-child {
   border-top-width: 1px;

package/dist/assets/js/views/base/autosuggest/autoSuggest.feature.js

@@ -60,7 +60,7 @@ const AutoSuggest = function (context) {
             ) {
                 hasMatch = true
                 words[i] =
-                    "<span style='color:#ff9000' >" +
+                    "<span class='text-yellow-400' style='' >" +
                     words[i].slice(0, value.length) +
                     '</span>' +
                     words[i].slice(value.length)

package/dist/assets/js/views/generic/hrQuery.subfeature.js

@@ -1,7 +1,7 @@
 import Initializer from 'initializer'
 import loadFeature from 'loadFeature'
 
-const hr$ = (selector, element) => {
+const hr$ = function (selector, element) {
     // if element set, use it
     // if not use document as default
     const rootElement = element || document
@@ -34,24 +34,19 @@ const hr$ = (selector, element) => {
     return rootElement.querySelectorAll(selector)
 }
 
-const stripTags = text => {
-    if (text) {
-        return text.replace(/(<([^>]+)>)/gi, '')
-    }
-    return false
-}
+const stripTags = (text) => (text ? text.replace(/(<([^>]+)>)/gi, '') : false)
 
 const getViewportWidth = () =>
     Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 
-const isString = value => Object.prototype.toString.call(value) === '[object String]'
+const isString = (value) => Object.prototype.toString.call(value) === '[object String]'
 
-const isElementInViewport = el => {
+const isElementInViewport = (el) => {
     const rect = el.getBoundingClientRect()
     return rect.top <= (document.documentElement || document.body).clientHeight
 }
 
-const getClosestParentWithTag = (tagName, node) => {
+const getClosestParentWithTag = function (tagName, node) {
     while (node !== null && node.tagName !== 'BODY') {
         if (node.tagName && node.tagName.toLowerCase() === tagName) {
             return node
@@ -61,7 +56,7 @@ const getClosestParentWithTag = (tagName, node) => {
     return false
 }
 
-const getNodeWithClassInPath = (className, startNode) => {
+const getNodeWithClassInPath = function (className, startNode) {
     let node = startNode
 
     while (node && node !== document) {
@@ -73,7 +68,7 @@ const getNodeWithClassInPath = (className, startNode) => {
     return false
 }
 
-const isDescendant = (parent, child) => {
+const isDescendant = function (parent, child) {
     let node = child.parentNode
     while (node !== null) {
         if (node === parent) {
@@ -85,9 +80,9 @@ const isDescendant = (parent, child) => {
 }
 
 /* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
-const debounce = (fn, delay) => {
+const debounce = function (fn, delay) {
     let timer = null
-    return (...args) => {
+    return function (...args) {
         const context = this
         clearTimeout(timer)
         timer = setTimeout(() => {
@@ -96,11 +91,11 @@ const debounce = (fn, delay) => {
     }
 }
 /* feuert all x ms */
-const throttle = (fn, threshhold, scope) => {
+const throttle = function (fn, threshhold, scope) {
     threshhold = threshhold || 250
     let last
     let deferTimer
-    return (...args) => {
+    return function (...args) {
         const context = scope || this
 
         const now = +new Date()
@@ -128,10 +123,10 @@ const throttle = (fn, threshhold, scope) => {
     canOnlyFireOnce(); // nada
  *
  */
-const once = (fn, context) => {
+const once = function (fn, context) {
     let result
 
-    return (...args) => {
+    return function (...args) {
         if (fn) {
             result = fn.apply(context || this, args)
             fn = null
@@ -141,16 +136,25 @@ const once = (fn, context) => {
     }
 }
 
-const listen = (eventName, fn, documentNode) => {
+const listen = function (eventName, fn, documentNode, forceActive = false) {
     documentNode = documentNode === undefined ? document : documentNode
 
+    // Use passive listeners to improve scrolling performance
+    // See:
+    // https://web.dev/uses-passive-event-listeners/
+    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+
+    const isTouchOrMouseEvent =
+        eventName === 'touchstart' || eventName === 'touchmove' || eventName === 'wheel'
+    const isPassive = Modernizr.passiveeventlisteners && !forceActive && isTouchOrMouseEvent
+
     if (window.attachEvent) {
         documentNode.attachEvent(eventName, fn)
     } else {
-        documentNode.addEventListener(eventName, fn)
+        documentNode.addEventListener(eventName, fn, isPassive ? { passive: true } : false)
     }
 }
-const unlisten = (eventName, fn, documentNode) => {
+const unlisten = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     if (window.attachEvent) {
@@ -159,7 +163,7 @@ const unlisten = (eventName, fn, documentNode) => {
         documentNode.removeEventListener(eventName, fn)
     }
 }
-const listenOnce = (eventName, fn, documentNode) => {
+const listenOnce = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     documentNode.addEventListener(eventName, fn, { once: true })
@@ -194,7 +198,7 @@ const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
     setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
 }
 
-const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+const setCookie = function (cookieName, cookieValue, cookieLifetime) {
     let expires
 
     const domain = getDomain()
@@ -211,7 +215,7 @@ const setCookie = (cookieName, cookieValue, cookieLifetime) => {
         cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
 }
 
-const getJSONCookie = cookieName => {
+const getJSONCookie = (cookieName) => {
     let cookie
 
     try {
@@ -221,12 +225,12 @@ const getJSONCookie = cookieName => {
     return cookie
 }
 
-const getCookie = cookieName => {
+const getCookie = (cookieName) => {
     let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
     return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
 }
 
-const deleteCookie = cookieName => {
+const deleteCookie = (cookieName) => {
     const domain = getDomain()
     document.cookie =
         cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
@@ -235,17 +239,18 @@ const deleteCookie = cookieName => {
 const getDomain = () => {
     return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
 }
-const requestTimeout = (fn, delay) => {
-    var requestAnimFrame = (function() {
+const requestTimeout = function (fn, delay) {
+    var requestAnimFrame = (function () {
             return (
                 window.requestAnimationFrame ||
-                function(callback, element) {
+                function (callback, element) {
                     window.setTimeout(callback, 1000 / 60)
                 }
             )
         })(),
         start = new Date().getTime(),
         handle = {}
+
     function loop() {
         var current = new Date().getTime(),
             delta = current - start
@@ -255,11 +260,12 @@ const requestTimeout = (fn, delay) => {
             handle.value = requestAnimFrame(loop)
         }
     }
+
     handle.value = requestAnimFrame(loop)
     return handle
 }
 
-const replaceAnimated = (
+const replaceAnimated = function (
     elem,
     data,
     rescan,
@@ -269,7 +275,7 @@ const replaceAnimated = (
     valueTo,
     easing,
     duration
-) => {
+) {
     const property = 'opacity'
     timeoutDelay = timeoutDelay || 800
     valueFrom = valueFrom || 0.2
@@ -283,7 +289,7 @@ const replaceAnimated = (
 
     elem.style[property] = valueFrom
 
-    requestTimeout(function() {
+    requestTimeout(function () {
         if (data) {
             elem.innerHTML = data
         }
@@ -300,33 +306,33 @@ const replaceAnimated = (
     }, timeoutDelay)
 }
 
-hr$.loadScript = function(id, scriptUrl, async, callback) {
-    if (document.getElementById(id)) return
+const getScrollY = () =>
+    window.pageYOffset !== undefined
+        ? window.pageYOffset
+        : (document.documentElement || document.body.parentNode || document.body).scrollTop
 
-    var firstScriptTagInPage = hr$('script')[0],
-        scriptTag = document.createElement('script')
+//Funktion um X & Y Offset eines Elements zu ermitteln
+const getElementOffset = function (el) {
+    let _x = 0
+    let _y = 0
+    _x = Math.round(el.getBoundingClientRect().left)
+    _y = Math.round(el.getBoundingClientRect().top)
 
-    scriptTag.id = id
-    scriptTag.src = scriptUrl
+    return { top: _y, left: _x }
+}
 
-    if (async) {
-        scriptTag.setAttribute('async', !!async)
-    }
+const reinitializeFeature = function (element) {
+    Initializer.run(element, loadFeature)
+}
 
-    if (callback) {
-        scriptTag.addEventListener(
-            'load',
-            function(e) {
-                callback(null, e)
-            },
-            false
-        )
+const removeScript = function (id) {
+    const element = document.getElementById(id)
+    if (element) {
+        element.parentNode.removeChild(element)
     }
-
-    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
-const loadScript = (id, scriptUrl, async, callback) => {
+const loadScript = function (id, scriptUrl, async, callback) {
     if (document.getElementById(id)) return
 
     let firstScriptTagInPage = hr$('script')[0],
@@ -342,7 +348,7 @@ const loadScript = (id, scriptUrl, async, callback) => {
     if (callback) {
         scriptTag.addEventListener(
             'load',
-            function(e) {
+            function (e) {
                 callback(null, e)
             },
             false
@@ -352,7 +358,94 @@ const loadScript = (id, scriptUrl, async, callback) => {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+/*
+ * Fügt ein "style" bereich zum dokument hinzu
+ * und gibt eine referenz darauf zurück
+ * auf der man dann mit insertRule arbeiten kann
+ */
+const addStyle = function (css, mediaQuery) {
+    // Create the <style> tag
+    const style = document.createElement('style')
+
+    if (mediaQuery) {
+        style.setAttribute('media', mediaQuery)
+    }
+
+    // Add the <style> element to the page
+    if (style.styleSheet) {
+        style.styleSheet.cssText = css || ''
+    } else {
+        style.appendChild(document.createTextNode(css || ''))
+    }
+
+    document.head.appendChild(style)
+
+    return style.sheet
+}
+
+const simulateClickOn = function (elem) {
+    elem.dispatchEvent(
+        new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        })
+    )
+}
+
+/*!
+ * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
+ * modified gist.github.com/joelambert/1002116
+ * the fallback function requestAnimFrame is incorporated
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Object} fn The callback function
+ * @param {Int} delay The delay in milliseconds
+ * requestInterval(fn, delay);
+ */
+const requestInterval = function (fn, delay) {
+    const requestAnimFrame = (function () {
+            return (
+                window.requestAnimationFrame ||
+                function (callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        handle = {}
+    let start = new Date().getTime()
+
+    function loop() {
+        handle.value = requestAnimFrame(loop)
+        const current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+            start = new Date().getTime()
+        }
+    }
+
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+/*!
+ * Behaves the same as clearInterval except uses cancelRequestAnimationFrame()
+ * where possible for better performance
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Int|Object} handle function handle, or function
+ * clearRequestInterval(handle);
+ */
+const clearRequestInterval = (handle) =>
+    window.cancelAnimationFrame && handle
+        ? window.cancelAnimationFrame(handle.value)
+        : window.clearInterval(handle)
+
 export {
+    addStyle,
     hr$,
     stripTags,
     getViewportWidth,
@@ -373,8 +466,15 @@ export {
     setJSONCookie,
     getJSONCookie,
     getCookie,
+    getScrollY,
+    getElementOffset,
     deleteCookie,
+    requestInterval,
+    clearRequestInterval,
     requestTimeout,
     replaceAnimated,
-    loadScript
+    loadScript,
+    removeScript,
+    reinitializeFeature,
+    simulateClickOn,
 }

package/dist/views/base/autosuggest/autoSuggest.feature.js

@@ -60,7 +60,7 @@ const AutoSuggest = function (context) {
             ) {
                 hasMatch = true
                 words[i] =
-                    "<span style='color:#ff9000' >" +
+                    "<span class='text-yellow-400' style='' >" +
                     words[i].slice(0, value.length) +
                     '</span>' +
                     words[i].slice(value.length)