@aquera/nile-elements 0.1.56-beta-1.0 → 0.1.56-beta-1.1

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

@@ -0,0 +1,552 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit';
+
+/**
+ * FileUpload CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+  }
+
+  * {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+    height: auto;
+  }
+
+  input {
+    display: none;
+  }
+
+  .horizontal-div {
+    margin-bottom: 10px;
+    height: 62px;
+    max-width: 648px;
+    width: max(648px, 100%);
+    min-width: 230px;
+    padding: 12px;
+    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);
+  }
+
+  .hover-border {
+    border-color: var(--nile-colors-primary-600);
+  }
+
+  .vertical-div {
+    min-height: 156px;
+    height: auto;
+    min-width: 240px;
+    width: 240px;
+    display: flex;
+    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; 
+  }
+
+  .vertical-div:hover {
+    border-color: var(--nile-colors-blue-500);
+  }
+
+  .outer-div-border {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .inner-div {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 18px;
+    box-sizing: border-box;
+  }
+
+  .content {
+    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);
+  }
+      
+  .content p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  /*  DISABLED STATE */
+  .disable {
+    background-color: var(--nile-colors-dark-200);
+    opacity: 0.8;
+    cursor: not-allowed;
+    color: var(--nile-colors-neutral-500);
+    pointer-events: none;
+  }
+
+  /* DRAGGING */
+  .dragging {
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-600);
+    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);
+  }
+
+  .icons-container {
+    display: flex;
+    gap: 4px;
+  }
+
+  .general-icon {
+    transform: rotate(-18.11deg);
+    position: relative;
+    bottom: 3px;
+  }
+
+  .image-icon {
+    transform: rotate(15deg);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+  }
+
+  /* Uploading State */
+  .uploading {
+    width: 648px;
+    min-width: 230px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    box-sizing: border-box;
+    border: 1px solid var(--nile-colors-neutral-400)
+  }
+  
+  .uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .progress-bar-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .progress-bar-percent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .progress-bar-container p {
+    margin: 0px;
+  }
+
+  .progress-bar-container > p {
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
+  }
+
+  /* PREVIEW STATE */
+  .preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .preview-inner {
+    display: flex;
+    gap: 18px;
+  }
+
+  .preview-image-container {
+    height: 42px;
+    width: 42px;
+  }
+
+  .preview-image-container img {
+    height: 42px;
+    width: 42px;
+    object-fit: contain;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview nile-icon:hover {
+    cursor: pointer;
+  }
+
+
+  /* NO PREVIEW STATE */
+  .no-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .no-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .no-preview-container {
+    display: flex;
+    gap: 18px;
+  }
+
+  .document-icon {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
+  }
+
+  .document-icon nile-icon {
+    height: 40px;
+    width: 40px;
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .no-preview > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* ERROR STATE */
+  
+  .error {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .error:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .error-container {
+    width: 100%;
+    display: flex;
+    gap: 18px;
+  }
+
+  .error-icon {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100);
+  }
+
+  .error-icon nile-icon {
+    height: 40px;
+    width: 40px;
+  }
+  
+  .file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .file-info p:last-of-type{
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .error > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* VARTICAL STATE START */
+  /* Default State */
+
+  .vertical-default {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 18px
+  }
+
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .content-container h4 {
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .content-container p:first-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .content-container p:last-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  /* Drag State */
+  .vertical-drag {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap:18px;
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-blue-700);
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-blue-500);
+  }
+
+  /* Uploading State */
+  .vertical-uploading {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .corner-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  /* Preview State */
+  .vertical-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .image-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+    object-fit: cover;
+    width: 80px;
+    height: 80px;
+    border-radius: var(--nile-radius-radius-xs);
+  }
+
+  /* Vertical No Preview State */
+  .vertical-no-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-no-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .vertical-document-icon {
+    height: 80px;
+    width: 80px;
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
+  }
+
+  /* Veritcal Error State */
+  .vertical-error {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-error:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .error-bg {
+    background-color: var(--nile-colors-red-100);
+    border: 1px solid var(--nile-colors-red-400);
+  }
+
+  .error-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: start;
+  }
+
+  .error-p {
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    width: 216px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+
+  .error-p p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+
+  /* Displaing uploaded files CSS */
+  .display-files {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    width: 648px;
+    min-width: 230px;
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--nile-colors-neutral-700);
+    border-radius: var(--nile-radius-radius-xs);
+    scrollbar-width: none;
+    padding: 12px;
+  }
+
+  ul, li {
+    width: 100%;
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  /* for the upload error messages */
+  .upload-error {
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-red-500);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--nile-spacing-one-half-x);
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,170 @@
+import { html, TemplateResult } from 'lit';
+import './nile-file-upload.css';
+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 = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  disabled: boolean,
+  dragHandler: DragHandler,
+  state: FileUploadState,
+  errorMessage: string
+): TemplateResult => html`
+  <div>
+    <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true, 'disable': disabled })}>
+      <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"
+        ?disabled=${disabled}
+        @change=${(e: Event | DragEvent) => { dragHandler.handleFiles(e) }}
+        multiple
+      />
+      <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary" ?disabled=${disabled}>
+          Browse File
+        </nile-button>
+      </slot>
+    </div>
+    ${errorMessage ?
+      html`<div class="upload-error">
+        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <span>${errorMessage}</span>
+      </div>` :
+      html``
+    }
+  </div>
+`;
+
+export const getHorizontalDefaultState = (
+  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);
+
+export const getHorizontalDragState = (): TemplateResult => html`
+  <div class="horizontal-div dragging">
+    <div class="icons-container">
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="general"
+        size="20"
+        class="general-icon"
+      ></nile-icon>
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="image"
+        size="24"
+        class="image-icon"
+      ></nile-icon>
+    </div>
+    <p>Drop files here to upload</p>
+  </div>
+`;
+
+//  Vertical States
+const baseVerticalState = (
+  browseFiles: Function,
+  title: string,
+  subtitle: string,
+  disabled: boolean,
+  dragHandler: DragHandler,
+  errorMessage: string
+): TemplateResult => html`
+  <div>
+    <div class="vertical-default vertical-div ${disabled ? '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="subtitle">
+          <p>${subtitle}</p>
+        </slot>
+      </div>
+      <input
+        type="file"
+        ?disabled=${disabled}
+        @change=${(e: Event | DragEvent) => dragHandler.handleFiles(e)}
+        multiple
+      />
+      <slot @click=${disabled ? undefined : browseFiles} name="browseFileButton">
+        <nile-button variant="tertiary" ?disabled=${disabled}>
+          Browse File
+        </nile-button>
+      </slot>
+    </div>
+    ${errorMessage ?
+      html`<div class="upload-error">
+        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <span>${errorMessage}</span>
+      </div>` :
+      html``
+    }
+  </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);
+
+
+export const getVerticalDragState = (): TemplateResult => html`
+  <div class="vertical-div vertical-drag">
+    <div class="icons-container">
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="general"
+        size="20"
+        class="general-icon"
+      ></nile-icon>
+      <nile-icon
+        color="var(--nile-colors-blue-500)"
+        name="image"
+        size="24"
+        class="image-icon"
+      ></nile-icon>
+    </div>
+    <p>Drop files here to upload</p>
+  </div>
+`;