@rws-framework/client 2.0.6

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

@@ -0,0 +1,91 @@
+: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/progress/template.html

@@ -0,0 +1,25 @@
+<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/router/component.ts

@@ -0,0 +1,67 @@
+import { observable  } from '@microsoft/fast-element';
+import { DI, Container, inject } from "@microsoft/fast-foundation";
+import { RWSRouter, _ROUTING_EVENT_NAME, RouteReturn } from '../../services/RoutingService';
+import RWSViewComponent, { IRWSViewComponent, IWithCompose } from '../_component';
+import {RWSView} from '../_decorator';
+import RWSContainer from '../_container';
+
+@RWSView('rws-router', { ignorePackaging: true })
+export class RouterComponent extends RWSViewComponent {    
+    static autoLoadFastElement = false;
+    private routing: RWSRouter;
+    private currentComponent: IRWSViewComponent;
+
+    @observable currentUrl: string;
+    @observable childComponents: HTMLElement[] = [];    
+    slotEl: HTMLElement = null;
+
+    connectedCallback() {
+        super.connectedCallback();   
+        this.routing = this.routingService.apply(this);   
+            
+        if(this.currentUrl){
+            this.handleRoute(this.routing.handleRoute(this.currentUrl));      
+        }           
+    }
+
+    currentUrlChanged(oldValue: string, newValue: string){  
+        if(!this.routing){
+            this.routing = this.routingService.apply(this);       
+
+        }     
+        this.handleRoute(this.routing.handleRoute(newValue));
+    }
+
+    private handleRoute(route: RouteReturn){
+        const [routeName, childComponent, routeParams] = route;
+
+        this.$emit(_ROUTING_EVENT_NAME, {
+            routeName,
+            component: childComponent
+        });
+
+        console.log('handleroute',{
+            routeName,
+            component: childComponent
+        });
+        
+        const newComponent = document.createElement((childComponent as any).definition.name);        
+        newComponent.routeParams = routeParams;
+
+        if(this.currentComponent){
+            this.getShadowRoot().removeChild(this.currentComponent);
+            
+        }
+        
+        this.currentComponent = newComponent;
+
+        this.getShadowRoot().appendChild(newComponent);
+    }
+
+    addComponent(component: any) {
+        
+        this.slotEl = component;
+    }
+}
+
+RouterComponent.defineComponent();

package/src/components/uploader/component.ts

@@ -0,0 +1,75 @@
+import { RWSView, RWSViewComponent, observable, attr } from '../../index';
+
+@RWSView('rws-uploader')
+class RWSUploader extends RWSViewComponent {
+
+  @observable uploadProgress: number = 0;
+
+  @observable uploadedFile: File;
+  @observable chosenFile: File;
+  @observable uploadParams: any;
+
+  @attr onFinish: (uploadResponse: any) => void;
+  @attr onStart: (chosenFile: File, context: any) => void = (chosenFile: File) => null;
+  @attr onProgress: (progress: number) => void = (progress: number) => null;
+
+
+  async onUploadStart(): Promise<void>
+  {    
+      const response = await this.onStart(this.chosenFile, this);
+   
+      if(response === null){
+        return;
+      }
+
+      this.onFinish(response);
+
+      this.uploadedFile = this.chosenFile;
+      this.chosenFile = null;    
+  }
+
+  onChoose(): void
+  {
+      const _self = this;
+      const fileInput = this.createFileInput();
+
+      this.triggerUpload(fileInput);
+
+      fileInput.addEventListener('change', () => {
+          _self.chosenFile = fileInput.files[0]; 
+          
+          _self.uploadedFile = null;
+
+          _self.removeFileInput(fileInput);      
+      });
+  }
+
+  removeFile(){
+      this.chosenFile = null;
+  }
+
+  private createFileInput(): HTMLInputElement
+  {
+      const fileInput: HTMLInputElement = document.createElement('input');
+      fileInput.type = 'file';
+      fileInput.style.display = 'none';
+
+
+      this.shadowRoot.appendChild(fileInput);
+      return fileInput;
+  }
+
+  private triggerUpload(fileInput: HTMLInputElement): void
+  {
+      fileInput.click();
+  }
+
+  private removeFileInput(fileInput: HTMLInputElement): void
+  {
+      this.shadowRoot.removeChild(fileInput);
+  }
+}
+
+RWSUploader.defineComponent();
+
+export { RWSUploader };

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

@@ -0,0 +1,105 @@
+@import "../../../styles/includes.scss";
+
+
+
+.upload_area {    
+    padding: 25px;
+
+
+    section{
+        &::after{
+            content: '';
+            display: table;
+            clear: both;
+        }
+
+        display: block;
+        contain: content;
+        box-sizing: border-box;
+        background: #424242;
+        border-radius: 10px;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
+
+        .drag-and-drop {
+            @include grid-container();
+            @include grid-flex-align-items(center, center);
+            
+            border: 4px dashed #FFF; // Adjust color as needed
+            width: 100%; // Adjust width as needed
+            height: 100%; // Adjust height as needed
+            padding: 30px;
+
+            margin-bottom: 30px;
+
+            text-align: center;
+            cursor: pointer;
+
+            .file-block {
+                border: 1px solid #FFF;
+
+                font-size: 10px;
+                padding: 15px;
+                border-radius: 15px;
+
+                .close-btn {
+                    border: 1px solid #FFF;
+                    padding: 5px;
+                    font-weight: bold;
+                    margin-left: 10px;
+                    border-radius: 15px;
+                }
+            }
+
+            &.hover{
+                position: relative;
+
+                &:before{
+                    content: '';
+                    background: #CCC;
+                    opacity: 0.4;
+
+                    position: absolute;
+
+                    width: 100%;
+                    height: 100%;
+                }
+
+                p{
+                    font-weight: bold;
+                }
+            }        
+        }
+
+        h3{
+            padding: 0 15px;
+        }
+
+        article {
+            padding: 15px;
+        }
+        
+
+        button {
+            background: var(--accent-fill-rest);
+            color: var(--foreground-on-accent-rest);
+            font-size: 14px;
+            padding: 10px;        
+            box-shadow: none;
+            border-radius: 5px;
+            border-style: solid;
+            border-color: var(--accent-fill-rest);
+            border-width: 1px;
+
+            fill: currentcolor;
+            cursor: pointer;        
+
+            &.outline{
+                background: none;                
+            }
+
+            &.next{
+                float: right;
+            }            
+        }
+    }    
+}

package/src/components/uploader/template.html

@@ -0,0 +1,17 @@
+<div class="upload_area">
+    <section>
+        <h3>Upload file</h3>
+        <rws-progress :value="${x => x.uploadProgress}" max="100"></rws-progress>
+        <article>
+            <div class="drag-and-drop"> 
+                <div @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="upl-background"></div>
+                ${T.when(x => !x.chosenFile, T.html`<p @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="dropinfo">Drag and drop here to upload</p>`)}
+                ${T.when(x => x.chosenFile, T.html`<div class="file-block">${ x => x.chosenFile.name} <span @click="${ x => x.removeFile() }" class="close-btn">X</span></div>`)}
+            </div>
+            <div class="upl-controls">
+                <button @click="${ x => x.onChoose() }" class="outline">Choose file</button>                
+            </div>
+        </article>
+        <button @click="${ x => x.onUploadStart() }" :disabled="${ x => x.chosenFile ? false : true }" appearance="accent" class="next">Upload</button>
+    </section>
+</div>

package/src/hmr.ts

@@ -0,0 +1,19 @@
+//@ts-expect-error no-types
+import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+const AUTORELOAD_CFG = {
+    plugins: [
+        hmrPlugin({
+            include: ['src/**/*'],
+            presets: [presets.fastElement],
+        }),
+    ],
+};
+
+const HMR = {
+    autoReloadConfig: (): any => {    
+        return AUTORELOAD_CFG;
+    }
+};
+
+export default HMR;

package/src/index.ts

@@ -0,0 +1,98 @@
+import { Transformer as HTMLTagTransformerType, Tag as HTMLTag, Attributes as HTMLAttributes } from 'sanitize-html';
+import { observable, attr } from '@microsoft/fast-element';
+import IRWSConfig from './interfaces/IRWSConfig';
+import RWSNotify, { NotifyUiType, NotifyLogType } from './types/RWSNotify';
+import { provideRWSDesignSystem } from './components/_design_system';
+import RWSService from './services/_service';
+import ConfigService, { ConfigServiceInstance } from './services/ConfigService';
+import RoutingService, { RoutingServiceInstance } from './services/RoutingService';
+import NotifyService, {NotifyServiceInstance} from './services/NotifyService';
+import DOMService, { DOMServiceInstance, DOMOutputType, TagsProcessorType }  from './services/DOMService';
+import ApiService,  { IBackendRoute, ApiServiceInstance, IHTTProute, IPrefixedHTTProutes } from './services/ApiService';
+import UtilsService, {UtilsServiceInstance} from './services/UtilsService';
+import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/ServiceWorkerService';
+import { sanitizedAttr } from './components/_attrs/sanitize-html';import WSService, {WSServiceInstance, WSStatus} from './services/WSService';
+import { ngAttr } from './components/_attrs/angular-attr';
+import RWSClient from './client';
+import RWSServiceWorker, { SWMsgType } from './service_worker/src/_service_worker';
+import IRWSUser from './interfaces/IRWSUser';
+import RWSContainer from './components/_container';
+
+import { 
+    IFrontRoutes, renderRouteComponent, RouteReturn, 
+    _ROUTING_EVENT_NAME, IRoutingEvent,
+    RWSRouter, IRWSRouteResult
+} from './services/RoutingService';
+
+// import { RWSComponents } from './components';
+import RWSViewComponent, { IAssetShowOptions } from './components/_component';
+import { RWSDecoratorOptions, RWSIgnore, RWSView, RWSInject } from './components/_decorator';
+
+
+
+export default RWSClient;
+export { 
+    NotifyUiType,
+    NotifyLogType,
+
+    RouteReturn,
+    _ROUTING_EVENT_NAME,
+    IRoutingEvent,
+    
+    RoutingServiceInstance,
+    RoutingService,
+    ApiServiceInstance,
+    ApiService,    
+    WSServiceInstance,
+    WSService,
+    UtilsServiceInstance,    
+    UtilsService,    
+    DOMServiceInstance,
+    DOMService,
+    DOMOutputType,
+    NotifyServiceInstance,
+    NotifyService,
+    ConfigServiceInstance,
+    ConfigService,
+    ServiceWorkerServiceInstance,
+    ServiceWorkerService,
+
+    RWSNotify,
+    RWSRouter,
+    IFrontRoutes as IRWSFrontRoutes,
+    IBackendRoute as IRWSBackendRoute,
+    RWSDecoratorOptions as IRWSDecoratorOptions,
+    IRWSRouteResult,
+    IHTTProute as IRWSHttpRoute,
+    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,
+    WSStatus as IRWSWebsocketStatus,
+    IAssetShowOptions as IRWSAssetShowOptions,
+    IRWSConfig,
+    IRWSUser,
+    TagsProcessorType,
+    HTMLTagTransformerType,
+    HTMLTag,
+    HTMLAttributes,
+         
+    RWSView,
+    sanitizedAttr,
+    RWSIgnore,
+    RWSInject,
+    ngAttr,    
+
+    renderRouteComponent,
+    
+    // RWSComponents,
+
+    observable,
+    attr,
+
+    RWSServiceWorker,
+    SWMsgType,
+
+    RWSService,
+    RWSViewComponent,   
+    provideRWSDesignSystem,
+
+    RWSContainer
+};

package/src/interfaces/IRWSConfig.ts

@@ -0,0 +1,24 @@
+import { IFrontRoutes } from '../services/RoutingService';
+import RWSViewComponent from '../components/_component';
+import { DI, InterfaceSymbol, Key } from "@microsoft/fast-foundation";
+import { RWSContainer } from '..';
+
+export default interface IRWSConfig {
+    defaultLayout?: typeof RWSViewComponent
+    backendUrl?: string
+    wsUrl?: string
+    backendRoutes?: any[]
+    apiPrefix?: string
+    routes?: IFrontRoutes
+    transports?: string[]
+    user?: any
+    ignoreRWSComponents?: boolean
+    pubUrl?: string
+    pubPrefix?: string
+    dontPushToSW?: boolean
+    parted?: boolean
+    splitFileDir?: string
+    splitPrefix?: string
+    routing_enabled?: boolean
+    _noLoad?: boolean    
+}

package/src/interfaces/IRWSUser.ts

@@ -0,0 +1,7 @@
+export default interface IRWSUser extends Object {
+    email: string;
+    mongoId: string;
+    name: string;
+    message: string;
+    jwt_token: string,
+}

package/src/interfaces/IRWSViewComponent.ts

@@ -0,0 +1,37 @@
+import { ViewTemplate, ElementStyles } from "@microsoft/fast-element";
+import { DOMOutputType } from "../services/DOMService";
+
+type IAssetShowOptions = {}
+
+interface IRWSViewComponent extends Node {    
+    __isLoading: boolean;
+    routeParams: Record<string, string>;
+    trashIterator: number;
+    fileAssets: { [key: string]: ViewTemplate };
+
+    connectedCallback(): void;
+
+    passRouteParams(routeParams?: Record<string, string>): void;
+
+    showAsset(assetName: string, options?: IAssetShowOptions): ViewTemplate<any>;
+
+    on<T>(type: string, listener: (event: CustomEvent<T>) => any): void;
+
+    $emitDown<T>(eventName: string, payload: T): void;
+
+    parse$<T extends Element>(input: NodeListOf<T>, directReturn?: boolean): DOMOutputType<T>;
+
+    $<T extends Element>(selectors: string, directReturn?: boolean): DOMOutputType<T>;
+
+    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>): Promise<void>
+
+    onDOMLoad(): Promise<void>;    
+
+    forceReload(): void;
+
+    hotReplacedCallback(): void;    
+
+    sendEventToOutside<T>(eventName: string, data: T): void;           
+}
+
+export {IRWSViewComponent, IAssetShowOptions}

package/src/interfaces/RWSWindow.ts

@@ -0,0 +1,39 @@
+import { RWSClientInstance } from "../client";
+import { Container, InterfaceSymbol } from '@microsoft/fast-foundation';
+import { v1 as uuid} from 'uuid';
+import { IWithDI } from "../services/_service";
+export type RWSWindowComponentInterface = (params?: any) => void;
+export type RWSWindowComponentEntry = { interface: RWSWindowComponentInterface, component: any };
+export type RWSWindowComponentRegister = { [key: string]: RWSWindowComponentEntry};
+
+export function loadRWSRichWindow(): RWSWindow
+{
+    const richWindow: RWSWindow = window;
+
+    if(!richWindow.RWS){
+        const newNode = document.createElement('main');
+        newNode.id = 'rws-cntr-id-' + uuid();
+
+        console.log('Created container on node: ', newNode.id);
+
+        richWindow.RWS = {
+            client: null,
+            components: {},
+            container: null,
+            container_node: newNode,
+            _registered: {}
+        }
+    }    
+
+    return richWindow;
+}
+
+export default interface RWSWindow extends Window {
+    RWS?:{
+        client?: RWSClientInstance
+        components: RWSWindowComponentRegister
+        container: Container | null
+        container_node: Element | null
+        _registered: {[key: string]: InterfaceSymbol<any>};
+    }
+}

package/src/routing/_router.ts

@@ -0,0 +1,59 @@
+import Router from 'url-router';
+import UtilsService, {UtilsServiceInstance} from '../services/UtilsService';
+import { IRWSViewComponent } from '../interfaces/IRWSViewComponent';
+export type RouteReturn = [string, IRWSViewComponent, Record<string, string>];
+export type IRWSRouteResult = {
+    handler: () => RouteReturn;
+    params: Record<string, string>;
+};  
+
+class RWSRouter {
+    private baseComponent: IRWSViewComponent;
+    private urlRouter: Router<any>;
+    private utilsService: UtilsServiceInstance;
+
+    constructor(routerComponent: IRWSViewComponent, urlRouter: Router<any>, utilsService: UtilsServiceInstance){
+        this.baseComponent = routerComponent;
+        this.urlRouter = urlRouter;
+        this.utilsService = utilsService;
+
+        window.addEventListener('popstate', (event: Event) => {
+            console.log('pop', event);
+        });
+    }
+
+    public routeComponent(newComponent: IRWSViewComponent)
+    {
+        this.baseComponent.appendChild(newComponent);
+    }
+
+    public fireHandler(route: IRWSRouteResult): RouteReturn
+    {     const handler = route.handler();
+        return [handler[0], handler[1], this.utilsService.mergeDeep(route.params, handler[2])];
+    }
+
+    public handleRoute(url: string): RouteReturn
+    {
+        const currentRoute = this.find(url);    
+
+        if (history.pushState) {
+            window.history.pushState({ path: url }, '', url);
+        }
+
+        return this.fireHandler(currentRoute);
+    }
+
+    public handleCurrentRoute(): RouteReturn
+    {
+        const currentRoute = this.find(window.location.pathname);    
+
+        return this.fireHandler(currentRoute);
+    }
+
+    public find(url: string): IRWSRouteResult
+    {
+        return this.urlRouter.find(url);
+    }
+}
+
+export { RWSRouter }

package/src/routing/index.ts

@@ -0,0 +1,7 @@
+const initRoutes = (): void => {
+
+};
+
+export default {
+    initRoutes
+};