@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.2

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

@@ -1 +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  @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      } 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\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\" }); // not needed\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}"]}
+{"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  @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}"]}

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

@@ -44,8 +44,9 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
           <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
         </div>
       </div>
-      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+      <slot name="cancelIcon">
         <nile-icon
+          @click=${(e) => removeFile(file, e, originalUrl)}
           name="trash"
           size="14"
           class="icon"
@@ -59,7 +60,7 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
     <div class="no-preview horizontal-div">
       <div class="no-preview-container">
         <div class="document-icon">
-          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
@@ -67,8 +68,9 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
         </div>
       </div>
       <div>
-        <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+        <slot name="cancelIcon">
           <nile-icon
+            @click=${(e) => removeFile(file, e, originalUrl)}
             name="trash"
             size="14"
             class="icon"
@@ -83,7 +85,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl) {
     <div class="error horizontal-div">
       <div class="error-container">
         <div class="error-icon">
-          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
         </div>
         <div class="file-info">
           <p>${file.name}</p>
@@ -92,8 +94,9 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl) {
           </nile-tooltip>
         </div>
       </div>
-      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+      <slot name="cancelIcon">
           <nile-icon
+            @click=${(e) => removeFile(file, e, originalUrl)}
             name="close"
             size="14"
             class="icon"
@@ -119,8 +122,9 @@ export function getVerticalUploadingState(file, uploadStatus) {
         <p>${file.name}</p>
       </div>
 
-      <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
+      <slot name="cancelIcon">
         <nile-icon
+          @click=${(e) => cancelFileUpload(file, e)}
           name="close"
           size="14"
           class="icon corner-icon"
@@ -145,8 +149,9 @@ export function getVerticalPreviewState(url, file, originalUrl) {
          <p>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
       </div>
 
-      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+      <slot name="cancelIcon">
         <nile-icon
+          @click=${(e) => removeFile(file, e, originalUrl)}
           name="trash"
           size="14"
           class="icon corner-icon"
@@ -159,7 +164,7 @@ export function getVerticalNoPreviewState(file, originalUrl) {
     return html `
     <div class="vertical-div vertical-no-preview">
       <div class="vertical-document-icon">
-        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
       </div>
 
       <div class="content-container">
@@ -167,8 +172,9 @@ export function getVerticalNoPreviewState(file, originalUrl) {
         <p>${file.type} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>
       </div>
 
-      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+      <slot name="cancelIcon">
         <nile-icon
+          @click=${(e) => removeFile(file, e, originalUrl)}
           name="trash"
           size="14"
           class="icon corner-icon"
@@ -181,7 +187,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl) {
     return html `
     <div class="vertical-div vertical-error">
       <div class="vertical-document-icon error-bg">
-        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
       </div>
 
       <div class="file-info-vertical-state">
@@ -191,7 +197,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl) {
         </nile-tooltip>
       </div>
 
-      <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
+      <slot name="cancelIcon" @click=${(e) => removeFile(file, e, originalUrl)}>
         <nile-icon
           name="close"
           size="14"

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

@@ -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=\"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\">\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()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</p>\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  `;\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=\"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>${(file.type.split('/')[1]).toUpperCase()} &#8226; ${(Number(file.size) / 1034).toFixed(0)}KB</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): TemplateResult {\n  return html`\n    <div class=\"error horizontal-div\">\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>${file.name}</p>\n          <nile-tooltip content=${errorMessage}>\n            <p>${errorMessage}</p>\n          </nile-tooltip>\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\">\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 @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\">\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()} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</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\">\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>${file.type} &#8226; ${(Number(file.size) / 1024).toFixed(0)}KB</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): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-error\">\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>${file.name}</p>\n        <nile-tooltip content=${errorMessage}>\n          <p>${errorMessage}</p>\n        </nile-tooltip>\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}"]}
+{"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=\"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\">\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()} &#8226; ${(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=\"trash\"\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=\"general\" 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()} &#8226; ${(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=\"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): TemplateResult {\n  return html`\n    <div class=\"error horizontal-div\">\n      <div class=\"error-container\">\n        <div class=\"error-icon\">\n          <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n        </div>\n        <div class=\"file-info\">\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=\"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\">\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=\"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\">\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()} &#8226; ${(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=\"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\">\n      <div class=\"vertical-document-icon\">\n        <nile-icon name=\"general\" 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} &#8226; ${(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=\"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): TemplateResult {\n  return html`\n    <div class=\"vertical-div vertical-error\">\n      <div class=\"vertical-document-icon error-bg\">\n        <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))\"></nile-icon>\n      </div>\n\n      <div class=\"file-info-vertical-state\">\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=\"close\"\n          size=\"14\"\n          class=\"icon corner-icon\"\n        ></nile-icon>\n      </slot>\n    </div>\n  `;\n}"]}

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

@@ -21,6 +21,7 @@ export declare enum FilePreviewErrorMessages {
 export declare enum FilePreviewEvent {
     NILE_INIT = "nile-init",
     NILE_RECEIVE = "nile-receive",
+    NILE_UPLOADING = "nile-uploding",
     NILE_REMOVE = "nile-remove",
     NILE_CANCEL_UPLOAD = "nile-cancel-upload",
     NILE_DESTROY = "nile-destroy"

package/dist/src/nile-file-preview/types/nile-file-preview.enums.js

@@ -25,6 +25,7 @@ export var FilePreviewEvent;
 (function (FilePreviewEvent) {
     FilePreviewEvent["NILE_INIT"] = "nile-init";
     FilePreviewEvent["NILE_RECEIVE"] = "nile-receive";
+    FilePreviewEvent["NILE_UPLOADING"] = "nile-uploding";
     FilePreviewEvent["NILE_REMOVE"] = "nile-remove";
     FilePreviewEvent["NILE_CANCEL_UPLOAD"] = "nile-cancel-upload";
     FilePreviewEvent["NILE_DESTROY"] = "nile-destroy";

package/dist/src/nile-file-preview/types/nile-file-preview.enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-preview.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/nile-file-preview.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;IACvB,uCAAmB,CAAA;IACnB,6CAAyB,CAAA;IACzB,mCAAe,CAAA;AACjB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,+CAAyB,CAAA;IACzB,2CAAqB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,wBAQX;AARD,WAAY,wBAAwB;IAClC,qFAAyD,CAAA;IACzD,8DAAkC,CAAA;IAClC,2EAA+C,CAAA;IAC/C,8DAAkC,CAAA;IAClC,oEAAwC,CAAA;IACxC,kEAAsC,CAAA;IACtC,kFAAsD,CAAA;AACxD,CAAC,EARW,wBAAwB,KAAxB,wBAAwB,QAQnC;AAED,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,iDAA6B,CAAA;IAC7B,+CAA2B,CAAA;IAC3B,6DAAyC,CAAA;IACzC,iDAA6B,CAAA;AAC/B,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B","sourcesContent":["export enum FilePreviewState {\n  DEFAULT = 'default',\n  UPLOADING = 'uploading',\n  PREVIEW = 'preview',\n  NO_PREVIEW = 'no-preview',\n  ERROR = 'error'\n}\n\nexport enum FilePreviewVariant {\n  HORIZONTAL = 'horizontal',\n  VERTICAL = 'vertical'\n}\n\nexport enum FilePreviewErrorMessages {\n  INVALID_FORMAT = \"Invalid File Format. Please try again.\",\n  SIZE_LIMIT = \"Size limit exceeded\",\n  FAILED_TO_LOAD = \"Failed to load file from URL\",\n  UNKNOWN_FILE_NAME = 'unknown-file',\n  UPLOAD_CANCEL = \"File upload cancelled.\",\n  NO_FILE_SELECTED = \"No file selected.\",\n  UNABLE_TO_GENEARTE_URL = \"Unable to generate the url.\"\n}\n\nexport enum FilePreviewEvent {\n  NILE_INIT = \"nile-init\",\n  NILE_RECEIVE = \"nile-receive\",\n  NILE_REMOVE = \"nile-remove\",\n  NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n  NILE_DESTROY = \"nile-destroy\"\n}"]}
+{"version":3,"file":"nile-file-preview.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/nile-file-preview.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;IACvB,uCAAmB,CAAA;IACnB,6CAAyB,CAAA;IACzB,mCAAe,CAAA;AACjB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,+CAAyB,CAAA;IACzB,2CAAqB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,wBAQX;AARD,WAAY,wBAAwB;IAClC,qFAAyD,CAAA;IACzD,8DAAkC,CAAA;IAClC,2EAA+C,CAAA;IAC/C,8DAAkC,CAAA;IAClC,oEAAwC,CAAA;IACxC,kEAAsC,CAAA;IACtC,kFAAsD,CAAA;AACxD,CAAC,EARW,wBAAwB,KAAxB,wBAAwB,QAQnC;AAED,MAAM,CAAN,IAAY,gBAOX;AAPD,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,iDAA6B,CAAA;IAC7B,oDAAgC,CAAA;IAChC,+CAA2B,CAAA;IAC3B,6DAAyC,CAAA;IACzC,iDAA6B,CAAA;AAC/B,CAAC,EAPW,gBAAgB,KAAhB,gBAAgB,QAO3B","sourcesContent":["export enum FilePreviewState {\n  DEFAULT = 'default',\n  UPLOADING = 'uploading',\n  PREVIEW = 'preview',\n  NO_PREVIEW = 'no-preview',\n  ERROR = 'error'\n}\n\nexport enum FilePreviewVariant {\n  HORIZONTAL = 'horizontal',\n  VERTICAL = 'vertical'\n}\n\nexport enum FilePreviewErrorMessages {\n  INVALID_FORMAT = \"Invalid File Format. Please try again.\",\n  SIZE_LIMIT = \"Size limit exceeded\",\n  FAILED_TO_LOAD = \"Failed to load file from URL\",\n  UNKNOWN_FILE_NAME = 'unknown-file',\n  UPLOAD_CANCEL = \"File upload cancelled.\",\n  NO_FILE_SELECTED = \"No file selected.\",\n  UNABLE_TO_GENEARTE_URL = \"Unable to generate the url.\"\n}\n\nexport enum FilePreviewEvent {\n  NILE_INIT = \"nile-init\",\n  NILE_RECEIVE = \"nile-receive\",\n  NILE_UPLOADING = \"nile-uploding\",\n  NILE_REMOVE = \"nile-remove\",\n  NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n  NILE_DESTROY = \"nile-destroy\"\n}"]}

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

@@ -11,12 +11,16 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   * {
-    padding: 0px;
-    margin: 0px;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
     box-sizing: border-box;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
 
   .wrapper {
@@ -33,24 +37,28 @@ export const styles = css `
   }
 
   .horizontal-div {
-    margin-bottom: 10px;
-    height: 62px;
+    height: var(--nile-height-60px, var(--ng-height-60px));
     max-width: 648px;
-    width: max(648px, 100%);
     min-width: 230px;
-    padding: 12px;
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   .hover-border {
-    border-color: var(--nile-colors-primary-600);
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+      var(--nile-colors-primary-600, var(--ng-colors-border-brand));
   }
 
   .vertical-div {
@@ -58,24 +66,24 @@ export const styles = css `
     height: auto;
     min-width: 240px;
     width: 240px;
-    display: flex;
+    display: flex !important;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: 12px;
-    border-radius: var(--nile-radius-radius-xs);
-    color: var(--nile-colors-dark-900);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-white-base);
-    position: relative; 
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    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));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    position: relative;
   }
 
   .vertical-div:hover {
-    border-color: var(--nile-colors-blue-500);
+    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-primary-600, var(--ng-colors-border-brand));
   }
 
   .outer-div-border {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .inner-div {
@@ -87,45 +95,47 @@ export const styles = css `
   }
 
   .content {
-    display: flex;  
+    display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
   }
 
   .content h4 {
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-900);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
-      
+
   .content p {
-    margin: 0px;
-    font-size: var(--nile-type-scale-2);
-    color: var(--nile-colors-neutral-700);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
   }
 
   /*  DISABLED STATE */
   .disable {
-    background-color: var(--nile-colors-dark-200);
-    opacity: 0.8;
-    cursor: not-allowed;
-    color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    opacity: var(--nile-opacity-50, var(--ng-opacity-50));
     pointer-events: none;
   }
 
   /* DRAGGING */
   .dragging {
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
+      var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 18px;
-    color: var(--nile-colors-blue-700);
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-400);
   }
 
   .icons-container {
@@ -156,9 +166,12 @@ export const styles = css `
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400)
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
-  
+
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -174,8 +187,8 @@ export const styles = css `
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
   }
 
   .progress-bar-container p {
@@ -183,17 +196,20 @@ export const styles = css `
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
   }
 
   /* PREVIEW STATE */
   .preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview-inner {
@@ -207,13 +223,16 @@ export const styles = css `
   }
 
   .preview-image-container img {
-    height: 42px;
-    width: 42px;
+    height: var(--nile-height-42px, var(--ng-height-42px));
+    width: var(--nile-width-42px, 42px); // check it once
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
-  
+
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -270,7 +289,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
-  
+
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -297,7 +316,7 @@ export const styles = css `
   }
 
   /* ERROR STATE */
-  
+
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -328,7 +347,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
-  
+
   .file-info {
     width: 100%;
     display: flex;
@@ -522,7 +541,7 @@ export const styles = css `
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-sm);
     scrollbar-width: none;
     padding: 12px;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyhBxB,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    margin-bottom: 10px;\n    height: 62px;\n    max-width: 648px;\n    width: max(648px, 100%);\n    min-width: 230px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px dashed var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  .hover-border {\n    border-color: var(--nile-colors-primary-600);\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\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  }\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  .content {\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n  }\n      \n  .content p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200);\n    opacity: 0.8;\n    cursor: not-allowed;\n    color: var(--nile-colors-neutral-500);\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-600);\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700);\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .icons-container {\n    display: flex;\n    gap: 4px;\n  }\n\n  .general-icon {\n    transform: rotate(-18.11deg);\n    position: relative;\n    bottom: 3px;\n  }\n\n  .image-icon {\n    transform: rotate(15deg);\n  }\n\n  .icon:hover {\n    cursor: pointer;\n  }\n\n  /* Uploading State */\n  .uploading {\n    width: 648px;\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  }\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: 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);\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  }\n\n  /* PREVIEW STATE */\n  .preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .preview-inner {\n    display: flex;\n    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\n    height: 42px;\n    width: 42px;\n    object-fit: contain;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n\n  /* NO PREVIEW STATE */\n  .no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .no-preview-container {\n    display: flex;\n    gap: 18px;\n  }\n\n  .document-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .document-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n  \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: 100%;\n    display: flex;\n    gap: 18px;\n  }\n\n  .error-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-red-400);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .error-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n  \n  .file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\n\n  .content-container h4 {\n    font-weight: var(--nile-font-weight-regular);\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  }\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  }\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  }\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  .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: start;\n  }\n\n  .error-p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    width: 216px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n  }\n\n  .error-p p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n  }\n\n\n  /* Displaing uploaded files CSS */\n  .display-files {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 8px;\n    width: 648px;\n    min-width: 230px;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-neutral-700);\n    border-radius: var(--nile-radius-radius-xs);\n    scrollbar-width: none;\n    padding: 12px;\n  }\n\n  ul, li {\n    width: 100%;\n  }\n\n  li {\n    list-style-type: none;\n  }\n\n  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-file-upload.css.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4iBxB,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    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:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      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-border {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex !important;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    position: relative;\n  }\n\n  .vertical-div:hover {\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-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .outer-div-border {\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .inner-div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\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-400));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .content p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\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-400);\n  }\n\n  .icons-container {\n    display: flex;\n    gap: 4px;\n  }\n\n  .general-icon {\n    transform: rotate(-18.11deg);\n    position: relative;\n    bottom: 3px;\n  }\n\n  .image-icon {\n    transform: rotate(15deg);\n  }\n\n  .icon:hover {\n    cursor: pointer;\n  }\n\n  /* Uploading State */\n  .uploading {\n    width: 648px;\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  }\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: 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-500));\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-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .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  .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: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n\n  /* NO PREVIEW STATE */\n  .no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .no-preview-container {\n    display: flex;\n    gap: 18px;\n  }\n\n  .document-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .document-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n\n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n\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: 100%;\n    display: flex;\n    gap: 18px;\n  }\n\n  .error-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-red-400);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .error-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n\n  .file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\n\n  .content-container h4 {\n    font-weight: var(--nile-font-weight-regular);\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  }\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  }\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  }\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  .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: start;\n  }\n\n  .error-p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    width: 216px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n  }\n\n  .error-p p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n  }\n\n\n  /* Displaing uploaded files CSS */\n  .display-files {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 8px;\n    width: 648px;\n    min-width: 230px;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-neutral-700);\n    border-radius: var(--nile-radius-sm);\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -20,7 +20,7 @@ export declare class NileFileUpload extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
-    size: string;
+    size: number;
     error: boolean;
     errorMessage: string;
     allowMultiple: boolean;
@@ -37,7 +37,6 @@ export declare class NileFileUpload extends NileElement {
     private dragHandler;
     connectedCallback(): void;
     firstUpdated(changedProps: ChangedPropsInterface): void;
-    cnt: any;
     updated(changedProps: ChangedPropsInterface): void;
     private browseFiles;
     setState: (newState: FileUploadState) => void;