npm - @aquera/nile-elements - Versions diffs - 0.1.40-beta-1.8 → 0.1.40-beta-2.1 - Mend

@aquera/nile-elements 0.1.40-beta-1.8 → 0.1.40-beta-2.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-preview.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.ts"],"names":[],"mappings":"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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}"]}
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 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 CHANGED Viewed

@@ -60,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>
@@ -85,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>
@@ -164,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">
@@ -187,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">

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number\n ): TemplateResult {\n return html`\n <div class=\"uploading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p>${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"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()} • ${(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)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${(file.type.split('/')[1]).toUpperCase()} • ${(Number(file.size) / 1034).toFixed(0)}KB</p>\n </div>\n </div>\n <div>\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"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 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()} • ${(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)\"></nile-icon>\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${file.type} • ${(Number(file.size) / 1024).toFixed(0)}KB</p>\n </div>\n\n <slot name=\"cancelIcon\">\n <nile-icon\n @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}\n name=\"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 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}"]}
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()} • ${(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()} • ${(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()} • ${(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} • ${(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-upload/nile-file-upload.css.js CHANGED Viewed

@@ -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,43 +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.5;
+    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 {
@@ -154,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);
   }
@@ -172,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 {
@@ -181,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 {
@@ -205,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;
@@ -268,7 +289,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -295,7 +316,7 @@ export const styles = css `
   }
   /* ERROR STATE */
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -326,7 +347,7 @@ export const styles = css `
     height: 40px;
     width: 40px;
   }
   .file-info {
     width: 100%;
     display: flex;
@@ -520,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 CHANGED Viewed

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuhBxB,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.5;\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];"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 CHANGED Viewed

@@ -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;

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

@@ -8,13 +8,13 @@ import { __decorate } from "tslib";
 import { styles } from './nile-file-upload.css';
 import NileElement from '../internal/nile-element';
 import { DragHandler } from './utils/drag-drop.util';
-import { getHorizontalDisabledState } from './nile-file-upload.template';
+import { getDragHandler } from './nile-file-upload.template';
 import { FileUploadDefaults } from './types/file-upload.enums';
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { FileUploadState, FileUploadVariant, FileUploadEvent } from './types/file-upload.enums';
+import { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';
 import { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles } from './utils/file-validation.util';
-import { getHorizontalDefaultState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, } from './nile-file-upload.template';
+import { getHorizontalDefaultState, getHorizontalDisabledtState, getHorizontalDragState, getVerticalDefaultState, getVerticalDisabledState, getVerticalDragState, } from './nile-file-upload.template';
 /**
  * Nile file-upload component.
  *
@@ -24,7 +24,7 @@ import { getHorizontalDefaultState, getHorizontalDragState, getVerticalDefaultSt
 let NileFileUpload = class NileFileUpload extends NileElement {
     constructor() {
         super(...arguments);
-        this.size = "100000";
+        this.size = 0;
         this.error = false;
         this.errorMessage = "";
         this.allowMultiple = true;
@@ -55,6 +55,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     firstUpdated(changedProps) {
         super.firstUpdated(changedProps);
         this.dragHandler = new DragHandler();
+        getDragHandler(this.dragHandler);
         setUpDragHandler(this, this.dragHandler);
         addInternalListeners(this, this.dragHandler, this.uploadRequests);
         addGlobalListeners(this.dragHandler);
@@ -64,9 +65,11 @@ let NileFileUpload = class NileFileUpload extends NileElement {
         if (changedProps.has('uploadedFiles')) {
             if (this.uploadedFiles.length === 0)
                 this.errorMessage = "";
-            if (this.fileUploadUrl && this.autoUpload) {
-                uploadFiles(this);
+            if (!this.fileUploadUrl) {
+                this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;
+                return;
             }
+            uploadFiles(this);
             this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });
         }
         else if (changedProps.has('state')) {
@@ -91,25 +94,25 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     getHorizontalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
             case FileUploadState.DISABLED:
-                return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+                return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);
             case FileUploadState.DRAG:
                 return getHorizontalDragState();
             default:
-                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+                return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
         }
     }
     getVerticalState() {
         switch (this.state) {
             case FileUploadState.DEFAULT:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
             case FileUploadState.DISABLED:
-                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+                return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);
             case FileUploadState.DRAG:
                 return getVerticalDragState();
             default:
-                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);
+                return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);
         }
     }
     disconnectedCallback() {
@@ -117,7 +120,7 @@ let NileFileUpload = class NileFileUpload extends NileElement {
     }
 };
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], NileFileUpload.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.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-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { getHorizontalDisabledState } from './nile-file-upload.template'\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n getHorizontalDefaultState,\n getHorizontalDragState,\n getVerticalDefaultState,\n getVerticalDisabledState,\n getVerticalDragState,\n} from './nile-file-upload.template';\n\n/\n Nile file-upload component.\n \n @tag nile-file-upload\n \n /\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n /*\n The styles for nile-file-upload\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 }) size: string = \"100000\";\n @property({ type: Boolean}) error: boolean = false;\n @property({ type: String }) errorMessage: string = \"\";\n @property({ type: Boolean}) allowMultiple: boolean = true;\n @property({ type: Boolean}) allowDuplicates: boolean = false;\n @property({ type: Array }) uploadedFiles: File[] = [];\n @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n @property({ type: String }) fileUploadUrl: string = \"\";\n @property({ type: Boolean}) autoUpload: boolean = true;\n @query('input') input!: HTMLInputElement;\n public uploadRequests = new Map<File, XMLHttpRequest>();\n \n private dragHandler!: DragHandler;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FileUploadEvent.NILE_INIT);\n }\n\n firstUpdated(changedProps: ChangedPropsInterface): void {\n super.firstUpdated(changedProps);\n\n this.dragHandler = new DragHandler();\n setUpDragHandler(this, this.dragHandler);\n addInternalListeners(this, this.dragHandler, this.uploadRequests);\n addGlobalListeners(this.dragHandler);\n }\n\n updated(changedProps: ChangedPropsInterface): void {\n super.updated(changedProps);\n\n if (changedProps.has('uploadedFiles')) {\n if(this.uploadedFiles.length === 0) this.errorMessage = \"\";\n if(this.fileUploadUrl && this.autoUpload) {\n uploadFiles(this);\n }\n this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n\n } else if (changedProps.has('state')) {\n this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);\n }\n }\n\n private browseFiles(): void {\n this.emit(FileUploadEvent.NILE_BROWSE);\n this.errorMessage = \"\";\n this.input.click();\n }\n\n public setState = (newState: FileUploadState): void => {\n this.state = newState;\n }\n\n render(): TemplateResult {\n return html`\n ${this.getState()}\n `;\n }\n\n private getState(): TemplateResult {\n return this.variant === FileUploadVariant.HORIZONTAL\n ? this.getHorizontalState()\n : this.getVerticalState();\n }\n\n private getHorizontalState(): TemplateResult {\n switch(this.state) {\n case FileUploadState.DEFAULT:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);\n\n case FileUploadState.DISABLED:\n return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);\n\n case FileUploadState.DRAG:\n return getHorizontalDragState();\n\n default:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);\n }\n }\n\n private getVerticalState(): TemplateResult {\n switch(this.state) {\n case FileUploadState.DEFAULT:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);\n\n case FileUploadState.DISABLED:\n return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler);\n\n case FileUploadState.DRAG:\n return getVerticalDragState();\n\n default:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler);\n }\n }\n\n disconnectedCallback(): void {\n this.emit(FileUploadEvent.NILE_DESTROY);\n }\n}\n"]}
1	+ {"version":3,"file":"nile-file-upload.js","sourceRoot":"","sources":["../../../src/nile-file-upload/nile-file-upload.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-upload.css';\nimport { ChangedPropsInterface } from './types/file-upload.type'\nimport NileElement from '../internal/nile-element';\nimport { DragHandler } from './utils/drag-drop.util';\nimport { getDragHandler } from './nile-file-upload.template'\nimport { FileUploadDefaults } from './types/file-upload.enums';\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FileUploadState, FileUploadVariant, FileUploadError, FileUploadEvent } from './types/file-upload.enums';\nimport { setUpDragHandler, addGlobalListeners, addInternalListeners, uploadFiles, cancelFileUpload } from './utils/file-validation.util';\nimport {\n getHorizontalDefaultState,\n getHorizontalDisabledtState,\n getHorizontalDragState,\n getVerticalDefaultState,\n getVerticalDisabledState,\n getVerticalDragState,\n} from './nile-file-upload.template';\n\n/\n Nile file-upload component.\n \n @tag nile-file-upload\n \n /\n@customElement('nile-file-upload')\nexport class NileFileUpload extends NileElement {\n /*\n The styles for nile-file-upload\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: Number }) size: number = 0;\n @property({ type: Boolean}) error: boolean = false;\n @property({ type: String }) errorMessage: string = \"\";\n @property({ type: Boolean}) allowMultiple: boolean = true;\n @property({ type: Boolean}) allowDuplicates: boolean = false;\n @property({ type: Array }) uploadedFiles: File[] = [];\n @property({ type: String }) title: string = FileUploadDefaults.TITLE;\n @property({ type: String }) subtitle: string = FileUploadDefaults.SUBTITLE;\n @property({ type: String }) state: FileUploadState = FileUploadState.DEFAULT; \n @property({ type: String }) variant: FileUploadVariant = FileUploadVariant.HORIZONTAL;\n @property({ type: String }) fileUploadUrl: string = \"\";\n @property({ type: Boolean}) autoUpload: boolean = true;\n @query('input') input!: HTMLInputElement;\n public uploadRequests = new Map<File, XMLHttpRequest>();\n \n private dragHandler!: DragHandler;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FileUploadEvent.NILE_INIT);\n }\n\n firstUpdated(changedProps: ChangedPropsInterface): void {\n super.firstUpdated(changedProps);\n\n this.dragHandler = new DragHandler();\n getDragHandler(this.dragHandler);\n setUpDragHandler(this, this.dragHandler);\n addInternalListeners(this, this.dragHandler, this.uploadRequests);\n addGlobalListeners(this.dragHandler);\n }\n\n updated(changedProps: ChangedPropsInterface): void {\n super.updated(changedProps);\n\n if (changedProps.has('uploadedFiles')) {\n if(this.uploadedFiles.length === 0) this.errorMessage = \"\";\n if(!this.fileUploadUrl) {\n this.errorMessage = FileUploadError.UPLOAD_URL_REQUIRED;\n return;\n }\n uploadFiles(this);\n this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n\n } else if (changedProps.has('state')) {\n this.dragHandler.setValuesInDragHandler(this.state, this.size, this.uploadedFiles);\n }\n }\n\n private browseFiles(): void {\n this.emit(FileUploadEvent.NILE_BROWSE);\n this.errorMessage = \"\";\n this.input.click();\n }\n\n public setState = (newState: FileUploadState): void => {\n this.state = newState;\n }\n\n render(): TemplateResult {\n return html`\n ${this.getState()}\n `;\n }\n\n private getState(): TemplateResult {\n return this.variant === FileUploadVariant.HORIZONTAL\n ? this.getHorizontalState()\n : this.getVerticalState();\n }\n\n private getHorizontalState(): TemplateResult {\n switch(this.state) {\n case FileUploadState.DEFAULT:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n\n case FileUploadState.DISABLED:\n return getHorizontalDisabledtState(this.browseFiles, this.title, this.subtitle);\n\n case FileUploadState.DRAG:\n return getHorizontalDragState();\n\n default:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n }\n }\n\n private getVerticalState(): TemplateResult {\n switch(this.state) {\n case FileUploadState.DEFAULT:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n\n case FileUploadState.DISABLED:\n return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle);\n\n case FileUploadState.DRAG:\n return getVerticalDragState();\n\n default:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.errorMessage, this.state);\n }\n }\n\n disconnectedCallback(): void {\n this.emit(FileUploadEvent.NILE_DESTROY);\n }\n}\n"]}