@rws-framework/client 2.18.13 → 2.18.14

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.18.13",
+    "version": "2.18.14",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"

package/src/components/rws/line-splitter/component.ts

@@ -9,16 +9,35 @@ class LineSplitter extends RWSViewComponent {
   @observable text: string = '';
   @observable content: string | ViewTemplate = '<span class="dots">.</span>';
   @observable query: string = '';
+
+  @observable callback?: () => void;
   
+  @attr dots = false;
+
   @attr allowedTags = '';
-  @attr addClass = '';  
+  @attr addClass = ''; 
+  
+  private stopAnimation: () => void = () => {};
 
   private allowedHTMLTags: string[] = ['dl', 'dt', 'dd', 'br', 'blockquote', 'span', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'strong', 'i', 'small', 'u'];
 
+  connectedCallback(): void {
+      super.connectedCallback();
+
+      console.log({dots: this.dots, cb: this.callback});
+
+      if(this.dots){
+        this.stopAnimation = this.animateLoadingDots();
+      }      
+
+      if(this.text){
+        this.splitLines();
+      }
+  }
 
   parseTags(line: string): string | ViewTemplate
   {     
-    const componentAllowedTags: string[] = this.allowedHTMLTags.concat(this.allowedTags.split(','));  
+    const componentAllowedTags: string[] = this.allowedHTMLTags.concat(this.allowedTags.split(','));     
 
     let output = this.domService.sanitizeHTML(line, { ADD_TAGS: [], ALLOWED_TAGS: componentAllowedTags });      
 
@@ -47,11 +66,12 @@ class LineSplitter extends RWSViewComponent {
   }
 
   splitLines(): void
-  {    
+  {        
       if([". ", ". . ", ". . . "].includes(this.text)){
           this.content = `<span class="dots">${this.text}</span>`
-      }else{
-        this.content = this.parseTags(this.text);
+      }else{        
+        this.stopAnimation();
+        this.content = this.parseTags(this.text);    
       }
   }
 
@@ -63,6 +83,23 @@ class LineSplitter extends RWSViewComponent {
       }
   }
 
+  contentChanged(){    
+    if(this.callback){
+      this.callback();
+    }
+  }
+
+  animateLoadingDots(): () => void {
+    let counter = 1;
+    const interval = setInterval(() => {
+        counter = counter % 3 + 1;
+        this.text = '. '.repeat(counter);
+    }, 800);
+
+    // Zwracamy funkcję do zatrzymania animacji
+    return () => clearInterval(interval);
+  }
+
   addClassChanged(oldVal: string, newVal: string)
   {
       if(newVal){
@@ -70,14 +107,6 @@ class LineSplitter extends RWSViewComponent {
       }
   }
 
-  connectedCallback(): void {
-      super.connectedCallback();
-
-      if(this.text){
-        this.splitLines();
-      }
-  }
-
   queryChanged(oldVal: string, newVal: string){
     if(newVal){
       this.splitLines();