@aquera/nile-elements 0.1.55-beta-1.2 → 0.1.55-beta-1

package/dist/src/nile-file-upload/nile-file-upload.css.js

@@ -11,25 +11,20 @@ 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: var(--nile-spacing-none, var(--ng-spacing-none));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0px;
+    margin: 0px;
     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;
+    align-items: flex-start;
+    width: min-content;
   }
 
   input {
@@ -37,28 +32,45 @@ export const styles = css `
   }
 
   .horizontal-div {
-    height: var(--nile-height-60px, var(--ng-height-60px));
+    margin-bottom: 10px;
+    height: 62px;
     max-width: 648px;
+    width: 648px;
     min-width: 230px;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: 12px;
     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-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));
+    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:
-      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));
+    border-color: var(--nile-colors-primary-600);
+  }
+
+  .title {
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 454px;
+    width: 100%;
+  }
+
+  .subtitle {
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-500);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 454px;
   }
 
   .vertical-div {
@@ -66,24 +78,24 @@ export const styles = css `
     height: auto;
     min-width: 240px;
     width: 240px;
-    display: flex !important;
+    display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    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;
+    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: 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));
+    border-color: var(--nile-colors-blue-500);
   }
 
   .outer-div-border {
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .inner-div {
@@ -95,47 +107,67 @@ export const styles = css `
   }
 
   .content {
-    display: flex;
+    display: flex;  
     flex-direction: column;
     justify-content: center;
     gap: 8px;
   }
 
   .content h4 {
-    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-regular));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 454px;
   }
-
+      
   .content p {
-    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));
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 454px;
+  }
+
+  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {
+    --nile-svg-height: 24px !important ;
+    --nile-svg-width: 24px !important ;
+    height:42px;
+    width: 42px;
+    object-fit: cover;
+  }
+
+  .browse-file-button {
+    cursor: pointer;
   }
 
   /*  DISABLED STATE */
   .disable {
-    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));
+    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, 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));
+    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, 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-regular);
+    color: var(--nile-colors-blue-700);
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .icons-container {
@@ -166,12 +198,9 @@ export const styles = css `
     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: 1px solid var(--nile-colors-neutral-400)
   }
-
+  
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -187,8 +216,8 @@ export const styles = css `
     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-medium));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .progress-bar-container p {
@@ -196,20 +225,17 @@ export const styles = css `
   }
 
   .progress-bar-container > p {
-    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));
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
   }
 
   /* PREVIEW STATE */
   .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));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .preview-inner {
@@ -223,16 +249,13 @@ export const styles = css `
   }
 
   .preview-image-container img {
-    height: var(--nile-height-42px, var(--ng-height-42px));
-    width: var(--nile-width-42px, 42px); // check it once
+    height: 42px;
+    width: 42px;
     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));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
   }
-
+  
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -289,7 +312,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
-
+  
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -316,7 +339,7 @@ export const styles = css `
   }
 
   /* ERROR STATE */
-
+  
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -347,7 +370,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
-
+  
   .file-info {
     width: 100%;
     display: flex;
@@ -392,21 +415,26 @@ export const styles = css `
     gap: 8px;
   }
 
-  .content-container h4 {
-    font-weight: var(--nile-font-weight-regular);
-  }
-
-  .content-container p:first-child {
-    margin: 0px;
+  .content-container div.title {
     font-size: var(--nile-type-scale-3);
     font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
   }
 
-  .content-container p:last-child {
-    margin: 0px;
+  .content-container div.subtitle {
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-500);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
   }
 
   /* Drag State */
@@ -541,7 +569,7 @@ export const styles = css `
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-xs);
     scrollbar-width: none;
     padding: 12px;
   }
@@ -558,12 +586,37 @@ export const styles = css `
   .upload-error {
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-red-500);
+    color: var(--nile-colors-red-700);
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: var(--nile-spacing-one-half-x);
   }
+
+  .upload-error > nile-tooltip > span {
+    color: var(--nile-colors-red-700);
+    white-space: nowrap;
+    text-align: left;
+    max-width: 538px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .vertical-upload-error {
+    display: flex;
+    gap: 4px;
+  }
+
+  .vertical-upload-error > nile-tooltip > span  {
+    color: var(--nile-colors-red-700);
+    white-space: nowrap;
+    text-align: left;
+    width: 222px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--nile-type-scale-2);
+    display: inline-block;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-file-upload.css.js.map

package/dist/src/nile-file-upload/nile-file-upload.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4iBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  * {\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 18px;\n    height: auto;\n  }\n\n  input {\n    display: none;\n  }\n\n  .horizontal-div {\n    height: var(--nile-height-60px, var(--ng-height-60px));\n    max-width: 648px;\n    min-width: 230px;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .hover-border {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex !important;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    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));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    position: relative;\n  }\n\n  .vertical-div:hover {\n    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));\n  }\n\n  .outer-div-border {\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .inner-div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .content p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-regular);\n  }\n\n  .icons-container {\n    display: flex;\n    gap: 4px;\n  }\n\n  .general-icon {\n    transform: rotate(-18.11deg);\n    position: relative;\n    bottom: 3px;\n  }\n\n  .image-icon {\n    transform: rotate(15deg);\n  }\n\n  .icon:hover {\n    cursor: pointer;\n  }\n\n  /* Uploading State */\n  .uploading {\n    width: 648px;\n    min-width: 230px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 18px;\n    box-sizing: border-box;\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .progress-bar-container {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n  }\n\n  .progress-bar-percent {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n  }\n\n  .progress-bar-container p {\n    margin: 0px;\n  }\n\n  .progress-bar-container > p {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .preview {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))\n      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .preview:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .preview-inner {\n    display: flex;\n    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\n    height: var(--nile-height-42px, var(--ng-height-42px));\n    width: var(--nile-width-42px, 42px); // check it once\n    object-fit: contain;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))\n      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n\n  /* NO PREVIEW STATE */\n  .no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .no-preview-container {\n    display: flex;\n    gap: 18px;\n  }\n\n  .document-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .document-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n\n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n\n  .error {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .error:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .error-container {\n    width: 100%;\n    display: flex;\n    gap: 18px;\n  }\n\n  .error-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-red-400);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .error-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n\n  .file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\n  .vertical-default {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 18px\n  }\n\n  .content-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .content-container h4 {\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .content-container p:first-child {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .content-container p:last-child {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  /* Drag State */\n  .vertical-drag {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap:18px;\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-blue-700);\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  /* Uploading State */\n  .vertical-uploading {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .corner-icon {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  /* Preview State */\n  .vertical-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .image-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n    object-fit: cover;\n    width: 80px;\n    height: 80px;\n    border-radius: var(--nile-radius-radius-xs);\n  }\n\n  /* Vertical No Preview State */\n  .vertical-no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .vertical-document-icon {\n    height: 80px;\n    width: 80px;\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  /* Veritcal Error State */\n  .vertical-error {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-error:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .error-bg {\n    background-color: var(--nile-colors-red-100);\n    border: 1px solid var(--nile-colors-red-400);\n  }\n\n  .error-message {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    text-align: start;\n  }\n\n  .error-p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    width: 216px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n  }\n\n  .error-p p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n  }\n\n\n  /* Displaing uploaded files CSS */\n  .display-files {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 8px;\n    width: 648px;\n    min-width: 230px;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-neutral-700);\n    border-radius: var(--nile-radius-sm);\n    scrollbar-width: none;\n    padding: 12px;\n  }\n\n  ul, li {\n    width: 100%;\n  }\n\n  li {\n    list-style-type: none;\n  }\n\n  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAimBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  * {\n    padding: 0px;\n    margin: 0px;\n    box-sizing: border-box;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    width: min-content;\n  }\n\n  input {\n    display: none;\n  }\n\n  .horizontal-div {\n    margin-bottom: 10px;\n    height: 62px;\n    max-width: 648px;\n    width: 648px;\n    min-width: 230px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px dashed var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  .hover-border {\n    border-color: var(--nile-colors-primary-600);\n  }\n\n  .title {\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n    width: 100%;\n  }\n\n  .subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px;\n    border-radius: var(--nile-radius-radius-xs);\n    color: var(--nile-colors-dark-900);\n    border: 1px dashed var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    position: relative; \n  }\n\n  .vertical-div:hover {\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  .outer-div-border {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .inner-div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n      \n  .content p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    color: var(--nile-colors-neutral-700);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n\n  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n    --nile-svg-height: 24px !important ;\n    --nile-svg-width: 24px !important ;\n    height:42px;\n    width: 42px;\n    object-fit: cover;\n  }\n\n  .browse-file-button {\n    cursor: pointer;\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200);\n    opacity: 0.8;\n    cursor: not-allowed;\n    color: var(--nile-colors-neutral-500);\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-600);\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700);\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .icons-container {\n    display: flex;\n    gap: 4px;\n  }\n\n  .general-icon {\n    transform: rotate(-18.11deg);\n    position: relative;\n    bottom: 3px;\n  }\n\n  .image-icon {\n    transform: rotate(15deg);\n  }\n\n  .icon:hover {\n    cursor: pointer;\n  }\n\n  /* Uploading State */\n  .uploading {\n    width: 648px;\n    min-width: 230px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 18px;\n    box-sizing: border-box;\n    border: 1px solid var(--nile-colors-neutral-400)\n  }\n  \n  .uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .progress-bar-container {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n  }\n\n  .progress-bar-percent {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .progress-bar-container p {\n    margin: 0px;\n  }\n\n  .progress-bar-container > p {\n    font-size: var(--nile-type-scale-1);\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* PREVIEW STATE */\n  .preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .preview-inner {\n    display: flex;\n    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\n    height: 42px;\n    width: 42px;\n    object-fit: contain;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n\n  /* NO PREVIEW STATE */\n  .no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .no-preview-container {\n    display: flex;\n    gap: 18px;\n  }\n\n  .document-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .document-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n  \n  .error {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .error:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .error-container {\n    width: 100%;\n    display: flex;\n    gap: 18px;\n  }\n\n  .error-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-red-400);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .error-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n  \n  .file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\n  .vertical-default {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 18px\n  }\n\n  .content-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .content-container div.title {\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 222px;\n  }\n\n  .content-container div.subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 222px;\n  }\n\n  /* Drag State */\n  .vertical-drag {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap:18px;\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-blue-700);\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  /* Uploading State */\n  .vertical-uploading {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .corner-icon {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  /* Preview State */\n  .vertical-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .image-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n    object-fit: cover;\n    width: 80px;\n    height: 80px;\n    border-radius: var(--nile-radius-radius-xs);\n  }\n\n  /* Vertical No Preview State */\n  .vertical-no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .vertical-document-icon {\n    height: 80px;\n    width: 80px;\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  /* Veritcal Error State */\n  .vertical-error {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-error:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .error-bg {\n    background-color: var(--nile-colors-red-100);\n    border: 1px solid var(--nile-colors-red-400);\n  }\n\n  .error-message {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    text-align: start;\n  }\n\n  .error-p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    width: 216px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n  }\n\n  .error-p p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n  }\n\n\n  /* Displaing uploaded files CSS */\n  .display-files {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 8px;\n    width: 648px;\n    min-width: 230px;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-neutral-700);\n    border-radius: var(--nile-radius-radius-xs);\n    scrollbar-width: none;\n    padding: 12px;\n  }\n\n  ul, li {\n    width: 100%;\n  }\n\n  li {\n    list-style-type: none;\n  }\n\n  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-700);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n\n  .upload-error > nile-tooltip > span {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    max-width: 538px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .vertical-upload-error {\n    display: flex;\n    gap: 4px;\n  }\n\n  .vertical-upload-error > nile-tooltip > span  {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    width: 222px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--nile-type-scale-2);\n    display: inline-block;\n  }\n`;\n\nexport default [styles];"]}

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

@@ -20,11 +20,12 @@ export declare class NileFileUpload extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
-    size: number;
+    size: string;
     error: boolean;
     errorMessage: string;
     allowMultiple: boolean;
     allowDuplicates: boolean;
+    allowedTypes: string[];
     uploadedFiles: File[];
     title: string;
     subtitle: string;
@@ -34,6 +35,7 @@ export declare class NileFileUpload extends NileElement {
     autoUpload: boolean;
     input: HTMLInputElement;
     uploadRequests: Map<File, XMLHttpRequest>;
+    fileSizeExceededFilesNumber: number;
     private dragHandler;
     connectedCallback(): void;
     firstUpdated(changedProps: ChangedPropsInterface): void;

package/dist/src/nile-file-upload/nile-file-upload.js

@@ -8,13 +8,13 @@ import { __decorate } from "tslib";
 import { styles } from './nile-file-upload.css';
 import NileElement from '../internal/nile-element';
 import { DragHandler } from './utils/drag-drop.util';
-import { getDragHandler } from './nile-file-upload.template';
+import { getHorizontalDisabledState } from './nile-file-upload.template';
 import { FileUploadDefaults } from './types/file-upload.enums';
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';
+import { FileUploadState, FileUploadVariant, FileUploadEvent } from './types/file-upload.enums';
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles } from './utils/file-validation.util';
-import { getHorizontalDefaultState, getHorizontalDisabledtState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, } from './nile-file-upload.template';
+import { getHorizontalDefaultState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, } from './nile-file-upload.template';
 /**
  * Nile file-upload component.
  *
@@ -24,11 +24,12 @@ import { getHorizontalDefaultState, getHorizontalDisabledtState, getHorizontalDr
 let NileFileUpload = class NileFileUpload extends NileElement {
     constructor() {
         super(...arguments);
-        this.size = 0;
+        this.size = "10MB";
         this.error = false;
         this.errorMessage = "";
-        this.allowMultiple = true;
+        this.allowMultiple = false;
         this.allowDuplicates = false;
+        this.allowedTypes = [];
         this.uploadedFiles = [];
         this.title = FileUploadDefaults.TITLE;
         this.subtitle = FileUploadDefaults.SUBTITLE;
@@ -37,6 +38,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
         this.fileUploadUrl = "";
         this.autoUpload = true;
         this.uploadRequests = new Map();
+        this.fileSizeExceededFilesNumber = 0;
         this.setState = (newState) => {
             this.state = newState;
         };
@@ -55,7 +57,6 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     firstUpdated(changedProps) {
         super.firstUpdated(changedProps);
         this.dragHandler = new DragHandler();
-        getDragHandler(this.dragHandler);
         setUpDragHandler(this, this.dragHandler);
         addInternalListeners(this, this.dragHandler, this.uploadRequests);
         addGlobalListeners(this.dragHandler);
@@ -63,17 +64,22 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     updated(changedProps) {
         super.updated(changedProps);
         if (changedProps.has('uploadedFiles')) {
-            if (this.uploadedFiles.length === 0)
-                this.errorMessage = "";
-            if (!this.fileUploadUrl) {
-                this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
-                return;
+            // if(this.uploadedFiles.length === 0) {
+            //   this.errorMessage = "";
+            // }
+            if (this.fileUploadUrl && this.autoUpload) {
+                uploadFiles(this);
             }
-            uploadFiles(this);
             this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
         }
         else if (changedProps.has('state')) {
-            this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);
+            this.dragHandler.setValuesInDragHandler(this.state);
+        }
+        if (changedProps.has('autoUpload') && this.autoUpload) {
+            if (this.fileUploadUrl && this.autoUpload) {
+                uploadFiles(this);
+            }
+            this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
         }
     }
     browseFiles() {
@@ -94,25 +100,25 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     getHorizontalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
             case FileUploadState.DISABLED:
-                return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
+                return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
             case FileUploadState.DRAG:
                 return getHorizontalDragState();
             default:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes);
         }
     }
     getVerticalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
             case FileUploadState.DISABLED:
-                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
+                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
             case FileUploadState.DRAG:
                 return getVerticalDragState();
             default:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes);
         }
     }
     disconnectedCallback() {
@@ -120,7 +126,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     }
 };
 __decorate([
-    property({ type: Number })
+    property({ type: String })
 ], NileFileUpload.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
@@ -134,6 +140,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileFileUpload.prototype, "allowDuplicates", void 0);
+__decorate([
+    property({ type: Array })
+], NileFileUpload.prototype, "allowedTypes", void 0);
 __decorate([
     property({ type: Array })
 ], NileFileUpload.prototype, "uploadedFiles", void 0);