@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.2

package/src/nile-file-preview/types/nile-file-preview.enums.ts

@@ -24,6 +24,7 @@ export enum FilePreviewErrorMessages {
 export enum FilePreviewEvent {
   NILE_INIT = "nile-init",
   NILE_RECEIVE = "nile-receive",
+  NILE_UPLOADING = "nile-uploding",
   NILE_REMOVE = "nile-remove",
   NILE_CANCEL_UPLOAD = "nile-cancel-upload",
   NILE_DESTROY = "nile-destroy"

package/src/nile-file-upload/nile-file-upload.css.ts

@@ -13,12 +13,16 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   * {
-    padding: 0px;
-    margin: 0px;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
     box-sizing: border-box;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
 
   .wrapper {
@@ -35,24 +39,28 @@ export const styles = css`
   }
 
   .horizontal-div {
-    margin-bottom: 10px;
-    height: 62px;
+    height: var(--nile-height-60px, var(--ng-height-60px));
     max-width: 648px;
-    width: max(648px, 100%);
     min-width: 230px;
-    padding: 12px;
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   .hover-border {
-    border-color: var(--nile-colors-primary-600);
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+      var(--nile-colors-primary-600, var(--ng-colors-border-brand));
   }
 
   .vertical-div {
@@ -60,24 +68,24 @@ export const styles = css`
     height: auto;
     min-width: 240px;
     width: 240px;
-    display: flex;
+    display: flex !important;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: 12px;
-    border-radius: var(--nile-radius-radius-xs);
-    color: var(--nile-colors-dark-900);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-white-base);
-    position: relative; 
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    position: relative;
   }
 
   .vertical-div:hover {
-    border-color: var(--nile-colors-blue-500);
+    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-primary-600, var(--ng-colors-border-brand));
   }
 
   .outer-div-border {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .inner-div {
@@ -89,45 +97,47 @@ export const styles = css`
   }
 
   .content {
-    display: flex;  
+    display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
   }
 
   .content h4 {
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-900);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
-      
+
   .content p {
-    margin: 0px;
-    font-size: var(--nile-type-scale-2);
-    color: var(--nile-colors-neutral-700);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
   }
 
   /*  DISABLED STATE */
   .disable {
-    background-color: var(--nile-colors-dark-200);
-    opacity: 0.8;
-    cursor: not-allowed;
-    color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    opacity: var(--nile-opacity-50, var(--ng-opacity-50));
     pointer-events: none;
   }
 
   /* DRAGGING */
   .dragging {
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+      var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 18px;
-    color: var(--nile-colors-blue-700);
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-400);
   }
 
   .icons-container {
@@ -158,9 +168,12 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400)
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
-  
+
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -176,8 +189,8 @@ export const styles = css`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
   }
 
   .progress-bar-container p {
@@ -185,17 +198,20 @@ export const styles = css`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
   }
 
   /* PREVIEW STATE */
   .preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview-inner {
@@ -209,13 +225,16 @@ export const styles = css`
   }
 
   .preview-image-container img {
-    height: 42px;
-    width: 42px;
+    height: var(--nile-height-42px, var(--ng-height-42px));
+    width: var(--nile-width-42px, 42px); // check it once
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
-  
+
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -272,7 +291,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-  
+
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -299,7 +318,7 @@ export const styles = css`
   }
 
   /* ERROR STATE */
-  
+
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -330,7 +349,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-  
+
   .file-info {
     width: 100%;
     display: flex;
@@ -524,7 +543,7 @@ export const styles = css`
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-sm);
     scrollbar-width: none;
     padding: 12px;
   }
@@ -549,4 +568,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-file-upload/nile-file-upload.template.ts

@@ -4,17 +4,20 @@ import { DragHandler } from './utils/drag-drop.util';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { FileUploadState } from './types/file-upload.enums';
 
-const baseHorizontalState = (
+let dragHandlerInstance: DragHandler;
+export const getDragHandler = (dragHandler: DragHandler): void => {
+  dragHandlerInstance = dragHandler;
+}
+
+export const getHorizontalDefaultState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
-  disabled: boolean,
-  dragHandler: DragHandler,
-  state: FileUploadState,
-  errorMessage: string
+  errorMessage: string,
+  state: FileUploadState
 ): TemplateResult => html`
   <div>
-    <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
+    <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
       <div class="inner-div">
         <slot name="uploadIcon">
           <nile-icon name="upload" size="24"></nile-icon>
@@ -30,12 +33,11 @@ const baseHorizontalState = (
       </div>
       <input
         type="file"
-        ?disabled=${disabled}
-        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
+        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
         multiple
       />
-      <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
+      <slot @click=${browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary">
           Browse File
         </nile-button>
       </slot>
@@ -50,23 +52,39 @@ const baseHorizontalState = (
   </div>
 `;
 
-export const getHorizontalDefaultState = (
+export const getHorizontalDisabledtState = (
   browseFiles: Function,
   title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  state: FileUploadState,
-  errorMessage: string
-): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, false, dragHandler, state, errorMessage);
-
-export const getHorizontalDisabledState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  state: FileUploadState,
-  errorMessage: string
-): TemplateResult => baseHorizontalState(browseFiles, title, subtitle, true, dragHandler, state, errorMessage);
+  subtitle: string
+): TemplateResult => html`
+  <div
+    class="horizontal-div disable"
+  >
+     <div class="inner-div">
+      <slot name="uploadIcon">
+        <nile-icon name="upload" size="24"></nile-icon>
+      </slot>
+      <div class="content">
+        <slot name="title">
+          <h4>${title}</h4>
+        </slot>
+        <slot name="subtitle">
+          <p>${subtitle}</p>
+        </slot>
+      </div>
+    </div>
+    <input
+      type="file"
+      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+      multiple
+    />
+    <slot @click=${browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary">
+        Browse File
+      </nile-button>
+    </slot>
+  </div>
+`;
 
 export const getHorizontalDragState = (): TemplateResult => html`
   <div class="horizontal-div dragging">
@@ -89,16 +107,15 @@ export const getHorizontalDragState = (): TemplateResult => html`
 `;
 
 //  Vertical States
-const baseVerticalState = (
+export const getVerticalDefaultState = (
   browseFiles: Function,
   title: string,
   subtitle: string,
-  disabled: boolean,
-  dragHandler: DragHandler,
-  errorMessage: string
+  errorMessage: string,
+  state: FileUploadState
 ): TemplateResult => html`
   <div>
-    <div class="vertical-default vertical-div ${disabled ? 'disable' : ''}">
+    <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
       <slot name="uploadIcon">
         <nile-icon name="upload" size="24"></nile-icon>
       </slot>
@@ -112,12 +129,11 @@ const baseVerticalState = (
       </div>
       <input
         type="file"
-        ?disabled=${disabled}
-        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
+        @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
         multiple
       />
-      <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
-        <nile-button variant="tertiary" ?disabled=${disabled}>
+      <slot @click=${browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary">
           Browse File
         </nile-button>
       </slot>
@@ -132,22 +148,37 @@ const baseVerticalState = (
   </div>
 `;
 
-export const getVerticalDefaultState = (
-  browseFiles: Function,
-  title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  errorMessage: string
-): TemplateResult => baseVerticalState(browseFiles, title, subtitle, false, dragHandler, errorMessage);
-
 export const getVerticalDisabledState = (
   browseFiles: Function,
   title: string,
-  subtitle: string,
-  dragHandler: DragHandler,
-  errorMessage: string
-): TemplateResult => baseVerticalState(browseFiles, title, subtitle, true, dragHandler, errorMessage);
-
+  subtitle: string
+): TemplateResult => html`
+  <div
+    class="vertical-deafult vertical-div disable"
+  >
+    <slot name="uploadIcon">
+      <nile-icon name="upload" size="24"></nile-icon>
+    </slot>
+    <div class="content-container">
+      <slot name="title">
+        <h4>${title}</h4>
+      </slot>
+      <slot name="title">
+        <p>${subtitle}</p>
+      </slot>
+    </div>
+    <input
+      type="file"
+      @change=${(e: Event | DragEvent) => dragHandlerInstance.handleFiles(e)}
+      multiple
+    />
+    <slot @click=${browseFiles} name="browseFileButton">
+      <nile-button variant="tertiary">
+        Browse File
+      </nile-button>
+    </slot>
+  </div>
+`;
 
 export const getVerticalDragState = (): TemplateResult => html`
   <div class="vertical-div vertical-drag">

package/src/nile-file-upload/nile-file-upload.ts

@@ -9,7 +9,7 @@ import { styles } from './nile-file-upload.css';
 import { ChangedPropsInterface } from './types/file-upload.type'
 import NileElement from '../internal/nile-element';
 import { DragHandler } from './utils/drag-drop.util';
-import { getHorizontalDisabledState } from './nile-file-upload.template'
+import { getDragHandler } from './nile-file-upload.template'
 import { FileUploadDefaults } from './types/file-upload.enums';
 import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -17,6 +17,7 @@ import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent }
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';
 import {
   getHorizontalDefaultState,
+  getHorizontalDisabledtState,
   getHorizontalDragState,
   getVerticalDefaultState,
   getVerticalDisabledState,
@@ -39,10 +40,10 @@ export class NileFileUpload extends NileElement {
     return [styles];
   }
 
-  @property({ type: String }) size: string = "10MB";
+  @property({ type: Number }) size: number = 0;
   @property({ type: Boolean}) error: boolean = false;
-  @property({ type: String }) errorMessage: string = "efqwe";
-  @property({ type: Boolean}) allowMultiple: boolean = false;
+  @property({ type: String }) errorMessage: string = "";
+  @property({ type: Boolean}) allowMultiple: boolean = true;
   @property({ type: Boolean}) allowDuplicates: boolean = false;
   @property({ type: Array  }) uploadedFiles: File[] = [];
   @property({ type: String }) title: string = FileUploadDefaults.TITLE;
@@ -65,25 +66,26 @@ export class NileFileUpload extends NileElement {
     super.firstUpdated(changedProps);
 
     this.dragHandler = new DragHandler();
-    setUpDragHandler(this, this.dragHandler, this.allowMultiple, this.uploadedFiles, this.errorMessage, this.size, this.allowDuplicates);
+    getDragHandler(this.dragHandler);
+    setUpDragHandler(this, this.dragHandler);
     addInternalListeners(this, this.dragHandler, this.uploadRequests);
     addGlobalListeners(this.dragHandler);
   }
 
-  cnt: any = 0;
-
   updated(changedProps: ChangedPropsInterface): void {
     super.updated(changedProps);
 
     if (changedProps.has('uploadedFiles')) {
       if(this.uploadedFiles.length === 0) this.errorMessage = "";
-      if(this.fileUploadUrl && this.autoUpload) {
-        uploadFiles(this);
+      if(!this.fileUploadUrl) {
+        this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
+        return;
       }
+      uploadFiles(this);
       this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
 
     } else if (changedProps.has('state')) {
-      this.dragHandler.setValuesInDragHandler(this.state);
+      this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);
     }
   }
 
@@ -112,32 +114,32 @@ export class NileFileUpload extends NileElement {
   private getHorizontalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
 
       case FileUploadState.DISABLED:
-        return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
+        return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
 
       case FileUploadState.DRAG:
         return getHorizontalDragState();
 
       default:
-        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage);
+        return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
     }
   }
 
   private getVerticalState(): TemplateResult {
     switch(this.state) {
       case FileUploadState.DEFAULT:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
 
       case FileUploadState.DISABLED:
-        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
+        return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
 
       case FileUploadState.DRAG:
         return getVerticalDragState();
 
       default:
-        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage);
+        return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
     }
   }
 

package/src/nile-file-upload/types/file-upload.enums.ts

@@ -12,7 +12,7 @@ export enum FileUploadVariant {
 
 export enum FileUploadError {
   INVALID_FORMAT = "Invalid file format! Upload valid file.",
-  SIZE_LIMIT_EXCEEDED = "File exceeds size limit! Upload smaller file.",
+  SIZE_EXCEEDED = "File exceeds size limit! Upload smaller file.",
   MULTIPLE_NOT_ALLOWED = "Please Upload Single File!",
   DUPLICATES_NOT_ALLOWED = "Duplicate Files Are Not Allowed!",
   UPLOAD_URL_REQUIRED = "Upload URL is required!",
@@ -23,7 +23,6 @@ export enum FileUploadEvent {
   NILE_BROWSE = "nile-browse",
   NILE_DRAG = "nile-drag",
   NILE_CHANGE = "nile-change",
-  NILE_UPLOADING = "nile-uploading",
   NILE_UPLOAD_PROGRESS = "nile-upload-progress",
   NILE_UPLOAD_SUCCESS = "nile-upload-success",
   NILE_UPLOAD_CANCELLED = "nile-upload-cancelled",