@aquera/nile-elements 1.4.8-beta-1.1 → 1.4.8-beta-1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.4.8-beta-1.1",
+  "version": "1.4.8-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -13,6 +13,7 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    width: 100%;
   }
 
   * {
@@ -36,7 +37,7 @@ export const styles = css`
 
   .horizontal-div {
     max-height: 62px;
-    width: 648px;
+    width: 100%;
     min-width: 230px;
     padding: 12px;
     display: flex;
@@ -263,7 +264,7 @@ export const styles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 500px;
+    width: 100%;
   }
 
   .preview-file-info p:last-of-type{
@@ -274,7 +275,7 @@ export const styles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 500px;
+    width: 100%;
   }
 
   .no-preview > nile-icon:hover {
@@ -584,6 +585,9 @@ export const styles = css`
   li {
     list-style-type: none;
   }
+  .preview-file-info p {
+    width: 100%;
+    }
 `;
 
 export default [styles];

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -16,16 +16,16 @@ import { NileFilePreview } from './nile-file-preview';
     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: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
@@ -45,25 +45,27 @@ export function getHorizontalPreviewState(
 ): TemplateResult {
   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: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancel-icon">
           <nile-icon
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -77,13 +79,13 @@ export function getHorizontalNoPreviewState(
 ): TemplateResult {
   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>
@@ -92,6 +94,7 @@ export function getHorizontalNoPreviewState(
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-no-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -108,12 +111,12 @@ export function getHorizontalErrorState(
   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}>
@@ -128,6 +131,7 @@ export function getHorizontalErrorState(
             name="close"
             size="14"
             class="icon"
+            part="horizontal-error-actions-icon"
           ></nile-icon>
         </slot>
     </div>
@@ -141,17 +145,17 @@ export function getVerticalUploadingState(
 ): TemplateResult {
   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: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
@@ -159,6 +163,7 @@ export function getVerticalUploadingState(
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-uploading-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -173,17 +178,18 @@ export function getVerticalPreviewState(
 ): TemplateResult {
   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: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -191,6 +197,7 @@ export function getVerticalPreviewState(
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -203,13 +210,13 @@ export function getVerticalNoPreviewState(
 ): TemplateResult {
   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: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -217,6 +224,7 @@ export function getVerticalNoPreviewState(
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-no-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -232,12 +240,12 @@ export function getVerticalErrorState(
   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}>
@@ -252,6 +260,7 @@ export function getVerticalErrorState(
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-error-actions-icon"
         ></nile-icon>
       </slot>
     </div>