@syncfusion/ej2-dropdowns 18.2.44-4568 → 18.2.44-4570

package/dist/ts/common/highlight-search.ts

@@ -0,0 +1,47 @@
+export type HightLightType = 'Contains' | 'StartsWith' | 'EndsWith';
+/**
+ * Function helps to find which highlightSearch is to call based on your data.
+ * @param  {HTMLElement} element - Specifies an li element.
+ * @param  {string} query - Specifies the string to be highlighted.
+ * @param  {boolean} ignoreCase - Specifies the ignoreCase option.
+ * @param  {HightLightType} type - Specifies the type of highlight.
+ */
+export function highlightSearch(element: HTMLElement, query: string, ignoreCase: boolean, type?: HightLightType, isBlazor?: boolean): void {
+  if (query === '') {
+    return;
+  } else {
+    let ignoreRegex: string = ignoreCase ? 'gim' : 'gm';
+    query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+    let replaceQuery: string = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ? '(' + query + ')$' : '(' + query + ')';
+    findTextNode(element, new RegExp(replaceQuery, ignoreRegex), isBlazor);
+  }
+}
+
+function findTextNode(element: HTMLElement, pattern: RegExp, isBlazor?: boolean): void {
+  for (let index: number = 0; element.childNodes && (index < element.childNodes.length); index++) {
+    if (element.childNodes[index].nodeType === 3 && element.childNodes[index].textContent.trim() !== '') {
+        element = (isBlazor && element.classList.contains('e-highlight')) ? element.parentElement : element;
+        if (isBlazor && element.getAttribute('data-value')) {
+            element.innerHTML = element.getAttribute('data-value').replace(pattern, '<span class="e-highlight">$1</span>');
+        } else {
+            element.innerHTML = element.innerHTML.replace(pattern, '<span class="e-highlight">$1</span>');
+        }
+        break;
+    } else {
+      findTextNode(element.childNodes[index] as HTMLElement, pattern, isBlazor);
+    }
+  }
+}
+
+/**
+ * Function helps to remove highlighted element based on your data.
+ * @param  {HTMLElement} content - Specifies an content element.
+ */
+export function revertHighlightSearch(content: HTMLElement): void {
+  let contentElement: NodeListOf<Element> = content.querySelectorAll('.e-highlight');
+  for (let i: number = contentElement.length - 1; i >= 0; i--) {
+    let parent: Node = contentElement[i].parentNode;
+    let text: Text = document.createTextNode(contentElement[i].textContent);
+    parent.replaceChild(text, contentElement[i]);
+  }
+}

package/dist/ts/common/incremental-search.ts

@@ -0,0 +1,81 @@
+
+/**
+ * IncrementalSearch module file
+ */
+
+let queryString: string = '';
+let prevString: string = '';
+let matches: Element[] = [];
+let activeClass: string = 'e-active';
+let prevElementId: string = '';
+export type SearchType = 'StartsWith' | 'Equal';
+/**
+ * Search and focus the list item based on key code matches with list text content 
+ * @param  { number } keyCode - Specifies the key code which pressed on keyboard events.
+ * @param  { HTMLElement[]] } items - Specifies an array of HTMLElement, from which matches find has done.
+ * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen
+ * after selected item otherwise it will do from initial.
+ * @param  { boolean } ignoreCase - Specifies the case consideration when search has done.
+ */
+
+export function incrementalSearch(
+    keyCode: number, items: HTMLElement[], selectedIndex: number, ignoreCase: boolean, elementId: string, isBlazor?: boolean): Element {
+    queryString += String.fromCharCode(keyCode);
+    setTimeout(() => { queryString = ''; }, 1000);
+    let index: number;
+    queryString = ignoreCase ? queryString.toLowerCase() : queryString;
+    if (prevElementId === elementId && prevString === queryString) {
+        for (let i: number = 0; i < matches.length; i++) {
+            if (matches[i].classList.contains(activeClass)) { index = i; break; }
+        }
+        index = index + 1;
+        return matches[index];
+    } else {
+        let listItems: Element[] = items;
+        let strLength: number = queryString.length;
+        let text: string;
+        let item: HTMLElement;
+        selectedIndex = selectedIndex ? selectedIndex + 1 : 0;
+        let i: number = selectedIndex;
+        matches = [];
+        do {
+            if (i === listItems.length) { i = -1; }
+            i === -1 ? index = 0 : index = i;
+            item = listItems[index] as HTMLElement;
+            if (isBlazor) {
+                text = ignoreCase ? item.textContent.trim().toLowerCase() : item.textContent.trim();
+            } else {
+                text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;
+            }
+            if (text.substr(0, strLength) === queryString) {
+                matches.push(listItems[index]);
+            }
+            i++;
+        } while (i !== selectedIndex);
+        prevString = queryString;
+        prevElementId = elementId;
+        return matches[0];
+    }
+}
+
+export function Search(
+    inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean): { [key: string]: Element | number } {
+    let listItems: Element[] = items;
+    ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
+    let itemData: { [key: string]: Element | number } = { item: null, index: null };
+    if (inputVal && inputVal.length) {
+        let strLength: number = inputVal.length;
+        let queryStr: string = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
+        for (let i: number = 0, itemsData: Element[] = listItems; i < itemsData.length; i++) {
+            let item: Element = itemsData[i];
+            let text: string = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {
+                itemData.item = item;
+                itemData.index = i;
+                return { item: item, index: i };
+            }
+        }
+        return itemData;
+    }
+    return itemData;
+}