@rws-framework/client 2.0.6

package/src/components/_attrs/angular-attr.ts

@@ -0,0 +1,64 @@
+import { Observable, AttributeConfiguration, DecoratorAttributeConfiguration } from '@microsoft/fast-element';
+import RWSViewComponent from '../_component';
+
+type TargetType = RWSViewComponent;  // Use a more generic type for the target to ensure compatibility
+
+function ngAttr(configOrTarget?: DecoratorAttributeConfiguration | TargetType, 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 AttributeConfiguration;
+        // Return a function that applies the decorator, conforming to TypeScript's expectations for decorator factories
+        return (target: TargetType, property: string) => applyDecorator(target, property, config);
+    }
+}
+
+function applyDecorator(target: TargetType, prop: string, config: AttributeConfiguration | any = {}): void 
+{    
+    if (arguments.length > 1) {  
+        config.property = prop;
+    }
+
+    AttributeConfiguration.locate(target.constructor).push(config);
+    modifyPropertyDescriptor(target, prop);
+}
+
+
+
+function modifyPropertyDescriptor(target: any, propertyKey: string): void {
+    const privatePropName = `_${String(propertyKey)}`;
+    Object.defineProperty(target, privatePropName, {
+        writable: true,
+        value: target[propertyKey],
+    });
+
+    Object.defineProperty(target, propertyKey, {
+        get() {
+            const value: string = this[privatePropName];                
+            return isNgValue(value) ? null : value;
+        },
+        set(value: any) {                
+            if (typeof value === 'string' && isNgValue(value)) {                    
+                this[privatePropName] = null; // Set to null if condition is met
+            } else {
+                this[privatePropName] = value;
+            }
+            Observable.notify(this, propertyKey);
+        },
+    });
+}
+
+function isNgValue(input: string): boolean {
+    // Regular expression to match AngularJS template variable notation
+    const angularJsVariablePattern = /\{\{([^}]+)\}\}/;
+
+    // Test the input string for the pattern and return the result
+    return angularJsVariablePattern.test(input);
+}
+  
+
+export { ngAttr };

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

@@ -0,0 +1,81 @@
+import { Observable, AttributeConfiguration } 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';
+
+type SanitizeOptions = IOptions & { fullEncode?: boolean }
+
+const heOpt: he.EncodeOptions = {
+    useNamedReferences: false, 
+    encodeEverything: true,
+}
+
+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
+        }
+    };
+};
+
+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;
+    }
+
+    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],
+    });
+
+    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 };

package/src/components/_component.ts

@@ -0,0 +1,290 @@
+import { ViewTemplate, ElementStyles, observable, html, Constructable, PartialFASTElementDefinition, attr } from '@microsoft/fast-element';
+import { FoundationElement, FoundationElementDefinition, FoundationElementRegistry, InterfaceSymbol, Key, OverrideFoundationElementDefinition } from '@microsoft/fast-foundation';
+import ConfigService, { ConfigServiceInstance } from '../services/ConfigService';
+import UtilsService, { UtilsServiceInstance } from '../services/UtilsService';
+import DOMService, { DOMServiceInstance, DOMOutputType } from '../services/DOMService';
+import ApiService, { ApiServiceInstance } from '../services/ApiService';
+import NotifyService, { NotifyServiceInstance } from '../services/NotifyService';
+import RoutingService, { RoutingServiceInstance } from '../services/RoutingService';
+import WSService, { WSServiceInstance } from '../services/WSService';
+import { IRWSViewComponent, IAssetShowOptions } from '../interfaces/IRWSViewComponent';
+import { DI, inject } from '@microsoft/fast-foundation';
+import { provideRWSDesignSystem } from './_design_system';
+import RWSWindow, { RWSWindowComponentEntry, RWSWindowComponentInterface, loadRWSRichWindow } from '../interfaces/RWSWindow';
+import RWSContainer from './_container';
+import {RWSInject, applyConstructor, applyProp} from './_decorator';
+
+import 'reflect-metadata';
+
+interface IFastDefinition {
+    name: string;
+    template: ViewTemplate;
+    styles?: ElementStyles;
+} 
+
+type ComposeMethodType<
+    T extends FoundationElementDefinition, 
+    K extends Constructable<RWSViewComponent>
+> = (this: K, elementDefinition: T) => (overrideDefinition?: OverrideFoundationElementDefinition<T>) => FoundationElementRegistry<FoundationElementDefinition, T>;
+
+export interface IWithCompose<T extends RWSViewComponent> {
+    [key: string]: any
+    new (...args: any[]): T;
+    definition?: IFastDefinition
+    defineComponent: <T extends RWSViewComponent>(this: IWithCompose<T>) => void
+    isDefined<T extends RWSViewComponent>(this: IWithCompose<T>): boolean
+    compose: ComposeMethodType<FoundationElementDefinition, Constructable<T>>;
+    define<TType extends Function>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
+    _verbose: boolean;
+    _toInject: {[key: string]: any};
+}
+
+abstract class RWSViewComponent extends FoundationElement implements IRWSViewComponent {
+    __isLoading: boolean = true;
+    private static instances: RWSViewComponent[] = [];
+    static fileList: string[] = [];
+
+    @attr routeParams: Record<string, string> = {};
+
+    static autoLoadFastElement = true;
+    static _defined: { [key: string]: boolean } = {};
+    static _toInject: any[] = [];
+    static _verbose: boolean = false;
+
+    @observable trashIterator: number = 0;
+    @observable fileAssets: {
+        [key: string]: ViewTemplate
+    } = {};    
+
+    constructor(
+        @RWSInject(ConfigService) protected config: ConfigServiceInstance,
+        @RWSInject(RoutingService) protected routingService: RoutingServiceInstance,
+        @RWSInject(DOMService) protected domService: DOMServiceInstance,
+        @RWSInject(UtilsService) protected utilsService: UtilsServiceInstance,
+        @RWSInject(ApiService) protected apiService: ApiServiceInstance,
+        @RWSInject(WSService) protected wsService: WSServiceInstance,
+        @RWSInject(NotifyService) protected notifyService: NotifyServiceInstance
+    ) {
+        super();       
+        applyConstructor(this);
+    }
+
+    connectedCallback() {        
+        super.connectedCallback();       
+        applyConstructor(this);
+     
+        // console.trace(this.config);
+
+        if (!(this.constructor as IWithCompose<this>).definition && (this.constructor as IWithCompose<this>).autoLoadFastElement) {
+            throw new Error('RWS component is not named. Add `static definition = {name, template};`');
+        }
+
+        try {
+            (this.constructor as IWithCompose<this>).fileList.forEach((file: string) => {
+                if (this.fileAssets[file]) {
+                    return;
+                }
+                this.utilsService.getFileContents(this.config.get('pubPrefix') + file).then((response: string) => {
+                    this.fileAssets = { ...this.fileAssets, [file]: html`${response}` };
+                });
+            });
+
+        } catch (e: Error | any) {
+            console.error('Error loading file content:', e.message);
+            console.error(e.stack);
+        }
+
+        RWSViewComponent.instances.push(this);
+    }
+
+    observe(callback: (component: this, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: this, node: Node) => boolean = null, observeRemoved: boolean = false)
+    {
+        const observer = new MutationObserver((mutationsList, observer) => {
+            for(const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    const mutationObserveType: NodeList = observeRemoved ? mutation.removedNodes : mutation.addedNodes
+                    mutationObserveType.forEach(node => {                    
+                        if ((condition !== null && condition(this, node))) {
+                            callback(this, node, observer);
+                        }else if(condition === null){
+                            callback(this, node, observer);
+                        }                    
+                    });
+                }
+            }
+        });
+        
+        observer.observe(this.getShadowRoot(), { childList: true, subtree: true });
+    }
+
+    passRouteParams(routeParams: Record<string, string> = null) {
+        if (routeParams) {
+            this.routeParams = routeParams;
+        }
+    }
+
+    showAsset(assetName: string, options: IAssetShowOptions = {}): ViewTemplate<any, any> {
+
+        if (!this.fileAssets[assetName]) {
+            return html`<span></span>`;
+            throw new Error(`File asset "${assetName}" not declared in component "${(this.constructor as IWithCompose<this>).definition.name}"`);
+        }
+
+        return this.fileAssets[assetName];
+    }
+
+    on<T>(type: string, listener: (event: CustomEvent<T>) => any) {
+        this.addEventListener(type, (baseEvent: Event) => {
+            listener(baseEvent as CustomEvent<T>);
+        });
+    }
+
+    $emitDown<T>(eventName: string, payload: T) {
+        this.$emit(eventName, payload, {
+            bubbles: true,
+            composed: true
+        });
+    }
+
+    parse$<T extends Element>(input: NodeListOf<T>, directReturn: boolean = false): DOMOutputType<T> {
+        return this.domService.parse$<T>(input, directReturn);
+    }
+
+    $<T extends Element>(selectors: string, directReturn: boolean = false): DOMOutputType<T> {
+        return this.domService.$<T>(this.getShadowRoot(), selectors, directReturn);
+    }
+
+    async loadingString<T, C>(item: T, addContent: (cnt: C | { output: string }, paste?: boolean, error?: boolean) => void, shouldStop: (stopItem: T, addContent: (cnt: C | { output: string }, paste?: boolean, error?: boolean) => void) => Promise<boolean>) {
+        let dots = 1;
+        const maxDots = 3; // Maximum number of dots
+        const interval = setInterval(async () => {
+            const dotsString = '. '.repeat(dots);
+
+            const doesItStop = await shouldStop(item, addContent);
+
+            if (doesItStop) {
+                addContent({ output: '' }, true);
+                clearInterval(interval);
+            } else {
+                addContent({ output: `${dotsString}` }, true);
+
+                dots = (dots % (maxDots)) + 1;
+            }
+        }, 500);
+    }
+
+    async onDOMLoad(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (this.getShadowRoot() !== null && this.getShadowRoot() !== undefined) {
+                resolve();
+            } else {
+                // If shadowRoot is not yet available, use MutationObserver to wait for it
+                const observer = new MutationObserver(() => {
+                    if (this.getShadowRoot() !== null && this.getShadowRoot() !== undefined) {
+                        observer.disconnect();
+                        resolve();
+                    }
+                });
+                observer.observe(this, { childList: true, subtree: true });
+            }
+        });
+    }
+
+
+    protected getShadowRoot(): ShadowRoot {
+        const shRoot: ShadowRoot | null = this.shadowRoot;
+
+        if (!shRoot) {
+            throw new Error(`Component ${(this.constructor as IWithCompose<this>).definition.name} lacks shadow root. If you wish to have component without shadow root extend your class with FASTElement`);
+        }
+
+        return shRoot;
+    }
+
+    forceReload() {
+        this.trashIterator += 1;
+    }
+
+    hotReplacedCallback() {
+        this.forceReload();
+    }
+
+    sendEventToOutside<T>(eventName: string, data: T) {
+        const event = new CustomEvent<T>(eventName, {
+            detail: data,
+            bubbles: true,
+            composed: true
+        });
+
+        this.$emit(eventName, event);
+    }
+
+
+    static hotReplacedCallback() {
+        this.getInstances().forEach(instance => instance.forceReload());
+    }
+
+    static isDefined<T extends RWSViewComponent>(this: IWithCompose<T>): boolean 
+    {
+        const richWindow: RWSWindow = loadRWSRichWindow();
+
+        if(!this.definition){
+            return false;
+        }
+
+        return Object.keys(richWindow.RWS.components).includes(this.definition.name);
+    }
+
+    static defineComponent<T extends RWSViewComponent>(this: IWithCompose<T>): void
+    {
+        if(this.isDefined()){
+            if(this._verbose){
+                console.warn(`Component ${this.name} is already declared`);
+            }            
+            
+            return;
+        }
+
+        const richWindow = loadRWSRichWindow();        
+
+        if (!this.definition) {
+            throw new Error('RWS component is not named. Add `static definition = {name, template};`');
+        }
+
+        const composedComp = this.compose({
+            baseName: this.definition.name,
+            template: this.definition.template,
+            styles: this.definition.styles
+        }) as RWSWindowComponentInterface;
+
+        if (!richWindow.RWS) {
+            throw new Error('RWS client not initialized');
+        }
+
+        richWindow.RWS.components[this.definition.name] = {
+            interface: composedComp,
+            component: this
+        };        
+    }
+
+    static getDefinition(tagName: string, htmlTemplate: ViewTemplate, styles: ElementStyles = null) {
+        const def: IFastDefinition = {
+            name: tagName,
+            template: htmlTemplate
+        };
+
+        if (styles) {
+            def.styles = styles;
+        }
+
+        return def;
+    }
+
+    private static getInstances(): RWSViewComponent[] {
+        return RWSViewComponent.instances;
+    }
+}
+
+export default RWSViewComponent;
+
+export { IAssetShowOptions, IRWSViewComponent }

package/src/components/_container.ts

@@ -0,0 +1,16 @@
+import { DI } from '@microsoft/fast-foundation';
+import RWSWindow, {loadRWSRichWindow} from '../interfaces/RWSWindow'
+
+import 'reflect-metadata';
+
+export default () => {
+    const richWindow = loadRWSRichWindow();            
+
+    if(richWindow.RWS.container){        
+        return richWindow.RWS.container;
+    }
+    
+    richWindow.RWS.container = DI.getOrCreateDOMContainer(richWindow.RWS.container_node);    
+
+    return richWindow.RWS.container;
+};

package/src/components/_decorator.ts

@@ -0,0 +1,112 @@
+import { DI, InterfaceSymbol, inject, Key } from '@microsoft/fast-foundation';
+import RWSViewComponent, { IWithCompose } from './_component';
+import RWSContainer from './_container';
+import 'reflect-metadata';
+
+type Constructor<T = any> = new (...args: any[]) => T;
+
+interface RWSDecoratorOptions {
+    template?: string,
+    styles?: string,
+    fastElementOptions?: any,
+    ignorePackaging?: boolean
+}
+
+type InjectDecoratorReturnType = (target: any, key?: string | number | undefined, parameterIndex?: number) => void;
+
+const _PARAMTYPES_METADATA_KEY = 'design:paramtypes';
+
+function RWSInject<T extends RWSViewComponent>(dependencyClass: Key): InjectDecoratorReturnType {
+    return (target: IWithCompose<T>, key?: keyof IWithCompose<T>, parameterIndex?: number) => {
+        const loadedDependency = RWSContainer().get(dependencyClass);    
+        const paramNames = getFunctionParamNames(target.prototype.constructor);
+        target.prototype.constructor._toInject[paramNames[parameterIndex]] = loadedDependency;
+    };
+}
+
+function RWSView<T extends RWSViewComponent>(name: string, data?: RWSDecoratorOptions): (type: any) => void {
+    return (constructor: T) => {
+    };
+}
+
+function RWSIgnore(params: { mergeToApp?: boolean } = null): () => void {
+    return () => { };
+}
+
+function getFunctionParamNames(func: Function): string[] {
+    // Convert the function to its string form and extract the parameter names
+    const funcStr = func.toString().replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s))/mg, '');  
+    return funcStr.slice(funcStr.indexOf('(')+1, funcStr.indexOf(')')).split(',');
+}
+
+
+function getParentConstructor(instance: any): any 
+{
+    const proto = Object.getPrototypeOf(instance.constructor.prototype);
+    if (proto && proto.constructor) {
+        return proto.constructor;
+    }
+
+    return null;
+}
+
+const applyConstructor = (component: RWSViewComponent): void => {
+    let mainConstructor = component.constructor;
+    const parent = getParentConstructor(component);
+
+    if(!mainConstructor.length){
+        mainConstructor = parent;
+    }   
+    
+    let topConstructor = mainConstructor;
+
+    if( parent && parent.name === RWSViewComponent.name){ 
+        topConstructor = parent;
+    }
+    
+    const existingInjectedDependencies = (topConstructor as IWithCompose<RWSViewComponent>)._toInject;
+
+    Object.keys(existingInjectedDependencies).forEach((depKey: string) => {
+        const loadedDependency = existingInjectedDependencies[depKey];
+        if(!(component as any)[depKey]){
+            (component as any)[depKey] = loadedDependency;
+        }        
+    });    
+};
+
+const applyProp = (component: RWSViewComponent, propName: string | symbol): any => {
+    let mainConstructor = component.constructor;
+    const parent = getParentConstructor(component);
+
+    if(!mainConstructor.length){
+        mainConstructor = parent;
+    }   
+    
+    let topConstructor = mainConstructor;
+
+    if( parent && parent.name === RWSViewComponent.name){ 
+        topConstructor = parent;
+    }
+
+    if(typeof propName !== 'string'){
+        propName = propName.toString();
+    }
+    
+    const existingInjectedDependencies = (topConstructor as IWithCompose<RWSViewComponent>)._toInject;
+
+    // console.log(propName);
+    if(!Object.keys(existingInjectedDependencies).includes(propName)){
+        return null;
+    }
+
+    const loadedDependency = existingInjectedDependencies[propName];
+
+    if(!(component as any)[propName]){
+        (component as any)[propName] = loadedDependency;
+    }
+    
+
+    return loadedDependency;
+};
+
+export { RWSView, RWSDecoratorOptions, RWSIgnore, RWSInject, applyConstructor, applyProp }

package/src/components/_design_system.ts

@@ -0,0 +1,6 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+
+
+export function provideRWSDesignSystem(element?: HTMLElement): DesignSystem {
+    return DesignSystem.getOrCreate(element);
+}

package/src/components/index.ts

@@ -0,0 +1,9 @@
+import { RWSUploader } from './uploader/component';
+import { RouterComponent } from './router/component';
+
+const RWSComponents = { 
+    RWSUploader,
+    RouterComponent
+}
+
+export { RWSComponents };

package/src/components/progress/component.ts

@@ -0,0 +1,55 @@
+import { RWSView, RWSViewComponent, observable, attr } from '../../index';
+import {
+    nullableNumberConverter,
+} from "@microsoft/fast-element";
+
+@RWSView('rws-progress')
+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 };