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

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 (18) hide show
  1. package/demo/index.html +145 -217
  2. package/dist/index.js +54 -41
  3. package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
  4. package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
  5. package/dist/nile-file-preview/nile-file-preview.css.esm.js +7 -3
  6. package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
  7. package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
  8. package/dist/nile-file-preview/nile-file-preview.template.esm.js +73 -64
  9. package/dist/src/nile-file-preview/nile-file-preview.css.js +7 -3
  10. package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
  11. package/dist/src/nile-file-preview/nile-file-preview.template.js +46 -37
  12. package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
  13. package/dist/src/version.js +1 -1
  14. package/dist/src/version.js.map +1 -1
  15. package/dist/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/src/nile-file-preview/nile-file-preview.css.ts +7 -3
  18. package/src/nile-file-preview/nile-file-preview.template.ts +46 -37
package/dist/src/nile-file-preview/nile-file-preview.template.js CHANGED
@@ -9,16 +9,16 @@ export function getHorizontalUploadingState(file, uploadStatus) {
9
9
  return html `
10
10
  <div class="uploading" part="horizontal-uploading-state">
11
11
  <nile-loader width="24" height="24"></nile-loader>
12
- <div class="progress-bar-container">
13
- <div class="progress-bar-percent">
14
- <p>Uploading File...</p>
15
- <p>${uploadStatus}%</p>
12
+ <div class="progress-bar-container" part="horizontal-progress-bar-container">
13
+ <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
14
+ <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
15
+ <p part="horizontal-progress-bar-percent-value">${uploadStatus}%</p>
16
16
  </div>
17
17
  <nile-progress-bar
18
18
  part="horizontal-progress-bar"
19
19
  value="${uploadStatus}"
20
20
  ></nile-progress-bar>
21
- <p class="horizontal-file-name">${file.name}</p>
21
+ <p class="horizontal-file-name" part="horizontal-file-name">${file.name}</p>
22
22
  </div>
23
23
  <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
24
24
  <nile-icon
@@ -33,25 +33,27 @@ export function getHorizontalUploadingState(file, uploadStatus) {
33
33
  export function getHorizontalPreviewState(url, file, originalUrl) {
34
34
  return html `
35
35
  <div class="preview horizontal-div" part="horizontal-preview-state">
36
- <div class="preview-inner">
37
- <div class="preview-image-container">
36
+ <div class="preview-inner" part="horizontal-preview-inner">
37
+ <div class="preview-image-container" part="horizontal-preview-image-container">
38
38
  <img
39
39
  class="image-preview"
40
40
  src=${url}
41
41
  alt=${file.name}
42
+ part="horizontal-preview-image"
42
43
  />
43
44
  </div>
44
- <div class="preview-file-info">
45
- <p>${file.name}</p>
46
- <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
45
+ <div class="preview-file-info" part="horizontal-preview-file-info">
46
+ <p part="horizontal-preview-file-info-name">${file.name}</p>
47
+ <p part="horizontal-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
47
48
  </div>
48
49
  </div>
49
- <div class="preview-actions">
50
+ <div class="preview-actions" part="horizontal-preview-actions">
50
51
  <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancel-icon">
51
52
  <nile-icon
52
53
  name="trash"
53
54
  size="14"
54
55
  class="icon"
56
+ part="horizontal-preview-actions-icon"
55
57
  ></nile-icon>
56
58
  </slot>
57
59
  </div>
@@ -61,13 +63,13 @@ export function getHorizontalPreviewState(url, file, originalUrl) {
61
63
  export function getHorizontalNoPreviewState(file, originalUrl) {
62
64
  return html `
63
65
  <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
64
- <div class="no-preview-container">
65
- <div class="document-icon">
66
+ <div class="no-preview-container" part="horizontal-no-preview-container">
67
+ <div class="document-icon" part="horizontal-no-preview-document-icon">
66
68
  <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
67
69
  </div>
68
- <div class="preview-file-info">
69
- <p>${file.name}</p>
70
- <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
70
+ <div class="preview-file-info" part="horizontal-no-preview-file-info">
71
+ <p part="horizontal-no-preview-file-info-name">${file.name}</p>
72
+ <p part="horizontal-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
71
73
  </div>
72
74
  </div>
73
75
  <div>
@@ -76,6 +78,7 @@ export function getHorizontalNoPreviewState(file, originalUrl) {
76
78
  name="trash"
77
79
  size="14"
78
80
  class="icon"
81
+ part="horizontal-no-preview-actions-icon"
79
82
  ></nile-icon>
80
83
  </slot>
81
84
  </div>
@@ -86,12 +89,12 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
86
89
  truncateString(nileFilePreview);
87
90
  return html `
88
91
  <div class="error horizontal-div" part="horizontal-error-state">
89
- <div class="error-container">
90
- <div class="error-icon">
92
+ <div class="error-container" part="horizontal-error-container">
93
+ <div class="error-icon" part="horizontal-error-icon">
91
94
  <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
92
95
  </div>
93
- <div class="file-info">
94
- <p class="horizontal-file-name">${file.name}</p>
96
+ <div class="file-info" part="horizontal-error-file-info">
97
+ <p class="horizontal-file-name" part="horizontal-error-file-info-name">${file.name}</p>
95
98
  ${nileFilePreview.isStringTruncated
96
99
  ? html `<nile-tooltip content=${errorMessage}>
97
100
  <span>${errorMessage}</span>
@@ -104,6 +107,7 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
104
107
  name="close"
105
108
  size="14"
106
109
  class="icon"
110
+ part="horizontal-error-actions-icon"
107
111
  ></nile-icon>
108
112
  </slot>
109
113
  </div>
@@ -113,17 +117,17 @@ export function getHorizontalErrorState(file, errorMessage, originalUrl, nileFil
113
117
  export function getVerticalUploadingState(file, uploadStatus) {
114
118
  return html `
115
119
  <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
116
- <div class="loading">
120
+ <div class="loading" part="vertical-loading">
117
121
  <nile-loader width="24" height="24"></nile-loader>
118
122
  </div>
119
123
 
120
- <div class="progress-bar-container">
121
- <div class="progress-bar-percent">
122
- <p>Uploading...</p>
123
- <p>${uploadStatus}%</p>
124
+ <div class="progress-bar-container" part="vertical-progress-bar-container">
125
+ <div class="progress-bar-percent" part="vertical-progress-bar-percent">
126
+ <p part="vertical-progress-bar-percent-text">Uploading...</p>
127
+ <p part="vertical-progress-bar-percent-value">${uploadStatus}%</p>
124
128
  </div>
125
129
  <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
126
- <p class="vertical-file-name">${file.name}</p>
130
+ <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
127
131
  </div>
128
132
 
129
133
  <slot @click=${(e) => cancelFileUpload(file, e)} name="cancelIcon">
@@ -131,6 +135,7 @@ export function getVerticalUploadingState(file, uploadStatus) {
131
135
  name="close"
132
136
  size="14"
133
137
  class="icon corner-icon"
138
+ part="vertical-uploading-actions-icon"
134
139
  ></nile-icon>
135
140
  </slot>
136
141
  </div>
@@ -139,17 +144,18 @@ export function getVerticalUploadingState(file, uploadStatus) {
139
144
  export function getVerticalPreviewState(url, file, originalUrl) {
140
145
  return html `
141
146
  <div class="vertical-div vertical-preview" part="vertical-preview-state">
142
- <div>
147
+ <div part="vertical-preview-image-container">
143
148
  <img
144
149
  class="image-preview"
150
+ part="vertical-preview-image"
145
151
  src=${url}
146
152
  alt=${file.name}
147
153
  />
148
154
  </div>
149
155
 
150
- <div class="content-container">
151
- <p>${file.name}</p>
152
- <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
156
+ <div class="content-container" part="vertical-preview-file-info">
157
+ <p part="vertical-preview-file-info-name">${file.name}</p>
158
+ <p part="vertical-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
153
159
  </div>
154
160
 
155
161
  <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -157,6 +163,7 @@ export function getVerticalPreviewState(url, file, originalUrl) {
157
163
  name="trash"
158
164
  size="14"
159
165
  class="icon corner-icon"
166
+ part="vertical-preview-actions-icon"
160
167
  ></nile-icon>
161
168
  </slot>
162
169
  </div>
@@ -165,13 +172,13 @@ export function getVerticalPreviewState(url, file, originalUrl) {
165
172
  export function getVerticalNoPreviewState(file, originalUrl) {
166
173
  return html `
167
174
  <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
168
- <div class="vertical-document-icon">
175
+ <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
169
176
  <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
170
177
  </div>
171
178
 
172
- <div class="content-container">
173
- <p>${file.name}</p>
174
- <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
179
+ <div class="content-container" part="vertical-no-preview-file-info">
180
+ <p part="vertical-no-preview-file-info-name">${file.name}</p>
181
+ <p part="vertical-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
175
182
  </div>
176
183
 
177
184
  <slot @click=${(e) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -179,6 +186,7 @@ export function getVerticalNoPreviewState(file, originalUrl) {
179
186
  name="trash"
180
187
  size="14"
181
188
  class="icon corner-icon"
189
+ part="vertical-no-preview-actions-icon"
182
190
  ></nile-icon>
183
191
  </slot>
184
192
  </div>
@@ -188,12 +196,12 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
188
196
  truncateString(nileFilePreview);
189
197
  return html `
190
198
  <div class="vertical-div vertical-error" part="vertical-error-state">
191
- <div class="vertical-document-icon error-bg">
199
+ <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
192
200
  <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
193
201
  </div>
194
202
 
195
- <div class="file-info-vertical-state">
196
- <p class="vertical-file-name">${file.name}</p>
203
+ <div class="file-info-vertical-state" part="vertical-error-file-info">
204
+ <p class="vertical-file-name" part="vertical-error-file-info-name">${file.name}</p>
197
205
  ${nileFilePreview.isStringTruncated
198
206
  ? html `<nile-tooltip content=${errorMessage}>
199
207
  <span>${errorMessage}</span>
@@ -206,6 +214,7 @@ export function getVerticalErrorState(file, errorMessage, originalUrl, nileFileP
206
214
  name="close"
207
215
  size="14"
208
216
  class="icon corner-icon"
217
+ part="vertical-error-actions-icon"
209
218
  ></nile-icon>
210
219
  </slot>
211
220
  </div>
package/dist/src/nile-file-preview/nile-file-preview.template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\">\n <div class=\"preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div class=\"preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\">\n <div class=\"document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\">\n <div class=\"error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\">\n <p class=\"horizontal-file-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div>\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\">\n <p class=\"vertical-file-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}
1
+ {"version":3,"file":"nile-file-preview.template.js","sourceRoot":"","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG5F,MAAM,UAAU,2BAA2B,CAC1C,IAAU,EACV,YAAoB;IAElB,OAAO,IAAI,CAAA;;;;;;8DAM+C,YAAY;;;;qBAIrD,YAAY;;wEAEuC,IAAI,CAAC,IAAI;;uBAE1D,CAAC,CAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;;;;;;;;KAQjF,CAAC;AACJ,CAAC;AAEH,MAAM,UAAU,yBAAyB,CACvC,GAAW,EACX,IAAU,EACV,WAAmB;IAEnB,OAAO,IAAI,CAAA;;;;;;oBAMO,GAAG;oBACH,IAAI,CAAC,IAAI;;;;;wDAK2B,IAAI,CAAC,IAAI;wDACT,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;uBAIpG,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;;GAU1F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B,CACzC,IAAU,EACV,WAAmB;IAEnB,OAAO,IAAI,CAAA;;;;;;;2DAO8C,IAAI,CAAC,IAAI;2DACT,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;uBAIvG,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;;GAU1F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,IAAU,EACV,YAAoB,EACpB,WAAmB,EACnB,eAAgC;IAEhC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChC,OAAO,IAAI,CAAA;;;;;;;mFAOsE,IAAI,CAAC,IAAI;YAEhF,eAAe,CAAC,iBAAiB;QAC/B,CAAC,CAAC,IAAI,CAAA,yBAAyB,YAAY;0BAC/B,YAAY;gCACN;QAClB,CAAC,CAAC,IAAI,CAAA,SAAS,YAAY,SAC/B;;;qBAGW,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC;AAED,kBAAkB;AAClB,MAAM,UAAU,yBAAyB,CACvC,IAAU,EACV,YAAoB;IAEpB,OAAO,IAAI,CAAA;;;;;;;;;0DAS6C,YAAY;;mCAEnC,YAAY;kEACmB,IAAI,CAAC,IAAI;;;qBAGtD,CAAC,CAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;;;;;;;;;GASjF,CAAC;AACJ,CAAC;AAGD,MAAM,UAAU,uBAAuB,CACrC,GAAW,EACX,IAAU,EACV,WAAmB;IAEnB,OAAO,IAAI,CAAA;;;;;;gBAMG,GAAG;gBACH,IAAI,CAAC,IAAI;;;;;oDAK2B,IAAI,CAAC,IAAI;qDACR,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;qBAGnG,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,yBAAyB,CACvC,IAAU,EACV,WAAmB;IAEnB,OAAO,IAAI,CAAA;;;;;;;uDAO0C,IAAI,CAAC,IAAI;uDACT,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;qBAGrG,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,IAAU,EACV,YAAoB,EACpB,WAAmB,EACnB,eAAgC;IAEhC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChC,OAAO,IAAI,CAAA;;;;;;;6EAOgE,IAAI,CAAC,IAAI;UAE5E,eAAe,CAAC,iBAAiB;QAC/B,CAAC,CAAC,IAAI,CAAA,yBAAyB,YAAY;wBAC/B,YAAY;8BACN;QAClB,CAAC,CAAC,IAAI,CAAA,SAAS,YAAY,SAC/B;;;qBAGa,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;;;;;;;;;GASxF,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\" part=\"horizontal-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"horizontal-progress-bar-percent\">\n <p part=\"horizontal-progress-bar-percent-text\">Uploading File...</p>\n <p part=\"horizontal-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\" part=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\" part=\"horizontal-preview-inner\">\n <div class=\"preview-image-container\" part=\"horizontal-preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n part=\"horizontal-preview-image\"\n />\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-preview-file-info\">\n <p part=\"horizontal-preview-file-info-name\">${file.name}</p>\n <p part=\"horizontal-preview-file-info-type\">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div class=\"preview-actions\" part=\"horizontal-preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancel-icon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\" part=\"horizontal-no-preview-container\">\n <div class=\"document-icon\" part=\"horizontal-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\" part=\"horizontal-no-preview-file-info\">\n <p part=\"horizontal-no-preview-file-info-name\">${file.name}</p>\n <p part=\"horizontal-no-preview-file-info-type\">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\" part=\"horizontal-error-container\">\n <div class=\"error-icon\" part=\"horizontal-error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\" part=\"horizontal-error-file-info\">\n <p class=\"horizontal-file-name\" part=\"horizontal-error-file-info-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n part=\"horizontal-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\" part=\"vertical-loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\" part=\"vertical-progress-bar-container\">\n <div class=\"progress-bar-percent\" part=\"vertical-progress-bar-percent\">\n <p part=\"vertical-progress-bar-percent-text\">Uploading...</p>\n <p part=\"vertical-progress-bar-percent-value\">${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\" part=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-uploading-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div part=\"vertical-preview-image-container\">\n <img\n class=\"image-preview\"\n part=\"vertical-preview-image\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\" part=\"vertical-preview-file-info\">\n <p part=\"vertical-preview-file-info-name\">${file.name}</p>\n <p part=\"vertical-preview-file-info-type\">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\" part=\"vertical-no-preview-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\" part=\"vertical-no-preview-file-info\">\n <p part=\"vertical-no-preview-file-info-name\">${file.name}</p>\n <p part=\"vertical-no-preview-file-info-type\">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-no-preview-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\" part=\"vertical-error-document-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\" part=\"vertical-error-file-info\">\n <p class=\"vertical-file-name\" part=\"vertical-error-file-info-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n part=\"vertical-error-actions-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n"]}
package/dist/src/version.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Version utility - placeholders will be replaced during build
2
- export const NILE_ELEMENTS_VERSION = '1.4.8-beta-1.1';
2
+ export const NILE_ELEMENTS_VERSION = '1.4.8-beta-1.2';
3
3
  export const NILE_VERSION = '1.1.7';
4
4
  // Set global versions for runtime access
5
5
  if (typeof window !== 'undefined') {
package/dist/src/version.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.4.8-beta-1.1';\nexport const NILE_VERSION = '1.1.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
1
+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.4.8-beta-1.2';\nexport const NILE_VERSION = '1.1.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}