@spicainternational/ngx-sds-components 7.12.0-beta.2 → 8.1.1

package/fesm2022/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Input, Output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { NgIf } from '@angular/common';
+
+class SdsExpansionPanelComponent {
+    constructor() {
+        this.animateCaret = true;
+        this.animatePanel = true;
+        /**
+         * toggles greyish background
+         *
+         * @memberof SdsExpansionPanelComponent
+         */
+        this.showBackground = true;
+        /**
+         * Background color of the panel. Gray-100 by default
+         *
+         * @memberof SdsExpansionPanelComponent
+         */
+        this.backgroundColor = 'var(--bs-gray-100)';
+        /**
+         * position caret next to header of on the far end of the component
+         *
+         * @type {('nextToHeader' | 'farEnd')}
+         * @memberof SdsExpansionPanelComponent
+         */
+        this.caretPlacement = 'nextToHeader';
+        this.isOpen = false;
+        this.isOpenChange = new EventEmitter();
+        this.headerSize = 'default';
+        this.caretIcon = faChevronDown;
+    }
+    onToggleIsOpenClick(event) {
+        this.isOpen = !this.isOpen;
+        this.isOpenChange.emit(this.isOpen);
+        event.stopImmediatePropagation();
+    }
+    openPanel() {
+        if (!this.isOpen) {
+            this.isOpen = true;
+            this.isOpenChange.emit(this.isOpen);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsExpansionPanelComponent, isStandalone: true, selector: "sds-expansion-panel", inputs: { headerIcon: "headerIcon", headerText: "headerText", headerSideText: "headerSideText", hideHeader: "hideHeader", headerId: "headerId", animateCaret: "animateCaret", animatePanel: "animatePanel", hoverColor: "hoverColor", showBackground: "showBackground", backgroundColor: "backgroundColor", caretPlacement: "caretPlacement", descriptionText: "descriptionText", isOpen: "isOpen", expandPanelText: "expandPanelText", collapsePanelText: "collapsePanelText", headerSize: "headerSize" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{line-height:1rem;height:fit-content;transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s ease-out}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header .header-side-text{font-size:1.06rem;font-weight:500}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, FaIconComponent], template: "\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".expansion-panel{background-color:var(--sds-expansion-panel-bg-color)}.expansion-panel .panel-contents{display:grid;grid-template-rows:0fr}.expansion-panel .panel-contents.animate{transition:grid-template-rows .2s ease-out}.expansion-panel .panel-contents>div{overflow:hidden;min-height:0}.expansion-panel .panel-contents.open{grid-template-rows:1fr}.expansion-panel .caret{line-height:1rem;height:fit-content;transform:rotate(-180deg)}.expansion-panel .caret.rotate{transition:transform .2s ease-out}.expansion-panel.closed{cursor:pointer}.expansion-panel.closed .caret{transform:rotate(0)}.expansion-panel.closed.show-hover:hover{background-color:var(--sds-expansion-panel-hover-bg-color)}.expansion-panel.background{padding:1.125rem 1.5rem}.expansion-panel .expansion-panel-header{cursor:pointer;-webkit-user-select:none;user-select:none}.expansion-panel .expansion-panel-header .header-text{font-size:1.06rem;font-weight:600}.expansion-panel .expansion-panel-header .header-side-text{font-size:1.06rem;font-weight:500}.expansion-panel .expansion-panel-header button{text-decoration:none;padding:0;color:var(--bs-gray-900)}.expansion-panel .expansion-panel-header button:focus{box-shadow:none}\n"] }]
+        }], propDecorators: { headerIcon: [{
+                type: Input
+            }], headerText: [{
+                type: Input
+            }], headerSideText: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], headerId: [{
+                type: Input
+            }], animateCaret: [{
+                type: Input
+            }], animatePanel: [{
+                type: Input
+            }], hoverColor: [{
+                type: Input
+            }], showBackground: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], caretPlacement: [{
+                type: Input
+            }], descriptionText: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }], expandPanelText: [{
+                type: Input
+            }], collapsePanelText: [{
+                type: Input
+            }], headerSize: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsExpansionPanelComponent };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map

package/fesm2022/spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-expansion-panel.mjs","sources":["../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.ts","../../../projects/ngx-sds-components/src/lib/expansion-panel/expansion-panel.component.html","../../../projects/ngx-sds-components/src/lib/expansion-panel/spicainternational-ngx-sds-components-src-lib-expansion-panel.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    EventEmitter,\r\n    Input,\r\n    Output,\r\n} from '@angular/core';\r\nimport { faChevronDown } from '@fortawesome/pro-regular-svg-icons';\r\nimport { CaretPlacement, HeaderSize } from './expansion-panel.types';\r\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { NgIf } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'sds-expansion-panel',\r\n    templateUrl: './expansion-panel.component.html',\r\n    styleUrls: ['./expansion-panel.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    standalone: true,\r\n    imports: [NgIf, FaIconComponent],\r\n})\r\nexport class SdsExpansionPanelComponent {\r\n    @Input() headerIcon?: IconDefinition;\r\n    @Input() headerText?: string;\r\n    @Input() headerSideText?: string;\r\n    @Input() hideHeader?: boolean;\r\n    @Input() headerId?: string;\r\n\r\n    @Input() animateCaret = true;\r\n    @Input() animatePanel = true;\r\n\r\n    @Input() hoverColor?: string;\r\n\r\n\r\n    /**\r\n     * toggles greyish background\r\n     *\r\n     * @memberof SdsExpansionPanelComponent\r\n     */\r\n    @Input() showBackground = true;\r\n\r\n    /**\r\n     * Background color of the panel. Gray-100 by default\r\n     *\r\n     * @memberof SdsExpansionPanelComponent\r\n     */\r\n    @Input() backgroundColor = 'var(--bs-gray-100)';\r\n\r\n    /**\r\n     * position caret next to header of on the far end of the component\r\n     *\r\n     * @type {('nextToHeader' | 'farEnd')}\r\n     * @memberof SdsExpansionPanelComponent\r\n     */\r\n    @Input() caretPlacement: CaretPlacement = 'nextToHeader';\r\n\r\n    /**\r\n     * 'descriptionText' - text displayed when component is \"closed\".\r\n     *\r\n     * Note: Use ng-content 'contentOnClosed' if more complex use-case is needed\r\n     *\r\n     * @type {string}\r\n     * @memberof ExpansionPanelComponent\r\n     */\r\n    @Input() descriptionText?: string;\r\n\r\n    @Input() isOpen: boolean = false;\r\n    @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();\r\n\r\n    @Input() expandPanelText?: string;\r\n    @Input() collapsePanelText?: string;\r\n\r\n    @Input() headerSize: HeaderSize = 'default';\r\n\r\n    public caretIcon: IconDefinition = faChevronDown;\r\n    \r\n\r\n    public onToggleIsOpenClick(event: MouseEvent): void {\r\n        this.isOpen = !this.isOpen;\r\n        this.isOpenChange.emit(this.isOpen);\r\n        event.stopImmediatePropagation();\r\n    }\r\n\r\n    public openPanel() {\r\n        if (!this.isOpen) {\r\n            this.isOpen = true;\r\n            this.isOpenChange.emit(this.isOpen);\r\n        }\r\n    }\r\n}\r\n","\r\n<!-- [style.background-color]=\"showBackground ? backgroundColor : null\" -->\r\n<div\r\n    class=\"rounded expansion-panel\"\r\n    [class.background]=\"showBackground\"\r\n    [class.closed]=\"!isOpen\"\r\n    [class.show-hover]=\"!isOpen && hoverColor\"\r\n    [style.--sds-expansion-panel-bg-color]=\"showBackground ? backgroundColor : 'transparent'\"\r\n    [style.--sds-expansion-panel-hover-bg-color]=\"hoverColor ? hoverColor : 'transparent'\"\r\n    (click)=\"openPanel()\"\r\n>\r\n    <ng-container *ngIf=\"!hideHeader\">\r\n        <div\r\n            class=\"expansion-panel-header sds-flex-row-center\"\r\n            (click)=\"onToggleIsOpenClick($event)\"\r\n        >\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-link\"\r\n                [id]=\"headerId\"\r\n                [class.me-auto]=\"caretPlacement === 'farEnd'\"\r\n                [class.me-2]=\"caretPlacement === 'nextToHeader'\"\r\n            >\r\n                <fa-icon class=\"me-1\" *ngIf=\"headerIcon\" [icon]=\"headerIcon\" [fixedWidth]=\"true\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n\r\n                <span \r\n                    class=\"header-text\"\r\n                    [class.sds-fs-93]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerText }}\r\n                </span>\r\n                <small \r\n                    *ngIf=\"headerSideText\"\r\n                    class=\"header-side-text text-muted\"\r\n                    [class.sds-fs-90]=\"headerSize == 'small'\"\r\n                    >\r\n                    {{ headerSideText }}\r\n                </small>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-sm btn-link caret px-1\"\r\n                [class.rotate]=\"animateCaret\"\r\n                [title]=\"isOpen ? collapsePanelText ?? '' : expandPanelText ?? ''\"\r\n            >\r\n                <fa-icon [icon]=\"caretIcon\" [size]=\"headerSize == 'small' ? 'sm' : 'lg'\"></fa-icon>\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div \r\n        *ngIf=\"!isOpen\"\r\n        >\r\n        {{ descriptionText }}\r\n        <ng-content select=\"[contentOnClosed]\"></ng-content>\r\n    </div>\r\n\r\n    <div \r\n        class=\"panel-contents\" \r\n        [class.open]=\"isOpen\"\r\n        [class.animate]=\"animatePanel\"\r\n        >\r\n        <div \r\n            *ngIf=\"isOpen\"\r\n            class=\"mt-2\"\r\n            >\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/{fesm2020 → fesm2022}/spicainternational-ngx-sds-components-src-lib-highlight-text.mjs

@@ -1,212 +1,189 @@
 import * as i0 from '@angular/core';
-import { SecurityContext, Directive, Input, HostBinding, Pipe, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { SecurityContext, HostBinding, Input, Directive, Pipe } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 
-/**
- * @public @function escapeRegex
- * @description
- * Function responsible for substitution of chars that are a no-go for regex
- * @param { string } phrase
- * @returns { string }
- */
-const escapeRegex = (phrase) => {
-    return phrase.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-};
-/**
- * @public @function highlightSearchedText
- * @description
- * Function responsible for returning html string
- * with included marker that contains string that matches
- * provided search phrase
- * @param { string } highlightText
- * @param { string } stringToBeChecked
- * @param { string } existingHtmlContent
- * @param { string } additionalClasses
- * @param { string } sanitizer
- * @returns { string }
- */
-const highlightSearchedText = (highlightText, stringToBeChecked, existingHtmlContent, sanitizer, additionalClasses) => {
-    // If search is empty just return current content
-    if (highlightText === '') {
-        return stringToBeChecked;
-    }
-    // Split search string into words
-    const splittedValue = highlightText.split(' ');
-    if (!splittedValue || splittedValue.length === 0) {
-        return stringToBeChecked;
-    }
-    const splittedStringToBeChecked = stringToBeChecked
-        ? stringToBeChecked.split(' ')
-        : [];
-    const searchPhrases = splittedValue.filter(phrase => phrase.length > 0);
-    const markedWords = [];
-    // Go through search phrases and validate each string
-    const newContent = splittedStringToBeChecked
-        .map((wordToBeChecked) => {
-        const searchMarkRawResult = searchPhrases
-            .map(phrase => {
-            const safeString = escapeRegex(phrase);
-            const searchRegEx = new RegExp(safeString, 'i');
-            const testResult = searchRegEx.test(wordToBeChecked);
-            if (!testResult) {
-                return wordToBeChecked;
-            }
-            // Prevent text duplication when user enters same word multiple times
-            const wordIsAlreadyMarked = markedWords.some(alreadyMarkedWord => alreadyMarkedWord === wordToBeChecked);
-            if (wordIsAlreadyMarked) {
-                return wordToBeChecked;
-            }
-            markedWords.push(wordToBeChecked);
-            // Prepare content to be replaced with mark text
-            const markedContent = wordToBeChecked.replace(searchRegEx, (match) => {
-                return `<mark class='bg-primary text-white p-0 ${additionalClasses ?? ''}'>${match}</mark>`;
-            });
-            return markedContent;
-        })
-            .reduce((accumulator, currentItem) => {
-            const itemAlreadyExists = accumulator.some(item => item === currentItem);
-            if (!itemAlreadyExists) {
-                accumulator.push(currentItem);
-            }
-            return accumulator;
-        }, []);
-        /**
-         * At this point we have correctly marker content, however there can be
-         * duplicate words in the array. E.g. we have text First Client and user
-         * types Client First. This will give us two array. First one would be:
-         * ['First', '<mark class='highlighted-text '>First</mark>']
-         * Second one would be:
-         * ['<mark class='highlighted-text '>Client</mark>', 'Client']
-         * We have to filter out those plain values that are marked
-         */
-        const sanitizedMarkedContent = searchMarkRawResult.filter(markedContentItem => {
-            const wordIsAlsoMarked = markedWords.some(word => word === markedContentItem);
-            if (wordIsAlsoMarked) {
-                return false;
-            }
-            return true;
-        });
-        return sanitizedMarkedContent;
-    })
-        .join(' ');
-    /**
-     * We want to sanitize this before pushing to DOM.
-     * Just to be on the safe side. Fallback to existing value if
-     * sanitize returns null
-     */
-    const sanitizedContent = sanitizer.sanitize(SecurityContext.HTML, newContent) ?? existingHtmlContent;
-    return sanitizedContent;
+/**
+ * @public @function escapeRegex
+ * @description
+ * Function responsible for substitution of chars that are a no-go for regex
+ * @param { string } phrase
+ * @returns { string }
+ */
+const escapeRegex = (phrase) => {
+    return phrase.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+};
+/**
+ * @public @function highlightSearchedText
+ * @description
+ * Function responsible for returning html string
+ * with included marker that contains string that matches
+ * provided search phrase
+ * @param { string } highlightText
+ * @param { string } stringToBeChecked
+ * @param { string } existingHtmlContent
+ * @param { string } additionalClasses
+ * @param { string } sanitizer
+ * @returns { string }
+ */
+const highlightSearchedText = (highlightText, stringToBeChecked, existingHtmlContent, sanitizer, additionalClasses) => {
+    // If search is empty just return current content
+    if (highlightText === '') {
+        return stringToBeChecked;
+    }
+    // Split search string into words
+    const splittedValue = highlightText.split(' ');
+    if (!splittedValue || splittedValue.length === 0) {
+        return stringToBeChecked;
+    }
+    const splittedStringToBeChecked = stringToBeChecked
+        ? stringToBeChecked.split(' ')
+        : [];
+    const searchPhrases = splittedValue.filter(phrase => phrase.length > 0);
+    const markedWords = [];
+    // Go through search phrases and validate each string
+    const newContent = splittedStringToBeChecked
+        .map((wordToBeChecked) => {
+        const searchMarkRawResult = searchPhrases
+            .map(phrase => {
+            const safeString = escapeRegex(phrase);
+            const searchRegEx = new RegExp(safeString, 'i');
+            const testResult = searchRegEx.test(wordToBeChecked);
+            if (!testResult) {
+                return wordToBeChecked;
+            }
+            // Prevent text duplication when user enters same word multiple times
+            const wordIsAlreadyMarked = markedWords.some(alreadyMarkedWord => alreadyMarkedWord === wordToBeChecked);
+            if (wordIsAlreadyMarked) {
+                return wordToBeChecked;
+            }
+            markedWords.push(wordToBeChecked);
+            // Prepare content to be replaced with mark text
+            const markedContent = wordToBeChecked.replace(searchRegEx, (match) => {
+                return `<mark class='bg-primary text-white p-0 ${additionalClasses ?? ''}'>${match}</mark>`;
+            });
+            return markedContent;
+        })
+            .reduce((accumulator, currentItem) => {
+            const itemAlreadyExists = accumulator.some(item => item === currentItem);
+            if (!itemAlreadyExists) {
+                accumulator.push(currentItem);
+            }
+            return accumulator;
+        }, []);
+        /**
+         * At this point we have correctly marker content, however there can be
+         * duplicate words in the array. E.g. we have text First Client and user
+         * types Client First. This will give us two array. First one would be:
+         * ['First', '<mark class='highlighted-text '>First</mark>']
+         * Second one would be:
+         * ['<mark class='highlighted-text '>Client</mark>', 'Client']
+         * We have to filter out those plain values that are marked
+         */
+        const sanitizedMarkedContent = searchMarkRawResult.filter(markedContentItem => {
+            const wordIsAlsoMarked = markedWords.some(word => word === markedContentItem);
+            if (wordIsAlsoMarked) {
+                return false;
+            }
+            return true;
+        });
+        return sanitizedMarkedContent;
+    })
+        .join(' ');
+    /**
+     * We want to sanitize this before pushing to DOM.
+     * Just to be on the safe side. Fallback to existing value if
+     * sanitize returns null
+     */
+    const sanitizedContent = sanitizer.sanitize(SecurityContext.HTML, newContent) ?? existingHtmlContent;
+    return sanitizedContent;
 };
 
-class HighlightTextDirective {
-    get highlightText() {
-        return this._search;
-    }
-    set highlightText(value) {
-        this._search = value;
-        // Now process the search value
-        this.markSearchedText(value);
-    }
-    constructor(_elementRef, _sanitizer) {
-        this._elementRef = _elementRef;
-        this._sanitizer = _sanitizer;
-        /**
-           * INPUTS
-           */
-        /**
-         * CSS classes to be appended to the marked text
-         */
-        this.additionalClasses = '';
-        /**
-         * Search term that should be found
-         */
-        this._search = '';
-        /**
-         * For now make this case insensitive. We might change this to
-         * input latter if needed
-         */
-        this.caseSensitive = false;
-    }
-    markSearchedText(highlightText) {
-        // Make sure that native element is present
-        if (this._elementRef?.nativeElement) {
-            const currentHtmlContent = this._elementRef.nativeElement
-                .innerHTML;
-            const text = this._elementRef.nativeElement.textContent ?? '';
-            const highlightedText = highlightSearchedText(highlightText, text, currentHtmlContent, this._sanitizer, this.additionalClasses);
-            this.content = highlightedText;
-        }
-    }
-}
-HighlightTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightTextDirective, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
-HighlightTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HighlightTextDirective, selector: "[highlightText]", inputs: { additionalClasses: "additionalClasses", highlightText: "highlightText" }, host: { properties: { "innerHtml": "this.content" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightTextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[highlightText]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DomSanitizer }]; }, propDecorators: { additionalClasses: [{
-                type: Input
-            }], highlightText: [{
-                type: Input
-            }], content: [{
-                type: HostBinding,
-                args: ['innerHtml']
+class SdsHighlightTextDirective {
+    get highlightText() {
+        return this._search;
+    }
+    set highlightText(value) {
+        this._search = value;
+        // Now process the search value
+        this.markSearchedText(value);
+    }
+    constructor(_elementRef, _sanitizer) {
+        this._elementRef = _elementRef;
+        this._sanitizer = _sanitizer;
+        /**
+           * INPUTS
+           */
+        /**
+         * CSS classes to be appended to the marked text
+         */
+        this.additionalClasses = '';
+        /**
+         * Search term that should be found
+         */
+        this._search = '';
+        /**
+         * For now make this case insensitive. We might change this to
+         * input latter if needed
+         */
+        this.caseSensitive = false;
+    }
+    markSearchedText(highlightText) {
+        // Make sure that native element is present
+        if (this._elementRef?.nativeElement) {
+            const currentHtmlContent = this._elementRef.nativeElement
+                .innerHTML;
+            const text = this._elementRef.nativeElement.textContent ?? '';
+            const highlightedText = highlightSearchedText(highlightText, text, currentHtmlContent, this._sanitizer, this.additionalClasses);
+            this.content = highlightedText;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsHighlightTextDirective, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SdsHighlightTextDirective, isStandalone: true, selector: "[sdsHighlightText]", inputs: { additionalClasses: "additionalClasses", highlightText: "highlightText" }, host: { properties: { "innerHtml": "this.content" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsHighlightTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdsHighlightText]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }], propDecorators: { additionalClasses: [{
+                type: Input
+            }], highlightText: [{
+                type: Input
+            }], content: [{
+                type: HostBinding,
+                args: ['innerHtml']
             }] } });
 
-class HighlightTextPipe {
-    constructor(_elementRef, _sanitizer) {
-        this._elementRef = _elementRef;
-        this._sanitizer = _sanitizer;
-    }
-    transform(highlightText, stringToBeChecked, additionalClasses) {
-        // Make sure that native element is present
-        if (this._elementRef?.nativeElement) {
-            const currentHtmlContent = this._elementRef.nativeElement
-                .innerHTML;
-            const highlightedText = highlightSearchedText(highlightText, stringToBeChecked, currentHtmlContent, this._sanitizer, additionalClasses);
-            return highlightedText;
-        }
-        return stringToBeChecked;
-    }
-}
-HighlightTextPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightTextPipe, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-HighlightTextPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: HighlightTextPipe, name: "highlightText" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightTextPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'highlightText'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DomSanitizer }]; } });
-
-class SdsHighlightTextModule {
-}
-SdsHighlightTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsHighlightTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsHighlightTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsHighlightTextModule, declarations: [HighlightTextDirective,
-        HighlightTextPipe], imports: [CommonModule], exports: [HighlightTextDirective,
-        HighlightTextPipe] });
-SdsHighlightTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsHighlightTextModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsHighlightTextModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        HighlightTextDirective,
-                        HighlightTextPipe
-                    ],
-                    exports: [
-                        HighlightTextDirective,
-                        HighlightTextPipe
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
+class SdsHighlightTextPipe {
+    constructor(_elementRef, _sanitizer) {
+        this._elementRef = _elementRef;
+        this._sanitizer = _sanitizer;
+    }
+    transform(highlightText, stringToBeChecked, additionalClasses) {
+        // Make sure that native element is present
+        if (this._elementRef?.nativeElement) {
+            const currentHtmlContent = this._elementRef.nativeElement
+                .innerHTML;
+            const highlightedText = highlightSearchedText(highlightText, stringToBeChecked, currentHtmlContent, this._sanitizer, additionalClasses);
+            return highlightedText;
+        }
+        return stringToBeChecked;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsHighlightTextPipe, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SdsHighlightTextPipe, isStandalone: true, name: "sdsHighlightText" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsHighlightTextPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sdsHighlightText',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { HighlightTextDirective, HighlightTextPipe, SdsHighlightTextModule };
+export { SdsHighlightTextDirective, SdsHighlightTextPipe };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-highlight-text.mjs.map

package/fesm2022/spicainternational-ngx-sds-components-src-lib-highlight-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-highlight-text.mjs","sources":["../../../projects/ngx-sds-components/src/lib/highlight-text/utils/highlight-text.utils.ts","../../../projects/ngx-sds-components/src/lib/highlight-text/directives/highlight-text.directive.ts","../../../projects/ngx-sds-components/src/lib/highlight-text/pipes/highlight-text.pipe.ts","../../../projects/ngx-sds-components/src/lib/highlight-text/spicainternational-ngx-sds-components-src-lib-highlight-text.ts"],"sourcesContent":["import { SecurityContext } from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\n\r\n/**\r\n * @public @function escapeRegex\r\n * @description\r\n * Function responsible for substitution of chars that are a no-go for regex\r\n * @param { string } phrase\r\n * @returns { string }\r\n */\r\nexport const escapeRegex = (phrase: string): string => {\r\n    return phrase.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\r\n};\r\n\r\n/**\r\n * @public @function highlightSearchedText\r\n * @description\r\n * Function responsible for returning html string\r\n * with included marker that contains string that matches\r\n * provided search phrase\r\n * @param { string } highlightText\r\n * @param { string } stringToBeChecked\r\n * @param { string } existingHtmlContent\r\n * @param { string } additionalClasses\r\n * @param { string } sanitizer\r\n * @returns { string }\r\n */\r\nexport const highlightSearchedText = (\r\n    highlightText: string,\r\n    stringToBeChecked: string,\r\n    existingHtmlContent: string,\r\n    sanitizer: DomSanitizer,\r\n    additionalClasses?: string\r\n  ): string => {\r\n    // If search is empty just return current content\r\n    if (highlightText === '') {\r\n      return stringToBeChecked;\r\n    }\r\n\r\n    // Split search string into words\r\n    const splittedValue = highlightText.split(' ');\r\n\r\n    if (!splittedValue || splittedValue.length === 0) {\r\n      return stringToBeChecked;\r\n    }\r\n\r\n    const splittedStringToBeChecked: string[] = stringToBeChecked\r\n      ? stringToBeChecked.split(' ')\r\n      : [];\r\n\r\n    const searchPhrases: string[] = splittedValue.filter(\r\n      phrase => phrase.length > 0\r\n    );\r\n\r\n    const markedWords: string[] = [];\r\n\r\n    // Go through search phrases and validate each string\r\n    const newContent = splittedStringToBeChecked\r\n      .map((wordToBeChecked: string) => {\r\n        const searchMarkRawResult = searchPhrases\r\n          .map(phrase => {\r\n            const safeString = escapeRegex(phrase);\r\n\r\n            const searchRegEx = new RegExp(safeString, 'i');\r\n\r\n            const testResult: boolean = searchRegEx.test(wordToBeChecked);\r\n\r\n            if (!testResult) {\r\n              return wordToBeChecked;\r\n            }\r\n\r\n            // Prevent text duplication when user enters same word multiple times\r\n            const wordIsAlreadyMarked = markedWords.some(alreadyMarkedWord => alreadyMarkedWord === wordToBeChecked)\r\n\r\n            if (wordIsAlreadyMarked) {\r\n                return wordToBeChecked;\r\n            }\r\n\r\n            markedWords.push(wordToBeChecked);\r\n\r\n            // Prepare content to be replaced with mark text\r\n            const markedContent = wordToBeChecked.replace(\r\n              searchRegEx,\r\n              (match: string) => {\r\n                return `<mark class='bg-primary text-white p-0 ${\r\n                  additionalClasses ?? ''\r\n                }'>${match}</mark>`;\r\n              }\r\n            );\r\n            return markedContent;\r\n          })\r\n          .reduce((accumulator: string[], currentItem: string) => {\r\n            const itemAlreadyExists = accumulator.some(\r\n              item => item === currentItem\r\n            );\r\n\r\n            if (!itemAlreadyExists) {\r\n              accumulator.push(currentItem);\r\n            }\r\n\r\n            return accumulator;\r\n          }, []);\r\n\r\n        /**\r\n         * At this point we have correctly marker content, however there can be\r\n         * duplicate words in the array. E.g. we have text First Client and user\r\n         * types Client First. This will give us two array. First one would be:\r\n         * ['First', '<mark class='highlighted-text '>First</mark>']\r\n         * Second one would be:\r\n         * ['<mark class='highlighted-text '>Client</mark>', 'Client']\r\n         * We have to filter out those plain values that are marked\r\n         */\r\n        const sanitizedMarkedContent = searchMarkRawResult.filter(\r\n          markedContentItem => {\r\n            const wordIsAlsoMarked = markedWords.some(\r\n              word => word === markedContentItem\r\n            );\r\n\r\n            if (wordIsAlsoMarked) {\r\n              return false;\r\n            }\r\n            return true;\r\n          }\r\n        );\r\n\r\n        return sanitizedMarkedContent;\r\n      })\r\n      .join(' ');\r\n\r\n    /**\r\n     * We want to sanitize this before pushing to DOM.\r\n     * Just to be on the safe side. Fallback to existing value if\r\n     * sanitize returns null\r\n     */\r\n    const sanitizedContent =\r\n      sanitizer.sanitize(SecurityContext.HTML, newContent) ?? existingHtmlContent;\r\n\r\n    return sanitizedContent;\r\n};\r\n","import { Directive, ElementRef, HostBinding, Input } from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { highlightSearchedText } from '../utils';\r\n\r\n@Directive({\r\n    selector: '[sdsHighlightText]',\r\n    standalone: true\r\n})\r\nexport class SdsHighlightTextDirective {\r\n/**\r\n   * INPUTS\r\n   */\r\n  /**\r\n   * CSS classes to be appended to the marked text\r\n   */\r\n  @Input() additionalClasses: string = '';\r\n\r\n  /**\r\n   * Search term that should be found\r\n   */\r\n  private _search: string = '';\r\n  @Input()\r\n  get highlightText(): string {\r\n    return this._search;\r\n  }\r\n  set highlightText(value: string) {\r\n    this._search = value;\r\n\r\n    // Now process the search value\r\n    this.markSearchedText(value);\r\n  }\r\n\r\n  /**\r\n   * OTHER PROPS\r\n   */\r\n  @HostBinding('innerHtml')\r\n  content!: string;\r\n\r\n  /**\r\n   * For now make this case insensitive. We might change this to\r\n   * input latter if needed\r\n   */\r\n  protected caseSensitive: boolean = false;\r\n\r\n  constructor(\r\n    private readonly _elementRef: ElementRef,\r\n    private readonly _sanitizer: DomSanitizer\r\n  ) {}\r\n\r\n  protected markSearchedText(highlightText: string): void {\r\n    // Make sure that native element is present\r\n    if (this._elementRef?.nativeElement) {\r\n      const currentHtmlContent = (this._elementRef.nativeElement as HTMLElement)\r\n        .innerHTML;\r\n\r\n      const text =\r\n        (this._elementRef.nativeElement as HTMLElement).textContent ?? '';\r\n\r\n      const highlightedText = highlightSearchedText(\r\n        highlightText,\r\n        text,\r\n        currentHtmlContent,\r\n        this._sanitizer,\r\n        this.additionalClasses\r\n      );\r\n\r\n      this.content = highlightedText;\r\n    }\r\n  }\r\n}\r\n","import { ElementRef, Pipe, PipeTransform } from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { highlightSearchedText } from '../utils';\r\n\r\n@Pipe({\r\n    name: 'sdsHighlightText',\r\n    standalone: true\r\n})\r\nexport class SdsHighlightTextPipe implements PipeTransform {\r\n    constructor(\r\n        private readonly _elementRef: ElementRef,\r\n        private readonly _sanitizer: DomSanitizer\r\n    ) {}\r\n\r\n    transform(\r\n        highlightText: string,\r\n        stringToBeChecked: string,\r\n        additionalClasses?: string\r\n      ): string {\r\n        // Make sure that native element is present\r\n        if (this._elementRef?.nativeElement) {\r\n          const currentHtmlContent = (this._elementRef.nativeElement as HTMLElement)\r\n            .innerHTML;\r\n\r\n          const highlightedText = highlightSearchedText(\r\n            highlightText,\r\n            stringToBeChecked,\r\n            currentHtmlContent,\r\n            this._sanitizer,\r\n            additionalClasses\r\n          );\r\n\r\n          return highlightedText;\r\n        }\r\n\r\n        return stringToBeChecked;\r\n      }\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}