npm - @aquera/nile-elements - Versions diffs - 1.0.1-beta-1.5 → 1.0.1-beta-1.6 - Mend

@aquera/nile-elements 1.0.1-beta-1.5 → 1.0.1-beta-1.6

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 (192) hide show

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2iBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n\n This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n/\n\nimport {css} from 'lit';\n\n/\n FileUpload CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n {\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body))\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: var(--nile-height-60px, var(--ng-height-60px));\n max-width: 648px;\n width: max(648px, 100%);\n min-width: 230px;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n \n .hover-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: var(--nile-spacing-xs, var(--ng-spacing-xs));\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: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1)) \n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n nile-progress-bar li span {\n background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));\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-secondary-700));\n }\n\n / PREVIEW STATE /\n .preview {\n height: 62px;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px);\n }\n\n .preview-image-container img, iframe {\n height: var(--nile-height-42px, var(--ng-height-42px));\n width: var(--nile-width-42px, 42px); // check it once\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .preview-file-info p {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n / NO PREVIEW STATE /\n .no-preview {\n height: 62px;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .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 gap: 18px;\n }\n\n .document-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n display: flex;\n justify-content: center;\n align-items: center;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n }\n\n .document-icon nile-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\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: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-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, var(--ng-colors-border-error));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error-container {\n width: 100%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n display: flex;\n justify-content: center;\n align-items: center;\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-red-400, var(--ng-colors-border-error));\n background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));\n }\n\n .error-icon nile-icon {\n height: var(--nile-height-40px, var(--ng-height-40px));\n width: var(--nile-width-40px, var(--ng-width-10));\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 text-align: center;\n }\n\n .file-info p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\n }\n \n .file-info > nile-tooltip > 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-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\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, var(--ng-font-weight-regular));\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 }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\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-fg-primary-900);\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));\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 border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .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: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n / Preview State /\n .vertical-preview {\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .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: var(--nile-width-80px, var(--ng-spacing-8xl));\n height: var(--nile-height-80px, var(--ng-height-80px));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\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: var(--nile-height-80px, var(--ng-height-80px));\n width: var(--nile-width-80px, var(--ng-spacing-8xl));\n padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));\n }\n\n / Veritcal Error State /\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n border: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-red-400, var(--ng-colors-border-error));\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: start;\n }\n\n .file-info-vertical-state p {\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n padding-bottom: 6px;\n text-align: center;\n }\n \n .file-info-vertical-state > nile-tooltip > p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: center;\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: var(--nile-spacing-none, var(--ng-spacing-none));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n 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-sm));\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: var(--nile-spacing-none, var(--ng-spacing-none));\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: \n var(--nile-border-width-1, var(--ng-border-width-1))\n var(--nile-border-style-solid, var(--ng-border-style-solid)) \n var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n scrollbar-width: none;\n padding: var(--nile-radius-lg, var(--ng-spacing-lg));\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n`;\n\nexport default [styles];"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8jBxB,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: 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: 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 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: 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: 500px;\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`;\n\nexport default [styles];\n"]}

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

@@ -23,22 +23,26 @@ export declare class NileFilePreview extends NileElement {
     inputFile: File;
     fileUrl: string;
     uploadStatus: number;
-    allowedTypes: string[];
     state: FilePreviewState;
     variant: FilePreviewVariant;
     inputFileName: string;
     private inputFileHtml;
     private originalUrl;
+    isStringTruncated: boolean;
     /**
      * 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;
+    private customFile;
+    getState(): TemplateResult;
+    getHorizontalStates(): TemplateResult;
+    getVerticalStates(): TemplateResult;
     render(): TemplateResult;
     disconnectedCallback(): void;
 }

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

@@ -24,13 +24,13 @@ let NileFilePreview = class NileFilePreview extends NileElement {
         this.errorMessage = "";
         this.fileUrl = "";
         this.uploadStatus = 0;
-        this.allowedTypes = [];
         this.state = FilePreviewState.DEFAULT;
         this.variant = FilePreviewVariant.HORIZONTAL;
         this.inputFileName = "";
         this.inputFileHtml = null;
         this.originalUrl = "";
-        this.dummyFile = new File(['sdfjbs ewhf'], "dummy.txt", { type: "text/plain" });
+        this.isStringTruncated = false;
+        this.customFile = new File([], "Harsh", { type: "image/png" });
         /* #endregion */
     }
     /**
@@ -48,11 +48,13 @@ let NileFilePreview = class NileFilePreview extends NileElement {
         super.connectedCallback();
         this.emit(FilePreviewEvent.NILE_INIT);
     }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+    }
     updated(changedProperties) {
         if (changedProperties.has('uploadStatus') && this.uploadStatus) {
             if (this.uploadStatus < 100) {
                 this.createUploadState(this.inputFile, this.uploadStatus);
-                this.emit(FilePreviewEvent.NILE_UPLOADING);
             }
             else {
                 this.createState(this.inputFile);
@@ -89,16 +91,17 @@ let NileFilePreview = class NileFilePreview extends NileElement {
         catch (error) {
             const dummyFile = new File([], this.inputFileName || FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });
             this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;
+            console.error(this.errorMessage);
             this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL
-                ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl)
-                : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl);
+                ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)
+                : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);
             this.requestUpdate();
         }
     }
     async createState(file) {
         const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;
-        if (this.allowedTypes.includes(file.type) && !this.errorMessage) {
-            if (file.type.startsWith('image/')) {
+        if (!this.errorMessage) {
+            if (file && file.type.startsWith('image/')) {
                 try {
                     const url = await generatePreviewUrl(file);
                     this.inputFileHtml = isHorizontal
@@ -118,21 +121,50 @@ let NileFilePreview = class NileFilePreview extends NileElement {
             }
         }
         else {
-            this.errorMessage = !this.errorMessage
-                ? FilePreviewErrorMessages.INVALID_FORMAT
-                : FilePreviewErrorMessages.UPLOAD_CANCEL;
             this.inputFileHtml = isHorizontal
-                ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl)
-                : getVerticalErrorState(file, this.errorMessage, this.originalUrl);
+                ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)
+                : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);
         }
         this.requestUpdate();
     }
+    getState() {
+        if (this.variant === "horizontal")
+            return this.getHorizontalStates();
+        return this.getVerticalStates();
+    }
+    getHorizontalStates() {
+        switch (this.state) {
+            case FilePreviewState.UPLOADING:
+                return getHorizontalUploadingState(this.customFile, 2);
+            case FilePreviewState.PREVIEW:
+                return getHorizontalPreviewState("https://s6.imgcdn.dev/YINe6a.jpg", this.customFile, this.originalUrl);
+            case FilePreviewState.NO_PREVIEW:
+                return getHorizontalNoPreviewState(this.customFile, this.originalUrl);
+            case FilePreviewState.ERROR:
+                return getHorizontalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);
+            default:
+                return this.inputFileHtml || html ``;
+        }
+    }
+    getVerticalStates() {
+        switch (this.state) {
+            case FilePreviewState.UPLOADING:
+                return getVerticalUploadingState(this.customFile, 2);
+            case FilePreviewState.PREVIEW:
+                return getVerticalPreviewState("https://s6.imgcdn.dev/YINe6a.jpg", this.customFile, this.originalUrl);
+            case FilePreviewState.NO_PREVIEW:
+                return getVerticalNoPreviewState(this.customFile, this.originalUrl);
+            case FilePreviewState.ERROR:
+                return getVerticalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);
+            default:
+                return this.inputFileHtml || html ``;
+        }
+    }
     render() {
-        return html `
-			${this.inputFileHtml ?
-            this.inputFileHtml :
-            html ``}
-    `;
+        if (this.state) {
+            return this.getState();
+        }
+        return html `${this.inputFileHtml ?? html ``}`;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -151,9 +183,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], NileFilePreview.prototype, "uploadStatus", void 0);
-__decorate([
-    property({ type: Array })
-], NileFilePreview.prototype, "allowedTypes", void 0);
 __decorate([
     property({ type: String })
 ], NileFilePreview.prototype, "state", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-preview.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3G,OAAO,EAAc,IAAI,EAAkD,MAAM,KAAK,CAAC;AACvF,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,yBAAyB,EACzB,2BAA2B,EAC3B,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAGtC;;;;;GAKG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QASuB,iBAAY,GAAW,EAAE,CAAC;QAE3B,YAAO,GAAW,EAAE,CAAC;QACrB,iBAAY,GAAW,CAAC,CAAC;QACxB,iBAAY,GAAa,EAAE,CAAC;QAC7B,UAAK,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QACnD,YAAO,GAAuB,kBAAkB,CAAC,UAAU,CAAC;QAC3D,kBAAa,GAAW,EAAE,CAAC;QAChD,kBAAa,GAA0B,IAAI,CAAC;QAC3C,gBAAW,GAAW,EAAE,CAAC;QAiGzB,cAAS,GAAG,IAAI,IAAI,CAAC,CAAC,aAAa,CAAC,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;QAgBnF,gBAAgB;IAClB,CAAC;IAnIC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAaD;;;OAGG;IAEH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAES,OAAO,CAAC,iBAAiC;QACjD,IAAG,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YAC9D,IAAG,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE,CAAC;gBAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;gBAC1D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;YAE7C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnC,CAAC;QAEH,CAAC;aAAM,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAChE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAE3C,CAAC;aAAM,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC5D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAE3C,CAAC;aAAM,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAE,IAAU,EAAE,YAAoB;QACzD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,UAAU,CAAC;QAEpE,IAAI,CAAC,aAAa,GAAG,YAAY;YACjC,CAAC,CAAC,2BAA2B,CAAC,IAAI,EAAE,YAAY,CAAC;YACjD,CAAC,CAAC,yBAAyB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAEhD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,GAAW;QACrC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;QACvB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;YAClC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,wBAAwB,CAAC,iBAAiB,CAAC;YAC1G,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAE7D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,aAAa,IAAI,wBAAwB,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,CAAC,CAAC;YACvI,IAAI,CAAC,YAAY,GAAG,wBAAwB,CAAC,cAAc,CAAC;YAE5D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,UAAU;gBACjE,CAAC,CAAC,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC;gBACzE,CAAC,CAAC,qBAAqB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YAC1E,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEK,KAAK,CAAC,WAAW,CAAC,IAAU;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,UAAU,CAAC;QAEpE,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YAChE,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACnC,IAAI,CAAC;oBACH,MAAM,GAAG,GAAG,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3C,IAAI,CAAC,aAAa,GAAG,YAAY;wBAC/B,CAAC,CAAC,yBAAyB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC;wBACxD,CAAC,CAAC,uBAAuB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,aAAa,GAAG,YAAY;wBAC/B,CAAC,CAAC,2BAA2B,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC;wBACrD,CAAC,CAAC,yBAAyB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACxD,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,YAAY;oBAC/B,CAAC,CAAC,2BAA2B,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC;oBACrD,CAAC,CAAC,yBAAyB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;gBACpC,CAAC,CAAC,wBAAwB,CAAC,cAAc;gBACzC,CAAC,CAAC,wBAAwB,CAAC,aAAa,CAAC;YAE3C,IAAI,CAAC,aAAa,GAAG,YAAY;gBAC/B,CAAC,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC;gBACpE,CAAC,CAAC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACvE,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAIM,MAAM;QACX,OAAO,IAAI,CAAA;KACV,IAAI,CAAC,aAAa,CAAC,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,CAAC;YACpB,IAAI,CAAA,EACL;KACE,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC;CAGF,CAAA;AA3H6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0B;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAG,CAAC;qDAA6B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoD;AACnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA6D;AAC3D;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA4B;AAhB5C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoI3B;;AAED,eAAe,eAAe,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\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 {styles} from './nile-file-preview.css';\nimport NileElement from '../internal/nile-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generatePreviewUrl } from './utils';\nimport { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';\nimport { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport {\n getHorizontalErrorState,\n getHorizontalNoPreviewState,\n getHorizontalPreviewState,\n getHorizontalUploadingState,\n getVerticalErrorState,\n getVerticalNoPreviewState,\n getVerticalPreviewState,\n getVerticalUploadingState\n} from './nile-file-preview.template';\n\n\n/\n Nile preview component.\n \n @tag nile-preview\n \n /\n@customElement('nile-file-preview')\nexport class NileFilePreview extends NileElement {\n /*\n The styles for nile-preview\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String }) errorMessage: string = \"\";\n\t@property({ type: Object }) inputFile: File; \n\t@property({ type: String }) fileUrl: string = \"\";\n\t@property({ type: Number }) uploadStatus: number = 0;\n @property({ type: Array }) allowedTypes: string[] = [];\n\t@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;\n\t@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;\n @property({ type: String }) inputFileName: string = \"\";\n\tprivate inputFileHtml: TemplateResult \| null = null;\n private originalUrl: string = \"\";\n\n /\n Render method\n * @slot This is a slot test\n /\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FilePreviewEvent.NILE_INIT);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if(changedProperties.has('uploadStatus') && this.uploadStatus) {\n if(this.uploadStatus < 100) {\n this.createUploadState(this.inputFile, this.uploadStatus);\n this.emit(FilePreviewEvent.NILE_UPLOADING);\n\n } else {\n this.createState(this.inputFile);\n }\n\n } else if (changedProperties.has('inputFile') && this.inputFile) {\n this.createState(this.inputFile);\n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('fileUrl') && this.fileUrl) {\n this.handleFileUrl(this.fileUrl);\n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('errorMessage')) {\n this.createState(this.inputFile);\n }\n }\n\n private createUploadState( file: File, uploadStatus: number): void {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n this.inputFileHtml = isHorizontal \n ? getHorizontalUploadingState(file, uploadStatus)\n : getVerticalUploadingState(file, uploadStatus);\n\n this.requestUpdate();\n }\n\n private async handleFileUrl(url: string): Promise<void> {\n this.originalUrl = url;\n try {\n const response = await fetch(url);\n const blob = await response.blob();\n const fileName = this.inputFileName \|\| url.split('/').pop() \|\| FilePreviewErrorMessages.UNKNOWN_FILE_NAME;\n const file = new File([blob], fileName, { type: blob.type });\n\n this.createState(file);\n } catch (error) {\n const dummyFile = new File([], this.inputFileName \|\| FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });\n this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;\n\n this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL\n ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl)\n : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl);\n this.requestUpdate();\n }\n }\n\n\tpublic async createState(file: File): Promise<void> {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n if (this.allowedTypes.includes(file.type) && !this.errorMessage) { \n if (file.type.startsWith('image/')) {\n try {\n const url = await generatePreviewUrl(file);\n this.inputFileHtml = isHorizontal\n ? getHorizontalPreviewState(url, file, this.originalUrl)\n : getVerticalPreviewState(url, file, this.originalUrl);\n } catch (error) {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl); \n }\n } else {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl);\n }\n } else {\n this.errorMessage = !this.errorMessage\n ? FilePreviewErrorMessages.INVALID_FORMAT\n : FilePreviewErrorMessages.UPLOAD_CANCEL;\n\n this.inputFileHtml = isHorizontal\n ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl)\n : getVerticalErrorState(file, this.errorMessage, this.originalUrl);\n }\n this.requestUpdate();\n }\n\n private dummyFile = new File(['sdfjbs ewhf'], \"dummy.txt\", { type: \"text/plain\" });\n\n public render(): TemplateResult {\n return html`\n\t\t\t${this.inputFileHtml ?\n\t\t\t\tthis.inputFileHtml :\n\t\t\t\thtml``\n\t\t\t}\n `;\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit(FilePreviewEvent.NILE_DESTROY);\n }\n\n / #endregion */\n}\n\nexport default NileFilePreview;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-file-preview': NileFilePreview;\n }\n}"]}
1	+ {"version":3,"file":"nile-file-preview.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\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 {styles} from './nile-file-preview.css';\nimport NileElement from '../internal/nile-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generatePreviewUrl } from './utils';\nimport { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';\nimport { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport {\n getHorizontalErrorState,\n getHorizontalNoPreviewState,\n getHorizontalPreviewState,\n getHorizontalUploadingState,\n getVerticalErrorState,\n getVerticalNoPreviewState,\n getVerticalPreviewState,\n getVerticalUploadingState\n} from './nile-file-preview.template';\n\n\n/\n Nile preview component.\n \n @tag nile-preview\n \n /\n@customElement('nile-file-preview')\nexport class NileFilePreview extends NileElement {\n /*\n The styles for nile-preview\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String }) errorMessage: string = \"\";\n\t@property({ type: Object }) inputFile: File; \n\t@property({ type: String }) fileUrl: string = \"\";\n\t@property({ type: Number }) uploadStatus: number = 0;\n\t@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;\n\t@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;\n @property({ type: String }) inputFileName: string = \"\";\n\tprivate inputFileHtml: TemplateResult \| null = null;\n private originalUrl: string = \"\";\n public isStringTruncated: boolean = false;\n\n /\n Render method\n * @slot This is a slot test\n /\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FilePreviewEvent.NILE_INIT);\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if(changedProperties.has('uploadStatus') && this.uploadStatus) {\n if(this.uploadStatus < 100) {\n this.createUploadState(this.inputFile, this.uploadStatus);\n } else {\n this.createState(this.inputFile);\n }\n } else if (changedProperties.has('inputFile') && this.inputFile) {\n this.createState(this.inputFile); \n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('fileUrl') && this.fileUrl) {\n this.handleFileUrl(this.fileUrl);\n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('errorMessage')) {\n this.createState(this.inputFile);\n }\n }\n\n private createUploadState( file: File, uploadStatus: number): void {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n this.inputFileHtml = isHorizontal \n ? getHorizontalUploadingState(file, uploadStatus)\n : getVerticalUploadingState(file, uploadStatus);\n\n this.requestUpdate();\n }\n\n private async handleFileUrl(url: string): Promise<void> {\n this.originalUrl = url;\n try {\n const response = await fetch(url);\n const blob = await response.blob();\n const fileName = this.inputFileName \|\| url.split('/').pop() \|\| FilePreviewErrorMessages.UNKNOWN_FILE_NAME;\n const file = new File([blob], fileName, { type: blob.type });\n\n this.createState(file);\n } catch (error) {\n const dummyFile = new File([], this.inputFileName \|\| FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });\n this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;\n console.error(this.errorMessage);\n\n this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL\n ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)\n : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);\n this.requestUpdate();\n }\n }\n\n\tpublic async createState(file: File): Promise<void> {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n if (!this.errorMessage) { \n if (file && file.type.startsWith('image/')) {\n try {\n const url = await generatePreviewUrl(file);\n this.inputFileHtml = isHorizontal\n ? getHorizontalPreviewState(url, file, this.originalUrl)\n : getVerticalPreviewState(url, file, this.originalUrl);\n } catch (error) {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl); \n }\n } else {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl);\n }\n } else {\n this.inputFileHtml = isHorizontal\n ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)\n : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);\n }\n this.requestUpdate();\n }\n\n private customFile = new File([], \"Harsh\", { type: \"image/png\" })\n\n getState(): TemplateResult {\n if(this.variant === \"horizontal\") return this.getHorizontalStates();\n return this.getVerticalStates();\n }\n\n getHorizontalStates(): TemplateResult {\n switch(this.state) {\n case FilePreviewState.UPLOADING:\n return getHorizontalUploadingState(this.customFile, 2);\n case FilePreviewState.PREVIEW:\n return getHorizontalPreviewState(\"https://s6.imgcdn.dev/YINe6a.jpg\", this.customFile, this.originalUrl);\n case FilePreviewState.NO_PREVIEW:\n return getHorizontalNoPreviewState(this.customFile, this.originalUrl);\n case FilePreviewState.ERROR:\n return getHorizontalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);\n default:\n return this.inputFileHtml \|\| html``;\n }\n }\n\n getVerticalStates(): TemplateResult {\n switch(this.state) {\n case FilePreviewState.UPLOADING:\n return getVerticalUploadingState(this.customFile, 2);\n case FilePreviewState.PREVIEW:\n return getVerticalPreviewState(\"https://s6.imgcdn.dev/YINe6a.jpg\", this.customFile, this.originalUrl);\n case FilePreviewState.NO_PREVIEW:\n return getVerticalNoPreviewState(this.customFile, this.originalUrl);\n case FilePreviewState.ERROR:\n return getVerticalErrorState(this.customFile, FilePreviewErrorMessages.CUSTOM_ERROR, this.originalUrl, this);\n default:\n return this.inputFileHtml \|\| html``;\n }\n }\n\n public render(): TemplateResult {\n if (this.state) {\n return this.getState();\n }\n return html`${this.inputFileHtml ?? html``}`;\n }\n \n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit(FilePreviewEvent.NILE_DESTROY);\n }\n\n / #endregion */\n}\n\nexport default NileFilePreview;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-file-preview': NileFilePreview;\n }\n}"]}

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

@@ -3,11 +3,12 @@
  */
 import './nile-file-preview.css';
 import { TemplateResult } from 'lit';
+import { NileFilePreview } from './nile-file-preview';
 export declare function getHorizontalUploadingState(file: File, uploadStatus: number): TemplateResult;
 export declare function getHorizontalPreviewState(url: string, file: File, originalUrl: string): TemplateResult;
 export declare function getHorizontalNoPreviewState(file: File, originalUrl: string): TemplateResult;
-export declare function getHorizontalErrorState(file: File, errorMessage: string, originalUrl: string): TemplateResult;
+export declare function getHorizontalErrorState(file: File, errorMessage: string, originalUrl: string, nileFilePreview: NileFilePreview): TemplateResult;
 export declare function getVerticalUploadingState(file: File, uploadStatus: number): TemplateResult;
 export declare function getVerticalPreviewState(url: string, file: File, originalUrl: string): TemplateResult;
 export declare function getVerticalNoPreviewState(file: File, originalUrl: string): TemplateResult;
-export declare function getVerticalErrorState(file: File, errorMessage: string, originalUrl: string): TemplateResult;
+export declare function getVerticalErrorState(file: File, errorMessage: string, originalUrl: string, nileFilePreview: NileFilePreview): TemplateResult;

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

@@ -4,9 +4,10 @@
 import './nile-file-preview.css';
 import { html } from 'lit';
 import { removeFile, cancelFileUpload } from './utils';
+import { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';
 export function getHorizontalUploadingState(file, uploadStatus) {
     return html `
-      <div class="uploading">
+      <div class="uploading" part="horizontal-uploading-state">
         <nile-loader width="24" height="24"></nile-loader>
         <div class="progress-bar-container">
           <div class="progress-bar-percent">
@@ -14,14 +15,14 @@ export function getHorizontalUploadingState(file, uploadStatus) {
             <p>${uploadStatus}%</p>
           </div>
           <nile-progress-bar
+            part="horizontal-progress-bar"
             value="${uploadStatus}"
           ></nile-progress-bar>
-          <p>${file.name}</p>
+          <p class="horizontal-file-name">${file.name}</p>
         </div>
         <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
-            name="var(--nile-icon-close, var(--ng-icon-x-close))"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            name="close"
             size="14"
             class="icon"
           ></nile-icon>
@@ -31,7 +32,7 @@ export function getHorizontalUploadingState(file, uploadStatus) {
 }
 export function getHorizontalPreviewState(url, file, originalUrl) {
     return html `
-    <div class="preview horizontal-div">
+    <div class="preview horizontal-div" part="horizontal-preview-state">
       <div class="preview-inner">
         <div class="preview-image-container">
             <img
@@ -42,39 +43,37 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
-          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
+          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
-      <slot name="cancelIcon">
-        <nile-icon
-          @click=${(e) => removeFile(file, e, originalUrl)}
-          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-          size="14"
-          class="icon"
-        ></nile-icon>
-      </slot>
+      <div class="preview-actions">
+        <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancel-icon">
+          <nile-icon
+            name="trash"
+            size="14"
+            class="icon"
+          ></nile-icon>
+        </slot>
+      </div>
     </div>
   `;
 }
 export function getHorizontalNoPreviewState(file, originalUrl) {
     return html `
-    <div class="no-preview horizontal-div">
+    <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
       <div class="no-preview-container">
         <div class="document-icon">
-          <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
-          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1034).toFixed(0)}KB</p>
+          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
       <div>
-        <slot name="cancelIcon">
+        <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
           <nile-icon
-            @click=${(e) => removeFile(file, e, originalUrl)}
-            name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            name="trash"
             size="14"
             class="icon"
           ></nile-icon>
@@ -83,25 +82,26 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
     </div>
   `;
 }
-export function getHorizontalErrorState(file, errorMessage, originalUrl) {
+export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFilePreview) {
+    truncateString(nileFilePreview);
     return html `
-    <div class="error horizontal-div">
+    <div class="error horizontal-div" part="horizontal-error-state">
       <div class="error-container">
         <div class="error-icon">
-          <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
         <div class="file-info">
-          <p>${file.name}</p>
-          <nile-tooltip content=${errorMessage}>
-            <p>${errorMessage}</p>
-          </nile-tooltip>
+          <p class="horizontal-file-name">${file.name}</p>
+          ${nileFilePreview.isStringTruncated
+        ? html `<nile-tooltip content=${errorMessage}>
+                  <span>${errorMessage}</span>
+                </nile-tooltip>`
+        : html `<span>${errorMessage}</span>`}
         </div>
       </div>
-      <slot name="cancelIcon">
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
           <nile-icon
-            @click=${(e) => removeFile(file, e, originalUrl)}
-            name="var(--nile-icon-close, var(--ng-icon-x-close))"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            name="close"
             size="14"
             class="icon"
           ></nile-icon>
@@ -112,7 +112,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl) {
 // vertical states
 export function getVerticalUploadingState(file, uploadStatus) {
     return html `
-    <div class="vertical-div vertical-uploading">
+    <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
       <div class="loading">
         <nile-loader width="24" height="24"></nile-loader>
       </div>
@@ -123,14 +123,12 @@ export function getVerticalUploadingState(file, uploadStatus) {
           <p>${uploadStatus}%</p>
         </div>
         <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
-        <p>${file.name}</p>
+        <p class="vertical-file-name">${file.name}</p>
       </div>
-      <slot name="cancelIcon">
+      <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
         <nile-icon
-          @click=${(e) => cancelFileUpload(file, e)}
-          name="var(--nile-icon-close, var(--ng-icon-x-close))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="close"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -140,7 +138,7 @@ export function getVerticalUploadingState(file, uploadStatus) {
 }
 export function getVerticalPreviewState(url, file, originalUrl) {
     return html `
-    <div class="vertical-div vertical-preview">
+    <div class="vertical-div vertical-preview" part="vertical-preview-state">
       <div>
         <img
           class="image-preview"
@@ -151,14 +149,12 @@ export function getVerticalPreviewState(url, file, originalUrl) {
       <div class="content-container">
         <p>${file.name}</p>
-         <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
+         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
-      <slot name="cancelIcon">
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
         <nile-icon
-          @click=${(e) => removeFile(file, e, originalUrl)}
-          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="trash"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -168,21 +164,19 @@ export function getVerticalPreviewState(url, file, originalUrl) {
 }
 export function getVerticalNoPreviewState(file, originalUrl) {
     return html `
-    <div class="vertical-div vertical-no-preview">
+    <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
       <div class="vertical-document-icon">
-        <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
       <div class="content-container">
         <p>${file.name}</p>
-        <p>${file.type} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
+        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
-      <slot name="cancelIcon">
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
         <nile-icon
-          @click=${(e) => removeFile(file, e, originalUrl)}
-          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="trash"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -190,24 +184,26 @@ export function getVerticalNoPreviewState(file, originalUrl) {
     </div>
   `;
 }
-export function getVerticalErrorState(file, errorMessage, originalUrl) {
+export function getVerticalErrorState(file, errorMessage, originalUrl, nileFilePreview) {
+    truncateString(nileFilePreview);
     return html `
-    <div class="vertical-div vertical-error">
+    <div class="vertical-div vertical-error" part="vertical-error-state">
       <div class="vertical-document-icon error-bg">
-        <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
       <div class="file-info-vertical-state">
-        <p>${file.name}</p>
-        <nile-tooltip content=${errorMessage}>
-          <p>${errorMessage}</p>
-        </nile-tooltip>
+        <p class="vertical-file-name">${file.name}</p>
+        ${nileFilePreview.isStringTruncated
+        ? html `<nile-tooltip content=${errorMessage}>
+                <span>${errorMessage}</span>
+              </nile-tooltip>`
+        : html `<span>${errorMessage}</span>`}
       </div>
-      <slot name="cancelIcon" @click=${(e) => removeFile(file, e, originalUrl)}>
+      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
         <nile-icon
-          name="var(--nile-icon-close, var(--ng-icon-x-close))"
-          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+          name="close"
           size="14"
           class="icon corner-icon"
         ></nile-icon>

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';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number\n ): TemplateResult {\n return html`\n <div class=\"uploading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p>${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\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): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\">\n <div class=\"preview-inner\">\n <div class=\"preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${(file.type.split('/')[1]).toUpperCase()} • ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n </div>\n </div>\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\">\n <div class=\"no-preview-container\">\n <div class=\"document-icon\">\n <nile-icon name=\"var(--nile-icon-general, var(--ng-icon-file-06))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))\"></nile-icon>\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${(file.type.split('/')[1]).toUpperCase()} • ${(Number(file.size) / 1034).toFixed(0)}KB</p>\n </div>\n </div>\n <div>\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"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): TemplateResult {\n return html`\n <div class=\"error horizontal-div\">\n <div class=\"error-container\">\n <div class=\"error-icon\">\n <nile-icon name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n </div>\n <div class=\"file-info\">\n <p>${file.name}</p>\n <nile-tooltip content=${errorMessage}>\n <p>${errorMessage}</p>\n </nile-tooltip>\n </div>\n </div>\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\">\n <div class=\"loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p>${file.name}</p>\n </div>\n\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)}\n name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"icon corner-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): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\">\n <div>\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${(file.type.split('/')[1]).toUpperCase()} • ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n </div>\n\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\">\n <div class=\"vertical-document-icon\">\n <nile-icon name=\"var(--nile-icon-general, var(--ng-icon-file-06))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"20\" color=\"var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))\"></nile-icon>\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${file.type} • ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n </div>\n\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"var(--nile-icon-trash, var(--ng-icon-trash-01))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-error\">\n <div class=\"vertical-document-icon error-bg\">\n <nile-icon name=\"var(--nile-icon-info, var(--ng-icon-info-circle))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" 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\">\n <p>${file.name}</p>\n <nile-tooltip content=${errorMessage}>\n <p>${errorMessage}</p>\n </nile-tooltip>\n </div>\n\n <slot name=\"cancelIcon\" @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}>\n <nile-icon\n name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\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 ): 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\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>${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\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} 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): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\">\n <div class=\"preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div class=\"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 ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\">\n <div class=\"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\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</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 ></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\">\n <div class=\"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\">\n <p class=\"horizontal-file-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-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 ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-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): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div>\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</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 ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-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\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</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 ></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\">\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\">\n <p class=\"vertical-file-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-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 ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}