npm - @aquera/nile-elements - Versions diffs - 1.4.9 → 1.5.0 - Mend

@aquera/nile-elements 1.4.9 → 1.5.0

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

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

@@ -9,16 +9,16 @@ export function getHorizontalUploadingState(file, uploadStatus) {
     return html `
       <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">
-            <p>Uploading File...</p>
-            <p>${uploadStatus}%</p>
+        <div class="progress-bar-container" part="horizontal-progress-bar-container">
+          <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
+            <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
+            <p part="horizontal-progress-bar-percent-value">${uploadStatus}%</p>
           </div>
           <nile-progress-bar
             part="horizontal-progress-bar"
             value="${uploadStatus}"
           ></nile-progress-bar>
-          <p class="horizontal-file-name">${file.name}</p>
+          <p class="horizontal-file-name" part="horizontal-file-name">${file.name}</p>
         </div>
         <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
@@ -33,25 +33,27 @@ export function getHorizontalUploadingState(file, uploadStatus) {
 export function getHorizontalPreviewState(url, file, originalUrl) {
     return html `
     <div class="preview horizontal-div" part="horizontal-preview-state">
-      <div class="preview-inner">
-        <div class="preview-image-container">
+      <div class="preview-inner" part="horizontal-preview-inner">
+        <div class="preview-image-container" part="horizontal-preview-image-container">
             <img
               class="image-preview"
               src=${url}
               alt=${file.name}
+              part="horizontal-preview-image"
             />
         </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <div class="preview-file-info" part="horizontal-preview-file-info">
+          <p part="horizontal-preview-file-info-name">${file.name}</p>
+          <p part="horizontal-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
-      <div class="preview-actions">
+      <div class="preview-actions" part="horizontal-preview-actions">
         <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancel-icon">
           <nile-icon
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -61,13 +63,13 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
 export function getHorizontalNoPreviewState(file, originalUrl) {
     return html `
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
-      <div class="no-preview-container">
-        <div class="document-icon">
+      <div class="no-preview-container" part="horizontal-no-preview-container">
+        <div class="document-icon" part="horizontal-no-preview-document-icon">
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <div class="preview-file-info" part="horizontal-no-preview-file-info">
+          <p part="horizontal-no-preview-file-info-name">${file.name}</p>
+          <p part="horizontal-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
       <div>
@@ -76,6 +78,7 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-no-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -86,12 +89,12 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
     truncateString(nileFilePreview);
     return html `
     <div class="error horizontal-div" part="horizontal-error-state">
-      <div class="error-container">
-        <div class="error-icon">
+      <div class="error-container" part="horizontal-error-container">
+        <div class="error-icon" part="horizontal-error-icon">
           <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
-        <div class="file-info">
-          <p class="horizontal-file-name">${file.name}</p>
+        <div class="file-info" part="horizontal-error-file-info">
+          <p class="horizontal-file-name" part="horizontal-error-file-info-name">${file.name}</p>
           ${nileFilePreview.isStringTruncated
         ? html `<nile-tooltip content=${errorMessage}>
                   <span>${errorMessage}</span>
@@ -104,6 +107,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
             name="close"
             size="14"
             class="icon"
+            part="horizontal-error-actions-icon"
           ></nile-icon>
         </slot>
     </div>
@@ -113,17 +117,17 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
 export function getVerticalUploadingState(file, uploadStatus) {
     return html `
     <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
-      <div class="loading">
+      <div class="loading" part="vertical-loading">
         <nile-loader width="24" height="24"></nile-loader>
       </div>
-      <div class="progress-bar-container">
-        <div class="progress-bar-percent">
-          <p>Uploading...</p>
-          <p>${uploadStatus}%</p>
+      <div class="progress-bar-container" part="vertical-progress-bar-container">
+        <div class="progress-bar-percent" part="vertical-progress-bar-percent">
+          <p part="vertical-progress-bar-percent-text">Uploading...</p>
+          <p part="vertical-progress-bar-percent-value">${uploadStatus}%</p>
         </div>
         <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
-        <p class="vertical-file-name">${file.name}</p>
+        <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
       </div>
       <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
@@ -131,6 +135,7 @@ export function getVerticalUploadingState(file, uploadStatus) {
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-uploading-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -139,17 +144,18 @@ export function getVerticalUploadingState(file, uploadStatus) {
 export function getVerticalPreviewState(url, file, originalUrl) {
     return html `
     <div class="vertical-div vertical-preview" part="vertical-preview-state">
-      <div>
+      <div part="vertical-preview-image-container">
         <img
           class="image-preview"
+          part="vertical-preview-image"
           src=${url}
           alt=${file.name}
         />
       </div>
-      <div class="content-container">
-        <p>${file.name}</p>
-         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      <div class="content-container" part="vertical-preview-file-info">
+        <p part="vertical-preview-file-info-name">${file.name}</p>
+         <p part="vertical-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
       <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -157,6 +163,7 @@ export function getVerticalPreviewState(url, file, originalUrl) {
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -165,13 +172,13 @@ export function getVerticalPreviewState(url, file, originalUrl) {
 export function getVerticalNoPreviewState(file, originalUrl) {
     return html `
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
-      <div class="vertical-document-icon">
+      <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
         <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
-      <div class="content-container">
-        <p>${file.name}</p>
-        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      <div class="content-container" part="vertical-no-preview-file-info">
+        <p part="vertical-no-preview-file-info-name">${file.name}</p>
+        <p part="vertical-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
       <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -179,6 +186,7 @@ export function getVerticalNoPreviewState(file, originalUrl) {
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-no-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -188,12 +196,12 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
     truncateString(nileFilePreview);
     return html `
     <div class="vertical-div vertical-error" part="vertical-error-state">
-      <div class="vertical-document-icon error-bg">
+      <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
         <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
-      <div class="file-info-vertical-state">
-        <p class="vertical-file-name">${file.name}</p>
+      <div class="file-info-vertical-state" part="vertical-error-file-info">
+        <p class="vertical-file-name" part="vertical-error-file-info-name">${file.name}</p>
         ${nileFilePreview.isStringTruncated
         ? html `<nile-tooltip content=${errorMessage}>
                 <span>${errorMessage}</span>
@@ -206,6 +214,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-error-actions-icon"
         ></nile-icon>
       </slot>
     </div>

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

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

package/dist/src/nile-icon/icons/svg/index.d.ts CHANGED Viewed

@@ -303,6 +303,7 @@ export { default as ngarrownarrowright } from './ng-arrow-narrow-right';
 export { default as ngarrowup } from './ng-arrow-up';
 export { default as ngbarchart12 } from './ng-bar-chart-12';
 export { default as ngbarchartsquare02 } from './ng-bar-chart-square-02';
+export { default as ngbatterycharging } from './ng-battery-charging';
 export { default as ngbell01 } from './ng-bell-01';
 export { default as ngbellringing04 } from './ng-bell-ringing-04';
 export { default as ngbold01 } from './ng-bold-01';
@@ -344,6 +345,7 @@ export { default as ngfilecheck02 } from './ng-file-check-02';
 export { default as ngfilequestion03 } from './ng-file-question-03';
 export { default as ngfilterlines } from './ng-filter-lines';
 export { default as nggrid01 } from './ng-grid-01';
+export { default as nghash } from './ng-hash';
 export { default as nghelpcircle } from './ng-help-circle';
 export { default as nghomeline } from './ng-home-line';
 export { default as ngimage03 } from './ng-image-03';
@@ -362,6 +364,7 @@ export { default as ngmenu05 } from './ng-menu-05';
 export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';
 export { default as ngminus } from './ng-minus';
+export { default as ngmonitor } from './ng-monitor';
 export { default as ngpiechart03 } from './ng-pie-chart-03';
 export { default as ngplus } from './ng-plus';
 export { default as ngrefreshcw02 } from './ng-refresh-cw-02';
@@ -369,12 +372,15 @@ export { default as ngrocket02 } from './ng-rocket-02';
 export { default as ngrows01 } from './ng-rows-01';
 export { default as ngsearchlg } from './ng-search-lg';
 export { default as ngsend01 } from './ng-send-01';
+export { default as ngserver } from './ng-server';
 export { default as ngsettings01 } from './ng-settings-01';
 export { default as ngshare04 } from './ng-share-04';
 export { default as ngshare06 } from './ng-share-06';
+export { default as ngshieldtick } from './ng-shield-tick';
 export { default as ngshoppingbag01 } from './ng-shopping-bag-01';
 export { default as ngstars02 } from './ng-stars-02';
 export { default as ngswitchhorizontal01 } from './ng-switch-horizontal-01';
+export { default as ngtag } from './ng-tag';
 export { default as ngtrash01 } from './ng-trash-01';
 export { default as ngtrash03 } from './ng-trash-03';
 export { default as ngtrendup01 } from './ng-trend-up-01';
@@ -387,6 +393,7 @@ export { default as ngusercheck02 } from './ng-user-check-02';
 export { default as nguserplus02 } from './ng-user-plus-02';
 export { default as nguserright01 } from './ng-user-right-01';
 export { default as ngusers01 } from './ng-users-01';
+export { default as ngwifi } from './ng-wifi';
 export { default as ngxcircle } from './ng-x-circle';
 export { default as ngxclose } from './ng-x-close';
 export { default as ngxsquare } from './ng-x-square';

package/dist/src/nile-icon/icons/svg/index.js CHANGED Viewed

@@ -303,6 +303,7 @@ export { default as ngarrownarrowright } from './ng-arrow-narrow-right';
 export { default as ngarrowup } from './ng-arrow-up';
 export { default as ngbarchart12 } from './ng-bar-chart-12';
 export { default as ngbarchartsquare02 } from './ng-bar-chart-square-02';
+export { default as ngbatterycharging } from './ng-battery-charging';
 export { default as ngbell01 } from './ng-bell-01';
 export { default as ngbellringing04 } from './ng-bell-ringing-04';
 export { default as ngbold01 } from './ng-bold-01';
@@ -344,6 +345,7 @@ export { default as ngfilecheck02 } from './ng-file-check-02';
 export { default as ngfilequestion03 } from './ng-file-question-03';
 export { default as ngfilterlines } from './ng-filter-lines';
 export { default as nggrid01 } from './ng-grid-01';
+export { default as nghash } from './ng-hash';
 export { default as nghelpcircle } from './ng-help-circle';
 export { default as nghomeline } from './ng-home-line';
 export { default as ngimage03 } from './ng-image-03';
@@ -362,6 +364,7 @@ export { default as ngmenu05 } from './ng-menu-05';
 export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';
 export { default as ngminus } from './ng-minus';
+export { default as ngmonitor } from './ng-monitor';
 export { default as ngpiechart03 } from './ng-pie-chart-03';
 export { default as ngplus } from './ng-plus';
 export { default as ngrefreshcw02 } from './ng-refresh-cw-02';
@@ -369,12 +372,15 @@ export { default as ngrocket02 } from './ng-rocket-02';
 export { default as ngrows01 } from './ng-rows-01';
 export { default as ngsearchlg } from './ng-search-lg';
 export { default as ngsend01 } from './ng-send-01';
+export { default as ngserver } from './ng-server';
 export { default as ngsettings01 } from './ng-settings-01';
 export { default as ngshare04 } from './ng-share-04';
 export { default as ngshare06 } from './ng-share-06';
+export { default as ngshieldtick } from './ng-shield-tick';
 export { default as ngshoppingbag01 } from './ng-shopping-bag-01';
 export { default as ngstars02 } from './ng-stars-02';
 export { default as ngswitchhorizontal01 } from './ng-switch-horizontal-01';
+export { default as ngtag } from './ng-tag';
 export { default as ngtrash01 } from './ng-trash-01';
 export { default as ngtrash03 } from './ng-trash-03';
 export { default as ngtrendup01 } from './ng-trend-up-01';
@@ -387,6 +393,7 @@ export { default as ngusercheck02 } from './ng-user-check-02';
 export { default as nguserplus02 } from './ng-user-plus-02';
 export { default as nguserright01 } from './ng-user-right-01';
 export { default as ngusers01 } from './ng-users-01';
+export { default as ngwifi } from './ng-wifi';
 export { default as ngxcircle } from './ng-x-circle';
 export { default as ngxclose } from './ng-x-close';
 export { default as ngxsquare } from './ng-x-square';