@agorapulse/ui-components 13.2.1 → 13.2.2

package/fesm2020/agorapulse-ui-components.mjs

@@ -3244,10 +3244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 const PART_START = '<ng-container data-mst="';
 const PARSE_MIDDLE = '">';
 const PARSE_END = '</ng-container>';
-const CLASS_SEPARATOR = ',';
+const DATA_SEPARATOR = ',';
+const OPTIONAL_EVENTS_SEPARATOR = ';';
 /**
- * This directive aims to parse simple string to extract some specific tags and to turn them into SPAN with styling classes attributes.
- * The specific tags must this schema: <ng-container data-mst="STYLING-CLASSES>TEXT</ng-container>.
+ * This directive aims to parse simple string to extract some specific tags and to turn them into SPAN with styling classes attributes and optional event listening.
+ * The specific tags must this schema: <ng-container data-mst="STYLING-CLASSES">TEXT</ng-container>.
  * Example: 'Lorem <ng-container data-mst="my-style">ipsum</ng-container> dolor sit amet'.
  */
 class MultiStyleTextDirective {
@@ -3255,43 +3256,54 @@ class MultiStyleTextDirective {
         this.elRef = elRef;
         this.renderer = renderer;
         this.childrenCreated = [];
+        this.partEvent = new EventEmitter();
     }
     set multiStyleText(fullText) {
         // First remove previously added children (on update).
         for (const child of this.childrenCreated) {
             this.renderer.removeChild(this.elRef.nativeElement, child);
         }
-        const parts = MultiStyleTextDirective.parse(fullText);
-        for (const part of parts) {
-            if (part.clazz) {
+        MultiStyleTextDirective.parse(fullText).forEach((part) => {
+            if (part.clazz || part.clickName) {
+                // Parsed item with styling classes and/or event listening.
                 const span = this.renderer.createElement('span');
                 const text = this.renderer.createText(part.content);
                 this.renderer.appendChild(span, text);
-                part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
+                if (part.clazz) {
+                    part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
+                }
+                if (part.clickName) {
+                    this.renderer.listen(span, 'click', () => this.partEvent.emit(part.clickName));
+                }
                 this.renderer.appendChild(this.elRef.nativeElement, span);
                 this.childrenCreated.push(span);
             }
             else {
+                // Specific of part without styling classes (could be used to get event listening only)
                 const text = this.renderer.createText(part.content);
                 this.renderer.appendChild(this.elRef.nativeElement, text);
                 this.childrenCreated.push(text);
             }
-        }
+        });
     }
     static parse(toParse) {
         const parts = [];
         let startIndex = toParse.indexOf(PART_START);
         while (startIndex >= 0) {
             if (startIndex > 0) {
-                // Optional start before parser start.
-                parts.push({ content: toParse.substr(0, startIndex) });
+                // Optional text before first parsed part.
+                parts.push({ content: toParse.substring(0, startIndex) });
             }
-            const elem = this.cutFirstGroup(toParse.substr(startIndex));
+            const elem = this.cutFirstGroup(toParse.substring(startIndex));
             if (elem === 'invalid') {
                 return [];
             }
             else if (elem) {
-                parts.push({ content: elem.content, clazz: elem.classes });
+                parts.push({
+                    content: elem.content,
+                    clazz: elem.classes,
+                    clickName: elem.clickName
+                });
                 toParse = elem.rest;
                 startIndex = toParse.indexOf(PART_START);
             }
@@ -3307,29 +3319,47 @@ class MultiStyleTextDirective {
     }
     static cutFirstGroup(toCut) {
         if (!toCut.startsWith(PART_START)) {
-            // String doesnt start with expected parser start.
+            // String doesn't start with expected parser start.
             return null;
         }
-        const afterParserStart = toCut.substr(PART_START.length);
+        const afterParserStart = toCut.substring(PART_START.length);
         let index = afterParserStart.indexOf(PARSE_MIDDLE);
         if (index <= 0) {
             console.error('Not able to parse invalid string: ' + toCut);
             return 'invalid';
         }
-        const classes = afterParserStart.substr(0, index);
-        let rest = afterParserStart.substr(index + PARSE_MIDDLE.length);
+        const data = afterParserStart.substring(0, index);
+        let classes;
+        let clickName;
+        const eventsPartSeparatorIndex = data.indexOf(OPTIONAL_EVENTS_SEPARATOR);
+        if (eventsPartSeparatorIndex > 0) {
+            // Case the data contains events part with dedicated separator
+            classes = data.substring(0, eventsPartSeparatorIndex);
+            clickName = data.substring(eventsPartSeparatorIndex + 1);
+        }
+        else {
+            // Otherwise, only design classes are provided
+            classes = data;
+            clickName = undefined;
+        }
+        let rest = afterParserStart.substring(index + PARSE_MIDDLE.length);
         index = rest.indexOf(PARSE_END);
         if (index <= 0) {
             console.error('Not able to parse invalid string: ' + toCut);
             return 'invalid';
         }
-        const content = rest.substr(0, index);
-        rest = rest.substr(index + PARSE_END.length);
-        return { content, classes: classes.split(CLASS_SEPARATOR), rest };
+        const content = rest.substring(0, index);
+        rest = rest.substring(index + PARSE_END.length);
+        return {
+            content,
+            classes: classes.split(DATA_SEPARATOR),
+            clickName,
+            rest
+        };
     }
 }
 /** @nocollapse */ /** @nocollapse */ MultiStyleTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MultiStyleTextDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MultiStyleTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: MultiStyleTextDirective, selector: "[multiStyleText]", inputs: { multiStyleText: "multiStyleText" }, ngImport: i0 });
+/** @nocollapse */ /** @nocollapse */ MultiStyleTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: MultiStyleTextDirective, selector: "[multiStyleText]", inputs: { multiStyleText: "multiStyleText" }, outputs: { partEvent: "partEvent" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MultiStyleTextDirective, decorators: [{
             type: Directive,
             args: [{
@@ -3338,6 +3368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { multiStyleText: [{
                 type: Input
+            }], partEvent: [{
+                type: Output
             }] } });
 
 // Angular