hr-design-system-handlebars 0.54.1 → 0.55.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# v0.55.0 (Fri Aug 19 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1689 teaser content navi [#301](https://github.com/mumprod/hr-design-system-handlebars/pull/301) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.54.3 (Fri Aug 19 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1656 [#299](https://github.com/mumprod/hr-design-system-handlebars/pull/299) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.54.2 (Fri Aug 19 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1656 [#298](https://github.com/mumprod/hr-design-system-handlebars/pull/298) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
 # v0.54.1 (Fri Aug 19 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -434,7 +434,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .shadow-inner, .shadow-xl {
+.btn--secondary, .shadow-\[0_13px_27px_-2px_rgba\(50\2c 50\2c 93\2c 0\.25\)\], .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);
@@ -674,6 +674,9 @@ video {
 .\!m-0 {
   margin: 0px !important;
 }
+.m-0 {
+  margin: 0px;
+}
 .m-1\.5 {
   margin: 0.375rem;
 }
@@ -688,6 +691,10 @@ video {
   margin-left: 1.25rem;
   margin-right: 1.25rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -718,6 +725,18 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.\!mb-0 {
+  margin-bottom: 0px !important;
+}
+.mr-2 {
+  margin-right: 0.5rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -809,6 +828,12 @@ video {
 .h-10 {
   height: 2.5rem;
 }
+.h-8 {
+  height: 2rem;
+}
+.h-4 {
+  height: 1rem;
+}
 .h-full {
   height: 100%;
 }
@@ -842,12 +867,6 @@ video {
 .h-3 {
   height: 0.75rem;
 }
-.h-4 {
-  height: 1rem;
-}
-.h-8 {
-  height: 2rem;
-}
 .h-6 {
   height: 1.5rem;
 }
@@ -872,6 +891,17 @@ video {
 .w-10 {
   width: 2.5rem;
 }
+.\!w-full {
+  width: 100% !important;
+}
+.w-fit {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.w-4 {
+  width: 1rem;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -884,6 +914,9 @@ video {
 .w-40 {
   width: 10rem;
 }
+.w-auto {
+  width: auto;
+}
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -895,9 +928,6 @@ video {
   width: -moz-max-content;
   width: max-content;
 }
-.w-4 {
-  width: 1rem;
-}
 .w-9 {
   width: 2.25rem;
 }
@@ -1128,9 +1158,18 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
+.\!rounded-none {
+  border-radius: 0px !important;
+}
+.rounded-none {
+  border-radius: 0px;
+}
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-sm {
+  border-radius: 0.125rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1167,21 +1206,30 @@ video {
   border-left-width: 1px;
   border-right-width: 1px;
 }
+.border-l-0 {
+  border-left-width: 0px;
+}
+.border-r-0 {
+  border-right-width: 0px;
+}
+.border-t-0 {
+  border-top-width: 0px;
+}
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-r {
   border-right-width: 1px;
 }
 .border-l-2 {
   border-left-width: 2px;
 }
-.border-b {
-  border-bottom-width: 1px;
+.border-l {
+  border-left-width: 1px;
 }
 .border-b-0 {
   border-bottom-width: 0px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-t {
   border-top-width: 1px;
 }
@@ -1206,6 +1254,10 @@ video {
   border-color: #006dc1;
   border-color: var(--color-topline);
 }
+.border-blue-congress {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
+}
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgba(156, 163, 175, var(--tw-border-opacity));
@@ -1218,10 +1270,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
 }
-.border-blue-congress {
-  --tw-border-opacity: 1;
-  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
-}
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -1345,6 +1393,9 @@ video {
 .fill-white {
   fill: #ffffff;
 }
+.fill-congress {
+  fill: #005293;
+}
 .fill-current {
   fill: currentColor;
 }
@@ -1423,14 +1474,14 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1447,12 +1498,12 @@ video {
   padding-top: 1px;
   padding-bottom: 1px;
 }
-.pt-px {
-  padding-top: 1px;
-}
 .pl-4 {
   padding-left: 1rem;
 }
+.pt-px {
+  padding-top: 1px;
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1705,6 +1756,15 @@ video {
 .opacity-80 {
   opacity: 0.8;
 }
+.shadow-\[0_13px_27px_-2px_rgba\(50\2c 50\2c 93\2c 0\.25\)\] {
+  --tw-shadow: 0 13px 27px -2px rgba(50,50,93,0.25);
+  --tw-shadow-colored: 0 13px 27px -2px 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-inner {
   --tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
   --tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
@@ -1807,7 +1867,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1660913417985;
+  counter-reset: cnt1660921058047;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2190,7 +2250,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1660913417985 1;
+  counter-increment: cnt1660921058047 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2207,7 +2267,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1660913417985);
+  content: counter(cnt1660921058047);
 }
 /*! purgecss start ignore */
 :root,
@@ -2596,9 +2656,6 @@ video {
 .last-of-type\:hidden:last-of-type {
   display: none;
 }
-.last-of-type\:pb-9:last-of-type {
-  padding-bottom: 2.25rem;
-}
 .last-of-type\:pb-0:last-of-type {
   padding-bottom: 0px;
 }
@@ -2625,6 +2682,9 @@ video {
 .hover\:fill-blue-jellyBean:hover {
   fill: #006dc1;
 }
+.hover\:fill-white:hover {
+  fill: #ffffff;
+}
 .hover\:fill-orange-spicyCarrot:hover {
   fill: #d34600;
 }
@@ -2694,6 +2754,14 @@ video {
     position: absolute;
   }
 
+  .md\:relative {
+    position: relative;
+  }
+
+  .md\:left-0 {
+    left: 0px;
+  }
+
   .md\:top-auto {
     top: auto;
   }
@@ -2706,10 +2774,6 @@ video {
     top: 3rem;
   }
 
-  .md\:left-0 {
-    left: 0px;
-  }
-
   .md\:z-10000 {
     z-index: 10000;
   }
@@ -2742,11 +2806,35 @@ video {
     grid-column: span 3 / span 3;
   }
 
+  .md\:col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+
   .md\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
   }
 
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:\!mr-0 {
+    margin-right: 0px !important;
+  }
+
+  .md\:\!mr-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .md\:\!mb-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .md\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -2785,6 +2873,10 @@ video {
     height: 1.75rem;
   }
 
+  .md\:h-auto {
+    height: auto;
+  }
+
   .md\:h-full {
     height: 100%;
   }
@@ -2793,6 +2885,22 @@ video {
     height: 2rem;
   }
 
+  .md\:\!w-full {
+    width: 100% !important;
+  }
+
+  .md\:\!w-fit {
+    width: -webkit-fit-content !important;
+    width: -moz-fit-content !important;
+    width: fit-content !important;
+  }
+
+  .md\:w-fit {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -2862,6 +2970,14 @@ video {
             justify-content: flex-end;
   }
 
+  .md\:overflow-visible {
+    overflow: visible;
+  }
+
+  .md\:\!rounded {
+    border-radius: 0.25rem !important;
+  }
+
   .md\:rounded-none {
     border-radius: 0px;
   }
@@ -2874,6 +2990,10 @@ video {
     border-bottom-right-radius: 1.5rem;
   }
 
+  .md\:\!border {
+    border-width: 1px !important;
+  }
+
   .md\:border-0 {
     border-width: 0px;
   }

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

@@ -0,0 +1,108 @@
+import { hr$, stripTags, throttle } from 'hrQuery'
+
+const AutoSuggest = function (context) {
+    const { options } = context,
+        { element: rootElement } = context,
+        filterGroups = hr$(options.filterGroupsSelector, rootElement),
+        /*Node-List von Elementen die gefiltert werden sollen*/
+        filterElements = hr$(options.filterElementSelector, rootElement),
+        /*Klasse die gesetzt wird auf zutreffende Einträge*/
+        matchedClass = options.matchedClass,
+        /*Klasse die gesetzt wird auf gefilterte Einträge*/
+        unmatchedClass = options.unmatchedClass,
+        inputEl = hr$(options.inputElementSelector, rootElement)[0]
+
+    const filterList = function (value) {
+        for (let j = 0; j < filterElements.length; j++) {
+            filterElement(filterElements[j], value)
+        }
+
+        for (let i = 0; i < filterGroups.length; i++) {
+            if (hr$('.' + matchedClass, filterGroups[i]).length > 0) {
+                filterGroups[i].classList.add(matchedClass)
+                filterGroups[i].classList.remove(unmatchedClass)
+            } else {
+                filterGroups[i].classList.remove(matchedClass)
+                filterGroups[i].classList.add(unmatchedClass)
+            }
+        }
+    }
+
+    const removeHighlight = function () {
+        for (let i = 0; i < filterElements.length; i++) {
+            let textEl = hr$(options.filterTextSelector, filterElements[i])[0]
+            textEl.innerHTML = stripTags(textEl.innerHTML)
+        }
+    }
+
+    const resetList = function () {
+        for (let i = 0; i < filterElements.length; i++) {
+            matchedClass ? filterElements[i].classList.add(matchedClass) : null
+            unmatchedClass ? filterElements[i].classList.remove(unmatchedClass) : null
+        }
+
+        for (let j = 0; j < filterGroups.length; j++) {
+            filterGroups[j].classList.add(matchedClass)
+            filterGroups[j].classList.remove(unmatchedClass)
+        }
+    }
+
+    const filterElement = function (elem, value) {
+        let textEl = hr$(options.filterTextSelector, elem)[0],
+            text = textEl.text || textEl.textContent,
+            words = text.split(' '),
+            hasMatch = false
+
+        for (let i = 0; i < words.length; i++) {
+            if (
+                words[i].toLowerCase().indexOf(value.toLowerCase(), 0) === 0 &&
+                hr$('.-current', elem).length === 0
+            ) {
+                hasMatch = true
+                words[i] =
+                    "<span style='color:#ff9000' >" +
+                    words[i].slice(0, value.length) +
+                    '</span>' +
+                    words[i].slice(value.length)
+            }
+        }
+
+        if (hasMatch) {
+            //wenn wert enthalten
+            unmatchedClass ? elem.classList.remove(unmatchedClass) : null
+            matchedClass ? elem.classList.add(matchedClass) : null
+
+            textEl.innerHTML = words.join(' ')
+        } else {
+            unmatchedClass ? elem.classList.add(unmatchedClass) : null
+            matchedClass ? elem.classList.remove(matchedClass) : null
+        }
+    }
+
+    const handleInput = throttle(function (event) {
+        event.stopPropagation()
+
+        let val = event.target.value
+
+        if (val.length > 0) {
+            filterList(val)
+        } else {
+            resetList()
+            removeHighlight()
+        }
+    }, 240)
+
+    
+        console.log('fes:' + filterElements.length)
+        console.log('ielc:' + options.inputClasses)
+    
+
+    inputEl.addEventListener('input', handleInput)
+
+    window.addEventListener('resetinput', () => {
+        resetList()
+        removeHighlight()
+    } )
+}
+
+export default AutoSuggest