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

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

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

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAilBxB,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: 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: 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-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  .uploading {\n    height: 62px;\n    width: 648px;\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: 538px;\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    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-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    text-align: left;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 500px;\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: 538px;\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n  .preview-actions {\n    padding-right: 12px;\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  .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    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    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 {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    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  /* VARTICAL 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    width: 222px;\n  }\n  \n  .file-info-vertical-state > nile-tooltip > 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    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\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\nexport default [styles];"]}

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

@@ -1,50 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import NileElement from '../internal/nile-element';
-import { FilePreviewState, FilePreviewVariant } from './types';
-import { CSSResultArray, TemplateResult, PropertyValues } from 'lit';
-/**
- * Nile preview component.
- *
- * @tag nile-preview
- *
- */
-export declare class NileFilePreview extends NileElement {
-    /**
-     * The styles for nile-preview
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
-    static get styles(): CSSResultArray;
-    errorMessage: string;
-    inputFile: File;
-    fileUrl: string;
-    uploadStatus: number;
-    state: FilePreviewState;
-    variant: FilePreviewVariant;
-    inputFileName: string;
-    private inputFileHtml;
-    private originalUrl;
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
-    connectedCallback(): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    protected updated(changedProperties: PropertyValues): void;
-    private createUploadState;
-    private handleFileUrl;
-    createState(file: File): Promise<void>;
-    private dummyFile;
-    render(): TemplateResult;
-    disconnectedCallback(): void;
-}
-export default NileFilePreview;
-declare global {
-    interface HTMLElementTagNameMap {
-        'nile-file-preview': NileFilePreview;
-    }
-}