@rws-framework/client 2.20.4 → 2.21.1

package/package.json

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

package/src/client.ts

@@ -15,7 +15,6 @@ import RWSWindow, { RWSWindowComponentRegister, loadRWSRichWindow } from './type
 
 import { DI, Container, Registration } from './components/_container';
 
-import { declareRWSComponents } from './components/index';
 import RWSContainer from './components/_container';
 import TheRWSService from './services/_service';
 
@@ -206,4 +205,4 @@ class RWSClient {
 }
 
 export default DI.createInterface<RWSClient>(x => x.singleton(RWSClient));
-export {  RWSClient as RWSClientInstance, declareRWSComponents };
+export {  RWSClient as RWSClientInstance };

package/src/index.ts

@@ -18,7 +18,6 @@ import RWSViewComponent from './components/_component';
 import RWSContainer from './components/_container';
 
 import {  RWSIgnore, RWSInject, RWSView } from './components/_decorator';
-import { declareRWSComponents } from './components';
 
 import type { DefaultRWSPluginOptionsType } from './plugins/_plugin';
 import type { IRWSPlugin, IStaticRWSPlugin, IPluginSpawnOption } from './types/IRWSPlugin';
@@ -69,8 +68,7 @@ export {
     ngAttr,
     
     RWSService,
-    RWSViewComponent,       
-    declareRWSComponents,
+    RWSViewComponent,
 
     RWSContainer
 };

package/src/components/index.ts

@@ -1,26 +0,0 @@
-import { RWSUploader } from './rws/uploader/component';
-import { RWSProgress } from './rws/progress/component';
-import { RWSLoader } from './rws/loader/component';
-import { RWSApiResource } from './rws/rws-api-resource/component';
-import { ReFormer } from './rws/reformer/component';
-import { RWSTable } from './rws/rws-table/component';
-import { RWSModal } from './rws/rws-modal/component';
-import { LineSplitter } from './rws/line-splitter/component';
-
-
-function declareRWSComponents(parted: boolean = false): void
-{
-    if(!parted){
-        RWSUploader;        
-        RWSProgress;
-        RWSLoader;
-        RWSTable;
-        RWSModal;
-        LineSplitter;
-
-        RWSApiResource;
-        ReFormer;
-    }
-}
-
-export { declareRWSComponents };

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

@@ -1,117 +0,0 @@
-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();      
-
-      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 +0,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 +0,0 @@
-@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/line-splitter/template.html

@@ -1 +0,0 @@
-<div class="text-splitter-area ${x => x.addClass}" :innerHTML="${(x) => x.content}"></div>

package/src/components/rws/loader/component.ts

@@ -1,14 +0,0 @@
-import { RWSView } from '../../_decorator';
-import { RWSViewComponent } from '../../_component';
-import { attr } from '@microsoft/fast-element';
-
-@RWSView('rws-loader')
-class RWSLoader extends RWSViewComponent {    
-    connectedCallback(): void {
-        super.connectedCallback();
-    }
-}
-
-RWSLoader.defineComponent();
-
-export { RWSLoader };

package/src/components/rws/loader/styles/layout.scss

@@ -1,14 +0,0 @@
-//loader
-//save
-$loader-color: var(--rws-loader-color, #eb7b13);
-$loader-size: 26px;
-$loader-height: 20px;
-$loader-border-size: 8px;
-$loader-gap: 12px;
-$loader-animation-duration: 1s;
-
-@import "~/scss-loading-animations/src/loaders";
-
-.loader {
-  @include loader06;
-}

package/src/components/rws/loader/template.html

@@ -1 +0,0 @@
-<div><div class="loader"></div></div>

package/src/components/rws/progress/component.ts

@@ -1,54 +0,0 @@
-import { observable, attr, nullableNumberConverter } from '@microsoft/fast-element';
-import { RWSView } from '../../_decorator';
-import { RWSViewComponent } from '../../_component';
-
-@RWSView('rws-progress', { debugPackaging: false })
-class RWSProgress extends RWSViewComponent {
-
-    @attr({ converter: nullableNumberConverter })
-    public value: number | null;
-    protected valueChanged(): void {
-        this.updatePercentComplete();
-    }
-
-
-    @attr({ converter: nullableNumberConverter })
-    public min: number;
-    protected minChanged(): void {
-        if (this.$fastController.isConnected) {
-            this.updatePercentComplete();
-        }
-    }
-
-    
-    @attr({ converter: nullableNumberConverter })
-    public max: number;
-    protected maxChanged(): void {
-        if (this.$fastController.isConnected) {
-            this.updatePercentComplete();
-        }
-    }
-
-    
-    @observable
-    public percentComplete: number = 0;
-
-    public connectedCallback(): void {
-        super.connectedCallback();
-        this.updatePercentComplete();        
-    }
-
-    private updatePercentComplete(): void {
-        const min: number = typeof this.min === 'number' ? this.min : 0;
-        const max: number = typeof this.max === 'number' ? this.max : 100;
-        const value: number = typeof this.value === 'number' ? this.value : 0;
-        const range: number = max - min;
-
-        this.percentComplete =
-            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);            
-    }
-}
-
-RWSProgress.defineComponent();
-
-export { RWSProgress };

package/src/components/rws/progress/styles/layout.scss

@@ -1,91 +0,0 @@
-:host {
-    align-items: center;
-    display: flex;
-    contain: content;
-    outline: none;
-    height: calc(var(--design-unit) * 1px);
-    margin: calc(var(--design-unit) * 1px) 0;
-}
-
-.progress {
-    background-color: var(--neutral-fill-rest);
-    border-radius: calc(var(--design-unit) * 1px);
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-.determinate {
-    background-color: var(--accent-foreground-rest);
-    border-radius: calc(var(--design-unit) * 1px);
-    height: 100%;
-    transition: all 0.2s ease-in-out;
-    display: flex;
-}
-
-.indeterminate {
-    border-radius: calc(var(--design-unit) * 1px);
-    display: flex;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-}
-
-.indeterminate-indicator-1 {
-    animation: indeterminate-1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    background-color: var(--accent-foreground-rest);
-    border-radius: calc(var(--design-unit) * 1px);
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    width: 40%;
-}
-
-.indeterminate-indicator-2 {
-    position: absolute;
-    opacity: 0;
-    height: 100%;
-    background-color: var(--accent-foreground-rest);
-    border-radius: calc(var(--design-unit) * 1px);
-    width: 60%;
-    animation: indeterminate-2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes indeterminate-1 {
-    0% {
-        opacity: 1;
-        transform: translateX(-100%);
-    }
-    70% {
-        opacity: 1;
-        transform: translateX(300%);
-    }
-    70.01% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-        transform: translateX(300%);
-    }
-}
-
-@keyframes indeterminate-2 {
-    0% {
-        opacity: 0;
-        transform: translateX(-150%);
-    }
-    29.99% {
-        opacity: 0;
-    }
-    30% {
-        opacity: 1;
-        transform: translateX(-150%);
-    }
-    100% {
-        transform: translateX(166.66%);
-        opacity: 1;
-    }
-}

package/src/components/rws/progress/template.html

@@ -1,25 +0,0 @@
-<template
-            role="progressbar"
-            aria-valuenow="${x => x.value}"
-            aria-valuemin="${x => x.min}"
-            aria-valuemax="${x => x.max}"
-        >
-            ${T.when(
-                x => typeof x.value === "number",
-                T.html`
-                    <div class="progress rws-progress" part="progress" slot="determinate">
-                        <div
-                            class="determinate"
-                            part="determinate"
-                            style="width: ${x => x.percentComplete}%"
-                        ></div>
-                    </div>
-                `,
-                T.html`
-                    <div class="progress rws-progress" part="progress" slot="indeterminate">
-                        <slot name="indeterminate">                           
-                        </slot>
-                    </div>
-                `
-            )}
-</template>

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

@@ -1,58 +0,0 @@
-import { observable, attr } from '@microsoft/fast-element';
-import { IKDBTypeInfo, IKDBTypesResponse } from '../../../types/IBackendCore';
-import { RWSViewComponent} from '../../_component';
-import { RWSView} from '../../_decorator';
-import { ReFormerText } from './fields/text/component';
-import { ReFormerDate } from './fields/date/component';
-import { ReFormerNumber } from './fields/number/component';
-import { ReFormerBoolean } from './fields/boolean/component';
-
-ReFormerBoolean;
-ReFormerNumber;
-ReFormerText;
-ReFormerDate;
-
-@RWSView('rws-reformer')
-class ReFormer extends RWSViewComponent {
-    @attr resource: string;  
-
-    @observable fields: string[] | null = null;
-    @observable formFields: IKDBTypeInfo[];
-
-    @observable modelTypes: IKDBTypesResponse;
-    @observable setForm: (key: string, val: any) => void = this.setFormField.bind(this);
-    @observable afterForm: (val: any) => Promise<void> = null;
-
-    private payload: {[key: string]: any} = {};
-
-    modelTypesChanged(oldVal:IKDBTypesResponse, newVal: IKDBTypesResponse)
-    {
-        if(newVal){
-            this.formFields = newVal.data.types.filter((item) => !['id', 'created_at', 'updated_at'].includes(item.fieldName))
-        }
-    }
-
-    setFormField(key: string, val: HTMLFormElement)
-    {
-        this.payload[key] = val.value;
-    }
-
-    paintLabel(input: string): string
-    {
-        return input;
-    }
-
-    async sendForm()
-    {
-        const resource = await this.apiService.back.post(`${this.resource}:create`, this.payload);
-        this.payload = {};
-
-        if(this.afterForm){
-            this.afterForm(resource);
-        }
-    }
-}
-
-ReFormer.defineComponent();
-
-export { ReFormer };

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

@@ -1,20 +0,0 @@
-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/styles/layout.scss

@@ -1,5 +0,0 @@
-@import "@rws-mixins";
-
-.re-former-boolean-input {
-    display: flex;
-}

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

@@ -1,6 +0,0 @@
-<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 +0,0 @@
-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/styles/layout.scss

@@ -1,5 +0,0 @@
-@import "@rws-mixins";
-
-.re-former-date-input {
-    display: flex;
-}

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

@@ -1,7 +0,0 @@
-<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>