@rws-framework/client 2.18.18 → 2.19.0

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

@@ -1,119 +1,119 @@
-import { RWSViewComponent } from '../../../components/_component';
-import { RWSView } from '../../../components/_decorator';
-import { observable, attr } from '@microsoft/fast-element';
-
-import { ViewTemplate } from '@microsoft/fast-element';
-
-@RWSView('line-splitter', { debugPackaging: false })
-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 = ''; 
-  
-  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(','));     
-
-    let output = this.domService.sanitizeHTML(line, { ADD_TAGS: [], ALLOWED_TAGS: componentAllowedTags });      
-
-    output = output.replace(/<.*>([\s\S]*?)<\/.*>/g, (match: string) => {
-        return match.replace(/\n/g, '');
-    });
-    output = output.replace(/\n\n/g, '\n');
-    output = output.replace(/\n/g, '<br/>');
-    output = output.replace(/<\/p><br\/>/g, '</p>');
-    output = output                
-        .replace(/<br\/><h([1-3])>/g, '<h$1>')
-        .replace(/<\/h([1-3])><br\/>/g, '</h$1>');
-
-    if(this.query !== null || this.query !== '')    {
-      const query: string[] = this.query ? this.query.split(',').map(word => word.trim()) : []; 
-
-      query.forEach(word => {
-          // Create a regex for the word, ensuring it's case-insensitive and doesn't affect existing HTML tags
-          const regex = new RegExp(`(${word})(?![^<]*>)`, 'gi');
-          output = output.replace(regex, '<span class="tagged">$1</span>');
-      });
-    }
-   
-
-    return output;
-  }
-
-  splitLines(): void
-  {        
-      if([". ", ". . ", ". . . "].includes(this.text)){
-          this.content = `<span class="dots">${this.text}</span>`
-      }else{        
-        this.stopAnimation();
-        this.content = this.parseTags(this.text);    
-      }
-  }
-
-  textChanged(oldVal: string, newVal: string)
-  {    
-      if(newVal){        
-        this.text = newVal;         
-        this.splitLines();
-      }
-  }
-
-  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){
-          this.addClass = newVal;
-      }
-  }
-
-  queryChanged(oldVal: string, newVal: string){
-    if(newVal){
-      this.splitLines();
-    }
-  }
-}
-
-LineSplitter.defineComponent();
-
+import { RWSViewComponent } from '../../../components/_component';
+import { RWSView } from '../../../components/_decorator';
+import { observable, attr } from '@microsoft/fast-element';
+
+import { ViewTemplate } from '@microsoft/fast-element';
+
+@RWSView('line-splitter', { debugPackaging: false })
+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 = ''; 
+  
+  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(','));     
+
+    let output = this.domService.sanitizeHTML(line, { ADD_TAGS: [], ALLOWED_TAGS: componentAllowedTags });      
+
+    output = output.replace(/<.*>([\s\S]*?)<\/.*>/g, (match: string) => {
+        return match.replace(/\n/g, '');
+    });
+    output = output.replace(/\n\n/g, '\n');
+    output = output.replace(/\n/g, '<br/>');
+    output = output.replace(/<\/p><br\/>/g, '</p>');
+    output = output                
+        .replace(/<br\/><h([1-3])>/g, '<h$1>')
+        .replace(/<\/h([1-3])><br\/>/g, '</h$1>');
+
+    if(this.query !== null || this.query !== '')    {
+      const query: string[] = this.query ? this.query.split(',').map(word => word.trim()) : []; 
+
+      query.forEach(word => {
+          // Create a regex for the word, ensuring it's case-insensitive and doesn't affect existing HTML tags
+          const regex = new RegExp(`(${word})(?![^<]*>)`, 'gi');
+          output = output.replace(regex, '<span class="tagged">$1</span>');
+      });
+    }
+   
+
+    return output;
+  }
+
+  splitLines(): void
+  {        
+      if([". ", ". . ", ". . . "].includes(this.text)){
+          this.content = `<span class="dots">${this.text}</span>`
+      }else{        
+        this.stopAnimation();
+        this.content = this.parseTags(this.text);    
+      }
+  }
+
+  textChanged(oldVal: string, newVal: string)
+  {    
+      if(newVal){        
+        this.text = newVal;         
+        this.splitLines();
+      }
+  }
+
+  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){
+          this.addClass = newVal;
+      }
+  }
+
+  queryChanged(oldVal: string, newVal: string){
+    if(newVal){
+      this.splitLines();
+    }
+  }
+}
+
+LineSplitter.defineComponent();
+
 export { LineSplitter };

package/src/components/rws/line-splitter/styles/_tags.scss

@@ -1,104 +1,104 @@
-
-
-$bgcolor: var(--line-splitter-bgcolor, #CCC);
-$maincolor: var(--line-splitter-maincolor, #333);;
-$altcolor: #fff;
-
-blockquote {
-    position: relative;
-    font-family: 'Barlow Condensed', sans-serif;
-    max-width: 620px;
-    margin: 0 auto 80px auto;
-    align-self: center;
-    display: inline-block;
-    width: 100%;
-
-    .quote-cnt {
-        font-family: 'Abril Fatface', cursive;
-        position: relative; /* for pseudos */
-        color: $maincolor;
-        font-size: 1.4rem;    
-        line-height: 1;
-        margin: 0;
-        border: 2px solid #fff;
-        border: solid 2px;
-        border-radius:20px;
-        padding: 25px;
-        font-weight: bold;
-
-        .native {
-            font-weight: bold;
-        }
-
-        .native + .pronounciation {
-            color: $altcolor;
-
-            font-weight: normal;
-            font-size: 0.9rem; 
-            margin-left: 15px;   
-        }
-    
-        &:after {
-            content:"";
-            position: absolute;
-            border: 2px solid $maincolor;
-            border-radius: 0 50px 0 0;
-            width: 60px;
-            height: 60px;
-            bottom: -62px;
-            left: 50px;
-            border-bottom: none;
-            border-left: none;
-            z-index: 3; 
-        }
-    
-        &:before {
-            content:"";
-            position: absolute;
-            width: 80px;
-            border: 6px solid $bgcolor;
-            bottom: -3px;
-            left: 50px;
-            z-index: 2;
-        }
-    }
-}
-
-dl{
-
-    @include grid-container();
-    @include grid-flex-align-items(center, center);
-
-    dt{        
-        text-align: right;
-        font-weight: bold;
-        font-size: 1.2rem; 
-        padding: 0 15px;
-        margin-bottom: 80px;
-
-        @include grid-column(6);
-
-        &:after{
-            content: ":";       
-            font-weight: bold;
-            font-size: 1.2rem;                  
-        }
-    }
-
-    dd{        
-        margin-left: 0;
-        @include grid-column(6);
-    }
-}
-
-p{
-    margin: 0 0 15px 0;
-}
-
-h1, h2, h3 {
-    margin: 10px 0 15px 0;
-}
-
-ul, ol {
-    margin: 0;
+
+
+$bgcolor: var(--line-splitter-bgcolor, #CCC);
+$maincolor: var(--line-splitter-maincolor, #333);;
+$altcolor: #fff;
+
+blockquote {
+    position: relative;
+    font-family: 'Barlow Condensed', sans-serif;
+    max-width: 620px;
+    margin: 0 auto 80px auto;
+    align-self: center;
+    display: inline-block;
+    width: 100%;
+
+    .quote-cnt {
+        font-family: 'Abril Fatface', cursive;
+        position: relative; /* for pseudos */
+        color: $maincolor;
+        font-size: 1.4rem;    
+        line-height: 1;
+        margin: 0;
+        border: 2px solid #fff;
+        border: solid 2px;
+        border-radius:20px;
+        padding: 25px;
+        font-weight: bold;
+
+        .native {
+            font-weight: bold;
+        }
+
+        .native + .pronounciation {
+            color: $altcolor;
+
+            font-weight: normal;
+            font-size: 0.9rem; 
+            margin-left: 15px;   
+        }
+    
+        &:after {
+            content:"";
+            position: absolute;
+            border: 2px solid $maincolor;
+            border-radius: 0 50px 0 0;
+            width: 60px;
+            height: 60px;
+            bottom: -62px;
+            left: 50px;
+            border-bottom: none;
+            border-left: none;
+            z-index: 3; 
+        }
+    
+        &:before {
+            content:"";
+            position: absolute;
+            width: 80px;
+            border: 6px solid $bgcolor;
+            bottom: -3px;
+            left: 50px;
+            z-index: 2;
+        }
+    }
+}
+
+dl{
+
+    @include grid-container();
+    @include grid-flex-align-items(center, center);
+
+    dt{        
+        text-align: right;
+        font-weight: bold;
+        font-size: 1.2rem; 
+        padding: 0 15px;
+        margin-bottom: 80px;
+
+        @include grid-column(6);
+
+        &:after{
+            content: ":";       
+            font-weight: bold;
+            font-size: 1.2rem;                  
+        }
+    }
+
+    dd{        
+        margin-left: 0;
+        @include grid-column(6);
+    }
+}
+
+p{
+    margin: 0 0 15px 0;
+}
+
+h1, h2, h3 {
+    margin: 10px 0 15px 0;
+}
+
+ul, ol {
+    margin: 0;
 }

package/src/components/rws/line-splitter/styles/layout.scss

@@ -1,38 +1,38 @@
-@import "@rws-mixins";
-@import "_tags";
-
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-.spacer {
-  margin-right: 10px;
-}
-  
-
-.text-splitter-area {
-
-  .dots {
-    font-weight: 700;
-  }
-
-  &.loading {
-
-    p:last-child:after{
-      content: '';			
-      display: inline-block;
-      width: 5px;
-      height: 1rem;
-      height: 1.2rem;
-      background: rgb(114, 106, 106);
-      animation: 0.7s ease 0s infinite normal none running blink;
-      transform: translateY(5px);
-      margin-left: 5px;
-    }
-  }
-}
-
-.tagged {
-  background-color: yellow;
+@import "@rws-mixins";
+@import "_tags";
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.spacer {
+  margin-right: 10px;
+}
+  
+
+.text-splitter-area {
+
+  .dots {
+    font-weight: 700;
+  }
+
+  &.loading {
+
+    p:last-child:after{
+      content: '';			
+      display: inline-block;
+      width: 5px;
+      height: 1rem;
+      height: 1.2rem;
+      background: rgb(114, 106, 106);
+      animation: 0.7s ease 0s infinite normal none running blink;
+      transform: translateY(5px);
+      margin-left: 5px;
+    }
+  }
+}
+
+.tagged {
+  background-color: yellow;
 }

package/src/components/rws/reformer/fields/boolean/component.ts

@@ -1,20 +1,20 @@
-import RWSViewComponent from '../../../../_component';
-import { RWSView} from '../../../../_decorator';
-import { attr, observable } from '@microsoft/fast-element';
-
-@RWSView('reformer-boolean')
-class ReFormerBoolean extends RWSViewComponent {
-    @attr name: string;
-    @observable defaultValue: boolean = null;
-    @observable value: boolean = null;
-    @observable setForm: (field: string, value: any) => Promise<void>; 
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        this.value = this.defaultValue;
-    }
-}
-
-ReFormerBoolean.defineComponent();
-
-export { ReFormerBoolean };
+import RWSViewComponent from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+import { attr, observable } from '@microsoft/fast-element';
+
+@RWSView('reformer-boolean')
+class ReFormerBoolean extends RWSViewComponent {
+    @attr name: string;
+    @observable defaultValue: boolean = null;
+    @observable value: boolean = null;
+    @observable setForm: (field: string, value: any) => Promise<void>; 
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.value = this.defaultValue;
+    }
+}
+
+ReFormerBoolean.defineComponent();
+
+export { ReFormerBoolean };

package/src/components/rws/reformer/fields/boolean/template.html

@@ -1,6 +1,6 @@
-<sl-switch     
-    name="${ x => x.name}"
-    id="re-former-field-${x => x.name}" 
-    :value="${x => x.value}"     
-    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
+<sl-switch     
+    name="${ x => x.name}"
+    id="re-former-field-${x => x.name}" 
+    :value="${x => x.value}"     
+    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
 ></sl-switch>

package/src/components/rws/reformer/fields/date/component.ts

@@ -1,20 +1,20 @@
-import RWSViewComponent from '../../../../_component';
-import { RWSView} from '../../../../_decorator';
-import { attr, observable } from '@microsoft/fast-element';
-
-@RWSView('reformer-date')
-class ReFormerDate extends RWSViewComponent {
-    @attr name: string;
-    @observable defaultValue: Date = null;
-    @observable value: Date = null;
-    @observable setForm: (field: string, value: any) => Promise<void>; 
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        this.value = this.defaultValue;
-    }
-}
-
-ReFormerDate.defineComponent();
-
-export { ReFormerDate };
+import RWSViewComponent from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+import { attr, observable } from '@microsoft/fast-element';
+
+@RWSView('reformer-date')
+class ReFormerDate extends RWSViewComponent {
+    @attr name: string;
+    @observable defaultValue: Date = null;
+    @observable value: Date = null;
+    @observable setForm: (field: string, value: any) => Promise<void>; 
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.value = this.defaultValue;
+    }
+}
+
+ReFormerDate.defineComponent();
+
+export { ReFormerDate };

package/src/components/rws/reformer/fields/date/template.html

@@ -1,7 +1,7 @@
-<sl-input 
-    type="date" 
-    name="${ x => x.name}"
-    id="re-former-field-${x => x.name}" 
-    :value="${x => x.value}"     
-    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
-></sl-input>
+<sl-input 
+    type="date" 
+    name="${ x => x.name}"
+    id="re-former-field-${x => x.name}" 
+    :value="${x => x.value}"     
+    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
+></sl-input>