npm - @aquera/nile-elements - Versions diffs - 1.8.9 → 1.9.1 - Mend

@aquera/nile-elements 1.8.9 → 1.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/dist/src/nile-file-preview/nile-file-preview.css.js CHANGED Viewed

@@ -42,14 +42,14 @@ export const styles = css `
     align-items: center;
     justify-content: space-between;
     gap: 6px;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   .hover-state {
-    border-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
   }
   .vertical-div {
@@ -63,20 +63,20 @@ export const styles = css `
     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);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     position: relative;
     margin-bottom: 10px;
   }
   .vertical-div:hover {
-    border-color: var(--nile-colors-blue-500);
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
   }
   .outer-div-border {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .inner-div {
@@ -121,13 +121,13 @@ export const styles = css `
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     border-radius: 4px;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   .uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .progress-bar-container {
@@ -141,8 +141,8 @@ export const styles = css `
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
   .progress-bar-container p {
@@ -150,8 +150,8 @@ export const styles = css `
   }
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: left;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -160,9 +160,9 @@ export const styles = css `
   }
   .progress-bar-container .horizontal-file-name {
-    font-size: var(--nile-type-scale-1);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -171,9 +171,9 @@ export const styles = css `
   }
   .progress-bar-container .vertical-file-name {
-    font-size: var(--nile-type-scale-1);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -183,11 +183,11 @@ export const styles = css `
   /* PREVIEW STATE */
   .preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .preview-inner {
@@ -205,8 +205,8 @@ export const styles = css `
     height: 42px;
     width: 42px;
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .preview nile-icon:hover {
@@ -215,11 +215,11 @@ export const styles = css `
   /* NO PREVIEW STATE */
   .no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .no-preview-container {
@@ -231,13 +231,13 @@ export const styles = css `
   .document-icon {
     height: 40px;
     width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-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);
+    border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
   }
   .document-icon nile-icon {
@@ -256,8 +256,8 @@ export const styles = css `
   .preview-file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    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));
     text-align: left;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -266,9 +266,9 @@ export const styles = css `
   }
   .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);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: left;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -282,11 +282,11 @@ export const styles = css `
   /* ERROR STATE */
   .error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .error-container {
@@ -299,13 +299,13 @@ export const styles = css `
   .error-icon {
     height: 40px;
     width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-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);
+    border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
   }
   .error-icon nile-icon {
@@ -324,8 +324,8 @@ export const styles = css `
   .file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    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));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -334,9 +334,9 @@ export const styles = css `
   }
   .file-info nile-tooltip span, .file-info span {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    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-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     max-width: 90%;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -349,9 +349,9 @@ export const styles = css `
   }
   .file-info .horizontal-file-name {
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-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-dark-900, var(--ng-colors-text-primary-900));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -379,7 +379,7 @@ export const styles = css `
   }
   .content-container h4 {
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -389,8 +389,8 @@ export const styles = css `
   .content-container p:first-child {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    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));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -400,9 +400,9 @@ export const styles = css `
   .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);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -417,10 +417,10 @@ export const styles = css `
     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);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
   }
   /* Uploading State */
@@ -429,11 +429,11 @@ export const styles = css `
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .vertical-uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .loading {
@@ -451,28 +451,28 @@ export const styles = css `
   /* Preview State */
   .vertical-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .vertical-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .image-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     object-fit: cover;
     width: 80px;
     height: 80px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
   }
   /* Vertical No Preview State */
   .vertical-no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .vertical-no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .vertical-document-icon {
@@ -482,23 +482,23 @@ export const styles = css `
     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);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
   }
   /* Veritcal Error State */
   .vertical-error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .vertical-error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   .error-bg {
-    background-color: var(--nile-colors-red-100);
-    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
+    border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
   }
   .file-info-vertical-state {
@@ -508,8 +508,8 @@ export const styles = css `
   .file-info-vertical-state p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    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));
     padding-bottom: 6px;
     text-align: center;
     white-space: nowrap;
@@ -519,9 +519,9 @@ export const styles = css `
   }
   .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    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-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -537,14 +537,14 @@ export const styles = css `
     align-items: center;
     gap: 8px;
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    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));
     text-align: center
   }
   .error-p {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
+    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-xs));
     width: 216px;
     white-space: nowrap;
     overflow: hidden;
@@ -570,8 +570,8 @@ export const styles = css `
     min-width: 230px;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     scrollbar-width: none;
     padding: 12px;
   }

package/dist/src/nile-file-preview/nile-file-preview.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkkBxB,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 width: 100%;\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: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\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-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\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 margin-bottom: 10px;\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 .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 nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 100%;\n padding: 12px;\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 border-radius: 4px;\n background-color: var(--nile-colors-white-base);\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: 6px;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\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 align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\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 nile-icon:hover {\n cursor: pointer;\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 align-items: center;\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: 4px;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n / ERROR STATE /\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: 95%;\n display: flex;\n align-items: center;\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: 4px;\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 text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\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: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n / VERTICAL STATE START /\n / Default State /\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 text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\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 text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\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 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 padding-top: 40px;\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 .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\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: center\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 / 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 .preview-file-info p {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-file-preview.css.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkkBxB,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 width: 100%;\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: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\n }\n\n .outer-div-border {\n border: 1px 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 .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 nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 100%;\n padding: 12px;\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, var(--ng-colors-border-primary));\n border-radius: 4px;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\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-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n / PREVIEW STATE /\n .preview {\n border: 1px solid 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 align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n / NO PREVIEW STATE /\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .no-preview-container {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-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, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\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: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\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 text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n / ERROR STATE /\n .error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error-container {\n width: 95%;\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-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, var(--ng-colors-border-error-subtle));\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\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: 4px;\n }\n\n .file-info p {\n margin: 0px;\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 text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\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-primary-900));\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n / VERTICAL STATE START /\n / Default State /\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 text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\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 text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\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, var(--ng-font-size-text-sm));\n color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\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, var(--ng-colors-border-primary));\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\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, var(--ng-colors-border-primary));\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n / Vertical No Preview State /\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n }\n\n / Veritcal Error State /\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\n border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\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 padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\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 / 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, var(--ng-colors-text-secondary-700));\n border-radius: var(--nile-radius-radius-xs, var(--ng-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 .preview-file-info p {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-file-preview/nile-file-preview.template.js CHANGED Viewed

@@ -71,7 +71,7 @@ export function getHorizontalNoPreviewState(file, originalUrl, showFileType) {
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
       <div class="no-preview-container" part="horizontal-no-preview-container">
         <div class="document-icon" part="horizontal-no-preview-document-icon">
-          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
         </div>
         <div class="preview-file-info" part="horizontal-no-preview-file-info">
           <p part="horizontal-no-preview-file-info-name">
@@ -103,7 +103,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
     <div class="error horizontal-div" part="horizontal-error-state">
       <div class="error-container" part="horizontal-error-container">
         <div class="error-icon" part="horizontal-error-icon">
-          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
         </div>
         <div class="file-info" part="horizontal-error-file-info">
           <p class="horizontal-file-name" part="horizontal-error-file-info-name">
@@ -195,7 +195,7 @@ export function getVerticalNoPreviewState(file, originalUrl, showFileType) {
     return html `
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
       <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
-        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
       </div>
       <div class="content-container" part="vertical-no-preview-file-info">
@@ -225,7 +225,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
     return html `
     <div class="vertical-div vertical-error" part="vertical-error-state">
       <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
-        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
       </div>
       <div class="file-info-vertical-state" part="vertical-error-file-info">

package/dist/src/nile-file-preview/nile-file-preview.template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\" part=\"horizontal-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n <p part=\"horizontal-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n .value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\" part=\"horizontal-preview-inner\">\n <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n part=\"horizontal-preview-image\"\n />\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n <p part=\"horizontal-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\" part=\"horizontal-no-preview-container\">\n <div class=\"document-icon\" part=\"horizontal-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-no-preview-file-info\">\n <p part=\"horizontal-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\" part=\"horizontal-error-container\">\n <div class=\"error-icon\" part=\"horizontal-error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\" part=\"horizontal-error-file-info\">\n <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">\n <slot name=\"file-name\">\n ${file.name}\n </slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\" part=\"vertical-loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-uploading-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div part=\"vertical-preview-image-container\">\n <img\n class=\"image-preview\"\n part=\"vertical-preview-image\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\" part=\"vertical-preview-file-info\">\n <p part=\"vertical-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\" part=\"vertical-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\" part=\"vertical-no-preview-file-info\">\n <p part=\"vertical-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\" part=\"vertical-error-document-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\" part=\"vertical-error-file-info\">\n <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}
1	+ {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\" part=\"horizontal-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n <p part=\"horizontal-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n .value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\" part=\"horizontal-preview-inner\">\n <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n part=\"horizontal-preview-image\"\n />\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n <p part=\"horizontal-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\" part=\"horizontal-no-preview-container\">\n <div class=\"document-icon\" part=\"horizontal-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))\"></nile-icon>\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-no-preview-file-info\">\n <p part=\"horizontal-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"horizontal-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\" part=\"horizontal-error-container\">\n <div class=\"error-icon\" part=\"horizontal-error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n </div>\n <div class=\"file-info\" part=\"horizontal-error-file-info\">\n <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">\n <slot name=\"file-name\">\n ${file.name}\n </slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\" part=\"vertical-loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e, nileFilePreview)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-uploading-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div part=\"vertical-preview-image-container\">\n <img\n class=\"image-preview\"\n part=\"vertical-preview-image\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\" part=\"vertical-preview-file-info\">\n <p part=\"vertical-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string,\n showFileType: boolean\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\" part=\"vertical-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))\"></nile-icon>\n </div>\n\n <div class=\"content-container\" part=\"vertical-no-preview-file-info\">\n <p part=\"vertical-no-preview-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n <p part=\"vertical-no-preview-file-info-type\">\n <slot name=\"file-type\">${getFileType(file, showFileType)}</slot>\n •\n <slot name=\"file-size\">${formatFileSize(Number(file.size))}</slot>\n </p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\" part=\"vertical-error-document-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\" part=\"vertical-error-file-info\">\n <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">\n <slot name=\"file-name\">${file.name}</slot>\n </p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-lite-tooltip .content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-lite-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}