@rws-framework/client 2.16.2 → 2.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.16.2",
+    "version": "2.17.0",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -39,8 +39,7 @@
         "moment": "^2.29.4",
         "partial-json-parser": "^1.0.0",
         "reflect-metadata": "^0.2.2",
-        "resolve-url-loader": "^5.0.0",
-        "sanitize-html": "^2.14.0",
+        "resolve-url-loader": "^5.0.0",        
         "socket.io-client": "^4.7.2",
         "upload": "^1.3.2",
         "url-router": "^13.0.0",
@@ -52,8 +51,7 @@
         "@types/eslint": "^6.0.0",
         "@types/express-fileupload": "^1.4.4",
         "@types/glob": "^8.1.0",
-        "@types/he": "^1.2.3",
-        "@types/sanitize-html": "^2.11.0",
+        "@types/he": "^1.2.3",        
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/parser": "^5.0.0",
         "browser-sync": "^2.29.3",

package/src/client.ts

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

package/src/components/_attrs/sanitize-html.ts

@@ -1,81 +1,81 @@
-import { Observable } from '@microsoft/fast-element';
-import RWSViewComponent from '../_component';
-import DOMService from '../../services/DOMService';
-import RWSContainer from '../_container';
-import { IOptions } from 'sanitize-html';
+// import { Observable } from '@microsoft/fast-element';
+// import RWSViewComponent from '../_component';
+// import DOMService from '../../services/DOMService';
+// import RWSContainer from '../_container';
+// // import { IOptions } from 'sanitize-html';
 
-import * as he from 'he';
+// import * as he from 'he';
 
-type SanitizeOptions = IOptions & { fullEncode?: boolean };
+// // type SanitizeOptions = IOptions & { fullEncode?: boolean };
 
-const heOpt: he.EncodeOptions = {
-    useNamedReferences: false, 
-    encodeEverything: true,
-};
+// const heOpt: he.EncodeOptions = {
+//     useNamedReferences: false, 
+//     encodeEverything: true,
+// };
 
-function enc(html: string): string
-{
-    return he.encode(html, heOpt);
-}
+// function enc(html: string): string
+// {
+//     return he.encode(html, heOpt);
+// }
 
 
-const transformAnyTag = (tagName: string, attribs: { [key: string]: string }) => {
-    // Example: Wrap the original tag with `span` and indicate the original tag name in a data attribute
-    return {
-        tagName: 'span', // Change this to any tag you want to transform to
-        attribs: {
-            ...attribs,
-            'data-original-tag': tagName
-        }
-    };
-};
+// const transformAnyTag = (tagName: string, attribs: { [key: string]: string }) => {
+//     // Example: Wrap the original tag with `span` and indicate the original tag name in a data attribute
+//     return {
+//         tagName: 'span', // Change this to any tag you want to transform to
+//         attribs: {
+//             ...attribs,
+//             'data-original-tag': tagName
+//         }
+//     };
+// };
 
-function sanitizedAttr(configOrTarget?: SanitizeOptions | RWSViewComponent, prop?: string): void | any 
-{    
-    if (arguments.length > 1) {
-        // Decorator used directly without factory invocation
-        // Apply the decorator immediately without returning anything
-        applyDecorator(configOrTarget as RWSViewComponent, prop!);
-    } else {
-        // Decorator factory invocation
-        const config = configOrTarget as SanitizeOptions;
-        // Return a function that applies the decorator, conforming to TypeScript's expectations for decorator factories
-        return (target: RWSViewComponent, property: string) => applyDecorator(target, property, config);
-    }
-}
+// function sanitizedAttr(configOrTarget?: SanitizeOptions | RWSViewComponent, prop?: string): void | any 
+// {    
+//     if (arguments.length > 1) {
+//         // Decorator used directly without factory invocation
+//         // Apply the decorator immediately without returning anything
+//         applyDecorator(configOrTarget as RWSViewComponent, prop!);
+//     } else {
+//         // Decorator factory invocation
+//         const config = configOrTarget as SanitizeOptions;
+//         // Return a function that applies the decorator, conforming to TypeScript's expectations for decorator factories
+//         return (target: RWSViewComponent, property: string) => applyDecorator(target, property, config);
+//     }
+// }
 
-function applyDecorator(target: RWSViewComponent, prop: string, config: SanitizeOptions = null): void 
-{    
-    if(config.fullEncode){
-        const encAllOpts = {transformTags: { '*' : transformAnyTag }, textFilter: function(text: string, tagName?: string) { return tagName ? `${enc('<')}${tagName}${enc('>')}${text}${enc('</')}${tagName}${enc('>')}` : text; }};
-        config = {...config, ...encAllOpts};
-        delete config.fullEncode;
-    }
+// function applyDecorator(target: RWSViewComponent, prop: string, config: SanitizeOptions = null): void 
+// {    
+//     if(config.fullEncode){
+//         const encAllOpts = {transformTags: { '*' : transformAnyTag }, textFilter: function(text: string, tagName?: string) { return tagName ? `${enc('<')}${tagName}${enc('>')}${text}${enc('</')}${tagName}${enc('>')}` : text; }};
+//         config = {...config, ...encAllOpts};
+//         delete config.fullEncode;
+//     }
 
-    modifyPropertyDescriptor(target, prop, config as IOptions);
-}
+//     modifyPropertyDescriptor(target, prop, config as IOptions);
+// }
 
-function modifyPropertyDescriptor(target: any, propertyKey: string, config: IOptions = null): void {
-    const privatePropName = `_${String(propertyKey)}`;
-    Object.defineProperty(target, privatePropName, {
-        writable: true,
-        value: target[propertyKey],
-    });
+// function modifyPropertyDescriptor(target: any, propertyKey: string, config: IOptions = null): void {
+//     const privatePropName = `_${String(propertyKey)}`;
+//     Object.defineProperty(target, privatePropName, {
+//         writable: true,
+//         value: target[propertyKey],
+//     });
 
-    Object.defineProperty(target, propertyKey, {
-        get() {
-            return this[privatePropName];                             
-        },
-        set(value: any) {                
-            if (typeof value === 'string') {                                    
-                this[privatePropName] = RWSContainer().get(DOMService).sanitizeHTML(value, null, config);                
-            } else {
-                this[privatePropName] = null;
-            }
-            Observable.notify(this, propertyKey);
-        },
-    });
-}
+//     Object.defineProperty(target, propertyKey, {
+//         get() {
+//             return this[privatePropName];                             
+//         },
+//         set(value: any) {                
+//             if (typeof value === 'string') {                                    
+//                 this[privatePropName] = RWSContainer().get(DOMService).sanitizeHTML(value, null, config);                
+//             } else {
+//                 this[privatePropName] = null;
+//             }
+//             Observable.notify(this, propertyKey);
+//         },
+//     });
+// }
   
 
-export { sanitizedAttr };
+// export { sanitizedAttr };

package/src/components/_component.ts

@@ -240,6 +240,8 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
 export default RWSViewComponent;
 
+export { RWSViewComponent };
+
 export type {
     IAssetShowOptions,
     IRWSViewComponent

package/src/components/index.ts

@@ -1,6 +1,8 @@
 import { RWSUploader } from './uploader/component';
 import { RWSProgress } from './progress/component';
 import { RWSLoader } from './loader/component';
+import { RWSApiResource } from './rws-api-resource/component';
+import { ReFormer } from './reformer/component';
 
 
 function declareRWSComponents(parted: boolean = false): void
@@ -9,6 +11,9 @@ function declareRWSComponents(parted: boolean = false): void
         RWSUploader;        
         RWSProgress;
         RWSLoader;
+
+        RWSApiResource;
+        ReFormer;
     }
 }
 

package/src/components/loader/component.ts

@@ -1,8 +1,8 @@
-import { RWSView, RWSViewComponent } from '../../index';
+import { RWSView } from '../_decorator';
+import { RWSViewComponent } from '../_component';
 
 @RWSView('the-loader')
 class RWSLoader extends RWSViewComponent {
-  
     connectedCallback(): void {
         super.connectedCallback();
     }

package/src/components/progress/component.ts

@@ -1,7 +1,6 @@
-import { RWSView, RWSViewComponent, observable, attr } from '../../index';
-import {
-    nullableNumberConverter,
-} from '@microsoft/fast-element';
+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 {

package/src/components/reformer/component.ts

@@ -0,0 +1,29 @@
+import { observable, attr } from '@microsoft/fast-element';
+import { IKDBTypesResponse } from '../../types/IBackendCore';
+import { RWSViewComponent} from '../_component';
+import { RWSView} from '../_decorator';
+import { ReFormerText } from './fields/text/component';
+
+ReFormerText;
+
+@RWSView('rws-reformer')
+class ReFormer extends RWSViewComponent {
+    @attr resourceName: string;  
+
+    @observable fields: string[] | null = null;
+    @observable modelTypes: IKDBTypesResponse;
+
+    async connectedCallback(): Promise<void> 
+    {
+        this.modelTypes = await this.apiService.getResource(this.resourceName); 
+    }
+
+    setForm(key: string, val: any)
+    {
+        console.log('set reformer form', {key, val});
+    }
+}
+
+ReFormer.defineComponent();
+
+export { ReFormer };

package/src/components/reformer/fields/_field.ts

@@ -0,0 +1,14 @@
+import { observable, attr } from "@microsoft/fast-element";
+import RWSViewComponent from "../../_component";
+import { IReFormerField } from "../../../types/IReFormerField";
+
+export abstract class ReFormerFieldComponent extends RWSViewComponent implements IReFormerField  {
+    @attr name: string;
+    @observable defaultValue: any;
+    @observable setForm: (field: string, value: any) => Promise<void>;
+
+    changeField(key: string, value: any)
+    {        
+        this.setForm(key, value);
+    }
+}

package/src/components/reformer/fields/text/component.ts

@@ -0,0 +1,9 @@
+import { RWSView} from '../../../_decorator';
+import { ReFormerFieldComponent } from '../_field';
+
+@RWSView('reformer-text')
+class ReFormerText extends ReFormerFieldComponent {}
+
+ReFormerText.defineComponent();
+
+export { ReFormerText };

package/src/components/reformer/fields/text/styles/layout.scss

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

package/src/components/reformer/fields/text/template.html

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

package/src/components/reformer/styles/layout.scss

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

package/src/components/reformer/template.html

@@ -0,0 +1,7 @@
+<div class="re-former-container">
+    ${T.repeat(x => x.modelTypes.data.types, T.html`<div class="form-field">
+        ${T.when(x => x.type === 'String', T.html`
+            <re-former-text :setForm="${x => x.setForm.bind(x)}" name="${x => x.fieldName}"></re-former-text>
+        `)}
+    </div>`)}    
+</div>

package/src/components/rws-api-resource/component.ts

@@ -0,0 +1,20 @@
+import { IKDBTypeInfo, IKDBTypesResponse } from '../../types/IBackendCore';
+import { observable, attr } from '@microsoft/fast-element';
+import { RWSView } from '../_decorator';
+import { RWSViewComponent } from '../_component';
+import { RWSResourceListComponent } from './variants/list/component';
+import { RWSResourceFormComponent } from './variants/form/component';
+import { IRWSResourceQuery } from '../../types/IRWSResource';
+
+
+RWSResourceListComponent;
+RWSResourceFormComponent;
+
+@RWSView('rws-resource')
+class RWSApiResource extends RWSViewComponent {      
+    @observable dbModelData: IKDBTypesResponse;
+}
+
+RWSApiResource.defineComponent();
+
+export { RWSApiResource };

package/src/components/rws-api-resource/styles/layout.scss

@@ -0,0 +1,5 @@
+@import "@rws-mixins";
+
+.rws-api-container {
+    
+}

package/src/components/rws-api-resource/template.html

@@ -0,0 +1,3 @@
+<div class="rws-api-container">
+    
+</div>

package/src/components/rws-api-resource/variants/form/component.ts

@@ -0,0 +1,11 @@
+import { RWSViewComponent} from '../../../_component';
+import { RWSView} from '../../../_decorator';
+
+
+@RWSView('rws-resource-form')
+class RWSResourceFormComponent extends RWSViewComponent {
+}
+
+RWSResourceFormComponent.defineComponent();
+
+export { RWSResourceFormComponent };

package/src/components/rws-api-resource/variants/form/template.html

@@ -0,0 +1,3 @@
+<div id="resource-form">
+
+</div>

package/src/components/rws-api-resource/variants/list/component.ts

@@ -0,0 +1,11 @@
+import { RWSViewComponent} from '../../../_component';
+import { RWSView} from '../../../_decorator';
+
+
+@RWSView('rws-resource-list')
+class RWSResourceListComponent extends RWSViewComponent {
+}
+
+RWSResourceListComponent.defineComponent();
+
+export { RWSResourceListComponent };

package/src/components/rws-api-resource/variants/list/template.html

@@ -0,0 +1,3 @@
+<div id="resource-list">
+
+</div>

package/src/components/uploader/component.ts

@@ -1,4 +1,6 @@
-import { RWSView, RWSViewComponent, observable, attr } from '../../index';
+import { observable, attr } from '@microsoft/fast-element';
+import { RWSView } from '../_decorator';
+import { RWSViewComponent } from '../_component';
 
 @RWSView('rws-uploader')
 class RWSUploader extends RWSViewComponent {

package/src/index.ts

@@ -13,7 +13,7 @@ import type { IBackendRoute, IHTTProute, IPrefixedHTTProutes } from './services/
 
 import UtilsService, {UtilsServiceInstance} from './services/UtilsService';
 import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/ServiceWorkerService';
-import { sanitizedAttr } from './components/_attrs/sanitize-html';
+// import { sanitizedAttr } from './components/_attrs/sanitize-html';
 import { ngAttr } from './components/_attrs/angular-attr';
 import { externalObservable } from './components/_attrs/external-observable';
 import { externalAttr } from './components/_attrs/external-attr';
@@ -80,7 +80,7 @@ export {
     RWSNotify,
 
     RWSView,
-    sanitizedAttr,
+    // sanitizedAttr,
     RWSIgnore,
     RWSInject,    
     observable,

package/src/services/DOMService.ts

@@ -1,6 +1,6 @@
 import RWSService from './_service';
 import { DOM } from '@microsoft/fast-element';
-import htmlSanitizer, { Transformer, IOptions } from 'sanitize-html';
+// import htmlSanitizer, { Transformer, IOptions } from 'sanitize-html';
 
 type TagsProcessorType = { [tagName: string]: string | Transformer };
 type DOMOutputType<T extends Element> = NodeListOf<T> | T | null;
@@ -67,23 +67,7 @@ class DOMService extends RWSService {
         });
 
         return sanitizedText;
-    }
-
-    sanitizeHTML(
-        line: string, 
-        allowedHTMLTags: string[] = null,         
-        sanitizeOptions: IOptions = {})
-    {
-        const output: string = line.trim(); 
-        
-        if(allowedHTMLTags){
-            sanitizeOptions.allowedTags = allowedHTMLTags;
-        }     
-
-        const sanitized = htmlSanitizer(output, sanitizeOptions);
-
-        return sanitized;
-    }
+    }   
 
     async onDOMLoad(): Promise<void>
     {

package/src/types/IReFormerField.ts

@@ -0,0 +1,5 @@
+export interface IReFormerField {
+    name: string,
+    defaultValue?: any,
+    setForm: (field: string, value: any) => Promise<void>   
+}