@saasira/holi 0.1.3
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/CHANGELOG.md +33 -0
- package/README.md +173 -0
- package/dist/holi.css +3255 -0
- package/dist/holi.html +822 -0
- package/dist/holi.js +2 -0
- package/dist/holi.js.LICENSE.txt +1 -0
- package/package.json +36 -0
package/dist/holi.html
ADDED
|
@@ -0,0 +1,822 @@
|
|
|
1
|
+
<!-- Holi Template Library v1.0.0 -->
|
|
2
|
+
|
|
3
|
+
<!-- Template: wizard.html src/templates/components/wizard.html -->
|
|
4
|
+
<template id="wizard">
|
|
5
|
+
<section class="wizard" role="form">
|
|
6
|
+
<!-- Progress bar -->
|
|
7
|
+
<div class="wizard-progress-bar">
|
|
8
|
+
<div class="wizard-progress" role="progressbar" aria-valuemin="0"></div>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<!-- Step navigation -->
|
|
12
|
+
<nav class="wizard-nav" aria-label="Wizard steps">
|
|
13
|
+
<slot name="step-nav"></slot>
|
|
14
|
+
</nav>
|
|
15
|
+
|
|
16
|
+
<!-- Step content -->
|
|
17
|
+
<main class="wizard-content" tabindex="-1">
|
|
18
|
+
<slot name="step-content">
|
|
19
|
+
<div class="step-loading">
|
|
20
|
+
<q-loader size="large"></q-loader>
|
|
21
|
+
</div>
|
|
22
|
+
</slot>
|
|
23
|
+
</main>
|
|
24
|
+
|
|
25
|
+
<!-- Footer controls -->
|
|
26
|
+
<footer class="wizard-footer">
|
|
27
|
+
<slot name="footer">
|
|
28
|
+
<button data-action="prev" disabled>Previous</button>
|
|
29
|
+
<button data-action="next">Next</button>
|
|
30
|
+
<button data-action="complete" class="hidden">Complete</button>
|
|
31
|
+
</slot>
|
|
32
|
+
</footer>
|
|
33
|
+
</section>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<!-- Template: treepanel.html src/templates/components/treepanel.html -->
|
|
38
|
+
<template id="treepanel-template">
|
|
39
|
+
<section class="holi-treepanel">
|
|
40
|
+
<section class="treepanel-left">
|
|
41
|
+
<div class="treepanel-tree-host" data-role="tree-host"></div>
|
|
42
|
+
</section>
|
|
43
|
+
<aside class="treepanel-right">
|
|
44
|
+
<header class="treepanel-header" data-role="header-host">
|
|
45
|
+
<section class="treepanel-header-default" data-role="header-default">
|
|
46
|
+
<h3 data-role="detail-title">Node Details</h3>
|
|
47
|
+
<section class="treepanel-header-actions">
|
|
48
|
+
<button type="button" data-action="reload-selected">Reload</button>
|
|
49
|
+
<button type="button" data-action="edit-details" data-role="edit-button" hidden>Edit</button>
|
|
50
|
+
<button type="button" data-action="save-details" data-role="save-button" hidden>Save</button>
|
|
51
|
+
<button type="button" data-action="cancel-edit" data-role="cancel-button" hidden>Cancel</button>
|
|
52
|
+
</section>
|
|
53
|
+
</section>
|
|
54
|
+
<slot name="header"></slot>
|
|
55
|
+
</header>
|
|
56
|
+
<p class="treepanel-status" data-role="detail-status" data-state="ready">Select a node to view details.</p>
|
|
57
|
+
<section class="treepanel-content" data-role="content-host">
|
|
58
|
+
<section class="treepanel-content-default" data-role="content-default">
|
|
59
|
+
<section class="treepanel-view treepanel-view-panel" data-view="datapanel">
|
|
60
|
+
<section class="treepanel-panel-body" data-role="panel-body"></section>
|
|
61
|
+
</section>
|
|
62
|
+
<section class="treepanel-view treepanel-view-table" data-view="datatable" hidden>
|
|
63
|
+
<table class="treepanel-table" data-role="detail-table">
|
|
64
|
+
<thead data-role="table-head"></thead>
|
|
65
|
+
<tbody data-role="table-body"></tbody>
|
|
66
|
+
</table>
|
|
67
|
+
</section>
|
|
68
|
+
<section class="treepanel-view treepanel-view-grid" data-view="datagrid" hidden>
|
|
69
|
+
<section class="treepanel-grid" data-role="detail-grid"></section>
|
|
70
|
+
</section>
|
|
71
|
+
</section>
|
|
72
|
+
<slot name="content"></slot>
|
|
73
|
+
</section>
|
|
74
|
+
<footer class="treepanel-footer" data-role="footer-host">
|
|
75
|
+
<section class="treepanel-footer-default" data-role="footer-default"></section>
|
|
76
|
+
<slot name="footer"></slot>
|
|
77
|
+
</footer>
|
|
78
|
+
</aside>
|
|
79
|
+
</section>
|
|
80
|
+
</template>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
<!-- Template: tree.html src/templates/components/tree.html -->
|
|
84
|
+
<template id="tree-template">
|
|
85
|
+
<section class="holi-tree" aria-label="Tree">
|
|
86
|
+
<div class="holi-tree-host" data-role="tree-host"></div>
|
|
87
|
+
</section>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
<!-- Template: toast.html src/templates/components/toast.html -->
|
|
92
|
+
<template id="toast-template">
|
|
93
|
+
<section class="holi-toast-root" data-position="top-right">
|
|
94
|
+
<div class="holi-toast-stack" data-role="stack"></div>
|
|
95
|
+
</section>
|
|
96
|
+
</template>
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
<!-- Template: textarea.html src/templates/components/textarea.html -->
|
|
100
|
+
<template id="textarea-field-template">
|
|
101
|
+
<div class="holi-textarea" role="group">
|
|
102
|
+
<label data-role="label" data-if="@{label}">
|
|
103
|
+
<slot name="label">@{label}</slot>
|
|
104
|
+
<span data-if="@{required}" class="required">*</span>
|
|
105
|
+
</label>
|
|
106
|
+
<textarea data-role="control"
|
|
107
|
+
name="@{name}"
|
|
108
|
+
placeholder="@{placeholder}"
|
|
109
|
+
rows="@{rows}"
|
|
110
|
+
required="@{required}"
|
|
111
|
+
disabled="@{disabled}">@{value}</textarea>
|
|
112
|
+
<slot name="helper"></slot>
|
|
113
|
+
<div class="error" data-role="error" data-show="@{invalid}">@{errorMessage}</div>
|
|
114
|
+
</div>
|
|
115
|
+
</template>
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
<!-- Template: tabs.html src/templates/components/tabs.html -->
|
|
119
|
+
<template id="tabs">
|
|
120
|
+
<section class="tabs" role="tablist">
|
|
121
|
+
<ul class="tabbar">
|
|
122
|
+
<slot name="tablink">
|
|
123
|
+
<li class="link">
|
|
124
|
+
<a href="#" data-tab="@{index}">
|
|
125
|
+
<span class="tab-label">@{address.label}</span>
|
|
126
|
+
<q-loader slot="tab_loader" class="tab-loader"
|
|
127
|
+
visible="@{loadingStates['tab-'+index]}"
|
|
128
|
+
size="small"></q-loader>
|
|
129
|
+
<span slot="tab_controls" class="tab-controls">
|
|
130
|
+
<button class="tab-refresh" title="Refresh">↻</button>
|
|
131
|
+
<button class="tab-close" title="Close">×</button>
|
|
132
|
+
</span>
|
|
133
|
+
</a>
|
|
134
|
+
</li>
|
|
135
|
+
</slot>
|
|
136
|
+
</ul>
|
|
137
|
+
<div class="tab_content_panels">
|
|
138
|
+
<slot name="tab_panel">
|
|
139
|
+
<div class="tab_content_panel" id="tab-@{index}">
|
|
140
|
+
<q-loader visible="@{loadingStates['tab-'+index]}" size="large"></q-loader>
|
|
141
|
+
<div class="tab_content">@{address.toString()}</div>
|
|
142
|
+
</div>
|
|
143
|
+
</slot>
|
|
144
|
+
</div>
|
|
145
|
+
</section>
|
|
146
|
+
</template>
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
<!-- Template: statscard.html src/templates/components/statscard.html -->
|
|
150
|
+
<template id="statscard">
|
|
151
|
+
<article class="stats-card-view trend-neutral" role="group" aria-label="Statistic card">
|
|
152
|
+
<header class="stats-header">
|
|
153
|
+
<div class="stats-icon" aria-hidden="true">@{icon}</div>
|
|
154
|
+
<div class="stats-change">
|
|
155
|
+
<span class="change-value">@{change}</span>
|
|
156
|
+
<span class="change-trend">@{trend}</span>
|
|
157
|
+
</div>
|
|
158
|
+
</header>
|
|
159
|
+
<div class="stats-value">@{value}</div>
|
|
160
|
+
<div class="stats-label">@{label}</div>
|
|
161
|
+
<div class="stats-sparkline" aria-hidden="true"></div>
|
|
162
|
+
<slot name="footer"></slot>
|
|
163
|
+
</article>
|
|
164
|
+
</template>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
<!-- Template: select.html src/templates/components/select.html -->
|
|
168
|
+
<template id="select-field-template">
|
|
169
|
+
<section class="holi-select-field">
|
|
170
|
+
<label data-role="label" data-if="@{label}">
|
|
171
|
+
<slot name="label">@{label}</slot>
|
|
172
|
+
</label>
|
|
173
|
+
<section class="holi-dropdown">
|
|
174
|
+
<div class="dropdown-control">
|
|
175
|
+
<input type="hidden" data-role="value">
|
|
176
|
+
<input
|
|
177
|
+
type="text"
|
|
178
|
+
data-role="input"
|
|
179
|
+
role="combobox"
|
|
180
|
+
aria-expanded="false"
|
|
181
|
+
autocomplete="off">
|
|
182
|
+
<button type="button" data-action="toggle" aria-label="Toggle dropdown">v</button>
|
|
183
|
+
</div>
|
|
184
|
+
<section class="dropdown-panel" data-role="panel" hidden>
|
|
185
|
+
<ul class="dropdown-options" data-role="list" role="listbox"></ul>
|
|
186
|
+
<p class="dropdown-loading" data-role="loading" hidden>Loading...</p>
|
|
187
|
+
<p class="dropdown-empty" data-role="empty" hidden>
|
|
188
|
+
<slot name="empty">No results</slot>
|
|
189
|
+
</p>
|
|
190
|
+
</section>
|
|
191
|
+
</section>
|
|
192
|
+
<slot name="helper"></slot>
|
|
193
|
+
<div class="error" data-role="error" hidden></div>
|
|
194
|
+
</section>
|
|
195
|
+
</template>
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
<!-- Template: search.html src/templates/components/search.html -->
|
|
199
|
+
<template id="search-template">
|
|
200
|
+
<section class="holi-search" data-role="root">
|
|
201
|
+
<form class="holi-search-form" data-role="form" role="search" novalidate>
|
|
202
|
+
<label class="holi-search-label" data-role="label">
|
|
203
|
+
<slot name="label">Search</slot>
|
|
204
|
+
</label>
|
|
205
|
+
<div class="holi-search-input-wrap">
|
|
206
|
+
<input type="search" class="holi-search-input" data-role="input">
|
|
207
|
+
<button type="submit" class="holi-search-submit" data-role="submit">Go</button>
|
|
208
|
+
<section class="holi-search-suggestions-panel" data-role="suggestions" hidden>
|
|
209
|
+
<ul class="holi-search-suggestions" data-role="suggestions-list" role="listbox"></ul>
|
|
210
|
+
</section>
|
|
211
|
+
</div>
|
|
212
|
+
</form>
|
|
213
|
+
|
|
214
|
+
<section class="holi-search-results" data-role="results">
|
|
215
|
+
<h3 class="holi-search-results-title">Results</h3>
|
|
216
|
+
<p class="holi-search-loading" data-role="loading" hidden>Searching...</p>
|
|
217
|
+
<p class="holi-search-empty" data-role="empty" hidden>
|
|
218
|
+
<slot name="empty">No results found.</slot>
|
|
219
|
+
</p>
|
|
220
|
+
<div class="holi-search-results-list" data-role="results-list"></div>
|
|
221
|
+
</section>
|
|
222
|
+
</section>
|
|
223
|
+
</template>
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
<!-- Template: region.html src/templates/components/region.html -->
|
|
227
|
+
<template id="region-template">
|
|
228
|
+
<section class="holi-region" data-role="region-root">
|
|
229
|
+
<section class="holi-region-content" data-role="region-content"></section>
|
|
230
|
+
</section>
|
|
231
|
+
</template>
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
<!-- Template: radio.html src/templates/components/radio.html -->
|
|
235
|
+
<template id="radio-group-template">
|
|
236
|
+
<fieldset class="holi-radio-group">
|
|
237
|
+
<legend data-if="@{legend}">
|
|
238
|
+
<slot name="legend">@{legend}</slot>
|
|
239
|
+
</legend>
|
|
240
|
+
<div class="holi-radio-options" data-role="options">
|
|
241
|
+
<label class="holi-radio-option" data-repeat="@{options}" data-for="option">
|
|
242
|
+
<input type="radio"
|
|
243
|
+
name="@{name}"
|
|
244
|
+
value="@{option.value}"
|
|
245
|
+
checked="@{option.checked}"
|
|
246
|
+
required="@{required}">
|
|
247
|
+
<span>@{option.label}</span>
|
|
248
|
+
</label>
|
|
249
|
+
<slot name="options"></slot>
|
|
250
|
+
</div>
|
|
251
|
+
<slot name="actions"></slot>
|
|
252
|
+
<div class="error" data-role="error" data-show="@{invalid}">@{errorMessage}</div>
|
|
253
|
+
</fieldset>
|
|
254
|
+
</template>
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
<!-- Template: progress.html src/templates/components/progress.html -->
|
|
258
|
+
<template id="progress">
|
|
259
|
+
<section class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
|
|
260
|
+
<div class="progress-track">
|
|
261
|
+
<div class="progress-buffer"></div>
|
|
262
|
+
<div class="progress-fill"></div>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="progress-label">@{value}%</div>
|
|
265
|
+
<slot name="label"></slot>
|
|
266
|
+
</section>
|
|
267
|
+
</template>
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
<!-- Template: panel.html src/templates/components/panel.html -->
|
|
271
|
+
<template id="panel-template">
|
|
272
|
+
<section class="holi-panel" data-role="panel-root">
|
|
273
|
+
<header class="holi-panel-header" data-role="panel-header">
|
|
274
|
+
<h2 class="holi-panel-title" data-role="panel-title" data-if="@{hasTitle}">@{title}</h2>
|
|
275
|
+
<p class="holi-panel-subtitle" data-role="panel-subtitle" data-if="@{hasSubtitle}">@{subtitle}</p>
|
|
276
|
+
</header>
|
|
277
|
+
<section class="holi-panel-content" data-role="panel-content"></section>
|
|
278
|
+
<footer class="holi-panel-footer" data-role="panel-footer" hidden></footer>
|
|
279
|
+
</section>
|
|
280
|
+
</template>
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
<!-- Template: menubar.html src/templates/components/menubar.html -->
|
|
284
|
+
<template id="menubar-template">
|
|
285
|
+
<nav class="holi-menubar" data-mode="bar" aria-label="Site menu">
|
|
286
|
+
<button type="button" class="holi-menubar-toggle" data-role="toggle" hidden>Menu</button>
|
|
287
|
+
<div class="holi-menubar-menuhost" data-role="menu-host"></div>
|
|
288
|
+
</nav>
|
|
289
|
+
</template>
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
<!-- Template: loader.html src/templates/components/loader.html -->
|
|
293
|
+
<template id="loader-template">
|
|
294
|
+
<section class="holi-loader" data-scope="inline" hidden>
|
|
295
|
+
<div class="holi-loader-backdrop"></div>
|
|
296
|
+
<div class="holi-loader-body" role="status" aria-live="polite" aria-atomic="true">
|
|
297
|
+
<span class="holi-loader-spinner" aria-hidden="true"></span>
|
|
298
|
+
<span class="holi-loader-message" data-role="loader-message">Loading...</span>
|
|
299
|
+
</div>
|
|
300
|
+
</section>
|
|
301
|
+
</template>
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
<!-- Template: layout.html src/templates/components/layout.html -->
|
|
305
|
+
<template id="layout-template">
|
|
306
|
+
<section class="holi-layout" data-role="layout-root">
|
|
307
|
+
<section class="holi-layout-content" data-role="layout-content"></section>
|
|
308
|
+
</section>
|
|
309
|
+
</template>
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
<!-- Template: input.html src/templates/components/input.html -->
|
|
313
|
+
<template id="input-field-template">
|
|
314
|
+
<div class="holi-input" role="group">
|
|
315
|
+
<label data-role="label" data-if="@{label}">
|
|
316
|
+
<slot name="label">@{label}</slot>
|
|
317
|
+
<span data-if="@{required}" class="required">*</span>
|
|
318
|
+
</label>
|
|
319
|
+
<input data-if="@{isInputMode}"
|
|
320
|
+
type="@{type}"
|
|
321
|
+
data-role="control-input"
|
|
322
|
+
name="@{name}"
|
|
323
|
+
value="@{value}"
|
|
324
|
+
data-validation="@{validators}"
|
|
325
|
+
data-invalid="@{invalid}"
|
|
326
|
+
placeholder="@{placeholder}"
|
|
327
|
+
required="@{required}"
|
|
328
|
+
disabled="@{disabled}">
|
|
329
|
+
<textarea data-if="@{isAreaMode}"
|
|
330
|
+
data-role="control-area"
|
|
331
|
+
name="@{name}"
|
|
332
|
+
data-validation="@{validators}"
|
|
333
|
+
data-invalid="@{invalid}"
|
|
334
|
+
placeholder="@{placeholder}"
|
|
335
|
+
rows="@{rows}"
|
|
336
|
+
cols="@{cols}"
|
|
337
|
+
required="@{required}"
|
|
338
|
+
disabled="@{disabled}">@{value}</textarea>
|
|
339
|
+
<slot name="helper"></slot>
|
|
340
|
+
<div class="error" data-role="error" data-show="@{invalid}">@{errorMessage}</div>
|
|
341
|
+
</div>
|
|
342
|
+
</template>
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
<!-- Template: gallery.html src/templates/components/gallery.html -->
|
|
346
|
+
<template id="gallery-template">
|
|
347
|
+
<section class="holi-gallery-root">
|
|
348
|
+
<section class="holi-gallery-toolbar" data-role="toolbar">
|
|
349
|
+
<label class="holi-gallery-field">
|
|
350
|
+
<span>Search</span>
|
|
351
|
+
<input type="search" data-role="search-input" placeholder="Search by name or metadata">
|
|
352
|
+
</label>
|
|
353
|
+
<label class="holi-gallery-field">
|
|
354
|
+
<span>Metadata filter</span>
|
|
355
|
+
<input type="text" data-role="meta-input" placeholder="Example: category:nature">
|
|
356
|
+
</label>
|
|
357
|
+
<label class="holi-gallery-field holi-gallery-field-sm">
|
|
358
|
+
<span>Sort by</span>
|
|
359
|
+
<select data-role="sort-field"></select>
|
|
360
|
+
</label>
|
|
361
|
+
<label class="holi-gallery-field holi-gallery-field-sm">
|
|
362
|
+
<span>Direction</span>
|
|
363
|
+
<select data-role="sort-direction">
|
|
364
|
+
<option value="asc">Ascending</option>
|
|
365
|
+
<option value="desc">Descending</option>
|
|
366
|
+
</select>
|
|
367
|
+
</label>
|
|
368
|
+
<label class="holi-gallery-field holi-gallery-field-sm">
|
|
369
|
+
<span>Mode</span>
|
|
370
|
+
<select data-role="display-mode">
|
|
371
|
+
<option value="paginate">Pagination</option>
|
|
372
|
+
<option value="infinite">Infinite scroll</option>
|
|
373
|
+
</select>
|
|
374
|
+
</label>
|
|
375
|
+
</section>
|
|
376
|
+
|
|
377
|
+
<section class="holi-gallery-state" data-role="state" hidden></section>
|
|
378
|
+
|
|
379
|
+
<section class="holi-gallery-grid-wrap" data-role="grid-wrap">
|
|
380
|
+
<section class="holi-gallery-grid" data-role="grid" aria-label="Gallery thumbnails"></section>
|
|
381
|
+
<div class="holi-gallery-sentinel" data-role="sentinel" aria-hidden="true"></div>
|
|
382
|
+
</section>
|
|
383
|
+
|
|
384
|
+
<section class="holi-gallery-pagination" data-role="pagination">
|
|
385
|
+
<button type="button" data-action="prev-page">Previous</button>
|
|
386
|
+
<span data-role="page-status"></span>
|
|
387
|
+
<button type="button" data-action="next-page">Next</button>
|
|
388
|
+
</section>
|
|
389
|
+
|
|
390
|
+
<section
|
|
391
|
+
component="dialog"
|
|
392
|
+
data-role="dialog"
|
|
393
|
+
size="mega"
|
|
394
|
+
no-native
|
|
395
|
+
no-backdrop-close
|
|
396
|
+
title="Image Viewer"
|
|
397
|
+
footer-message="Use arrows or swipe to navigate.">
|
|
398
|
+
<div slot="content" class="holi-gallery-lightbox">
|
|
399
|
+
<section
|
|
400
|
+
component="carousel"
|
|
401
|
+
data-role="carousel"
|
|
402
|
+
mode="slide"
|
|
403
|
+
active-slides="1"
|
|
404
|
+
move-slides="1"
|
|
405
|
+
no-autoplay
|
|
406
|
+
no-pause-on-hover>
|
|
407
|
+
<div slot="slides" class="slides" data-role="slides"></div>
|
|
408
|
+
</section>
|
|
409
|
+
</div>
|
|
410
|
+
<footer slot="footer" class="holi-gallery-footer">
|
|
411
|
+
<button type="button" data-action="close" data-value="close">Close</button>
|
|
412
|
+
</footer>
|
|
413
|
+
</section>
|
|
414
|
+
</section>
|
|
415
|
+
</template>
|
|
416
|
+
|
|
417
|
+
|
|
418
|
+
<!-- Template: form.html src/templates/components/form.html -->
|
|
419
|
+
<template id="form-template">
|
|
420
|
+
<form class="holi-form" novalidate>
|
|
421
|
+
<div class="form-fields">
|
|
422
|
+
<slot name="fields"></slot>
|
|
423
|
+
</div>
|
|
424
|
+
<div class="form-actions">
|
|
425
|
+
<button type="submit" data-role="submit" data-invalid="@{formInvalid}">@{submitLabel}</button>
|
|
426
|
+
<button type="reset" data-role="reset">Reset</button>
|
|
427
|
+
<slot name="actions"></slot>
|
|
428
|
+
</div>
|
|
429
|
+
<div class="form-errors" data-role="errors" data-show="@{submitError}">
|
|
430
|
+
<slot name="errors">@{submitError}</slot>
|
|
431
|
+
</div>
|
|
432
|
+
</form>
|
|
433
|
+
</template>
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
<!-- Template: dropdown.html src/templates/components/dropdown.html -->
|
|
437
|
+
<template id="dropdown-template">
|
|
438
|
+
<section class="holi-dropdown">
|
|
439
|
+
<div class="dropdown-control">
|
|
440
|
+
<input type="hidden" data-role="value">
|
|
441
|
+
<input
|
|
442
|
+
type="text"
|
|
443
|
+
data-role="input"
|
|
444
|
+
role="combobox"
|
|
445
|
+
aria-expanded="false"
|
|
446
|
+
autocomplete="off">
|
|
447
|
+
<button type="button" data-action="toggle" aria-label="Toggle dropdown">v</button>
|
|
448
|
+
</div>
|
|
449
|
+
<section class="dropdown-panel" data-role="panel" hidden>
|
|
450
|
+
<ul class="dropdown-options" data-role="list" role="listbox"></ul>
|
|
451
|
+
<p class="dropdown-loading" data-role="loading" hidden>Loading...</p>
|
|
452
|
+
<p class="dropdown-empty" data-role="empty" hidden>
|
|
453
|
+
<slot name="empty">No results</slot>
|
|
454
|
+
</p>
|
|
455
|
+
</section>
|
|
456
|
+
</section>
|
|
457
|
+
</template>
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
<!-- Template: drawer.html src/templates/components/drawer.html -->
|
|
461
|
+
<template id="drawer-template">
|
|
462
|
+
<section class="holi-drawer-root" data-direction="left" data-state="closed">
|
|
463
|
+
<button class="holi-drawer-edge-trigger" data-role="edge-trigger" type="button" aria-label="Open drawer"></button>
|
|
464
|
+
<div class="holi-drawer-overlay" data-role="overlay" data-action="backdrop" hidden aria-hidden="true"></div>
|
|
465
|
+
<aside class="holi-drawer-panel" data-role="panel">
|
|
466
|
+
<header class="holi-drawer-header" data-role="header"></header>
|
|
467
|
+
<section class="holi-drawer-body" data-role="body"></section>
|
|
468
|
+
<footer class="holi-drawer-footer" data-role="footer"></footer>
|
|
469
|
+
</aside>
|
|
470
|
+
</section>
|
|
471
|
+
</template>
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
<!-- Template: dialog.html src/templates/components/dialog.html -->
|
|
475
|
+
<template id="dialog-template">
|
|
476
|
+
<section class="holi-dialog-root" data-size="medium" data-state="closed">
|
|
477
|
+
<dialog class="holi-dialog-native" aria-modal="true">
|
|
478
|
+
<header class="holi-dialog-header" data-role="header">
|
|
479
|
+
<h2 class="holi-dialog-title" data-role="title"></h2>
|
|
480
|
+
<button type="button" class="holi-dialog-close" data-action="close" aria-label="Close">x</button>
|
|
481
|
+
</header>
|
|
482
|
+
<div class="holi-dialog-body" data-role="body"></div>
|
|
483
|
+
<footer class="holi-dialog-footer" data-role="footer"></footer>
|
|
484
|
+
</dialog>
|
|
485
|
+
|
|
486
|
+
<div class="holi-dialog-fallback" data-role="fallback" hidden>
|
|
487
|
+
<div class="holi-dialog-overlay" data-action="backdrop"></div>
|
|
488
|
+
<section class="holi-dialog-panel" role="dialog" aria-modal="true">
|
|
489
|
+
<header class="holi-dialog-header" data-role="fallback-header">
|
|
490
|
+
<h2 class="holi-dialog-title" data-role="fallback-title"></h2>
|
|
491
|
+
<button type="button" class="holi-dialog-close" data-action="close" aria-label="Close">x</button>
|
|
492
|
+
</header>
|
|
493
|
+
<div class="holi-dialog-body" data-role="fallback-body"></div>
|
|
494
|
+
<footer class="holi-dialog-footer" data-role="fallback-footer"></footer>
|
|
495
|
+
</section>
|
|
496
|
+
</div>
|
|
497
|
+
</section>
|
|
498
|
+
</template>
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
<!-- Template: details.html src/templates/components/details.html -->
|
|
502
|
+
<!-- ROW DETAILS MODAL -->
|
|
503
|
+
<template id="object-details-template">
|
|
504
|
+
<div class="dialog-overlay">
|
|
505
|
+
<div class="dialog-content">
|
|
506
|
+
<div class="dialog-header">
|
|
507
|
+
<h2>Details</h2>
|
|
508
|
+
</div>
|
|
509
|
+
<div class="dialog-body"></div>
|
|
510
|
+
<div class="dialog-footer"></div>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
</template>
|
|
514
|
+
|
|
515
|
+
<template id="object-details-skeleton-template">
|
|
516
|
+
<div class="dg-skeleton" role="status" aria-live="polite" aria-label="Loading details">
|
|
517
|
+
<div class="sk-line sk-title"></div>
|
|
518
|
+
<div class="sk-line"></div>
|
|
519
|
+
<div class="sk-line"></div>
|
|
520
|
+
<div class="sk-line"></div>
|
|
521
|
+
</div>
|
|
522
|
+
</template>
|
|
523
|
+
|
|
524
|
+
<!-- FILTERS PANEL -->
|
|
525
|
+
<template id="filters-template">
|
|
526
|
+
<div class="filters-panel"></div>
|
|
527
|
+
</template>
|
|
528
|
+
|
|
529
|
+
<!-- PAGINATION -->
|
|
530
|
+
<template id="pagination-template">
|
|
531
|
+
<div class="pagination"></div>
|
|
532
|
+
</template>
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
<!-- Template: datatable.html src/templates/components/datatable.html -->
|
|
536
|
+
<template id="datatable-template">
|
|
537
|
+
<section class="holi-datatable holi datatable">
|
|
538
|
+
<header class="datatable-toolbar">
|
|
539
|
+
<slot name="search">
|
|
540
|
+
<input type="search" placeholder="Search..." data-action="search">
|
|
541
|
+
</slot>
|
|
542
|
+
<slot name="filters">
|
|
543
|
+
<select data-filter="status">
|
|
544
|
+
<option value="">All Status</option>
|
|
545
|
+
</select>
|
|
546
|
+
</slot>
|
|
547
|
+
<button type="button" data-action="add-row">Add</button>
|
|
548
|
+
<button type="button" data-action="toggle-columns">Columns</button>
|
|
549
|
+
</header>
|
|
550
|
+
|
|
551
|
+
<aside class="datatable-column-chooser" data-role="column-chooser" hidden>
|
|
552
|
+
<strong>Choose Columns</strong>
|
|
553
|
+
<div data-role="column-chooser-list"></div>
|
|
554
|
+
</aside>
|
|
555
|
+
|
|
556
|
+
<div class="datatable-content">
|
|
557
|
+
<table class="datatable-table">
|
|
558
|
+
<thead data-role="thead"></thead>
|
|
559
|
+
<tbody data-role="tbody"></tbody>
|
|
560
|
+
</table>
|
|
561
|
+
<template data-role="header-cell-template">
|
|
562
|
+
<th>
|
|
563
|
+
<button type="button" data-action="sort">
|
|
564
|
+
<span data-role="header-label"></span>
|
|
565
|
+
</button>
|
|
566
|
+
</th>
|
|
567
|
+
</template>
|
|
568
|
+
<template data-role="row-cell-template">
|
|
569
|
+
<td></td>
|
|
570
|
+
</template>
|
|
571
|
+
<template data-role="actions-cell-template">
|
|
572
|
+
<td class="datatable-actions-cell">
|
|
573
|
+
<button type="button" data-action="view-row" data-role="row-action">View</button>
|
|
574
|
+
<button type="button" data-action="edit-row" data-role="row-action">Edit</button>
|
|
575
|
+
</td>
|
|
576
|
+
</template>
|
|
577
|
+
<template data-role="empty-row-template">
|
|
578
|
+
<tr>
|
|
579
|
+
<td data-role="empty-cell">No matching records</td>
|
|
580
|
+
</tr>
|
|
581
|
+
</template>
|
|
582
|
+
</div>
|
|
583
|
+
|
|
584
|
+
<footer class="datatable-footer">
|
|
585
|
+
<span data-role="result-count"></span>
|
|
586
|
+
<div data-role="request-status" data-state="idle" aria-live="polite">
|
|
587
|
+
<span data-role="request-status-text"></span>
|
|
588
|
+
<button type="button" data-action="retry-load" hidden>Retry</button>
|
|
589
|
+
</div>
|
|
590
|
+
<slot name="pagination">
|
|
591
|
+
<div data-role="pagination-controls" hidden>
|
|
592
|
+
<button type="button" data-action="prev-page">Previous</button>
|
|
593
|
+
<span data-role="page-info"></span>
|
|
594
|
+
<button type="button" data-action="next-page">Next</button>
|
|
595
|
+
</div>
|
|
596
|
+
</slot>
|
|
597
|
+
</footer>
|
|
598
|
+
</section>
|
|
599
|
+
</template>
|
|
600
|
+
|
|
601
|
+
|
|
602
|
+
<!-- Template: datagrid.html src/templates/components/datagrid.html -->
|
|
603
|
+
<template id="datagrid-template">
|
|
604
|
+
<section class="holi-datagrid holi datagrid">
|
|
605
|
+
<header class="datagrid-toolbar">
|
|
606
|
+
<slot name="search">
|
|
607
|
+
<input type="search" placeholder="Search..." data-action="search">
|
|
608
|
+
</slot>
|
|
609
|
+
<slot name="filters">
|
|
610
|
+
<select data-filter="status">
|
|
611
|
+
<option value="">All Status</option>
|
|
612
|
+
</select>
|
|
613
|
+
</slot>
|
|
614
|
+
<select data-action="sort-field">
|
|
615
|
+
<option value="">Sort by</option>
|
|
616
|
+
</select>
|
|
617
|
+
<button type="button" data-action="sort-direction">Asc</button>
|
|
618
|
+
<button type="button" data-action="add-row">Add</button>
|
|
619
|
+
<button type="button" data-action="toggle-fields">Fields</button>
|
|
620
|
+
</header>
|
|
621
|
+
|
|
622
|
+
<aside class="datagrid-field-chooser" data-role="field-chooser" hidden>
|
|
623
|
+
<strong>Choose Fields</strong>
|
|
624
|
+
<div data-role="field-chooser-list"></div>
|
|
625
|
+
</aside>
|
|
626
|
+
|
|
627
|
+
<div class="datagrid-content">
|
|
628
|
+
<div class="datagrid-cards" data-role="cards"></div>
|
|
629
|
+
</div>
|
|
630
|
+
|
|
631
|
+
<footer class="datagrid-footer">
|
|
632
|
+
<span data-role="result-count"></span>
|
|
633
|
+
<div data-role="request-status" data-state="idle" aria-live="polite">
|
|
634
|
+
<span data-role="request-status-text"></span>
|
|
635
|
+
<button type="button" data-action="retry-load" hidden>Retry</button>
|
|
636
|
+
</div>
|
|
637
|
+
<slot name="pagination">
|
|
638
|
+
<div data-role="pagination-controls" hidden>
|
|
639
|
+
<button type="button" data-action="prev-page">Previous</button>
|
|
640
|
+
<span data-role="page-info"></span>
|
|
641
|
+
<button type="button" data-action="next-page">Next</button>
|
|
642
|
+
</div>
|
|
643
|
+
</slot>
|
|
644
|
+
</footer>
|
|
645
|
+
</section>
|
|
646
|
+
</template>
|
|
647
|
+
|
|
648
|
+
|
|
649
|
+
<!-- Template: checkbox.html src/templates/components/checkbox.html -->
|
|
650
|
+
<template id="checkbox-group-template">
|
|
651
|
+
<fieldset class="holi-checkbox-group">
|
|
652
|
+
<legend data-if="@{legend}">
|
|
653
|
+
<slot name="legend">@{legend}</slot>
|
|
654
|
+
</legend>
|
|
655
|
+
<div class="holi-checkbox-options" data-role="options">
|
|
656
|
+
<label class="holi-checkbox-option" data-repeat="@{options}" data-for="option">
|
|
657
|
+
<input type="@{type}"
|
|
658
|
+
name="@{name}"
|
|
659
|
+
value="@{option.value}"
|
|
660
|
+
checked="@{option.checked}">
|
|
661
|
+
<span>@{option.label}</span>
|
|
662
|
+
</label>
|
|
663
|
+
<slot name="options"></slot>
|
|
664
|
+
</div>
|
|
665
|
+
<slot name="actions"></slot>
|
|
666
|
+
</fieldset>
|
|
667
|
+
</template>
|
|
668
|
+
|
|
669
|
+
|
|
670
|
+
<!-- Template: chart.html src/templates/components/chart.html -->
|
|
671
|
+
<template id="chart-template">
|
|
672
|
+
<section class="holi-chart" role="img">
|
|
673
|
+
<h3 class="holi-chart-title" data-role="title" hidden></h3>
|
|
674
|
+
<svg class="holi-chart-svg" data-role="svg"></svg>
|
|
675
|
+
<p class="holi-chart-empty" data-role="empty">No chart data available.</p>
|
|
676
|
+
<ul class="holi-chart-legend" data-role="legend"></ul>
|
|
677
|
+
</section>
|
|
678
|
+
</template>
|
|
679
|
+
|
|
680
|
+
|
|
681
|
+
<!-- Template: carousel.html src/templates/components/carousel.html -->
|
|
682
|
+
<template id="carousel-template">
|
|
683
|
+
<section class="holi-carousel" data-mode="fade" aria-roledescription="carousel" tabindex="0">
|
|
684
|
+
<slot name="skip-link">
|
|
685
|
+
<a class="skip-link" href="#main-content" aria-label="Skip carousel and go to main content">Skip carousel</a>
|
|
686
|
+
</slot>
|
|
687
|
+
|
|
688
|
+
<section class="holi-carousel-viewport" data-role="viewport">
|
|
689
|
+
<section class="slides" data-role="track" aria-live="off">
|
|
690
|
+
<slot name="slides">
|
|
691
|
+
<article class="slide"><img src="images/slide1.jpg" alt="Slide 1"></article>
|
|
692
|
+
<article class="slide"><img src="images/slide2.jpg" alt="Slide 2"></article>
|
|
693
|
+
<article class="slide"><img src="images/slide3.jpg" alt="Slide 3"></article>
|
|
694
|
+
</slot>
|
|
695
|
+
</section>
|
|
696
|
+
|
|
697
|
+
<slot name="anchors">
|
|
698
|
+
<nav class="anchors" aria-label="Carousel navigation">
|
|
699
|
+
<button type="button" class="left" data-action="previous" aria-label="Previous slide">❮</button>
|
|
700
|
+
<button type="button" class="right" data-action="next" aria-label="Next slide">❯</button>
|
|
701
|
+
</nav>
|
|
702
|
+
</slot>
|
|
703
|
+
</section>
|
|
704
|
+
|
|
705
|
+
<section class="holi-carousel-footer">
|
|
706
|
+
<slot name="dots">
|
|
707
|
+
<div class="dots" data-role="dots" aria-label="Slide selectors"></div>
|
|
708
|
+
</slot>
|
|
709
|
+
|
|
710
|
+
<slot name="controls">
|
|
711
|
+
<div class="controls">
|
|
712
|
+
<button type="button" data-action="play-pause" aria-label="Pause auto sliding">Pause</button>
|
|
713
|
+
<button type="button" data-action="toggle-loop" aria-label="Toggle loop mode" aria-pressed="true">Disable Loop</button>
|
|
714
|
+
</div>
|
|
715
|
+
</slot>
|
|
716
|
+
|
|
717
|
+
<slot name="progress">
|
|
718
|
+
<div class="progress-wrapper">
|
|
719
|
+
<div class="progress-bar" data-role="progress-bar"></div>
|
|
720
|
+
</div>
|
|
721
|
+
</slot>
|
|
722
|
+
</section>
|
|
723
|
+
|
|
724
|
+
<slot name="live-region">
|
|
725
|
+
<div class="sr-only" data-role="live-region" aria-live="polite" aria-atomic="true"></div>
|
|
726
|
+
</slot>
|
|
727
|
+
</section>
|
|
728
|
+
</template>
|
|
729
|
+
|
|
730
|
+
|
|
731
|
+
<!-- Template: calendar.html src/templates/components/calendar.html -->
|
|
732
|
+
<template id="calendar-template">
|
|
733
|
+
<section class="holi-calendar" role="group" aria-label="Calendar">
|
|
734
|
+
<slot name="input"></slot>
|
|
735
|
+
|
|
736
|
+
<header class="holi-calendar-nav">
|
|
737
|
+
<button type="button" data-action="prev-month" aria-label="Previous month">Prev</button>
|
|
738
|
+
<h3 class="holi-calendar-title" data-role="title"></h3>
|
|
739
|
+
<button type="button" data-action="next-month" aria-label="Next month">Next</button>
|
|
740
|
+
</header>
|
|
741
|
+
|
|
742
|
+
<table class="holi-calendar-grid">
|
|
743
|
+
<thead data-role="thead"></thead>
|
|
744
|
+
<tbody data-role="tbody"></tbody>
|
|
745
|
+
</table>
|
|
746
|
+
|
|
747
|
+
<section class="holi-calendar-time" data-role="time">
|
|
748
|
+
<slot name="time-prefix"></slot>
|
|
749
|
+
<input type="number" min="0" max="23" data-role="hour" aria-label="Hour">
|
|
750
|
+
<span class="holi-calendar-time-sep">:</span>
|
|
751
|
+
<input type="number" min="0" max="59" data-role="minute" aria-label="Minute">
|
|
752
|
+
<button type="button" data-action="toggle-ampm" aria-label="Toggle AM PM">AM</button>
|
|
753
|
+
<slot name="time-suffix"></slot>
|
|
754
|
+
</section>
|
|
755
|
+
|
|
756
|
+
<section class="holi-calendar-messages" data-role="messages"></section>
|
|
757
|
+
<section class="holi-calendar-live" data-role="live" aria-live="polite" aria-atomic="true"></section>
|
|
758
|
+
<slot name="footer"></slot>
|
|
759
|
+
</section>
|
|
760
|
+
</template>
|
|
761
|
+
|
|
762
|
+
|
|
763
|
+
<!-- Template: button.html src/templates/components/button.html -->
|
|
764
|
+
<template id="button-template">
|
|
765
|
+
<button class="holi-button" data-role="button" type="@{type}" disabled="@{disabled}">
|
|
766
|
+
<span class="holi-button-prefix">
|
|
767
|
+
<slot name="prefix"></slot>
|
|
768
|
+
</span>
|
|
769
|
+
<span class="holi-button-label">
|
|
770
|
+
<slot name="label">@{label}</slot>
|
|
771
|
+
</span>
|
|
772
|
+
<span class="holi-button-suffix">
|
|
773
|
+
<slot name="suffix"></slot>
|
|
774
|
+
</span>
|
|
775
|
+
</button>
|
|
776
|
+
</template>
|
|
777
|
+
|
|
778
|
+
|
|
779
|
+
<!-- Template: breadcrumbs.html src/templates/components/breadcrumbs.html -->
|
|
780
|
+
<template id="breadcrumbs-template">
|
|
781
|
+
<nav class="holi-breadcrumbs" aria-label="Breadcrumb">
|
|
782
|
+
<slot name="prefix"></slot>
|
|
783
|
+
<ol class="holi-breadcrumbs-list" data-role="list"></ol>
|
|
784
|
+
<slot name="suffix"></slot>
|
|
785
|
+
</nav>
|
|
786
|
+
</template>
|
|
787
|
+
|
|
788
|
+
|
|
789
|
+
<!-- Template: block.html src/templates/components/block.html -->
|
|
790
|
+
<template id="block-template">
|
|
791
|
+
<section class="holi-block" data-role="block-root">
|
|
792
|
+
<section class="holi-block-content" data-role="block-content"></section>
|
|
793
|
+
</section>
|
|
794
|
+
</template>
|
|
795
|
+
|
|
796
|
+
|
|
797
|
+
<!-- Template: backtotop.html src/templates/components/backtotop.html -->
|
|
798
|
+
<template id="backtotop-template">
|
|
799
|
+
<div class="holi-backtotop" hidden>
|
|
800
|
+
<button class="holi-backtotop-button" data-role="button" type="button" aria-label="@{ariaLabel}">
|
|
801
|
+
<span class="holi-backtotop-prefix">
|
|
802
|
+
<slot name="prefix"></slot>
|
|
803
|
+
</span>
|
|
804
|
+
<span class="holi-backtotop-label">
|
|
805
|
+
<slot name="label">@{label}</slot>
|
|
806
|
+
</span>
|
|
807
|
+
<span class="holi-backtotop-suffix">
|
|
808
|
+
<slot name="suffix"></slot>
|
|
809
|
+
</span>
|
|
810
|
+
</button>
|
|
811
|
+
</div>
|
|
812
|
+
</template>
|
|
813
|
+
|
|
814
|
+
|
|
815
|
+
<!-- Template: accordion.html src/templates/components/accordion.html -->
|
|
816
|
+
<template id="accordion-template">
|
|
817
|
+
<section class="holi-accordion" role="region">
|
|
818
|
+
<section class="holi-accordion-list" data-role="accordion-list"></section>
|
|
819
|
+
</section>
|
|
820
|
+
</template>
|
|
821
|
+
|
|
822
|
+
<!-- End Holi Templates -->
|