@aquera/nile-elements 1.8.9 → 1.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/dist/{index-6faafdf4.cjs.js → index-2f006498.cjs.js} +2 -2
- package/dist/index-2f006498.cjs.js.map +1 -0
- package/dist/{index-9931b440.esm.js → index-646474e8.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +545 -519
- package/dist/nile-card/nile-card.css.cjs.js +1 -1
- package/dist/nile-card/nile-card.css.cjs.js.map +1 -1
- package/dist/nile-card/nile-card.css.esm.js +2 -4
- package/dist/nile-combobox/index.cjs.js +1 -1
- package/dist/nile-combobox/index.esm.js +1 -1
- package/dist/nile-combobox/nile-combobox.cjs.js +1 -1
- package/dist/nile-combobox/nile-combobox.esm.js +1 -1
- package/dist/nile-detail/index.cjs.js +1 -1
- package/dist/nile-detail/index.esm.js +1 -1
- package/dist/nile-detail/nile-detail.cjs.js +1 -1
- package/dist/nile-detail/nile-detail.esm.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.esm.js +89 -89
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.template.esm.js +42 -42
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.esm.js +126 -105
- package/dist/nile-grid/nile-grid.css.cjs.js +1 -1
- package/dist/nile-grid/nile-grid.css.cjs.js.map +1 -1
- package/dist/nile-grid/nile-grid.css.esm.js +1 -1
- package/dist/nile-nav-tab/nile-nav-tab.css.cjs.js +1 -1
- package/dist/nile-nav-tab/nile-nav-tab.css.cjs.js.map +1 -1
- package/dist/nile-nav-tab/nile-nav-tab.css.esm.js +4 -0
- package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.esm.js +7 -4
- package/dist/src/nile-card/nile-card.css.js +0 -2
- package/dist/src/nile-card/nile-card.css.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.css.js +87 -87
- package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.template.js +4 -4
- package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.css.js +124 -103
- package/dist/src/nile-file-upload/nile-file-upload.css.js.map +1 -1
- package/dist/src/nile-grid/nile-grid.css.js +1 -1
- package/dist/src/nile-grid/nile-grid.css.js.map +1 -1
- package/dist/src/nile-nav-tab/nile-nav-tab.css.js +4 -0
- package/dist/src/nile-nav-tab/nile-nav-tab.css.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.d.ts +1 -0
- package/dist/src/nile-pagination/nile-pagination.js +9 -2
- package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-card/nile-card.css.ts +0 -2
- package/src/nile-file-preview/nile-file-preview.css.ts +87 -87
- package/src/nile-file-preview/nile-file-preview.template.ts +4 -4
- package/src/nile-file-upload/nile-file-upload.css.ts +124 -103
- package/src/nile-grid/nile-grid.css.ts +1 -1
- package/src/nile-nav-tab/nile-nav-tab.css.ts +4 -0
- package/src/nile-pagination/nile-pagination.ts +6 -2
- package/vscode-html-custom-data.json +6 -1
- package/dist/index-6faafdf4.cjs.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"./nile-file-preview.css.esm.js";import{html as
|
|
1
|
+
import"./nile-file-preview.css.esm.js";import{html as e}from"lit";import{c as i,g as r,f as n,r as o,t as a}from"./utils/nile-file-preview.util.esm.js";import"./types/nile-file-preview.enums.esm.js";function l(r,n,o){return e`
|
|
2
2
|
<div class="uploading" part="horizontal-uploading-state">
|
|
3
3
|
<nile-loader width="24" height="24"></nile-loader>
|
|
4
4
|
<div class="progress-bar-container" part="horizontal-progress-bar-container">
|
|
@@ -12,7 +12,7 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
12
12
|
></nile-progress-bar>
|
|
13
13
|
<p class="horizontal-file-name" part="horizontal-file-name">${r.name}</p>
|
|
14
14
|
</div>
|
|
15
|
-
<slot @click=${i
|
|
15
|
+
<slot @click=${e=>i(r,e,o)} name="cancelIcon">
|
|
16
16
|
<nile-icon
|
|
17
17
|
name="close"
|
|
18
18
|
size="14"
|
|
@@ -20,30 +20,30 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
20
20
|
></nile-icon>
|
|
21
21
|
</slot>
|
|
22
22
|
</div>
|
|
23
|
-
`}function t(
|
|
23
|
+
`}function t(i,a,l,t){return e`
|
|
24
24
|
<div class="preview horizontal-div" part="horizontal-preview-state">
|
|
25
25
|
<div class="preview-inner" part="horizontal-preview-inner">
|
|
26
26
|
<div class="preview-image-container" part="horizontal-preview-image-container">
|
|
27
27
|
<img
|
|
28
28
|
class="image-preview"
|
|
29
|
-
src=${
|
|
30
|
-
alt=${
|
|
29
|
+
src=${i}
|
|
30
|
+
alt=${a.name}
|
|
31
31
|
part="horizontal-preview-image"
|
|
32
32
|
/>
|
|
33
33
|
</div>
|
|
34
34
|
<div class="preview-file-info" part="horizontal-preview-file-info">
|
|
35
35
|
<p part="horizontal-preview-file-info-name">
|
|
36
|
-
<slot name="file-name">${
|
|
36
|
+
<slot name="file-name">${a.name}</slot>
|
|
37
37
|
</p>
|
|
38
38
|
<p part="horizontal-preview-file-info-type">
|
|
39
|
-
<slot name="file-type">${r(
|
|
39
|
+
<slot name="file-type">${r(a,t)}</slot>
|
|
40
40
|
•
|
|
41
|
-
<slot name="file-size">${n(Number(
|
|
41
|
+
<slot name="file-size">${n(Number(a.size))}</slot>
|
|
42
42
|
</p>
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
45
45
|
<div class="preview-actions" part="horizontal-preview-actions">
|
|
46
|
-
<slot @click=${
|
|
46
|
+
<slot @click=${e=>o(a,e,l)} name="cancel-icon">
|
|
47
47
|
<nile-icon
|
|
48
48
|
name="trash"
|
|
49
49
|
size="14"
|
|
@@ -53,25 +53,25 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
53
53
|
</slot>
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
|
-
`}function c(
|
|
56
|
+
`}function c(i,a,l){return e`
|
|
57
57
|
<div class="no-preview horizontal-div" part="horizontal-no-preview-state">
|
|
58
58
|
<div class="no-preview-container" part="horizontal-no-preview-container">
|
|
59
59
|
<div class="document-icon" part="horizontal-no-preview-document-icon">
|
|
60
|
-
<nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
|
|
60
|
+
<nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
|
|
61
61
|
</div>
|
|
62
62
|
<div class="preview-file-info" part="horizontal-no-preview-file-info">
|
|
63
63
|
<p part="horizontal-no-preview-file-info-name">
|
|
64
|
-
<slot name="file-name">${
|
|
64
|
+
<slot name="file-name">${i.name}</slot>
|
|
65
65
|
</p>
|
|
66
66
|
<p part="horizontal-no-preview-file-info-type">
|
|
67
|
-
<slot name="file-type">${r(
|
|
67
|
+
<slot name="file-type">${r(i,l)}</slot>
|
|
68
68
|
•
|
|
69
|
-
<slot name="file-size">${n(Number(
|
|
69
|
+
<slot name="file-size">${n(Number(i.size))}</slot>
|
|
70
70
|
</p>
|
|
71
71
|
</div>
|
|
72
72
|
</div>
|
|
73
73
|
<div>
|
|
74
|
-
<slot @click=${
|
|
74
|
+
<slot @click=${e=>o(i,e,a)} name="cancelIcon">
|
|
75
75
|
<nile-icon
|
|
76
76
|
name="trash"
|
|
77
77
|
size="14"
|
|
@@ -81,24 +81,24 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
81
81
|
</slot>
|
|
82
82
|
</div>
|
|
83
83
|
</div>
|
|
84
|
-
`}function s(
|
|
84
|
+
`}function s(i,r,n,l){return a(l),e`
|
|
85
85
|
<div class="error horizontal-div" part="horizontal-error-state">
|
|
86
86
|
<div class="error-container" part="horizontal-error-container">
|
|
87
87
|
<div class="error-icon" part="horizontal-error-icon">
|
|
88
|
-
<nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
|
|
88
|
+
<nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
|
|
89
89
|
</div>
|
|
90
90
|
<div class="file-info" part="horizontal-error-file-info">
|
|
91
91
|
<p class="horizontal-file-name" part="horizontal-error-file-info-name">
|
|
92
92
|
<slot name="file-name">
|
|
93
|
-
${
|
|
93
|
+
${i.name}
|
|
94
94
|
</slot>
|
|
95
95
|
</p>
|
|
96
|
-
${l.isStringTruncated?
|
|
96
|
+
${l.isStringTruncated?e`<nile-lite-tooltip .content=${r}>
|
|
97
97
|
<span>${r}</span>
|
|
98
|
-
</nile-lite-tooltip>`:
|
|
98
|
+
</nile-lite-tooltip>`:e`<span>${r}</span>`}
|
|
99
99
|
</div>
|
|
100
100
|
</div>
|
|
101
|
-
<slot @click=${
|
|
101
|
+
<slot @click=${e=>o(i,e,n)} name="cancelIcon">
|
|
102
102
|
<nile-icon
|
|
103
103
|
name="close"
|
|
104
104
|
size="14"
|
|
@@ -107,7 +107,7 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
107
107
|
></nile-icon>
|
|
108
108
|
</slot>
|
|
109
109
|
</div>
|
|
110
|
-
`}function p(r,n,
|
|
110
|
+
`}function p(r,n,o){return e`
|
|
111
111
|
<div class="vertical-div vertical-uploading" part="vertical-uploading-state">
|
|
112
112
|
<div class="loading" part="vertical-loading">
|
|
113
113
|
<nile-loader width="24" height="24"></nile-loader>
|
|
@@ -122,7 +122,7 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
122
122
|
<p class="vertical-file-name" part="vertical-file-name">${r.name}</p>
|
|
123
123
|
</div>
|
|
124
124
|
|
|
125
|
-
<slot @click=${i
|
|
125
|
+
<slot @click=${e=>i(r,e,o)} name="cancelIcon">
|
|
126
126
|
<nile-icon
|
|
127
127
|
name="close"
|
|
128
128
|
size="14"
|
|
@@ -131,29 +131,29 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
131
131
|
></nile-icon>
|
|
132
132
|
</slot>
|
|
133
133
|
</div>
|
|
134
|
-
`}function v(
|
|
134
|
+
`}function v(i,a,l,t){return e`
|
|
135
135
|
<div class="vertical-div vertical-preview" part="vertical-preview-state">
|
|
136
136
|
<div part="vertical-preview-image-container">
|
|
137
137
|
<img
|
|
138
138
|
class="image-preview"
|
|
139
139
|
part="vertical-preview-image"
|
|
140
|
-
src=${
|
|
141
|
-
alt=${
|
|
140
|
+
src=${i}
|
|
141
|
+
alt=${a.name}
|
|
142
142
|
/>
|
|
143
143
|
</div>
|
|
144
144
|
|
|
145
145
|
<div class="content-container" part="vertical-preview-file-info">
|
|
146
146
|
<p part="vertical-preview-file-info-name">
|
|
147
|
-
<slot name="file-name">${
|
|
147
|
+
<slot name="file-name">${a.name}</slot>
|
|
148
148
|
</p>
|
|
149
149
|
<p part="vertical-preview-file-info-type">
|
|
150
|
-
<slot name="file-type">${r(
|
|
150
|
+
<slot name="file-type">${r(a,t)}</slot>
|
|
151
151
|
•
|
|
152
|
-
<slot name="file-size">${n(Number(
|
|
152
|
+
<slot name="file-size">${n(Number(a.size))}</slot>
|
|
153
153
|
</p>
|
|
154
154
|
</div>
|
|
155
155
|
|
|
156
|
-
<slot @click=${
|
|
156
|
+
<slot @click=${e=>o(a,e,l)} name="cancelIcon">
|
|
157
157
|
<nile-icon
|
|
158
158
|
name="trash"
|
|
159
159
|
size="14"
|
|
@@ -162,24 +162,24 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
162
162
|
></nile-icon>
|
|
163
163
|
</slot>
|
|
164
164
|
</div>
|
|
165
|
-
`}function d(
|
|
165
|
+
`}function d(i,a,l){return e`
|
|
166
166
|
<div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
|
|
167
167
|
<div class="vertical-document-icon" part="vertical-no-preview-document-icon">
|
|
168
|
-
<nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
|
|
168
|
+
<nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
|
|
169
169
|
</div>
|
|
170
170
|
|
|
171
171
|
<div class="content-container" part="vertical-no-preview-file-info">
|
|
172
172
|
<p part="vertical-no-preview-file-info-name">
|
|
173
|
-
<slot name="file-name">${
|
|
173
|
+
<slot name="file-name">${i.name}</slot>
|
|
174
174
|
</p>
|
|
175
175
|
<p part="vertical-no-preview-file-info-type">
|
|
176
|
-
<slot name="file-type">${r(
|
|
176
|
+
<slot name="file-type">${r(i,l)}</slot>
|
|
177
177
|
•
|
|
178
|
-
<slot name="file-size">${n(Number(
|
|
178
|
+
<slot name="file-size">${n(Number(i.size))}</slot>
|
|
179
179
|
</p>
|
|
180
180
|
</div>
|
|
181
181
|
|
|
182
|
-
<slot @click=${
|
|
182
|
+
<slot @click=${e=>o(i,e,a)} name="cancelIcon">
|
|
183
183
|
<nile-icon
|
|
184
184
|
name="trash"
|
|
185
185
|
size="14"
|
|
@@ -188,22 +188,22 @@ import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,
|
|
|
188
188
|
></nile-icon>
|
|
189
189
|
</slot>
|
|
190
190
|
</div>
|
|
191
|
-
`}function m(
|
|
191
|
+
`}function m(i,r,n,l){return a(l),e`
|
|
192
192
|
<div class="vertical-div vertical-error" part="vertical-error-state">
|
|
193
193
|
<div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
|
|
194
|
-
<nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
|
|
194
|
+
<nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
|
|
195
195
|
</div>
|
|
196
196
|
|
|
197
197
|
<div class="file-info-vertical-state" part="vertical-error-file-info">
|
|
198
198
|
<p class="vertical-file-name" part="vertical-error-file-info-name">
|
|
199
|
-
<slot name="file-name">${
|
|
199
|
+
<slot name="file-name">${i.name}</slot>
|
|
200
200
|
</p>
|
|
201
|
-
${l.isStringTruncated?
|
|
201
|
+
${l.isStringTruncated?e`<nile-lite-tooltip .content=${r}>
|
|
202
202
|
<span>${r}</span>
|
|
203
|
-
</nile-lite-tooltip>`:
|
|
203
|
+
</nile-lite-tooltip>`:e`<span>${r}</span>`}
|
|
204
204
|
</div>
|
|
205
205
|
|
|
206
|
-
<slot @click=${
|
|
206
|
+
<slot @click=${e=>o(i,e,n)} name="cancelIcon">
|
|
207
207
|
<nile-icon
|
|
208
208
|
name="close"
|
|
209
209
|
size="14"
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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 width: 100%;\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: 100%;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n\n @media (width < 400px) {\n .browse-file-button {\n display: none;\n }\n\n .horizontal-div {\n cursor: pointer;\n }\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 }\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 margin-top: 10px;\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 margin-top: 10px;\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"]))));}};});
|
|
1
|
+
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 width: 100%;\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: 100%;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n @media (width < 400px) {\n .browse-file-button {\n display: none;\n }\n\n .horizontal-div {\n cursor: pointer;\n }\n }\n\n .hover-border {\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n }\n\n .title {\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-primary-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, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\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, var(--ng-radius-xs));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n position: relative;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\n }\n\n .outer-div-border {\n border: 1px 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: 0px;\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-primary-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, var(--ng-font-size-text-xs));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-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 nile-button::part(base) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n }\n\n nile-button:active::part(base) {\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));\n }\n\n nile-button[disabled]::part(base) {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n /* DISABLED STATE */\n .disable {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n opacity: 0.8;\n cursor: not-allowed;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* DRAGGING */\n .dragging {\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\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-text-brand-secondary-700));\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: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n }\n\n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid 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: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px solid 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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-colors-border-primary));\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-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, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-colors-border-primary));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-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, var(--ng-colors-border-error-subtle));\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .file-info p:last-of-type{\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, 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-primary-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, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\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, var(--ng-font-size-text-sm));\n color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\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, var(--ng-colors-border-primary));\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-border-primary));\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\n border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: start;\n }\n\n .error-p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\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, var(--ng-colors-border-neutral));\n border-radius: var(--nile-radius-radius-xs, var(--ng-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, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x, var(--ng-spacing-xxs));\n margin-top: 10px;\n }\n\n .upload-error > nile-tooltip > span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\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 align-items: center;\n gap: 4px;\n margin-top: 10px;\n }\n\n .vertical-upload-error nile-tooltip span, .vertical-upload-error span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\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, var(--ng-font-size-text-xs));\n display: inline-block;\n }\n\n .upload-error nile-lite-tooltip,\n .vertical-upload-error nile-lite-tooltip {\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n line-height: 1;\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-file-upload.css.cjs.js.map
|
|
@@ -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 width: 100%;\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: 100%;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n\n @media (width < 400px) {\n .browse-file-button {\n display: none;\n }\n\n .horizontal-div {\n cursor: pointer;\n }\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 }\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 margin-top: 10px;\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 margin-top: 10px;\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"}
|
|
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 width: 100%;\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: 100%;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n height: 62px;\n width: 100%;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 18px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n @media (width < 400px) {\n .browse-file-button {\n display: none;\n }\n\n .horizontal-div {\n cursor: pointer;\n }\n }\n\n .hover-border {\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n }\n\n .title {\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-primary-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, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\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, var(--ng-radius-xs));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n position: relative;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\n }\n\n .outer-div-border {\n border: 1px 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: 0px;\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-primary-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, var(--ng-font-size-text-xs));\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-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 nile-button::part(base) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n }\n\n nile-button:active::part(base) {\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));\n }\n\n nile-button[disabled]::part(base) {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n /* DISABLED STATE */\n .disable {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));\n opacity: 0.8;\n cursor: not-allowed;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* DRAGGING */\n .dragging {\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\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-text-brand-secondary-700));\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: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n }\n\n .uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid 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: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: 1px solid 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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-colors-border-primary));\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-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, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, var(--ng-colors-border-primary));\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-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, var(--ng-colors-border-error-subtle));\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .file-info p:last-of-type{\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-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, 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-primary-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, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\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, var(--ng-font-size-text-sm));\n color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));\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, var(--ng-colors-border-primary));\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-border-primary));\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-radius-xs));\n border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));\n background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));\n border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));\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, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-align: start;\n }\n\n .error-p {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\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, var(--ng-colors-border-neutral));\n border-radius: var(--nile-radius-radius-xs, var(--ng-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, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: var(--nile-spacing-one-half-x, var(--ng-spacing-xxs));\n margin-top: 10px;\n }\n\n .upload-error > nile-tooltip > span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\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 align-items: center;\n gap: 4px;\n margin-top: 10px;\n }\n\n .vertical-upload-error nile-tooltip span, .vertical-upload-error span {\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\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, var(--ng-font-size-text-xs));\n display: inline-block;\n }\n\n .upload-error nile-lite-tooltip,\n .vertical-upload-error nile-lite-tooltip {\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n line-height: 1;\n }\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|