@rws-framework/client 2.13.1 → 2.13.3

package/src/components/_event_handling.ts

@@ -1,41 +1,41 @@
-import RWSViewComponent from './_component';
-
-export function on<T>(this: RWSViewComponent, type: string, listener: (event: CustomEvent<any>) => any) {
-    this.addEventListener(type, (baseEvent: Event) => {
-        listener(baseEvent as CustomEvent<T>);
-    });
-}
-
-export function $emitDown<T>(this: RWSViewComponent, eventName: string, payload: T) {
-    this.$emit(eventName, payload, {
-        bubbles: true,
-        composed: true
-    });
-}
-
-export function observe(this: RWSViewComponent, callback: (component: RWSViewComponent, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: RWSViewComponent, 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 });
-}
-
-export function sendEventToOutside<T>(eventName: string, data: T): void
-{
-    document.dispatchEvent(new CustomEvent<T>(eventName, {
-        detail: data,
-    }));
+import RWSViewComponent from './_component';
+
+export function on<T>(this: RWSViewComponent, type: string, listener: (event: CustomEvent<any>) => any) {
+    this.addEventListener(type, (baseEvent: Event) => {
+        listener(baseEvent as CustomEvent<T>);
+    });
+}
+
+export function $emitDown<T>(this: RWSViewComponent, eventName: string, payload: T) {
+    this.$emit(eventName, payload, {
+        bubbles: true,
+        composed: true
+    });
+}
+
+export function observe(this: RWSViewComponent, callback: (component: RWSViewComponent, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: RWSViewComponent, 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 });
+}
+
+export function sendEventToOutside<T>(eventName: string, data: T): void
+{
+    document.dispatchEvent(new CustomEvent<T>(eventName, {
+        detail: data,
+    }));
 }

package/src/components/index.ts

@@ -1,15 +1,15 @@
-import { RWSUploader } from './uploader/component';
-import { RWSProgress } from './progress/component';
-import { RWSLoader } from './loader/component';
-
-
-function declareRWSComponents(parted: boolean = false): void
-{
-    if(!parted){
-        RWSUploader;        
-        RWSProgress;
-        RWSLoader;
-    }
-}
-
+import { RWSUploader } from './uploader/component';
+import { RWSProgress } from './progress/component';
+import { RWSLoader } from './loader/component';
+
+
+function declareRWSComponents(parted: boolean = false): void
+{
+    if(!parted){
+        RWSUploader;        
+        RWSProgress;
+        RWSLoader;
+    }
+}
+
 export { declareRWSComponents };

package/src/components/loader/component.ts

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

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

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

package/src/components/progress/component.ts

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

@@ -1,91 +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;
-    }
+: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

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

@@ -1,84 +1,84 @@
-import { RWSView, RWSViewComponent, observable, attr } from '../../index';
-
-@RWSView('rws-uploader')
-class RWSUploader extends RWSViewComponent {
-
-  @observable uploadProgress: number;
-
-  @observable uploadedFile: File;
-  @observable chosenFile: File;
-  @observable uploadParams: any;
-
-  @attr onFinish: (uploadResponse: any) => void;
-  @attr onStart: (chosenFile: File, context: any) => Promise<unknown> = async (chosenFile: File) => chosenFile;
-  @attr onProgress: (progress: number) => void = (progress: number) => null;
-
-
-  async onUploadStart(): Promise<void>
-  {    
-        if(!this.uploadProgress){
-            this.uploadProgress = 0;
-        }
-
-      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);
-  }
-
-  uploadProgressChanged(oldV: any, newV: any)
-  {
-    
-  }
-}
-
-RWSUploader.defineComponent();
-
+import { RWSView, RWSViewComponent, observable, attr } from '../../index';
+
+@RWSView('rws-uploader')
+class RWSUploader extends RWSViewComponent {
+
+  @observable uploadProgress: number;
+
+  @observable uploadedFile: File;
+  @observable chosenFile: File;
+  @observable uploadParams: any;
+
+  @attr onFinish: (uploadResponse: any) => void;
+  @attr onStart: (chosenFile: File, context: any) => Promise<unknown> = async (chosenFile: File) => chosenFile;
+  @attr onProgress: (progress: number) => void = (progress: number) => null;
+
+
+  async onUploadStart(): Promise<void>
+  {    
+        if(!this.uploadProgress){
+            this.uploadProgress = 0;
+        }
+
+      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);
+  }
+
+  uploadProgressChanged(oldV: any, newV: any)
+  {
+    
+  }
+}
+
+RWSUploader.defineComponent();
+
 export { RWSUploader };