@rws-framework/client 2.20.3 → 2.21.0

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

@@ -1,86 +0,0 @@
-import { observable, attr } from '@microsoft/fast-element';
-import { RWSView } from '../../_decorator';
-import { RWSViewComponent } from '../../_component';
-
-@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 };

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

@@ -1,131 +0,0 @@
-@import "@rws-mixins";
-
-//vars
-$upl_secondary: var(--rws-uploader-secondary, #CCC);
-$upl_bg: var(--rws-uploader-bg, #424242);
-$upl_border: var(--rws-uploader-border, #FFF);
-
-$upl_primary: var(--rws-uploader-primary, #EE2375);
-
-$upl_text: var(--rws-uploader-text, #000);
-
-$upl_btn_text: var(--rws-uploader-btn-text, #000);
-$upl_btn_bg: var(--rws-uploader-btn-bg, #CCC);
-$upl_btn_border: var(--rws-uploader-btn-border, #000);
-
-rws-progress {
-    --accent-foreground-rest: $upl_primary;
-}
-
-//styles
-.upload_area {    
-
-    color: $upl_text;
-
-    padding: 25px;
-
-    
-    *{
-        box-sizing: border-box;
-    }
-
-    section{
-        &::after{
-            content: '';
-            display: table;
-            clear: both;
-        }
-
-        display: block;
-        contain: content;
-        box-sizing: border-box;
-        background: $upl_bg;
-        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 $upl_border; // 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 $upl_border;
-
-                font-size: 10px;
-                padding: 15px;
-                border-radius: 15px;
-
-                .close-btn {
-                    border: 1px solid $upl_border;
-                    padding: 5px;
-                    font-weight: bold;
-                    margin-left: 10px;
-                    border-radius: 15px;
-                }
-            }
-
-            &.hover{
-                position: relative;
-
-                &:before{
-                    content: '';
-                    background: $upl_secondary;
-                    opacity: 0.4;
-
-                    position: absolute;
-
-                    width: 100%;
-                    height: 100%;
-                }
-
-                p{
-                    font-weight: bold;
-                }
-            }        
-        }
-
-        h3{
-            padding: 0 15px;
-            color: $upl_text;
-        }
-
-        article {
-            padding: 15px;
-        }
-        
-
-        button {
-            background: $upl_btn_bg;
-            color: $upl_btn_text;
-            font-size: 14px;
-            padding: 10px;        
-            box-shadow: none;
-            border-radius: 5px;
-            border-style: solid;
-            border-color: $upl_btn_border;
-            border-width: 1px;
-
-            fill: currentcolor;
-            cursor: pointer;        
-
-            &.outline{
-                background: none;                
-            }
-
-            &.next{
-                float: right;
-                margin-right: 10px;
-                margin-bottom: 10px;
-            }            
-        }
-    }    
-}

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

@@ -1,17 +0,0 @@
-<div class="upload_area">
-    <section>
-        <h3>Upload file</h3>
-        <rws-progress :value="${x => x.uploadProgress}" min="1" 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>