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

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

@@ -1,552 +0,0 @@
-/**
-* 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

@@ -1,170 +0,0 @@
-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>
-`;