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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-upload.cjs.js","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"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"],"names":["NileFileUpload","_i","F","constructor","this","size","error","errorMessage","allowMultiple","allowDuplicates","uploadedFiles","title","FileUploadDefaults","TITLE","subtitle","SUBTITLE","state","FileUploadState","DEFAULT","variant","FileUploadVariant","HORIZONTAL","fileUploadUrl","autoUpload","uploadRequests","Map","setState","newState","_this","_inherits","_createClass","key","value","connectedCallback","super","emit","FileUploadEvent","NILE_INIT","firstUpdated","changedProps","dragHandler","DragHandler","getDragHandler","setUpDragHandler","addInternalListeners","addGlobalListeners","updated","has","length","FileUploadError","UPLOAD_URL_REQUIRED","uploadFiles","NILE_CHANGE","files","setValuesInDragHandler","browseFiles","NILE_BROWSE","input","click","render","html","_templateObject","_taggedTemplateLiteral","getState","getHorizontalState","getVerticalState","getHorizontalDefaultState","DISABLED","getHorizontalDisabledtState","DRAG","getHorizontalDragState","getVerticalDefaultState","getVerticalDisabledState","getVerticalDragState","disconnectedCallback","NILE_DESTROY","__decorate","get","styles","NileElement","property","type","Number","prototype","Boolean","String","Array","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"nile-file-upload.cjs.js","sources":["../../../src/nile-file-upload/nile-file-upload.ts"],"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 { 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 getHorizontalErrorState,\n getVerticalErrorState,\n getHorizontalDisabledState\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 = \"10MB\";\n @property({ type: Boolean}) error: boolean = false;\n @property({ type: String }) errorMessage: string = \"\";\n @property({ type: Boolean}) allowMultiple: boolean = false;\n @property({ type: Boolean}) allowDuplicates: boolean = false;\n @property({ type: Array }) allowedTypes: string[] = [];\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 public fileSizeExceededFilesNumber: number = 0;\n public isStringTruncated: boolean = false;\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.fileUploadUrl && this.autoUpload) {\n uploadFiles(this);\n }\n this.emit(FileUploadEvent.NILE_CHANGE, { files: this.uploadedFiles });\n } else if (changedProps.has('state')) {\n this.dragHandler.setValuesInDragHandler(this.state);\n }\n\n if(changedProps.has('autoUpload') && this.autoUpload) {\n if(this.fileUploadUrl && this.autoUpload) {\n uploadFiles(this);\n }\n this.emit(FileUploadEvent.NILE_CHANGE, { files: 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, this.state, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DISABLED:\n return getHorizontalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DRAG:\n return getHorizontalDragState();\n\n case FileUploadState.ERROR:\n return getHorizontalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\n\n default:\n return getHorizontalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.state, this.errorMessage, this.allowedTypes, this);\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, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DISABLED:\n return getVerticalDisabledState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n case FileUploadState.DRAG:\n return getVerticalDragState();\n\n case FileUploadState.ERROR:\n return getVerticalErrorState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n\n default:\n return getVerticalDefaultState(this.browseFiles, this.title, this.subtitle, this.dragHandler, this.errorMessage, this.allowedTypes, this);\n }\n }\n\n disconnectedCallback(): void {\n this.emit(FileUploadEvent.NILE_DESTROY);\n }\n}\n"],"names":["NileFileUpload","U","this","size","error","errorMessage","allowMultiple","allowDuplicates","allowedTypes","uploadedFiles","title","FileUploadDefaults","TITLE","subtitle","SUBTITLE","state","FileUploadState","DEFAULT","variant","FileUploadVariant","HORIZONTAL","fileUploadUrl","autoUpload","uploadRequests","Map","fileSizeExceededFilesNumber","isStringTruncated","setState","newState","_this","_inherits","_i","_createClass","key","value","connectedCallback","super","emit","FileUploadEvent","NILE_INIT","firstUpdated","changedProps","dragHandler","DragHandler","setUpDragHandler","addInternalListeners","addGlobalListeners","updated","has","uploadFiles","NILE_CHANGE","files","setValuesInDragHandler","browseFiles","NILE_BROWSE","input","click","render","html","_templateObject","_taggedTemplateLiteral","getState","getHorizontalState","getVerticalState","getHorizontalDefaultState","DISABLED","getHorizontalDisabledState","DRAG","getHorizontalDragState","ERROR","getHorizontalErrorState","getVerticalDefaultState","getVerticalDisabledState","getVerticalDragState","getVerticalErrorState","disconnectedCallback","NILE_DESTROY","get","styles","NileElement","__decorate","property","type","String","prototype","Boolean","Array","query","customElement"],"mappings":"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"}

package/dist/nile-file-upload/nile-file-upload.css.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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-regular));\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-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:\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-medium));\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"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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: flex-start;\n    width: min-content;\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: 648px;\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  .title {\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\n    width: 100%;\n  }\n\n  .subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 454px;\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    margin-bottom: 10px;\n  }\n\n  .vertical-div:hover {\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  .outer-div-border {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .inner-div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    box-sizing: border-box;\n  }\n\n  .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    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n      \n  .content p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    color: var(--nile-colors-neutral-700);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 454px;\n  }\n\n  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n    --nile-svg-height: 24px !important ;\n    --nile-svg-width: 24px !important ;\n    height:42px;\n    width: 42px;\n    object-fit: cover;\n  }\n\n  .browse-file-button {\n    cursor: pointer;\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  /* 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 div.title {\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 222px;\n  }\n\n  .content-container div.subtitle {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-dark-500);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 222px;\n  }\n\n  /* Drag State */\n  .vertical-drag {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap:18px;\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-blue-700);\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  /* Uploading State */\n  .vertical-uploading {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\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-700);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n\n  .upload-error > nile-tooltip > span {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    max-width: 560px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .vertical-upload-error {\n    display: flex;\n    gap: 4px;\n  }\n\n  .vertical-upload-error nile-tooltip span, .vertical-upload-error span {\n    color: var(--nile-colors-red-700);\n    white-space: nowrap;\n    text-align: left;\n    width: 222px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--nile-type-scale-2);\n    display: inline-block;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-file-upload.css.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-file-upload.css.cjs.js","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"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-regular));\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-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:\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-medium));\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1	+ {"version":3,"file":"nile-file-upload.css.cjs.js","sources":["../../../src/nile-file-upload/nile-file-upload.css.ts"],"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: flex-start;\n width: min-content;\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: 648px;\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 .title {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 454px;\n width: 100%;\n }\n\n .subtitle {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 454px;\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 margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .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 text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 454px;\n }\n \n .content p {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 454px;\n }\n\n ::slotted(img), ::slotted(nile-icon), ::slotted(video) {\n --nile-svg-height: 24px !important ;\n --nile-svg-width: 24px !important ;\n height:42px;\n width: 42px;\n object-fit: cover;\n }\n\n .browse-file-button {\n cursor: pointer;\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 / 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 div.title {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container div.subtitle {\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n / Drag State /\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n / Uploading State /\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n }\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-700);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x);\n }\n\n .upload-error > nile-tooltip > span {\n color: var(--nile-colors-red-700);\n white-space: nowrap;\n text-align: left;\n max-width: 560px;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .vertical-upload-error {\n display: flex;\n gap: 4px;\n }\n\n .vertical-upload-error nile-tooltip span, .vertical-upload-error span {\n color: var(--nile-colors-red-700);\n white-space: nowrap;\n text-align: left;\n width: 222px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--nile-type-scale-2);\n display: inline-block;\n }\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-file-upload/nile-file-upload.css.esm.js CHANGED Viewed

@@ -1,25 +1,20 @@
-import{css as r}from"lit";const e=r`
+import{css as e}from"lit";const r=e`
   :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: var(--nile-spacing-none, var(--ng-spacing-none));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0px;
+    margin: 0px;
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
   .wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    gap: 18px;
-    height: auto;
+    align-items: flex-start;
+    width: min-content;
   }
   input {
@@ -27,28 +22,45 @@ import{css as r}from"lit";const e=r`
   }
   .horizontal-div {
-    height: var(--nile-height-60px, var(--ng-height-60px));
+    margin-bottom: 10px;
+    height: 62px;
     max-width: 648px;
+    width: 648px;
     min-width: 230px;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    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));
+    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);
   }
   .hover-border {
-    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));
+    border-color: var(--nile-colors-primary-600);
+  }
+  .title {
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 454px;
+    width: 100%;
+  }
+  .subtitle {
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-500);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 454px;
   }
   .vertical-div {
@@ -56,24 +68,25 @@ import{css as r}from"lit";const e=r`
     height: auto;
     min-width: 240px;
     width: 240px;
-    display: flex !important;
+    display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    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));
+    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;
+    margin-bottom: 10px;
   }
   .vertical-div:hover {
-    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));
+    border-color: var(--nile-colors-blue-500);
   }
   .outer-div-border {
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
   .inner-div {
@@ -85,47 +98,67 @@ import{css as r}from"lit";const e=r`
   }
   .content {
-    display: flex;
+    display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
   }
   .content h4 {
-    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-regular));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 454px;
   }
   .content p {
-    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));
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 454px;
+  }
+  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {
+    --nile-svg-height: 24px !important ;
+    --nile-svg-width: 24px !important ;
+    height:42px;
+    width: 42px;
+    object-fit: cover;
+  }
+  .browse-file-button {
+    cursor: pointer;
   }
   /*  DISABLED STATE */
   .disable {
-    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));
+    background-color: var(--nile-colors-dark-200);
+    opacity: 0.8;
+    cursor: not-allowed;
+    color: var(--nile-colors-neutral-500);
     pointer-events: none;
   }
   /* DRAGGING */
   .dragging {
-    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));
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-600);
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 18px;
-    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-regular);
+    color: var(--nile-colors-blue-700);
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
   .icons-container {
@@ -156,12 +189,9 @@ import{css as r}from"lit";const e=r`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    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));
+    border: 1px solid var(--nile-colors-neutral-400)
   }
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -177,8 +207,8 @@ import{css as r}from"lit";const e=r`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
   .progress-bar-container p {
@@ -186,20 +216,17 @@ import{css as r}from"lit";const e=r`
   }
   .progress-bar-container > p {
-    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));
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
   }
   /* PREVIEW STATE */
   .preview {
-    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));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
   .preview-inner {
@@ -213,16 +240,13 @@ import{css as r}from"lit";const e=r`
   }
   .preview-image-container img {
-    height: var(--nile-height-42px, var(--ng-height-42px));
-    width: var(--nile-width-42px, 42px); // check it once
+    height: 42px;
+    width: 42px;
     object-fit: contain;
-    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));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
   }
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -248,7 +272,6 @@ import{css as r}from"lit";const e=r`
     cursor: pointer;
   }
   /* NO PREVIEW STATE */
   .no-preview {
     border: 1px solid var(--nile-colors-neutral-400);
@@ -279,7 +302,7 @@ import{css as r}from"lit";const e=r`
     height: 40px;
     width: 40px;
   }
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -306,7 +329,7 @@ import{css as r}from"lit";const e=r`
   }
   /* ERROR STATE */
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -337,7 +360,7 @@ import{css as r}from"lit";const e=r`
     height: 40px;
     width: 40px;
   }
   .file-info {
     width: 100%;
     display: flex;
@@ -382,21 +405,26 @@ import{css as r}from"lit";const e=r`
     gap: 8px;
   }
-  .content-container h4 {
-    font-weight: var(--nile-font-weight-regular);
-  }
-  .content-container p:first-child {
-    margin: 0px;
+  .content-container div.title {
     font-size: var(--nile-type-scale-3);
     font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
   }
-  .content-container p:last-child {
-    margin: 0px;
+  .content-container div.subtitle {
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-500);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
   }
   /* Drag State */
@@ -531,7 +559,7 @@ import{css as r}from"lit";const e=r`
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-xs);
     scrollbar-width: none;
     padding: 12px;
   }
@@ -548,10 +576,35 @@ import{css as r}from"lit";const e=r`
   .upload-error {
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-red-500);
+    color: var(--nile-colors-red-700);
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: var(--nile-spacing-one-half-x);
   }
-`;export{e as s};
+  .upload-error > nile-tooltip > span {
+    color: var(--nile-colors-red-700);
+    white-space: nowrap;
+    text-align: left;
+    max-width: 560px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .vertical-upload-error {
+    display: flex;
+    gap: 4px;
+  }
+  .vertical-upload-error nile-tooltip span, .vertical-upload-error span {
+    color: var(--nile-colors-red-700);
+    white-space: nowrap;
+    text-align: left;
+    width: 222px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--nile-type-scale-2);
+    display: inline-block;
+  }
+`;export{r as s};

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

@@ -1,3 +1,3 @@
-import{__decorate as t}from"tslib";import{s}from"./nile-file-upload.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{D as e}from"./utils/drag-drop.util.esm.js";import{g as r,a as h,b as a,c as o,d as l,e as p,f as n}from"./nile-file-upload.template.esm.js";import{c as d,F as u,d as m,b as c,a as f}from"./types/file-upload.enums.esm.js";import{html as v}from"lit";import{property as y,query as g,customElement as b}from"lit/decorators.js";import{s as S,a as j,b as w,u as B}from"./utils/file-validation.util.esm.js";import"../lit-html-39a6718c.esm.js";let F=class extends i{constructor(){super(...arguments),this.size=0,this.error=!1,this.errorMessage="",this.allowMultiple=!0,this.allowDuplicates=!1,this.uploadedFiles=[],this.title=d.TITLE,this.subtitle=d.SUBTITLE,this.state=u.DEFAULT,this.variant=m.HORIZONTAL,this.fileUploadUrl="",this.autoUpload=!0,this.uploadRequests=new Map,this.setState=t=>{this.state=t}}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit(c.NILE_INIT)}firstUpdated(t){super.firstUpdated(t),this.dragHandler=new e,r(this.dragHandler),S(this,this.dragHandler),j(this,this.dragHandler,this.uploadRequests),w(this.dragHandler)}updated(t){if(super.updated(t),t.has("uploadedFiles")){if(0===this.uploadedFiles.length&&(this.errorMessage=""),!this.fileUploadUrl)return void(this.errorMessage=f.UPLOAD_URL_REQUIRED);B(this),this.emit(c.NILE_CHANGE,{files:this.uploadedFiles})}else t.has("state")&&this.dragHandler.setValuesInDragHandler(this.state,this.size,this.uploadedFiles)}browseFiles(){this.emit(c.NILE_BROWSE),this.errorMessage="",this.input.click()}render(){return v`
+import{__decorate as t}from"tslib";import{s}from"./nile-file-upload.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{D as e}from"./utils/drag-drop.util.esm.js";import{c as h,F as r,d as a,b as o}from"./types/file-upload.enums.esm.js";import{html as l}from"lit";import{property as p,query as n,customElement as d}from"lit/decorators.js";import{s as u,a as m,b as c,u as f}from"./utils/file-validation.util.esm.js";import{g as y,a as v,b as g,c as S,d as b,e as j,f as w,h as B}from"./nile-file-upload.template.esm.js";import"../lit-html-39a6718c.esm.js";let U=class extends i{constructor(){super(...arguments),this.size="10MB",this.error=!1,this.errorMessage="",this.allowMultiple=!1,this.allowDuplicates=!1,this.allowedTypes=[],this.uploadedFiles=[],this.title=h.TITLE,this.subtitle=h.SUBTITLE,this.state=r.DEFAULT,this.variant=a.HORIZONTAL,this.fileUploadUrl="",this.autoUpload=!0,this.uploadRequests=new Map,this.fileSizeExceededFilesNumber=0,this.isStringTruncated=!1,this.setState=t=>{this.state=t}}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit(o.NILE_INIT)}firstUpdated(t){super.firstUpdated(t),this.dragHandler=new e,u(this,this.dragHandler),m(this,this.dragHandler,this.uploadRequests),c(this.dragHandler)}updated(t){super.updated(t),t.has("uploadedFiles")?(this.fileUploadUrl&&this.autoUpload&&f(this),this.emit(o.NILE_CHANGE,{files:this.uploadedFiles})):t.has("state")&&this.dragHandler.setValuesInDragHandler(this.state),t.has("autoUpload")&&this.autoUpload&&(this.fileUploadUrl&&this.autoUpload&&f(this),this.emit(o.NILE_CHANGE,{files:this.uploadedFiles}))}browseFiles(){this.emit(o.NILE_BROWSE),this.errorMessage="",this.input.click()}render(){return l`
       ${this.getState()}
-    `}getState(){return this.variant===m.HORIZONTAL?this.getHorizontalState():this.getVerticalState()}getHorizontalState(){switch(this.state){case u.DEFAULT:return h(this.browseFiles,this.title,this.subtitle,this.errorMessage,this.state);case u.DISABLED:return o(this.browseFiles,this.title,this.subtitle);case u.DRAG:return a();default:return h(this.browseFiles,this.title,this.subtitle,this.errorMessage,this.state)}}getVerticalState(){switch(this.state){case u.DEFAULT:return l(this.browseFiles,this.title,this.subtitle,this.errorMessage,this.state);case u.DISABLED:return n(this.browseFiles,this.title,this.subtitle);case u.DRAG:return p();default:return l(this.browseFiles,this.title,this.subtitle,this.errorMessage,this.state)}}disconnectedCallback(){this.emit(c.NILE_DESTROY)}};t([y({type:Number})],F.prototype,"size",void 0),t([y({type:Boolean})],F.prototype,"error",void 0),t([y({type:String})],F.prototype,"errorMessage",void 0),t([y({type:Boolean})],F.prototype,"allowMultiple",void 0),t([y({type:Boolean})],F.prototype,"allowDuplicates",void 0),t([y({type:Array})],F.prototype,"uploadedFiles",void 0),t([y({type:String})],F.prototype,"title",void 0),t([y({type:String})],F.prototype,"subtitle",void 0),t([y({type:String})],F.prototype,"state",void 0),t([y({type:String})],F.prototype,"variant",void 0),t([y({type:String})],F.prototype,"fileUploadUrl",void 0),t([y({type:Boolean})],F.prototype,"autoUpload",void 0),t([g("input")],F.prototype,"input",void 0),F=t([b("nile-file-upload")],F);export{F as N};
+    `}getState(){return this.variant===a.HORIZONTAL?this.getHorizontalState():this.getVerticalState()}getHorizontalState(){switch(this.state){case r.DEFAULT:return y(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.state,this.errorMessage,this.allowedTypes,this);case r.DISABLED:return S(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.state,this.errorMessage,this.allowedTypes,this);case r.DRAG:return g();case r.ERROR:return v(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.state,this.errorMessage,this.allowedTypes,this);default:return y(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.state,this.errorMessage,this.allowedTypes,this)}}getVerticalState(){switch(this.state){case r.DEFAULT:return b(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.errorMessage,this.allowedTypes,this);case r.DISABLED:return B(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.errorMessage,this.allowedTypes,this);case r.DRAG:return w();case r.ERROR:return j(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.errorMessage,this.allowedTypes,this);default:return b(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.errorMessage,this.allowedTypes,this)}}disconnectedCallback(){this.emit(o.NILE_DESTROY)}};t([p({type:String})],U.prototype,"size",void 0),t([p({type:Boolean})],U.prototype,"error",void 0),t([p({type:String})],U.prototype,"errorMessage",void 0),t([p({type:Boolean})],U.prototype,"allowMultiple",void 0),t([p({type:Boolean})],U.prototype,"allowDuplicates",void 0),t([p({type:Array})],U.prototype,"allowedTypes",void 0),t([p({type:Array})],U.prototype,"uploadedFiles",void 0),t([p({type:String})],U.prototype,"title",void 0),t([p({type:String})],U.prototype,"subtitle",void 0),t([p({type:String})],U.prototype,"state",void 0),t([p({type:String})],U.prototype,"variant",void 0),t([p({type:String})],U.prototype,"fileUploadUrl",void 0),t([p({type:Boolean})],U.prototype,"autoUpload",void 0),t([n("input")],U.prototype,"input",void 0),U=t([d("nile-file-upload")],U);export{U as N};