@aquera/nile-elements 0.1.38 → 0.1.39-beta-1.0

package/src/nile-error-message/nile-error-message.ts

@@ -32,6 +32,12 @@ export class NileErrorMessage extends LitElement {
   @property({ type: Boolean })
   isExpanded: boolean = false;
 
+  @property({ type: String }) maxWidth: string;
+
+  @property({ type: String }) maxHeight: string;
+
+  @property({ type: String }) maxDialogHeight: string;
+
   // The maximum length before truncation.
   private readonly MAX_LENGTH: number = 100;
 
@@ -46,6 +52,18 @@ export class NileErrorMessage extends LitElement {
     return this.errorResponse;
   }
 
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('maxWidth')) {
+      this.style.setProperty('--nile-error-max-width', this.maxWidth);
+    }
+    if (changedProperties.has('maxHeight')) {
+      this.style.setProperty('--nile-error-max-height', this.maxHeight);
+    }
+    if (changedProperties.has('maxDialogHeight')) {
+      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);
+    }
+  }
+
   /**
    * Toggle the expanded state of the error response.
    */
@@ -63,7 +81,7 @@ export class NileErrorMessage extends LitElement {
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="var(--nile-colors-red-700)"
+          color="var(--nile-colors-red-700, var(--ng-colors-fg-error-primary))"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
 
@@ -78,7 +96,7 @@ export class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="var(--nile-colors-primary-600)" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}"></nile-icon>
               </span
             > `:``}
             </div>

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -12,28 +12,28 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --indication-color: var(--nile-colors-red-500);
+    --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
   }
 
   .nile-error-notification {
-    font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-style: normal;
-    font-weight: 400;
-    line-height: 12px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
     letter-spacing: 0.2px;
     border: 1px solid var(--indication-color);
-    border-left: 6px solid var(--indication-color);
-    border-radius: 4px;
-    padding: 8px;
-    background: var(--nile-colors-neutral-100);
+    border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
     color: var(--indication-color);
     box-sizing: border-box;
   }
 
   .nile-error-notification__icon {
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xxs));
   }
 `;
 

package/src/nile-file-preview/index.ts

@@ -0,0 +1 @@
+export { NileFilePreview } from './nile-file-preview';

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

@@ -0,0 +1,567 @@
+/**
+* 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: 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 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+    height: auto;
+  }
+
+  input {
+    display: none;
+  }
+
+  .horizontal-div {
+    height: var(--nile-height-60px, var(--ng-height-60px));
+    max-width: 648px;
+    width: max(648px, 100%);
+    min-width: 230px;
+    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, var(--ng-radius-xl));
+    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));
+    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-state {
+    border-color: var(--nile-colors-primary-600);
+  }
+
+  .vertical-div {
+    height: auto;
+    min-height: 156px;
+    min-width: 240px;
+    width: 240px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    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; 
+    margin-bottom: 10px;
+  }
+
+  .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;
+  }
+
+  .icons-container {
+    display: flex;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-1));
+  }
+
+  .general-icon {
+    transform: rotate(-18.11deg);
+    position: relative;
+    bottom: 3px;
+  }
+
+  .image-icon {
+    transform: rotate(15deg);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+  }
+
+  /* Uploading State */
+  .uploading {
+    height: 62px;
+    width: 648px;
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    min-width: 230px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    box-sizing: border-box;
+    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));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
+  }
+  
+  .uploading:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  .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, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+  }
+
+  nile-progress-bar li span {
+    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
+  }
+
+  .progress-bar-container p {
+    margin: 0px;
+  }
+
+  .progress-bar-container > p {
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+  }
+
+  /* PREVIEW STATE */
+  .preview {
+    height: 62px;
+    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));
+  }
+
+  .preview:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .preview-inner {
+    display: flex;
+    gap: 18px;
+  }
+
+  .preview-image-container {
+    height: var(--nile-height-42px, var(--ng-height-42px));
+    width: var(--nile-width-42px, 42px);
+  }
+
+  .preview-image-container img, iframe {
+    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, 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;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .preview-file-info p {
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    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-500));
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+  }
+
+  .preview nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* NO PREVIEW STATE */
+  .no-preview {
+    height: 62px;
+    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));
+  }
+
+  .no-preview:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .no-preview-container {
+    display: flex;
+    gap: 18px;
+  }
+
+  .document-icon {
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
+  }
+
+  .document-icon nile-icon {
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    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-500));
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+  }
+
+  .no-preview > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* ERROR STATE */
+  .error {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+  }
+
+  .error:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+  }
+
+  .error-container {
+    width: 100%;
+    display: flex;
+    gap: 18px;
+  }
+
+  .error-icon {
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-red-400, var(--ng-colors-border-error));
+    background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));
+  }
+
+  .error-icon nile-icon {
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
+  }
+  
+  .file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+    text-align: center;
+  }
+
+  .file-info p {
+    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));
+    text-align: center;
+  }
+  
+  .file-info > nile-tooltip > p {
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    text-align: center;
+  }
+
+  .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;
+    text-align: center;
+  }
+
+  .content-container h4 {
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+  }
+
+  .content-container p:first-child {
+    margin: 0px;
+    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));
+  }
+
+  .content-container p:last-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+  }
+
+  /* Drag State */
+  .vertical-drag {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap:18px;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-blue-700), var(--ng-colors-fg-primary-900);
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));
+  }
+
+  /* Uploading State */
+  .vertical-uploading {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    /* 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));
+  }
+
+  .vertical-uploading:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: var(--nile-spacing-5xl, --ng-spacing-5xl);
+  }
+
+  .corner-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  /* Preview State */
+  .vertical-preview {
+    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));
+  }
+
+  .vertical-preview:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .image-preview {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    object-fit: cover;
+    width: var(--nile-width-80px, var(--ng-spacing-8xl));
+    height: var(--nile-height-80px, var(--ng-height-80px));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+  }
+
+  /* Vertical No Preview State */
+  .vertical-no-preview {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .vertical-no-preview:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
+  .vertical-document-icon {
+    height: var(--nile-height-80px, var(--ng-height-80px));
+    width: var(--nile-width-80px, var(--ng-spacing-8xl));
+    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));
+  }
+
+  /* Veritcal Error State */
+  .vertical-error {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+  }
+
+  .vertical-error:hover {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+  }
+
+  .error-bg {
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-red-400, var(--ng-colors-border-error));
+  }
+
+  .file-info-vertical-state {
+    width: 100%;
+    text-align: start;
+  }
+
+  .file-info-vertical-state p {
+    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));
+    padding-bottom: 6px;
+    text-align: center;
+  }
+  
+  .file-info-vertical-state > nile-tooltip > p {
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    text-align: center;
+  }
+
+  .error-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    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));
+    text-align: center
+  }
+
+  .error-p {
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    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: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+
+
+  /* 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: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    scrollbar-width: none;
+    padding: var(--nile-radius-lg, var(--ng-spacing-lg));
+  }
+
+  ul, li {
+    width: 100%;
+  }
+
+  li {
+    list-style-type: none;
+  }
+`;
+
+export default [styles];