@leanix/components 0.4.707 → 0.4.708

package/fesm2022/leanix-components.mjs

@@ -1878,19 +1878,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }] }] });
 
 class HighlightRangePipe {
-    transform(text, offset = 0, length = 0) {
-        const highlightedMarkup = this.doTransform(text, offset, length);
+    transform(text, offset = 0, length = 0, className = 'termHighlight') {
+        const effectiveClass = className && className.length > 0 ? className : 'termHighlight';
+        const highlightedMarkup = this.doTransform(text, offset, length, effectiveClass);
         return DOMPurify.sanitize(highlightedMarkup, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] });
     }
-    doTransform(text, offset, length) {
+    doTransform(text, offset, length, className) {
         if (!text || offset < 0 || length < 0 || offset >= text?.length || offset + length > text?.length) {
             return '';
         }
         const highlightedPart = text.slice(offset, offset + length);
-        return text.slice(0, offset) + (highlightedPart.length !== 0 ? this.highlight(highlightedPart) : '') + text.slice(offset + length);
+        return (text.slice(0, offset) + (highlightedPart.length !== 0 ? this.highlight(highlightedPart, className) : '') + text.slice(offset + length));
     }
-    highlight(text) {
-        return `<span class="termHighlight">${text}</span>`;
+    highlight(text, highlightClass = 'termHighlight') {
+        return `<span class="${highlightClass}">${text}</span>`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HighlightRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: HighlightRangePipe, isStandalone: true, name: "lxHighlightRange" }); }
@@ -1916,7 +1917,7 @@ class HighlightTermPipe {
      * @param options The highlight term search options.
      * @returns The transformed text with highlighted search term.
      */
-    transform(text, search, options = { exactMatch: false }) {
+    transform(text, search, options = { exactMatch: false, className: 'termHighlight' }) {
         if (text) {
             const highlightedMarkup = this.doTransform(text, search, options);
             return highlightedMarkup ? DOMPurify.sanitize(highlightedMarkup, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] }) : undefined;
@@ -1939,7 +1940,8 @@ class HighlightTermPipe {
                 })
                     .join('|');
             const regex = new RegExp(pattern, 'gi');
-            return text.replace(regex, (match) => `<span class="termHighlight">${match}</span>`); // add highlighting to matched regex pattern
+            options.className = options.className && options.className.length > 0 ? options.className : 'termHighlight';
+            return text.replace(regex, (match) => `<span class="${options?.className ?? 'termHighlight'}">${match}</span>`); // add highlighting to matched regex pattern
         }
         else {
             return text;