@nyaruka/temba-components 0.29.3 → 0.30.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.
Files changed (59) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/{a439f561.js → dd72d92e.js} +256 -71
  3. package/dist/index.js +256 -71
  4. package/dist/static/icons/symbol-defs.svg +10 -20
  5. package/dist/sw.js +1 -1
  6. package/dist/sw.js.map +1 -1
  7. package/dist/templates/components-body.html +1 -1
  8. package/dist/templates/components-head.html +1 -1
  9. package/out-tsc/src/contacts/ContactName.js +19 -16
  10. package/out-tsc/src/contacts/ContactName.js.map +1 -1
  11. package/out-tsc/src/contacts/ContactNameFetch.js +36 -0
  12. package/out-tsc/src/contacts/ContactNameFetch.js.map +1 -0
  13. package/out-tsc/src/contacts/ContactUrn.js +12 -1
  14. package/out-tsc/src/contacts/ContactUrn.js.map +1 -1
  15. package/out-tsc/src/flow/FlowStoreElement.js +43 -0
  16. package/out-tsc/src/flow/FlowStoreElement.js.map +1 -0
  17. package/out-tsc/src/interfaces.js.map +1 -1
  18. package/out-tsc/src/list/RunList.js +317 -0
  19. package/out-tsc/src/list/RunList.js.map +1 -0
  20. package/out-tsc/src/list/TembaList.js +38 -14
  21. package/out-tsc/src/list/TembaList.js.map +1 -1
  22. package/out-tsc/src/options/Options.js +18 -2
  23. package/out-tsc/src/options/Options.js.map +1 -1
  24. package/out-tsc/src/store/Store.js +13 -3
  25. package/out-tsc/src/store/Store.js.map +1 -1
  26. package/out-tsc/src/tabpane/TabPane.js +3 -1
  27. package/out-tsc/src/tabpane/TabPane.js.map +1 -1
  28. package/out-tsc/src/utils/index.js +1 -0
  29. package/out-tsc/src/utils/index.js.map +1 -1
  30. package/out-tsc/src/vectoricon/VectorIcon.js +6 -6
  31. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  32. package/out-tsc/temba-modules.js +6 -0
  33. package/out-tsc/temba-modules.js.map +1 -1
  34. package/out-tsc/test/utils.test.js +1 -1
  35. package/out-tsc/test/utils.test.js.map +1 -1
  36. package/package.json +1 -1
  37. package/src/contacts/ContactName.ts +19 -17
  38. package/src/contacts/ContactNameFetch.ts +32 -0
  39. package/src/contacts/ContactUrn.ts +12 -1
  40. package/src/flow/FlowStoreElement.ts +42 -0
  41. package/src/interfaces.ts +19 -0
  42. package/src/list/RunList.ts +353 -0
  43. package/src/list/TembaList.ts +50 -14
  44. package/src/options/Options.ts +17 -2
  45. package/src/store/Store.ts +20 -3
  46. package/src/tabpane/TabPane.ts +3 -1
  47. package/src/utils/index.ts +3 -0
  48. package/src/vectoricon/VectorIcon.ts +5 -5
  49. package/static/css/temba-components.css +1 -1
  50. package/static/icons/Read Me.txt +15 -15
  51. package/static/icons/SVG/hourglass.svg +5 -0
  52. package/static/icons/demo-external-svg.html +142 -157
  53. package/static/icons/demo-files/demo.css +4 -4
  54. package/static/icons/demo.html +152 -177
  55. package/static/icons/selection.json +396 -339
  56. package/static/icons/style.css +0 -4
  57. package/static/icons/symbol-defs.svg +10 -20
  58. package/temba-modules.ts +6 -0
  59. package/test/utils.test.ts +1 -1
package/static/icons/demo-external-svg.html CHANGED
@@ -14,679 +14,664 @@
14
14
  </div>
15
15
  </header>
16
16
  <div class="clearfix mhl ptl">
17
- <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
17
+ <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
18
18
  <div class="glyph fs1">
19
19
  <div class="clearfix pbs">
20
- <svg class="icon icon-language"><use xlink:href="symbol-defs.svg#icon-language"></use></svg><span class="name"> icon-language</span>
20
+ <svg class="icon icon-hourglass"><use xlink:href="symbol-defs.svg#icon-hourglass"></use></svg><span class="name"> icon-hourglass</span>
21
21
  </div>
22
22
  </div>
23
- </div>
24
- <div class="clearfix mhl ptl">
25
- <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
26
- <div class="glyph fs2">
23
+ <div class="glyph fs1">
27
24
  <div class="clearfix pbs">
28
25
  <svg class="icon icon-bookmark-filled"><use xlink:href="symbol-defs.svg#icon-bookmark-filled"></use></svg><span class="name"> icon-bookmark-filled</span>
29
26
  </div>
30
27
  </div>
31
- <div class="glyph fs2">
28
+ <div class="glyph fs1">
32
29
  <div class="clearfix pbs">
33
30
  <svg class="icon icon-bookmark"><use xlink:href="symbol-defs.svg#icon-bookmark"></use></svg><span class="name"> icon-bookmark</span>
34
31
  </div>
35
32
  </div>
36
- <div class="glyph fs2">
33
+ <div class="glyph fs1">
37
34
  <div class="clearfix pbs">
38
35
  <svg class="icon icon-calendar"><use xlink:href="symbol-defs.svg#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
39
36
  </div>
40
37
  </div>
41
- <div class="glyph fs2">
38
+ <div class="glyph fs1">
42
39
  <div class="clearfix pbs">
43
40
  <svg class="icon icon-corner-down-left"><use xlink:href="symbol-defs.svg#icon-corner-down-left"></use></svg><span class="name"> icon-corner-down-left</span>
44
41
  </div>
45
42
  </div>
46
- <div class="glyph fs2">
43
+ <div class="glyph fs1">
47
44
  <div class="clearfix pbs">
48
45
  <svg class="icon icon-external-link"><use xlink:href="symbol-defs.svg#icon-external-link"></use></svg><span class="name"> icon-external-link</span>
49
46
  </div>
50
47
  </div>
51
- <div class="glyph fs2">
48
+ <div class="glyph fs1">
52
49
  <div class="clearfix pbs">
53
50
  <svg class="icon icon-globe"><use xlink:href="symbol-defs.svg#icon-globe"></use></svg><span class="name"> icon-globe</span>
54
51
  </div>
55
52
  </div>
56
- <div class="glyph fs2">
53
+ <div class="glyph fs1">
57
54
  <div class="clearfix pbs">
58
55
  <svg class="icon icon-more-horizontal"><use xlink:href="symbol-defs.svg#icon-more-horizontal"></use></svg><span class="name"> icon-more-horizontal</span>
59
56
  </div>
60
57
  </div>
61
- <div class="glyph fs2">
58
+ <div class="glyph fs1">
62
59
  <div class="clearfix pbs">
63
60
  <svg class="icon icon-refresh-cw"><use xlink:href="symbol-defs.svg#icon-refresh-cw"></use></svg><span class="name"> icon-refresh-cw</span>
64
61
  </div>
65
62
  </div>
66
- <div class="glyph fs2">
63
+ <div class="glyph fs1">
67
64
  <div class="clearfix pbs">
68
65
  <svg class="icon icon-search"><use xlink:href="symbol-defs.svg#icon-search"></use></svg><span class="name"> icon-search</span>
69
66
  </div>
70
67
  </div>
71
- <div class="glyph fs2">
68
+ <div class="glyph fs1">
72
69
  <div class="clearfix pbs">
73
70
  <svg class="icon icon-pause"><use xlink:href="symbol-defs.svg#icon-pause"></use></svg><span class="name"> icon-pause</span>
74
71
  </div>
75
72
  </div>
76
- <div class="glyph fs2">
73
+ <div class="glyph fs1">
77
74
  <div class="clearfix pbs">
78
75
  <svg class="icon icon-play"><use xlink:href="symbol-defs.svg#icon-play"></use></svg><span class="name"> icon-play</span>
79
76
  </div>
80
77
  </div>
81
- <div class="glyph fs2">
78
+ <div class="glyph fs1">
82
79
  <div class="clearfix pbs">
83
80
  <svg class="icon icon-user-x"><use xlink:href="symbol-defs.svg#icon-user-x"></use></svg><span class="name"> icon-user-x</span>
84
81
  </div>
85
82
  </div>
86
- <div class="glyph fs2">
83
+ <div class="glyph fs1">
87
84
  <div class="clearfix pbs">
88
85
  <svg class="icon icon-cloud"><use xlink:href="symbol-defs.svg#icon-cloud"></use></svg><span class="name"> icon-cloud</span>
89
86
  </div>
90
87
  </div>
91
- <div class="glyph fs2">
88
+ <div class="glyph fs1">
92
89
  <div class="clearfix pbs">
93
90
  <svg class="icon icon-codepen"><use xlink:href="symbol-defs.svg#icon-codepen"></use></svg><span class="name"> icon-codepen</span>
94
91
  </div>
95
92
  </div>
96
- <div class="glyph fs2">
93
+ <div class="glyph fs1">
97
94
  <div class="clearfix pbs">
98
95
  <svg class="icon icon-codesandbox"><use xlink:href="symbol-defs.svg#icon-codesandbox"></use></svg><span class="name"> icon-codesandbox</span>
99
96
  </div>
100
97
  </div>
101
- <div class="glyph fs2">
98
+ <div class="glyph fs1">
102
99
  <div class="clearfix pbs">
103
100
  <svg class="icon icon-git-pull-request"><use xlink:href="symbol-defs.svg#icon-git-pull-request"></use></svg><span class="name"> icon-git-pull-request</span>
104
101
  </div>
105
102
  </div>
106
- <div class="glyph fs2">
103
+ <div class="glyph fs1">
107
104
  <div class="clearfix pbs">
108
105
  <svg class="icon icon-grid"><use xlink:href="symbol-defs.svg#icon-grid"></use></svg><span class="name"> icon-grid</span>
109
106
  </div>
110
107
  </div>
111
- <div class="glyph fs2">
108
+ <div class="glyph fs1">
112
109
  <div class="clearfix pbs">
113
110
  <svg class="icon icon-hard-drive"><use xlink:href="symbol-defs.svg#icon-hard-drive"></use></svg><span class="name"> icon-hard-drive</span>
114
111
  </div>
115
112
  </div>
116
- <div class="glyph fs2">
113
+ <div class="glyph fs1">
117
114
  <div class="clearfix pbs">
118
115
  <svg class="icon icon-layout"><use xlink:href="symbol-defs.svg#icon-layout"></use></svg><span class="name"> icon-layout</span>
119
116
  </div>
120
117
  </div>
121
- <div class="glyph fs2">
118
+ <div class="glyph fs1">
122
119
  <div class="clearfix pbs">
123
120
  <svg class="icon icon-list"><use xlink:href="symbol-defs.svg#icon-list"></use></svg><span class="name"> icon-list</span>
124
121
  </div>
125
122
  </div>
126
- <div class="glyph fs2">
123
+ <div class="glyph fs1">
127
124
  <div class="clearfix pbs">
128
125
  <svg class="icon icon-map-pin"><use xlink:href="symbol-defs.svg#icon-map-pin"></use></svg><span class="name"> icon-map-pin</span>
129
126
  </div>
130
127
  </div>
131
- <div class="glyph fs2">
128
+ <div class="glyph fs1">
132
129
  <div class="clearfix pbs">
133
130
  <svg class="icon icon-package"><use xlink:href="symbol-defs.svg#icon-package"></use></svg><span class="name"> icon-package</span>
134
131
  </div>
135
132
  </div>
136
- <div class="glyph fs2">
133
+ <div class="glyph fs1">
137
134
  <div class="clearfix pbs">
138
135
  <svg class="icon icon-bell"><use xlink:href="symbol-defs.svg#icon-bell"></use></svg><span class="name"> icon-bell</span>
139
136
  </div>
140
137
  </div>
141
- <div class="glyph fs2">
138
+ <div class="glyph fs1">
142
139
  <div class="clearfix pbs">
143
140
  <svg class="icon icon-book-open"><use xlink:href="symbol-defs.svg#icon-book-open"></use></svg><span class="name"> icon-book-open</span>
144
141
  </div>
145
142
  </div>
146
- <div class="glyph fs2">
143
+ <div class="glyph fs1">
147
144
  <div class="clearfix pbs">
148
145
  <svg class="icon icon-box"><use xlink:href="symbol-defs.svg#icon-box"></use></svg><span class="name"> icon-box</span>
149
146
  </div>
150
147
  </div>
151
- <div class="glyph fs2">
148
+ <div class="glyph fs1">
152
149
  <div class="clearfix pbs">
153
150
  <svg class="icon icon-menu"><use xlink:href="symbol-defs.svg#icon-menu"></use></svg><span class="name"> icon-menu</span>
154
151
  </div>
155
152
  </div>
156
- <div class="glyph fs2">
153
+ <div class="glyph fs1">
157
154
  <div class="clearfix pbs">
158
155
  <svg class="icon icon-plus"><use xlink:href="symbol-defs.svg#icon-plus"></use></svg><span class="name"> icon-plus</span>
159
156
  </div>
160
157
  </div>
161
- <div class="glyph fs2">
158
+ <div class="glyph fs1">
162
159
  <div class="clearfix pbs">
163
160
  <svg class="icon icon-agent"><use xlink:href="symbol-defs.svg#icon-agent"></use></svg><span class="name"> icon-agent</span>
164
161
  </div>
165
162
  </div>
166
- <div class="glyph fs2">
163
+ <div class="glyph fs1">
167
164
  <div class="clearfix pbs">
168
165
  <svg class="icon icon-arrow-down-circle"><use xlink:href="symbol-defs.svg#icon-arrow-down-circle"></use></svg><span class="name"> icon-arrow-down-circle</span>
169
166
  </div>
170
167
  </div>
171
- <div class="glyph fs2">
168
+ <div class="glyph fs1">
172
169
  <div class="clearfix pbs">
173
170
  <svg class="icon icon-arrow-up-circle"><use xlink:href="symbol-defs.svg#icon-arrow-up-circle"></use></svg><span class="name"> icon-arrow-up-circle</span>
174
171
  </div>
175
172
  </div>
176
- <div class="glyph fs2">
173
+ <div class="glyph fs1">
177
174
  <div class="clearfix pbs">
178
175
  <svg class="icon icon-database"><use xlink:href="symbol-defs.svg#icon-database"></use></svg><span class="name"> icon-database</span>
179
176
  </div>
180
177
  </div>
181
- <div class="glyph fs2">
178
+ <div class="glyph fs1">
182
179
  <div class="clearfix pbs">
183
180
  <svg class="icon icon-download"><use xlink:href="symbol-defs.svg#icon-download"></use></svg><span class="name"> icon-download</span>
184
181
  </div>
185
182
  </div>
186
- <div class="glyph fs2">
183
+ <div class="glyph fs1">
187
184
  <div class="clearfix pbs">
188
185
  <svg class="icon icon-help-circle"><use xlink:href="symbol-defs.svg#icon-help-circle"></use></svg><span class="name"> icon-help-circle</span>
189
186
  </div>
190
187
  </div>
191
- <div class="glyph fs2">
188
+ <div class="glyph fs1">
192
189
  <div class="clearfix pbs">
193
190
  <svg class="icon icon-life-buoy"><use xlink:href="symbol-defs.svg#icon-life-buoy"></use></svg><span class="name"> icon-life-buoy</span>
194
191
  </div>
195
192
  </div>
196
- <div class="glyph fs2">
193
+ <div class="glyph fs1">
197
194
  <div class="clearfix pbs">
198
195
  <svg class="icon icon-log-out"><use xlink:href="symbol-defs.svg#icon-log-out"></use></svg><span class="name"> icon-log-out</span>
199
196
  </div>
200
197
  </div>
201
- <div class="glyph fs2">
198
+ <div class="glyph fs1">
202
199
  <div class="clearfix pbs">
203
200
  <svg class="icon icon-more-vertical"><use xlink:href="symbol-defs.svg#icon-more-vertical"></use></svg><span class="name"> icon-more-vertical</span>
204
201
  </div>
205
202
  </div>
206
- <div class="glyph fs2">
203
+ <div class="glyph fs1">
207
204
  <div class="clearfix pbs">
208
205
  <svg class="icon icon-star"><use xlink:href="symbol-defs.svg#icon-star"></use></svg><span class="name"> icon-star</span>
209
206
  </div>
210
207
  </div>
211
- <div class="glyph fs2">
208
+ <div class="glyph fs1">
212
209
  <div class="clearfix pbs">
213
210
  <svg class="icon icon-upload"><use xlink:href="symbol-defs.svg#icon-upload"></use></svg><span class="name"> icon-upload</span>
214
211
  </div>
215
212
  </div>
216
- <div class="glyph fs2">
213
+ <div class="glyph fs1">
217
214
  <div class="clearfix pbs">
218
215
  <svg class="icon icon-publish"><use xlink:href="symbol-defs.svg#icon-publish"></use></svg><span class="name"> icon-publish</span>
219
216
  </div>
220
217
  </div>
221
- <div class="glyph fs2">
218
+ <div class="glyph fs1">
222
219
  <div class="clearfix pbs">
223
220
  <svg class="icon icon-coffee"><use xlink:href="symbol-defs.svg#icon-coffee"></use></svg><span class="name"> icon-coffee</span>
224
221
  </div>
225
222
  </div>
226
- <div class="glyph fs2">
223
+ <div class="glyph fs1">
227
224
  <div class="clearfix pbs">
228
225
  <svg class="icon icon-frown"><use xlink:href="symbol-defs.svg#icon-frown"></use></svg><span class="name"> icon-frown</span>
229
226
  </div>
230
227
  </div>
231
- <div class="glyph fs2">
228
+ <div class="glyph fs1">
232
229
  <div class="clearfix pbs">
233
230
  <svg class="icon icon-mail"><use xlink:href="symbol-defs.svg#icon-mail"></use></svg><span class="name"> icon-mail</span>
234
231
  </div>
235
232
  </div>
236
- <div class="glyph fs2">
233
+ <div class="glyph fs1">
237
234
  <div class="clearfix pbs">
238
235
  <svg class="icon icon-meh"><use xlink:href="symbol-defs.svg#icon-meh"></use></svg><span class="name"> icon-meh</span>
239
236
  </div>
240
237
  </div>
241
- <div class="glyph fs2">
238
+ <div class="glyph fs1">
242
239
  <div class="clearfix pbs">
243
240
  <svg class="icon icon-dollar-sign"><use xlink:href="symbol-defs.svg#icon-dollar-sign"></use></svg><span class="name"> icon-dollar-sign</span>
244
241
  </div>
245
242
  </div>
246
- <div class="glyph fs2">
243
+ <div class="glyph fs1">
247
244
  <div class="clearfix pbs">
248
245
  <svg class="icon icon-log"><use xlink:href="symbol-defs.svg#icon-log"></use></svg><span class="name"> icon-log</span>
249
246
  </div>
250
247
  </div>
251
- <div class="glyph fs2">
248
+ <div class="glyph fs1">
252
249
  <div class="clearfix pbs">
253
250
  <svg class="icon icon-campaign"><use xlink:href="symbol-defs.svg#icon-campaign"></use></svg><span class="name"> icon-campaign</span>
254
251
  </div>
255
252
  </div>
256
- <div class="glyph fs2">
253
+ <div class="glyph fs1">
257
254
  <div class="clearfix pbs">
258
255
  <svg class="icon icon-contact"><use xlink:href="symbol-defs.svg#icon-contact"></use></svg><span class="name"> icon-contact</span>
259
256
  </div>
260
257
  </div>
261
- <div class="glyph fs2">
258
+ <div class="glyph fs1">
262
259
  <div class="clearfix pbs">
263
260
  <svg class="icon icon-flow"><use xlink:href="symbol-defs.svg#icon-flow"></use></svg><span class="name"> icon-flow</span>
264
261
  </div>
265
262
  </div>
266
- <div class="glyph fs2">
263
+ <div class="glyph fs1">
267
264
  <div class="clearfix pbs">
268
265
  <svg class="icon icon-activity"><use xlink:href="symbol-defs.svg#icon-activity"></use></svg><span class="name"> icon-activity</span>
269
266
  </div>
270
267
  </div>
271
- <div class="glyph fs2">
268
+ <div class="glyph fs1">
272
269
  <div class="clearfix pbs">
273
270
  <svg class="icon icon-alert-circle"><use xlink:href="symbol-defs.svg#icon-alert-circle"></use></svg><span class="name"> icon-alert-circle</span>
274
271
  </div>
275
272
  </div>
276
- <div class="glyph fs2">
273
+ <div class="glyph fs1">
277
274
  <div class="clearfix pbs">
278
275
  <svg class="icon icon-alert-octagon"><use xlink:href="symbol-defs.svg#icon-alert-octagon"></use></svg><span class="name"> icon-alert-octagon</span>
279
276
  </div>
280
277
  </div>
281
- <div class="glyph fs2">
278
+ <div class="glyph fs1">
282
279
  <div class="clearfix pbs">
283
280
  <svg class="icon icon-alert-triangle"><use xlink:href="symbol-defs.svg#icon-alert-triangle"></use></svg><span class="name"> icon-alert-triangle</span>
284
281
  </div>
285
282
  </div>
286
- <div class="glyph fs2">
283
+ <div class="glyph fs1">
287
284
  <div class="clearfix pbs">
288
285
  <svg class="icon icon-archive"><use xlink:href="symbol-defs.svg#icon-archive"></use></svg><span class="name"> icon-archive</span>
289
286
  </div>
290
287
  </div>
291
- <div class="glyph fs2">
288
+ <div class="glyph fs1">
292
289
  <div class="clearfix pbs">
293
290
  <svg class="icon icon-battery"><use xlink:href="symbol-defs.svg#icon-battery"></use></svg><span class="name"> icon-battery</span>
294
291
  </div>
295
292
  </div>
296
- <div class="glyph fs2">
293
+ <div class="glyph fs1">
297
294
  <div class="clearfix pbs">
298
295
  <svg class="icon icon-battery-charging"><use xlink:href="symbol-defs.svg#icon-battery-charging"></use></svg><span class="name"> icon-battery-charging</span>
299
296
  </div>
300
297
  </div>
301
- <div class="glyph fs2">
298
+ <div class="glyph fs1">
302
299
  <div class="clearfix pbs">
303
300
  <svg class="icon icon-book"><use xlink:href="symbol-defs.svg#icon-book"></use></svg><span class="name"> icon-book</span>
304
301
  </div>
305
302
  </div>
306
- <div class="glyph fs2">
303
+ <div class="glyph fs1">
307
304
  <div class="clearfix pbs">
308
305
  <svg class="icon icon-briefcase"><use xlink:href="symbol-defs.svg#icon-briefcase"></use></svg><span class="name"> icon-briefcase</span>
309
306
  </div>
310
307
  </div>
311
- <div class="glyph fs2">
308
+ <div class="glyph fs1">
312
309
  <div class="clearfix pbs">
313
310
  <svg class="icon icon-calendar1"><use xlink:href="symbol-defs.svg#icon-calendar1"></use></svg><span class="name"> icon-calendar1</span>
314
311
  </div>
315
312
  </div>
316
- <div class="glyph fs2">
313
+ <div class="glyph fs1">
317
314
  <div class="clearfix pbs">
318
315
  <svg class="icon icon-camera"><use xlink:href="symbol-defs.svg#icon-camera"></use></svg><span class="name"> icon-camera</span>
319
316
  </div>
320
317
  </div>
321
- <div class="glyph fs2">
318
+ <div class="glyph fs1">
322
319
  <div class="clearfix pbs">
323
320
  <svg class="icon icon-check"><use xlink:href="symbol-defs.svg#icon-check"></use></svg><span class="name"> icon-check</span>
324
321
  </div>
325
322
  </div>
326
- <div class="glyph fs2">
323
+ <div class="glyph fs1">
327
324
  <div class="clearfix pbs">
328
325
  <svg class="icon icon-check-square"><use xlink:href="symbol-defs.svg#icon-check-square"></use></svg><span class="name"> icon-check-square</span>
329
326
  </div>
330
327
  </div>
331
- <div class="glyph fs2">
328
+ <div class="glyph fs1">
332
329
  <div class="clearfix pbs">
333
330
  <svg class="icon icon-chevron-down"><use xlink:href="symbol-defs.svg#icon-chevron-down"></use></svg><span class="name"> icon-chevron-down</span>
334
331
  </div>
335
332
  </div>
336
- <div class="glyph fs2">
333
+ <div class="glyph fs1">
337
334
  <div class="clearfix pbs">
338
335
  <svg class="icon icon-chevron-left"><use xlink:href="symbol-defs.svg#icon-chevron-left"></use></svg><span class="name"> icon-chevron-left</span>
339
336
  </div>
340
337
  </div>
341
- <div class="glyph fs2">
338
+ <div class="glyph fs1">
342
339
  <div class="clearfix pbs">
343
340
  <svg class="icon icon-chevron-right"><use xlink:href="symbol-defs.svg#icon-chevron-right"></use></svg><span class="name"> icon-chevron-right</span>
344
341
  </div>
345
342
  </div>
346
- <div class="glyph fs2">
343
+ <div class="glyph fs1">
347
344
  <div class="clearfix pbs">
348
345
  <svg class="icon icon-chevron-up"><use xlink:href="symbol-defs.svg#icon-chevron-up"></use></svg><span class="name"> icon-chevron-up</span>
349
346
  </div>
350
347
  </div>
351
- <div class="glyph fs2">
348
+ <div class="glyph fs1">
352
349
  <div class="clearfix pbs">
353
350
  <svg class="icon icon-chevrons-down"><use xlink:href="symbol-defs.svg#icon-chevrons-down"></use></svg><span class="name"> icon-chevrons-down</span>
354
351
  </div>
355
352
  </div>
356
- <div class="glyph fs2">
353
+ <div class="glyph fs1">
357
354
  <div class="clearfix pbs">
358
355
  <svg class="icon icon-chevrons-left"><use xlink:href="symbol-defs.svg#icon-chevrons-left"></use></svg><span class="name"> icon-chevrons-left</span>
359
356
  </div>
360
357
  </div>
361
- <div class="glyph fs2">
358
+ <div class="glyph fs1">
362
359
  <div class="clearfix pbs">
363
360
  <svg class="icon icon-chevrons-right"><use xlink:href="symbol-defs.svg#icon-chevrons-right"></use></svg><span class="name"> icon-chevrons-right</span>
364
361
  </div>
365
362
  </div>
366
- <div class="glyph fs2">
363
+ <div class="glyph fs1">
367
364
  <div class="clearfix pbs">
368
365
  <svg class="icon icon-chevrons-up"><use xlink:href="symbol-defs.svg#icon-chevrons-up"></use></svg><span class="name"> icon-chevrons-up</span>
369
366
  </div>
370
367
  </div>
371
- <div class="glyph fs2">
368
+ <div class="glyph fs1">
372
369
  <div class="clearfix pbs">
373
370
  <svg class="icon icon-circle"><use xlink:href="symbol-defs.svg#icon-circle"></use></svg><span class="name"> icon-circle</span>
374
371
  </div>
375
372
  </div>
376
- <div class="glyph fs2">
373
+ <div class="glyph fs1">
377
374
  <div class="clearfix pbs">
378
375
  <svg class="icon icon-clipboard"><use xlink:href="symbol-defs.svg#icon-clipboard"></use></svg><span class="name"> icon-clipboard</span>
379
376
  </div>
380
377
  </div>
381
- <div class="glyph fs2">
378
+ <div class="glyph fs1">
382
379
  <div class="clearfix pbs">
383
380
  <svg class="icon icon-clock"><use xlink:href="symbol-defs.svg#icon-clock"></use></svg><span class="name"> icon-clock</span>
384
381
  </div>
385
382
  </div>
386
- <div class="glyph fs2">
383
+ <div class="glyph fs1">
387
384
  <div class="clearfix pbs">
388
385
  <svg class="icon icon-cloud1"><use xlink:href="symbol-defs.svg#icon-cloud1"></use></svg><span class="name"> icon-cloud1</span>
389
386
  </div>
390
387
  </div>
391
- <div class="glyph fs2">
388
+ <div class="glyph fs1">
392
389
  <div class="clearfix pbs">
393
390
  <svg class="icon icon-code"><use xlink:href="symbol-defs.svg#icon-code"></use></svg><span class="name"> icon-code</span>
394
391
  </div>
395
392
  </div>
396
- <div class="glyph fs2">
393
+ <div class="glyph fs1">
397
394
  <div class="clearfix pbs">
398
395
  <svg class="icon icon-copy"><use xlink:href="symbol-defs.svg#icon-copy"></use></svg><span class="name"> icon-copy</span>
399
396
  </div>
400
397
  </div>
401
- <div class="glyph fs2">
398
+ <div class="glyph fs1">
402
399
  <div class="clearfix pbs">
403
400
  <svg class="icon icon-credit-card"><use xlink:href="symbol-defs.svg#icon-credit-card"></use></svg><span class="name"> icon-credit-card</span>
404
401
  </div>
405
402
  </div>
406
- <div class="glyph fs2">
403
+ <div class="glyph fs1">
407
404
  <div class="clearfix pbs">
408
405
  <svg class="icon icon-disc"><use xlink:href="symbol-defs.svg#icon-disc"></use></svg><span class="name"> icon-disc</span>
409
406
  </div>
410
407
  </div>
411
- <div class="glyph fs2">
408
+ <div class="glyph fs1">
412
409
  <div class="clearfix pbs">
413
410
  <svg class="icon icon-edit"><use xlink:href="symbol-defs.svg#icon-edit"></use></svg><span class="name"> icon-edit</span>
414
411
  </div>
415
412
  </div>
416
- <div class="glyph fs2">
413
+ <div class="glyph fs1">
417
414
  <div class="clearfix pbs">
418
415
  <svg class="icon icon-edit-3"><use xlink:href="symbol-defs.svg#icon-edit-3"></use></svg><span class="name"> icon-edit-3</span>
419
416
  </div>
420
417
  </div>
421
- <div class="glyph fs2">
418
+ <div class="glyph fs1">
422
419
  <div class="clearfix pbs">
423
420
  <svg class="icon icon-external-link1"><use xlink:href="symbol-defs.svg#icon-external-link1"></use></svg><span class="name"> icon-external-link1</span>
424
421
  </div>
425
422
  </div>
426
- <div class="glyph fs2">
423
+ <div class="glyph fs1">
427
424
  <div class="clearfix pbs">
428
425
  <svg class="icon icon-flag"><use xlink:href="symbol-defs.svg#icon-flag"></use></svg><span class="name"> icon-flag</span>
429
426
  </div>
430
427
  </div>
431
- <div class="glyph fs2">
428
+ <div class="glyph fs1">
432
429
  <div class="clearfix pbs">
433
430
  <svg class="icon icon-home"><use xlink:href="symbol-defs.svg#icon-home"></use></svg><span class="name"> icon-home</span>
434
431
  </div>
435
432
  </div>
436
- <div class="glyph fs2">
433
+ <div class="glyph fs1">
437
434
  <div class="clearfix pbs">
438
435
  <svg class="icon icon-image"><use xlink:href="symbol-defs.svg#icon-image"></use></svg><span class="name"> icon-image</span>
439
436
  </div>
440
437
  </div>
441
- <div class="glyph fs2">
438
+ <div class="glyph fs1">
442
439
  <div class="clearfix pbs">
443
440
  <svg class="icon icon-inbox"><use xlink:href="symbol-defs.svg#icon-inbox"></use></svg><span class="name"> icon-inbox</span>
444
441
  </div>
445
442
  </div>
446
- <div class="glyph fs2">
443
+ <div class="glyph fs1">
447
444
  <div class="clearfix pbs">
448
445
  <svg class="icon icon-info"><use xlink:href="symbol-defs.svg#icon-info"></use></svg><span class="name"> icon-info</span>
449
446
  </div>
450
447
  </div>
451
- <div class="glyph fs2">
448
+ <div class="glyph fs1">
452
449
  <div class="clearfix pbs">
453
450
  <svg class="icon icon-layers"><use xlink:href="symbol-defs.svg#icon-layers"></use></svg><span class="name"> icon-layers</span>
454
451
  </div>
455
452
  </div>
456
- <div class="glyph fs2">
453
+ <div class="glyph fs1">
457
454
  <div class="clearfix pbs">
458
455
  <svg class="icon icon-loader"><use xlink:href="symbol-defs.svg#icon-loader"></use></svg><span class="name"> icon-loader</span>
459
456
  </div>
460
457
  </div>
461
- <div class="glyph fs2">
458
+ <div class="glyph fs1">
462
459
  <div class="clearfix pbs">
463
460
  <svg class="icon icon-lock"><use xlink:href="symbol-defs.svg#icon-lock"></use></svg><span class="name"> icon-lock</span>
464
461
  </div>
465
462
  </div>
466
- <div class="glyph fs2">
463
+ <div class="glyph fs1">
467
464
  <div class="clearfix pbs">
468
465
  <svg class="icon icon-mail1"><use xlink:href="symbol-defs.svg#icon-mail1"></use></svg><span class="name"> icon-mail1</span>
469
466
  </div>
470
467
  </div>
471
- <div class="glyph fs2">
468
+ <div class="glyph fs1">
472
469
  <div class="clearfix pbs">
473
470
  <svg class="icon icon-message-square"><use xlink:href="symbol-defs.svg#icon-message-square"></use></svg><span class="name"> icon-message-square</span>
474
471
  </div>
475
472
  </div>
476
- <div class="glyph fs2">
473
+ <div class="glyph fs1">
477
474
  <div class="clearfix pbs">
478
475
  <svg class="icon icon-mic"><use xlink:href="symbol-defs.svg#icon-mic"></use></svg><span class="name"> icon-mic</span>
479
476
  </div>
480
477
  </div>
481
- <div class="glyph fs2">
478
+ <div class="glyph fs1">
482
479
  <div class="clearfix pbs">
483
480
  <svg class="icon icon-paperclip"><use xlink:href="symbol-defs.svg#icon-paperclip"></use></svg><span class="name"> icon-paperclip</span>
484
481
  </div>
485
482
  </div>
486
- <div class="glyph fs2">
483
+ <div class="glyph fs1">
487
484
  <div class="clearfix pbs">
488
485
  <svg class="icon icon-phone"><use xlink:href="symbol-defs.svg#icon-phone"></use></svg><span class="name"> icon-phone</span>
489
486
  </div>
490
487
  </div>
491
- <div class="glyph fs2">
488
+ <div class="glyph fs1">
492
489
  <div class="clearfix pbs">
493
490
  <svg class="icon icon-phone-forwarded"><use xlink:href="symbol-defs.svg#icon-phone-forwarded"></use></svg><span class="name"> icon-phone-forwarded</span>
494
491
  </div>
495
492
  </div>
496
- <div class="glyph fs2">
493
+ <div class="glyph fs1">
497
494
  <div class="clearfix pbs">
498
495
  <svg class="icon icon-phone-incoming"><use xlink:href="symbol-defs.svg#icon-phone-incoming"></use></svg><span class="name"> icon-phone-incoming</span>
499
496
  </div>
500
497
  </div>
501
- <div class="glyph fs2">
498
+ <div class="glyph fs1">
502
499
  <div class="clearfix pbs">
503
500
  <svg class="icon icon-phone-missed"><use xlink:href="symbol-defs.svg#icon-phone-missed"></use></svg><span class="name"> icon-phone-missed</span>
504
501
  </div>
505
502
  </div>
506
- <div class="glyph fs2">
503
+ <div class="glyph fs1">
507
504
  <div class="clearfix pbs">
508
505
  <svg class="icon icon-phone-outgoing"><use xlink:href="symbol-defs.svg#icon-phone-outgoing"></use></svg><span class="name"> icon-phone-outgoing</span>
509
506
  </div>
510
507
  </div>
511
- <div class="glyph fs2">
508
+ <div class="glyph fs1">
512
509
  <div class="clearfix pbs">
513
510
  <svg class="icon icon-radio"><use xlink:href="symbol-defs.svg#icon-radio"></use></svg><span class="name"> icon-radio</span>
514
511
  </div>
515
512
  </div>
516
- <div class="glyph fs2">
513
+ <div class="glyph fs1">
517
514
  <div class="clearfix pbs">
518
515
  <svg class="icon icon-repeat"><use xlink:href="symbol-defs.svg#icon-repeat"></use></svg><span class="name"> icon-repeat</span>
519
516
  </div>
520
517
  </div>
521
- <div class="glyph fs2">
518
+ <div class="glyph fs1">
522
519
  <div class="clearfix pbs">
523
520
  <svg class="icon icon-send"><use xlink:href="symbol-defs.svg#icon-send"></use></svg><span class="name"> icon-send</span>
524
521
  </div>
525
522
  </div>
526
- <div class="glyph fs2">
523
+ <div class="glyph fs1">
527
524
  <div class="clearfix pbs">
528
525
  <svg class="icon icon-settings"><use xlink:href="symbol-defs.svg#icon-settings"></use></svg><span class="name"> icon-settings</span>
529
526
  </div>
530
527
  </div>
531
- <div class="glyph fs2">
528
+ <div class="glyph fs1">
532
529
  <div class="clearfix pbs">
533
530
  <svg class="icon icon-shield"><use xlink:href="symbol-defs.svg#icon-shield"></use></svg><span class="name"> icon-shield</span>
534
531
  </div>
535
532
  </div>
536
- <div class="glyph fs2">
533
+ <div class="glyph fs1">
537
534
  <div class="clearfix pbs">
538
535
  <svg class="icon icon-shield-off"><use xlink:href="symbol-defs.svg#icon-shield-off"></use></svg><span class="name"> icon-shield-off</span>
539
536
  </div>
540
537
  </div>
541
- <div class="glyph fs2">
538
+ <div class="glyph fs1">
542
539
  <div class="clearfix pbs">
543
540
  <svg class="icon icon-sidebar"><use xlink:href="symbol-defs.svg#icon-sidebar"></use></svg><span class="name"> icon-sidebar</span>
544
541
  </div>
545
542
  </div>
546
- <div class="glyph fs2">
543
+ <div class="glyph fs1">
547
544
  <div class="clearfix pbs">
548
545
  <svg class="icon icon-slash"><use xlink:href="symbol-defs.svg#icon-slash"></use></svg><span class="name"> icon-slash</span>
549
546
  </div>
550
547
  </div>
551
- <div class="glyph fs2">
548
+ <div class="glyph fs1">
552
549
  <div class="clearfix pbs">
553
550
  <svg class="icon icon-sliders"><use xlink:href="symbol-defs.svg#icon-sliders"></use></svg><span class="name"> icon-sliders</span>
554
551
  </div>
555
552
  </div>
556
- <div class="glyph fs2">
553
+ <div class="glyph fs1">
557
554
  <div class="clearfix pbs">
558
555
  <svg class="icon icon-smartphone"><use xlink:href="symbol-defs.svg#icon-smartphone"></use></svg><span class="name"> icon-smartphone</span>
559
556
  </div>
560
557
  </div>
561
- <div class="glyph fs2">
558
+ <div class="glyph fs1">
562
559
  <div class="clearfix pbs">
563
560
  <svg class="icon icon-square"><use xlink:href="symbol-defs.svg#icon-square"></use></svg><span class="name"> icon-square</span>
564
561
  </div>
565
562
  </div>
566
- <div class="glyph fs2">
563
+ <div class="glyph fs1">
567
564
  <div class="clearfix pbs">
568
565
  <svg class="icon icon-tag"><use xlink:href="symbol-defs.svg#icon-tag"></use></svg><span class="name"> icon-tag</span>
569
566
  </div>
570
567
  </div>
571
- <div class="glyph fs2">
568
+ <div class="glyph fs1">
572
569
  <div class="clearfix pbs">
573
570
  <svg class="icon icon-tool"><use xlink:href="symbol-defs.svg#icon-tool"></use></svg><span class="name"> icon-tool</span>
574
571
  </div>
575
572
  </div>
576
- <div class="glyph fs2">
573
+ <div class="glyph fs1">
577
574
  <div class="clearfix pbs">
578
575
  <svg class="icon icon-trash"><use xlink:href="symbol-defs.svg#icon-trash"></use></svg><span class="name"> icon-trash</span>
579
576
  </div>
580
577
  </div>
581
- <div class="glyph fs2">
578
+ <div class="glyph fs1">
582
579
  <div class="clearfix pbs">
583
580
  <svg class="icon icon-trash-2"><use xlink:href="symbol-defs.svg#icon-trash-2"></use></svg><span class="name"> icon-trash-2</span>
584
581
  </div>
585
582
  </div>
586
- <div class="glyph fs2">
583
+ <div class="glyph fs1">
587
584
  <div class="clearfix pbs">
588
585
  <svg class="icon icon-user"><use xlink:href="symbol-defs.svg#icon-user"></use></svg><span class="name"> icon-user</span>
589
586
  </div>
590
587
  </div>
591
- <div class="glyph fs2">
588
+ <div class="glyph fs1">
592
589
  <div class="clearfix pbs">
593
590
  <svg class="icon icon-users"><use xlink:href="symbol-defs.svg#icon-users"></use></svg><span class="name"> icon-users</span>
594
591
  </div>
595
592
  </div>
596
- <div class="glyph fs2">
593
+ <div class="glyph fs1">
597
594
  <div class="clearfix pbs">
598
595
  <svg class="icon icon-speaker"><use xlink:href="symbol-defs.svg#icon-speaker"></use></svg><span class="name"> icon-speaker</span>
599
596
  </div>
600
597
  </div>
601
- <div class="glyph fs2">
598
+ <div class="glyph fs1">
602
599
  <div class="clearfix pbs">
603
600
  <svg class="icon icon-x"><use xlink:href="symbol-defs.svg#icon-x"></use></svg><span class="name"> icon-x</span>
604
601
  </div>
605
602
  </div>
606
- <div class="glyph fs2">
603
+ <div class="glyph fs1">
607
604
  <div class="clearfix pbs">
608
605
  <svg class="icon icon-x-octagon"><use xlink:href="symbol-defs.svg#icon-x-octagon"></use></svg><span class="name"> icon-x-octagon</span>
609
606
  </div>
610
607
  </div>
611
- <div class="glyph fs2">
608
+ <div class="glyph fs1">
612
609
  <div class="clearfix pbs">
613
610
  <svg class="icon icon-zap"><use xlink:href="symbol-defs.svg#icon-zap"></use></svg><span class="name"> icon-zap</span>
614
611
  </div>
615
612
  </div>
616
- <div class="glyph fs2">
613
+ <div class="glyph fs1">
617
614
  <div class="clearfix pbs">
618
615
  <svg class="icon icon-contact-cal"><use xlink:href="symbol-defs.svg#icon-contact-cal"></use></svg><span class="name"> icon-contact-cal</span>
619
616
  </div>
620
617
  </div>
621
- <div class="glyph fs2">
618
+ <div class="glyph fs1">
622
619
  <div class="clearfix pbs">
623
620
  <svg class="icon icon-send-mobile"><use xlink:href="symbol-defs.svg#icon-send-mobile"></use></svg><span class="name"> icon-send-mobile</span>
624
621
  </div>
625
622
  </div>
626
623
  </div>
627
624
  <div class="clearfix mhl ptl">
628
- <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
629
- <div class="glyph fs3">
625
+ <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
626
+ <div class="glyph fs2">
630
627
  <div class="clearfix pbs">
631
- <svg class="icon icon-zapier"><use xlink:href="symbol-defs.svg#icon-zapier"></use></svg><span class="name"> icon-zapier</span>
628
+ <svg class="icon icon-credits"><use xlink:href="symbol-defs.svg#icon-credits"></use></svg><span class="name"> icon-credits</span>
632
629
  </div>
633
630
  </div>
634
- <div class="glyph fs3">
631
+ <div class="glyph fs2">
632
+ <div class="clearfix pbs">
633
+ <svg class="icon icon-channel"><use xlink:href="symbol-defs.svg#icon-channel"></use></svg><span class="name"> icon-channel</span>
634
+ </div>
635
+ </div>
636
+ <div class="glyph fs2">
635
637
  <div class="clearfix pbs">
636
638
  <svg class="icon icon-users1"><use xlink:href="symbol-defs.svg#icon-users1"></use></svg><span class="name"> icon-users1</span>
637
639
  </div>
638
640
  </div>
639
- <div class="glyph fs3">
641
+ <div class="glyph fs2">
640
642
  <div class="clearfix pbs">
641
643
  <svg class="icon icon-lock2"><use xlink:href="symbol-defs.svg#icon-lock2"></use></svg><span class="name"> icon-lock2</span>
642
644
  </div>
643
645
  </div>
644
- <div class="glyph fs3">
646
+ <div class="glyph fs2">
645
647
  <div class="clearfix pbs">
646
648
  <svg class="icon icon-atom"><use xlink:href="symbol-defs.svg#icon-atom"></use></svg><span class="name"> icon-atom</span>
647
649
  </div>
648
650
  </div>
649
- <div class="glyph fs3">
651
+ <div class="glyph fs2">
650
652
  <div class="clearfix pbs">
651
653
  <svg class="icon icon-paperplane"><use xlink:href="symbol-defs.svg#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
652
654
  </div>
653
655
  </div>
654
- <div class="glyph fs3">
656
+ <div class="glyph fs2">
655
657
  <div class="clearfix pbs">
656
658
  <svg class="icon icon-cancel"><use xlink:href="symbol-defs.svg#icon-cancel"></use></svg><span class="name"> icon-cancel</span>
657
659
  </div>
658
660
  </div>
659
661
  </div>
660
662
  <div class="clearfix mhl ptl">
661
- <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
662
- <div class="glyph fs4">
663
- <div class="clearfix pbs">
664
- <svg class="icon icon-channel"><use xlink:href="symbol-defs.svg#icon-channel"></use></svg><span class="name"> icon-channel</span>
665
- </div>
666
- </div>
667
- <div class="glyph fs4">
668
- <div class="clearfix pbs">
669
- <svg class="icon icon-users1"><use xlink:href="symbol-defs.svg#icon-users1"></use></svg><span class="name"> icon-users1</span>
670
- </div>
671
- </div>
672
- <div class="glyph fs4">
673
- <div class="clearfix pbs">
674
- <svg class="icon icon-lock2"><use xlink:href="symbol-defs.svg#icon-lock2"></use></svg><span class="name"> icon-lock2</span>
675
- </div>
676
- </div>
677
- <div class="glyph fs4">
678
- <div class="clearfix pbs">
679
- <svg class="icon icon-atom"><use xlink:href="symbol-defs.svg#icon-atom"></use></svg><span class="name"> icon-atom</span>
680
- </div>
681
- </div>
682
- <div class="glyph fs4">
663
+ <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
664
+ <div class="glyph fs3">
683
665
  <div class="clearfix pbs">
684
- <svg class="icon icon-paperplane"><use xlink:href="symbol-defs.svg#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
666
+ <svg class="icon icon-language"><use xlink:href="symbol-defs.svg#icon-language"></use></svg><span class="name"> icon-language</span>
685
667
  </div>
686
668
  </div>
669
+ </div>
670
+ <div class="clearfix mhl ptl">
671
+ <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
687
672
  <div class="glyph fs4">
688
673
  <div class="clearfix pbs">
689
- <svg class="icon icon-cancel"><use xlink:href="symbol-defs.svg#icon-cancel"></use></svg><span class="name"> icon-cancel</span>
674
+ <svg class="icon icon-zapier"><use xlink:href="symbol-defs.svg#icon-zapier"></use></svg><span class="name"> icon-zapier</span>
690
675
  </div>
691
676
  </div>
692
677
  </div>