@aquera/nile-elements 0.1.33-beta-1.1 → 0.1.34-beta-1.0
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 +4 -0
- package/demo/index.css +7 -4
- package/demo/index.html +20 -271
- package/dist/nile-error-message/nile-error-message.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.css.esm.js +6 -4
- package/dist/nile-error-message/nile-error-message.esm.js +4 -4
- package/dist/nile-error-notification/nile-error-notification.css.cjs.js +1 -1
- package/dist/nile-error-notification/nile-error-notification.css.cjs.js.map +1 -1
- package/dist/nile-error-notification/nile-error-notification.css.esm.js +1 -1
- package/dist/src/nile-error-message/nile-error-message.css.js +6 -4
- package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
- package/dist/src/nile-error-message/nile-error-message.d.ts +4 -0
- package/dist/src/nile-error-message/nile-error-message.js +20 -0
- package/dist/src/nile-error-message/nile-error-message.js.map +1 -1
- package/dist/src/nile-error-notification/nile-error-notification.css.js +1 -1
- package/dist/src/nile-error-notification/nile-error-notification.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/nile-error-message/nile-error-message.css.ts +6 -4
- package/src/nile-error-message/nile-error-message.ts +18 -0
- package/src/nile-error-notification/nile-error-notification.css.ts +1 -1
- package/vscode-html-custom-data.json +13 -1
package/README.md
CHANGED
|
@@ -79,6 +79,10 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
|
|
83
|
+
#### Version 0.1.34-beta-1.0
|
|
84
|
+
- Nile Error Message: Ux updated & maxHeight, maxWidth properties added
|
|
85
|
+
|
|
82
86
|
#### Version 0.1.33-beta-1.1
|
|
83
87
|
- Nile Menu: Property added allowSpaceKey
|
|
84
88
|
|
package/demo/index.css
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
body {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
font-family: var(--nile-font-family-sans-serif);
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
display: flex;
|
|
6
|
+
height: 100vh;
|
|
5
7
|
}
|
|
8
|
+
|
|
6
9
|
#demo {
|
|
7
10
|
max-width: 40ch;
|
|
8
11
|
padding: 48px;
|
|
@@ -115,4 +118,4 @@ nile-drawer {
|
|
|
115
118
|
|
|
116
119
|
.body {
|
|
117
120
|
display: flex;
|
|
118
|
-
}
|
|
121
|
+
}
|
package/demo/index.html
CHANGED
|
@@ -1,274 +1,23 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
width: 300px;
|
|
24
|
-
height: 100px;
|
|
25
|
-
border: 1px solid #ccc;
|
|
26
|
-
padding: 20px;
|
|
27
|
-
position: relative;
|
|
28
|
-
}
|
|
29
|
-
</style>
|
|
30
|
-
</head>
|
|
31
|
-
<body>
|
|
32
|
-
<h1>Nile Tooltip Component Demo</h1>
|
|
33
|
-
|
|
34
|
-
<!-- Default tooltip (hover and focus trigger) -->
|
|
35
|
-
<div class="demo">
|
|
36
|
-
<nile-tooltip placement="bottom" >
|
|
37
|
-
<!-- The trigger element -->
|
|
38
|
-
<button>Hover me!</button>
|
|
39
|
-
<!-- The tooltip content (passed through a named slot) -->
|
|
40
|
-
<div slot="content">
|
|
41
|
-
<strong>Custom Tooltip:</strong> You can put any HTML here!
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
</div>
|
|
45
|
-
</nile-tooltip>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
<!-- Large tooltip -->
|
|
49
|
-
<div class="demo">
|
|
50
|
-
<h2>Large Tooltip</h2>
|
|
51
|
-
<nile-tooltip content=" " placement="tops-birat">
|
|
52
|
-
<button>Hover over me</button>
|
|
53
|
-
</nile-tooltip>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<!-- Tooltip with bottom-start placement -->
|
|
57
|
-
<div class="demo">
|
|
58
|
-
<h2>Bottom-Start Placement</h2>
|
|
59
|
-
<nile-tooltip content="Tooltip at bottom-start does it work even lets check
|
|
60
|
-
|
|
61
|
-
freestar
|
|
62
|
-
|
|
63
|
-
What is Lorem Ipsum?
|
|
64
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
65
|
-
|
|
66
|
-
Why do we use it?
|
|
67
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
|
|
68
|
-
|
|
69
|
-
" placement="bottom" max-width="400px" max-height="250px" >
|
|
70
|
-
<button>Hover over me</button>
|
|
71
|
-
</nile-tooltip>
|
|
72
|
-
</div>
|
|
73
|
-
|
|
74
|
-
<div style="padding: 150px;">
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<div class="demo">
|
|
78
|
-
<h2>Top Placement</h2>
|
|
79
|
-
<nile-tooltip content="Tooltip at top What is Lorem Ipsum?
|
|
80
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
81
|
-
|
|
82
|
-
Why do we use it?
|
|
83
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="top">
|
|
84
|
-
<button>Hover over me</button>
|
|
85
|
-
</nile-tooltip>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
<div class="demo">
|
|
89
|
-
<h2>Top-Start Placement</h2>
|
|
90
|
-
<nile-tooltip content="Tooltip at top-start does it work even lets check What is Lorem Ipsum?
|
|
91
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
92
|
-
|
|
93
|
-
Why do we use it?
|
|
94
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="top-start">
|
|
95
|
-
<button>Hover over me</button>
|
|
96
|
-
</nile-tooltip>
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
<div class="demo">
|
|
100
|
-
<h2>Top-End Placement</h2>
|
|
101
|
-
<nile-tooltip content="Tooltip at top-end does it work even lets chec What is Lorem Ipsum?
|
|
102
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
103
|
-
|
|
104
|
-
Why do we use it?
|
|
105
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point ok" placement="top-end">
|
|
106
|
-
<button>Hover over me</button>
|
|
107
|
-
</nile-tooltip>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<div class="demo">
|
|
111
|
-
<h2>Right Placement</h2>
|
|
112
|
-
<nile-tooltip content="Tooltip at right What is Lorem Ipsum?
|
|
113
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
114
|
-
|
|
115
|
-
Why do we use it?
|
|
116
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="right">
|
|
117
|
-
<button>Hover over me</button>
|
|
118
|
-
</nile-tooltip>
|
|
119
|
-
</div>
|
|
120
|
-
|
|
121
|
-
<div class="demo">
|
|
122
|
-
<h2>Right-Start Placement</h2>
|
|
123
|
-
<nile-tooltip content="Tooltip at right-start does it work even lets check What is Lorem Ipsum?
|
|
124
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
125
|
-
|
|
126
|
-
Why do we use it?
|
|
127
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="right-start">
|
|
128
|
-
<button>Hover over me</button>
|
|
129
|
-
</nile-tooltip>
|
|
130
|
-
</div>
|
|
131
|
-
|
|
132
|
-
<div class="demo">
|
|
133
|
-
<h2>Right-End Placement</h2>
|
|
134
|
-
<nile-tooltip content="Tooltip at right-end does it work even lets check What is Lorem Ipsum?
|
|
135
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
136
|
-
|
|
137
|
-
Why do we use it?
|
|
138
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o" placement="right-end">
|
|
139
|
-
<button>Hover over me</button>
|
|
140
|
-
</nile-tooltip>
|
|
141
|
-
</div>
|
|
142
|
-
|
|
143
|
-
<div class="demo">
|
|
144
|
-
<h2>Bottom Placement</h2>
|
|
145
|
-
<nile-tooltip content="Tooltip at bottom What is Lorem Ipsum?
|
|
146
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
147
|
-
|
|
148
|
-
Why do we use it?
|
|
149
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point o " placement="bottom">
|
|
150
|
-
<button>Hover over me</button>
|
|
151
|
-
</nile-tooltip>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<div class="demo">
|
|
155
|
-
<h2>Bottom-Start Placement</h2>
|
|
156
|
-
<nile-tooltip content="Tooltip at bottom-start What is Lorem Ipsum?
|
|
157
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
158
|
-
|
|
159
|
-
Why do we use it?
|
|
160
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point odoes it work even lets check" placement="bottom-start">
|
|
161
|
-
<button>Hover over me</button>
|
|
162
|
-
</nile-tooltip>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
<div class="demo">
|
|
166
|
-
<h2>Bottom-End Placement</h2>
|
|
167
|
-
<nile-tooltip content="Tooltip at bottom-end does i What is Lorem Ipsum?
|
|
168
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
169
|
-
|
|
170
|
-
Why do we use it?
|
|
171
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point ot work even lets check" placement="bottom-end">
|
|
172
|
-
<button>Hover over me</button>
|
|
173
|
-
</nile-tooltip>
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
<div class="demo">
|
|
177
|
-
<h2>Left Placement</h2>
|
|
178
|
-
<nile-tooltip content="Tooltip at
|
|
179
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum h" placement="left">
|
|
180
|
-
<button>Hover over me</button>
|
|
181
|
-
</nile-tooltip>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<div class="demo">
|
|
185
|
-
<h2>Left-Start Placement</h2>
|
|
186
|
-
<nile-tooltip content="Tooltip at left-start doe What is Lorem Ipsum?
|
|
187
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
188
|
-
|
|
189
|
-
Why do we use it?
|
|
190
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point os it work even lets check" placement="left-start">
|
|
191
|
-
<button>Hover over me</button>
|
|
192
|
-
</nile-tooltip>
|
|
193
|
-
</div>
|
|
194
|
-
|
|
195
|
-
<div class="demo">
|
|
196
|
-
<h2>Left-End Placement</h2>
|
|
197
|
-
<nile-tooltip content=" Tooltip at bottom-start does it work even lets check
|
|
198
|
-
|
|
199
|
-
freestar
|
|
200
|
-
|
|
201
|
-
What is Lorem Ipsum?
|
|
202
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
203
|
-
|
|
204
|
-
Why do we use it?
|
|
205
|
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
|
|
206
|
-
" placement="left-end">
|
|
207
|
-
<button>Hover over me</button>
|
|
208
|
-
</nile-tooltip>
|
|
209
|
-
</div>
|
|
210
|
-
</div>
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
<!-- Tooltip with right-end placement and skidding -->
|
|
214
|
-
<div class="demo">
|
|
215
|
-
<h2>Right-End Placement with Skidding</h2>
|
|
216
|
-
<nile-tooltip content="Tooltip right-end with skidding" placement="right-end" skidding="80">
|
|
217
|
-
<button>Hover over me</button>
|
|
218
|
-
</nile-tooltip>
|
|
219
|
-
</div>
|
|
220
|
-
|
|
221
|
-
<!-- Tooltip with increased distance -->
|
|
222
|
-
<div class="demo">
|
|
223
|
-
<h2>Increased Distance (20px)</h2>
|
|
224
|
-
<nile-tooltip content="Tooltip with 20px distance" distance="20">
|
|
225
|
-
<button>Hover over me</button>
|
|
226
|
-
</nile-tooltip>
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
<!-- Tooltip triggered by click -->
|
|
230
|
-
<div class="demo">
|
|
231
|
-
<h2>Click Trigger</h2>
|
|
232
|
-
<nile-tooltip content="Tooltip triggered by click" placement="left" trigger="click">
|
|
233
|
-
<nile-button>Click me</nile-button>
|
|
234
|
-
</nile-tooltip>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<!-- Tooltip that is open by default -->
|
|
238
|
-
<div class="demo">
|
|
239
|
-
<h2>Open by Default</h2>
|
|
240
|
-
<nile-tooltip content="Tooltip open by default of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." open>
|
|
241
|
-
<button>Tooltip is open</button>
|
|
242
|
-
</nile-tooltip>
|
|
243
|
-
</div>
|
|
244
|
-
|
|
245
|
-
<!-- Disabled tooltip (should not show) -->
|
|
246
|
-
<div class="demo">
|
|
247
|
-
<h2>Disabled Tooltip</h2>
|
|
248
|
-
<nile-tooltip content="This tooltip should not appear " disabled>
|
|
249
|
-
<button>Hover over me (disabled)</button>
|
|
250
|
-
</nile-tooltip>
|
|
251
|
-
</div>
|
|
252
|
-
|
|
253
|
-
<!-- Hoisted tooltip inside an overflow container -->
|
|
254
|
-
<div class="demo">
|
|
255
|
-
<h2>Hoisted Tooltip (within overflow container)</h2>
|
|
256
|
-
<div class="overflow-container">
|
|
257
|
-
<nile-tooltip content="This tooltip is hoisted" placement="top" hoist>
|
|
258
|
-
<button>Hover over me</button>
|
|
259
|
-
</nile-tooltip>
|
|
260
|
-
</div>
|
|
261
|
-
</div>
|
|
262
|
-
<div class="test-container">
|
|
263
|
-
<h2> Tooltip with Slot</h2>
|
|
264
|
-
<nile-tooltip content="Skidded tooltip" placement="bottom">
|
|
265
|
-
<div slot="content">
|
|
266
|
-
<h1> Hi</h1>
|
|
267
|
-
</div>
|
|
268
|
-
<button>Hover me</button>
|
|
269
|
-
</nile-tooltip>
|
|
270
|
-
</div>
|
|
271
|
-
|
|
272
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="stylesheet" href="variables.css" id="stylesheet" />
|
|
6
|
+
<link rel="stylesheet" href="index.css" />
|
|
7
|
+
<script type="module" src="index.js"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<nile-error-message
|
|
11
|
+
errorMessage="Storage Limit Exceeded"
|
|
12
|
+
errorResponse="Insufficient storage, The server is unable to store the representation needed to complete the request."
|
|
13
|
+
>
|
|
14
|
+
</nile-error-message>
|
|
15
|
+
|
|
16
|
+
<nile-error-message
|
|
17
|
+
errorMessage="Storage Limit Exceeded"
|
|
18
|
+
errorResponse="Insufficient storage, The server is unable to store the representation needed to complete the request."
|
|
19
|
+
errorResponseLong="The server is currently unable to store the data required to process your request due to limited storage capacity. This usually happens when the system's allocated space is fully utilized or exceeds its maximum storage limit. We recommend checking the data size or trying again later after freeing up some space. If the problem persists, please contact our support team for further assistance."
|
|
20
|
+
>
|
|
21
|
+
</nile-error-message>
|
|
22
|
+
</body>
|
|
273
23
|
</html>
|
|
274
|
-
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-error-message.css.cjs.js"],function(_export,_context){"use strict";var e,s,r,
|
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-error-message.css.cjs.js"],function(_export,_context){"use strict";var e,s,i,r,t,o,_templateObject,_templateObject2,_templateObject3,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){s=_lit.LitElement;i=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;t=_litDecoratorsJs.customElement;},function(_nileErrorMessageCssCjsJs){o=_nileErrorMessageCssCjsJs.s;}],execute:function execute(){_export("N",n=/*#__PURE__*/function(_s){function n(){var _this;_classCallCheck(this,n);_this=_callSuper(this,n,arguments),_this.errorMessage="",_this.isExpanded=!1,_this.MAX_LENGTH=100;return _this;}_inherits(n,_s);return _createClass(n,[{key:"getTruncatedResponse",value:function getTruncatedResponse(){return this.errorResponse.length>this.MAX_LENGTH?"".concat(this.errorResponse.substring(0,this.MAX_LENGTH),"..."):this.errorResponse;}},{key:"updated",value:function updated(e){e.has("maxWidth")&&this.style.setProperty("--nile-error-max-width",this.maxWidth),e.has("maxHeight")&&this.style.setProperty("--nile-error-max-height",this.maxHeight),e.has("maxDialogHeight")&&this.style.setProperty("--nile-error-max-dialog-height",this.maxDialogHeight);}},{key:"toggleExpanded",value:function toggleExpanded(){this.isExpanded=!this.isExpanded;}},{key:"render",value:function render(){var e=this.isExpanded?"arrowup":"arrowdown";return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"var(--nile-colors-red-700)\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">","</span>\n\n\n ","\n\n <div\n class=\"nile-error-message__response-expanded ","\"\n >\n ","\n </div>\n </div>\n "])),this.errorMessage,this.errorResponse?i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <div class=\"nile-error-message__response\">\n ","\n ","\n </div>\n "])),this.errorResponse,this.errorResponseLong?i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <span\n class=\"nile-error-message__more-button\"\n @click=","\n >","\n <nile-icon color=\"var(--nile-colors-primary-600)\" part=\"icon\" size=\"14\" name=\"","\"></nile-icon>\n </span\n > "])),this.toggleExpanded,this.isExpanded?"View Less":"View More",e):""):"",this.isExpanded?"expanded":"collapsed",this.errorResponseLong);}}],[{key:"styles",get:function get(){return[o];}}]);}(s));e([r({type:String})],n.prototype,"errorMessage",void 0),e([r({type:String})],n.prototype,"errorResponse",void 0),e([r({type:String})],n.prototype,"errorResponseLong",void 0),e([r({type:Boolean})],n.prototype,"isExpanded",void 0),e([r({type:String})],n.prototype,"maxWidth",void 0),e([r({type:String})],n.prototype,"maxHeight",void 0),e([r({type:String})],n.prototype,"maxDialogHeight",void 0),_export("N",n=e([t("nile-error-message")],n));}};});
|
|
2
2
|
//# sourceMappingURL=nile-error-message.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-error-message.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.ts"],"sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n // Extended error information\n @property({ type: String })\n errorResponseLong: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /**\n * Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n */\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n /**\n * Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"var(--nile-colors-red-700)\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html`\n <div class=\"nile-error-message__response\">\n ${this.errorResponse}\n ${this.errorResponseLong\n ? html`\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"var(--nile-colors-primary-600)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span\n > `:``}\n </div>\n `\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponseLong}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"],"names":["NileErrorMessage","
|
|
1
|
+
{"version":3,"file":"nile-error-message.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.ts"],"sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n // Extended error information\n @property({ type: String })\n errorResponseLong: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n @property({ type: String }) maxWidth: string;\n\n @property({ type: String }) maxHeight: string;\n\n @property({ type: String }) maxDialogHeight: string;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /**\n * Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n */\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('maxWidth')) {\n this.style.setProperty('--nile-error-max-width', this.maxWidth);\n }\n if (changedProperties.has('maxHeight')) {\n this.style.setProperty('--nile-error-max-height', this.maxHeight);\n }\n if (changedProperties.has('maxDialogHeight')) {\n this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);\n }\n }\n\n /**\n * Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"var(--nile-colors-red-700)\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html`\n <div class=\"nile-error-message__response\">\n ${this.errorResponse}\n ${this.errorResponseLong\n ? html`\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"var(--nile-colors-primary-600)\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span\n > `:``}\n </div>\n `\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponseLong}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"],"names":["NileErrorMessage","n","this","errorMessage","isExpanded","MAX_LENGTH","_this","_inherits","_s","_createClass","key","value","getTruncatedResponse","errorResponse","length","concat","substring","updated","changedProperties","has","style","setProperty","maxWidth","maxHeight","maxDialogHeight","toggleExpanded","render","iconName","html","_templateObject","_taggedTemplateLiteral","_templateObject2","errorResponseLong","_templateObject3","get","styles","LitElement","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"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"}
|
|
@@ -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 }\n\n .nile-error-message {\n width: 100%;\n
|
|
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 }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n max-width: var(--nile-error-max-width, 535px);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n margin-top:6px;\n line-height: 16px;\n max-height: var(--nile-error-max-height, 48px);\n overflow-x: auto;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:2px;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: 4px;\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: 18px;\n height: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 8px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n }\n\n .nile-error-message__response-expanded {\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 12px;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: var(--nile-error-max-dialog-height, 48px);\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: 8px;\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-error-message.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-error-message.css.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.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 * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n
|
|
1
|
+
{"version":3,"file":"nile-error-message.css.cjs.js","sources":["../../../src/nile-error-message/nile-error-message.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 * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n max-width: var(--nile-error-max-width, 535px);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n margin-top:6px;\n line-height: 16px;\n max-height: var(--nile-error-max-height, 48px);\n overflow-x: auto;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:2px;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: 4px;\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: 18px;\n height: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 8px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n }\n\n .nile-error-message__response-expanded {\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 12px;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: var(--nile-error-max-dialog-height, 48px);\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: 8px;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -4,11 +4,11 @@ import{css as e}from"lit";const r=e`
|
|
|
4
4
|
|
|
5
5
|
.nile-error-message {
|
|
6
6
|
width: 100%;
|
|
7
|
-
word-break: break-all;
|
|
8
7
|
font-size: var(--nile-font-size-small);
|
|
9
8
|
letter-spacing: 0.2px;
|
|
10
9
|
font-weight: var(--nile-font-weight-regular);
|
|
11
10
|
line-height: var(--nile-font-size-small);
|
|
11
|
+
max-width: var(--nile-error-max-width, 535px);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.nile-error-message__error {
|
|
@@ -20,6 +20,8 @@ import{css as e}from"lit";const r=e`
|
|
|
20
20
|
color: var(--nile-colors-dark-500);
|
|
21
21
|
margin-top:6px;
|
|
22
22
|
line-height: 16px;
|
|
23
|
+
max-height: var(--nile-error-max-height, 48px);
|
|
24
|
+
overflow-x: auto;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
.nile-error-message__icon {
|
|
@@ -42,7 +44,7 @@ import{css as e}from"lit";const r=e`
|
|
|
42
44
|
border: 1px solid var(--nile-colors-red-500);
|
|
43
45
|
border-left: 6px solid var(--nile-colors-red-500);
|
|
44
46
|
border-radius: 4px;
|
|
45
|
-
margin-top:
|
|
47
|
+
margin-top: 8px;
|
|
46
48
|
padding: 12px;
|
|
47
49
|
background: var(--nile-colors-neutral-100);
|
|
48
50
|
}
|
|
@@ -69,9 +71,9 @@ import{css as e}from"lit";const r=e`
|
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
.nile-error-message__response-expanded.expanded {
|
|
72
|
-
max-height:
|
|
74
|
+
max-height: var(--nile-error-max-dialog-height, 48px);
|
|
73
75
|
transition: max-height 0.3s ease-in-out;
|
|
74
76
|
visibility: visible;
|
|
75
|
-
padding:
|
|
77
|
+
padding: 8px;
|
|
76
78
|
}
|
|
77
79
|
`;export{r as s};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"tslib";import{LitElement as s,html as
|
|
1
|
+
import{__decorate as e}from"tslib";import{LitElement as s,html as i}from"lit";import{property as r,customElement as t}from"lit/decorators.js";import{s as o}from"./nile-error-message.css.esm.js";let n=class extends s{constructor(){super(...arguments),this.errorMessage="",this.isExpanded=!1,this.MAX_LENGTH=100}static get styles(){return[o]}getTruncatedResponse(){return this.errorResponse.length>this.MAX_LENGTH?`${this.errorResponse.substring(0,this.MAX_LENGTH)}...`:this.errorResponse}updated(e){e.has("maxWidth")&&this.style.setProperty("--nile-error-max-width",this.maxWidth),e.has("maxHeight")&&this.style.setProperty("--nile-error-max-height",this.maxHeight),e.has("maxDialogHeight")&&this.style.setProperty("--nile-error-max-dialog-height",this.maxDialogHeight)}toggleExpanded(){this.isExpanded=!this.isExpanded}render(){const e=this.isExpanded?"arrowup":"arrowdown";return i`
|
|
2
2
|
<div class="nile-error-message" part="base">
|
|
3
3
|
<nile-icon
|
|
4
4
|
name="info2"
|
|
@@ -10,10 +10,10 @@ import{__decorate as e}from"tslib";import{LitElement as s,html as r}from"lit";im
|
|
|
10
10
|
<span class="nile-error-message__error">${this.errorMessage}</span>
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
${this.errorResponse?
|
|
13
|
+
${this.errorResponse?i`
|
|
14
14
|
<div class="nile-error-message__response">
|
|
15
15
|
${this.errorResponse}
|
|
16
|
-
${this.errorResponseLong?
|
|
16
|
+
${this.errorResponseLong?i`
|
|
17
17
|
<span
|
|
18
18
|
class="nile-error-message__more-button"
|
|
19
19
|
@click=${this.toggleExpanded}
|
|
@@ -30,4 +30,4 @@ import{__decorate as e}from"tslib";import{LitElement as s,html as r}from"lit";im
|
|
|
30
30
|
${this.errorResponseLong}
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
|
-
`}};e([
|
|
33
|
+
`}};e([r({type:String})],n.prototype,"errorMessage",void 0),e([r({type:String})],n.prototype,"errorResponse",void 0),e([r({type:String})],n.prototype,"errorResponseLong",void 0),e([r({type:Boolean})],n.prototype,"isExpanded",void 0),e([r({type:String})],n.prototype,"maxWidth",void 0),e([r({type:String})],n.prototype,"maxHeight",void 0),e([r({type:String})],n.prototype,"maxDialogHeight",void 0),n=e([t("nile-error-message")],n);export{n as N};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",o=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n --indication-color: var(--nile-colors-red-
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",o=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n --indication-color: var(--nile-colors-red-700);\n }\n\n .nile-error-notification {\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n border: 1px solid var(--indication-color);\n border-left: 6px solid var(--indication-color);\n border-radius: 4px;\n padding: 8px;\n background: var(--nile-colors-neutral-100);\n color: var(--indication-color);\n box-sizing: border-box;\n }\n\n .nile-error-notification__icon {\n vertical-align: middle;\n margin-right: 4px;\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-error-notification.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-error-notification.css.cjs.js","sources":["../../../src/nile-error-notification/nile-error-notification.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 * ErrorNotification CSS\n */\nexport const styles = css`\n :host {\n --indication-color: var(--nile-colors-red-
|
|
1
|
+
{"version":3,"file":"nile-error-notification.css.cjs.js","sources":["../../../src/nile-error-notification/nile-error-notification.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 * ErrorNotification CSS\n */\nexport const styles = css`\n :host {\n --indication-color: var(--nile-colors-red-700);\n }\n\n .nile-error-notification {\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n border: 1px solid var(--indication-color);\n border-left: 6px solid var(--indication-color);\n border-radius: 4px;\n padding: 8px;\n background: var(--nile-colors-neutral-100);\n color: var(--indication-color);\n box-sizing: border-box;\n }\n\n .nile-error-notification__icon {\n vertical-align: middle;\n margin-right: 4px;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -14,11 +14,11 @@ export const styles = css `
|
|
|
14
14
|
|
|
15
15
|
.nile-error-message {
|
|
16
16
|
width: 100%;
|
|
17
|
-
word-break: break-all;
|
|
18
17
|
font-size: var(--nile-font-size-small);
|
|
19
18
|
letter-spacing: 0.2px;
|
|
20
19
|
font-weight: var(--nile-font-weight-regular);
|
|
21
20
|
line-height: var(--nile-font-size-small);
|
|
21
|
+
max-width: var(--nile-error-max-width, 535px);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.nile-error-message__error {
|
|
@@ -30,6 +30,8 @@ export const styles = css `
|
|
|
30
30
|
color: var(--nile-colors-dark-500);
|
|
31
31
|
margin-top:6px;
|
|
32
32
|
line-height: 16px;
|
|
33
|
+
max-height: var(--nile-error-max-height, 48px);
|
|
34
|
+
overflow-x: auto;
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
.nile-error-message__icon {
|
|
@@ -52,7 +54,7 @@ export const styles = css `
|
|
|
52
54
|
border: 1px solid var(--nile-colors-red-500);
|
|
53
55
|
border-left: 6px solid var(--nile-colors-red-500);
|
|
54
56
|
border-radius: 4px;
|
|
55
|
-
margin-top:
|
|
57
|
+
margin-top: 8px;
|
|
56
58
|
padding: 12px;
|
|
57
59
|
background: var(--nile-colors-neutral-100);
|
|
58
60
|
}
|
|
@@ -79,10 +81,10 @@ export const styles = css `
|
|
|
79
81
|
}
|
|
80
82
|
|
|
81
83
|
.nile-error-message__response-expanded.expanded {
|
|
82
|
-
max-height:
|
|
84
|
+
max-height: var(--nile-error-max-dialog-height, 48px);
|
|
83
85
|
transition: max-height 0.3s ease-in-out;
|
|
84
86
|
visibility: visible;
|
|
85
|
-
padding:
|
|
87
|
+
padding: 8px;
|
|
86
88
|
}
|
|
87
89
|
`;
|
|
88
90
|
export default [styles];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n max-width: var(--nile-error-max-width, 535px);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-700);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n margin-top:6px;\n line-height: 16px;\n max-height: var(--nile-error-max-height, 48px);\n overflow-x: auto;\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:2px;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n display: inline-flex;\n gap: 4px;\n align-items: center\n }\n\n .nile-error-message__response-expanded {\n line-height: 18px;\n height: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 8px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n }\n\n .nile-error-message__response-expanded {\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 12px;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: var(--nile-error-max-dialog-height, 48px);\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: 8px;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -9,12 +9,16 @@ export declare class NileErrorMessage extends LitElement {
|
|
|
9
9
|
errorResponse: string;
|
|
10
10
|
errorResponseLong: string;
|
|
11
11
|
isExpanded: boolean;
|
|
12
|
+
maxWidth: string;
|
|
13
|
+
maxHeight: string;
|
|
14
|
+
maxDialogHeight: string;
|
|
12
15
|
private readonly MAX_LENGTH;
|
|
13
16
|
/**
|
|
14
17
|
* Get a truncated version of the errorResponse if it's too long.
|
|
15
18
|
* @returns {string}
|
|
16
19
|
*/
|
|
17
20
|
getTruncatedResponse(): string;
|
|
21
|
+
updated(changedProperties: Map<string, any>): void;
|
|
18
22
|
/**
|
|
19
23
|
* Toggle the expanded state of the error response.
|
|
20
24
|
*/
|