@nyaruka/temba-components 0.26.8 → 0.26.9

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 (98) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/demo/index.html +9 -1
  3. package/dist/{d08b61e5.js → d0cc86be.js} +386 -38
  4. package/dist/index.js +386 -38
  5. package/dist/static/icons/symbol-defs.svg +13 -1
  6. package/dist/static/img/schemes/email.svg +1 -0
  7. package/dist/static/img/schemes/facebook.svg +1 -0
  8. package/dist/static/img/schemes/instagram.svg +1 -0
  9. package/dist/static/img/schemes/line.svg +1 -0
  10. package/dist/static/img/schemes/messenger.svg +1 -0
  11. package/dist/static/img/schemes/tel.svg +34 -0
  12. package/dist/static/img/schemes/telegram.svg +1 -0
  13. package/dist/static/img/schemes/twitter.svg +1 -0
  14. package/dist/static/img/schemes/viber.svg +1 -0
  15. package/dist/static/img/schemes/vk.svg +1 -0
  16. package/dist/static/img/schemes/whatsapp.svg +1 -0
  17. package/dist/sw.js +1 -1
  18. package/dist/sw.js.map +1 -1
  19. package/dist/templates/components-body.html +1 -1
  20. package/dist/templates/components-head.html +1 -1
  21. package/out-tsc/src/RapidElement.js.map +1 -1
  22. package/out-tsc/src/RefreshElement.js +28 -0
  23. package/out-tsc/src/RefreshElement.js.map +1 -0
  24. package/out-tsc/src/button/Button.js +4 -0
  25. package/out-tsc/src/button/Button.js.map +1 -1
  26. package/out-tsc/src/contacts/ContactChat.js +5 -13
  27. package/out-tsc/src/contacts/ContactChat.js.map +1 -1
  28. package/out-tsc/src/contacts/ContactFieldEditor.js +199 -0
  29. package/out-tsc/src/contacts/ContactFieldEditor.js.map +1 -0
  30. package/out-tsc/src/contacts/ContactFields.js +106 -0
  31. package/out-tsc/src/contacts/ContactFields.js.map +1 -0
  32. package/out-tsc/src/contacts/ContactGroups.js +39 -0
  33. package/out-tsc/src/contacts/ContactGroups.js.map +1 -0
  34. package/out-tsc/src/contacts/ContactName.js +40 -0
  35. package/out-tsc/src/contacts/ContactName.js.map +1 -0
  36. package/out-tsc/src/contacts/ContactStoreElement.js +44 -0
  37. package/out-tsc/src/contacts/ContactStoreElement.js.map +1 -0
  38. package/out-tsc/src/contacts/ContactUrn.js +38 -0
  39. package/out-tsc/src/contacts/ContactUrn.js.map +1 -0
  40. package/out-tsc/src/contacts/events.js +42 -4
  41. package/out-tsc/src/contacts/events.js.map +1 -1
  42. package/out-tsc/src/interfaces.js +1 -0
  43. package/out-tsc/src/interfaces.js.map +1 -1
  44. package/out-tsc/src/label/Label.js +32 -12
  45. package/out-tsc/src/label/Label.js.map +1 -1
  46. package/out-tsc/src/select/Select.js +4 -4
  47. package/out-tsc/src/select/Select.js.map +1 -1
  48. package/out-tsc/src/store/Store.js +97 -3
  49. package/out-tsc/src/store/Store.js.map +1 -1
  50. package/out-tsc/src/store/StoreElement.js +55 -0
  51. package/out-tsc/src/store/StoreElement.js.map +1 -0
  52. package/out-tsc/src/textinput/TextInput.js +35 -17
  53. package/out-tsc/src/textinput/TextInput.js.map +1 -1
  54. package/out-tsc/src/vectoricon/VectorIcon.js +16 -14
  55. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  56. package/out-tsc/temba-modules.js +12 -0
  57. package/out-tsc/temba-modules.js.map +1 -1
  58. package/package.json +3 -3
  59. package/rollup.config.js +1 -0
  60. package/src/RapidElement.ts +0 -1
  61. package/src/RefreshElement.ts +33 -0
  62. package/src/button/Button.ts +4 -0
  63. package/src/contacts/ContactChat.ts +7 -16
  64. package/src/contacts/ContactFieldEditor.ts +201 -0
  65. package/src/contacts/ContactFields.ts +112 -0
  66. package/src/contacts/ContactGroups.ts +41 -0
  67. package/src/contacts/ContactName.ts +37 -0
  68. package/src/contacts/ContactStoreElement.ts +51 -0
  69. package/src/contacts/ContactUrn.ts +38 -0
  70. package/src/contacts/events.ts +41 -4
  71. package/src/interfaces.ts +2 -0
  72. package/src/label/Label.ts +30 -7
  73. package/src/select/Select.ts +4 -4
  74. package/src/store/Store.ts +124 -3
  75. package/src/store/StoreElement.ts +71 -0
  76. package/src/textinput/TextInput.ts +48 -27
  77. package/src/vectoricon/VectorIcon.ts +19 -14
  78. package/static/icons/Read Me.txt +1 -1
  79. package/static/icons/SVG/calendar1.svg +5 -0
  80. package/static/icons/SVG/corner-down-left.svg +5 -0
  81. package/static/icons/SVG/more-horizontal.svg +5 -0
  82. package/static/icons/SVG/refresh-cw.svg +5 -0
  83. package/static/icons/demo-external-svg.html +21 -1
  84. package/static/icons/demo.html +34 -2
  85. package/static/icons/selection.json +412 -316
  86. package/static/icons/symbol-defs.svg +13 -1
  87. package/static/img/schemes/email.svg +1 -0
  88. package/static/img/schemes/facebook.svg +1 -0
  89. package/static/img/schemes/instagram.svg +1 -0
  90. package/static/img/schemes/line.svg +1 -0
  91. package/static/img/schemes/messenger.svg +1 -0
  92. package/static/img/schemes/tel.svg +34 -0
  93. package/static/img/schemes/telegram.svg +1 -0
  94. package/static/img/schemes/twitter.svg +1 -0
  95. package/static/img/schemes/viber.svg +1 -0
  96. package/static/img/schemes/vk.svg +1 -0
  97. package/static/img/schemes/whatsapp.svg +1 -0
  98. package/temba-modules.ts +12 -0
package/static/icons/Read Me.txt CHANGED
@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
4
4
 
5
5
  *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
6
6
 
7
- <svg class="icon icon-pause"><use xlink:href="#icon-pause"></use></svg>
7
+ <svg class="icon icon-calendar"><use xlink:href="#icon-calendar"></use></svg>
8
8
 
9
9
  You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
10
10
 
package/static/icons/SVG/calendar1.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>calendar1</title>
4
+ <path d="M7 2v1h-2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-2v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1v1h-6v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1zM20 9h-16v-3c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h2v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h6v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h2c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707zM4 11h16v9c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707z"></path>
5
+ </svg>
package/static/icons/SVG/corner-down-left.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>corner-down-left</title>
4
+ <path d="M19 4v7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879h-9.586l3.293-3.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5 5c-0.092 0.092-0.166 0.202-0.217 0.324-0.15 0.362-0.078 0.795 0.217 1.090l5 5c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-3.293-3.293h9.586c1.38 0 2.632-0.561 3.536-1.464s1.464-2.156 1.464-3.536v-7c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
5
+ </svg>
package/static/icons/SVG/more-horizontal.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>more-horizontal</title>
4
+ <path d="M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM21 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM7 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z"></path>
5
+ </svg>
package/static/icons/SVG/refresh-cw.svg ADDED
@@ -0,0 +1,5 @@
1
+ <!-- Generated by IcoMoon.io -->
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
3
+ <title>refresh-cw</title>
4
+ <path d="M4.453 9.334c0.737-2.083 2.247-3.669 4.096-4.552s4.032-1.059 6.114-0.322c1.186 0.42 2.206 1.088 2.983 1.88l2.83 2.66h-3.476c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.005 0 0.009 0 0.014 0 0.137-0.001 0.268-0.031 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.013 0.024-0.026 0.036-0.039 0.075-0.087 0.133-0.183 0.173-0.285s0.064-0.211 0.069-0.326c0.001-0.015 0.001-0.029 0.001-0.043v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.689l-2.926-2.749c-0.992-1.010-2.271-1.843-3.743-2.364-2.603-0.921-5.335-0.699-7.643 0.402s-4.199 3.086-5.12 5.689c-0.185 0.52 0.088 1.091 0.608 1.276s1.092-0.088 1.276-0.609zM2 16.312l2.955 2.777c1.929 1.931 4.49 2.908 7.048 2.909s5.119-0.975 7.072-2.927c1.104-1.104 1.901-2.407 2.361-3.745 0.18-0.522-0.098-1.091-0.621-1.271s-1.091 0.098-1.271 0.621c-0.361 1.050-0.993 2.091-1.883 2.981-1.563 1.562-3.609 2.342-5.657 2.342s-4.094-0.782-5.679-2.366l-2.8-2.633h3.475c0.552 0 1-0.448 1-1s-0.448-1-1-1h-5.997c-0.005 0-0.009 0-0.014 0-0.137 0.001-0.268 0.031-0.386 0.082-0.119 0.051-0.229 0.126-0.324 0.225-0.012 0.013-0.024 0.026-0.036 0.039-0.075 0.087-0.133 0.183-0.173 0.285s-0.064 0.211-0.069 0.326c-0.001 0.015-0.001 0.029-0.001 0.043v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
5
+ </svg>
package/static/icons/demo-external-svg.html CHANGED
@@ -15,6 +15,26 @@
15
15
  </header>
16
16
  <div class="clearfix mhl ptl">
17
17
  <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
18
+ <div class="glyph fs1">
19
+ <div class="clearfix pbs">
20
+ <svg class="icon icon-calendar"><use xlink:href="symbol-defs.svg#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
21
+ </div>
22
+ </div>
23
+ <div class="glyph fs1">
24
+ <div class="clearfix pbs">
25
+ <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>
26
+ </div>
27
+ </div>
28
+ <div class="glyph fs1">
29
+ <div class="clearfix pbs">
30
+ <svg class="icon icon-more-horizontal"><use xlink:href="symbol-defs.svg#icon-more-horizontal"></use></svg><span class="name"> icon-more-horizontal</span>
31
+ </div>
32
+ </div>
33
+ <div class="glyph fs1">
34
+ <div class="clearfix pbs">
35
+ <svg class="icon icon-refresh-cw"><use xlink:href="symbol-defs.svg#icon-refresh-cw"></use></svg><span class="name"> icon-refresh-cw</span>
36
+ </div>
37
+ </div>
18
38
  <div class="glyph fs1">
19
39
  <div class="clearfix pbs">
20
40
  <svg class="icon icon-pause"><use xlink:href="symbol-defs.svg#icon-pause"></use></svg><span class="name"> icon-pause</span>
@@ -262,7 +282,7 @@
262
282
  </div>
263
283
  <div class="glyph fs1">
264
284
  <div class="clearfix pbs">
265
- <svg class="icon icon-calendar"><use xlink:href="symbol-defs.svg#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
285
+ <svg class="icon icon-calendar1"><use xlink:href="symbol-defs.svg#icon-calendar1"></use></svg><span class="name"> icon-calendar1</span>
266
286
  </div>
267
287
  </div>
268
288
  <div class="glyph fs1">
package/static/icons/demo.html CHANGED
@@ -10,6 +10,18 @@
10
10
  <body>
11
11
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
12
12
  <defs>
13
+ <symbol id="icon-calendar" viewBox="0 0 24 24">
14
+ <path d="M7 2v1h-2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-2v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1v1h-6v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1zM20 9h-16v-3c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h2v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h6v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h2c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707zM4 11h16v9c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707z"></path>
15
+ </symbol>
16
+ <symbol id="icon-corner-down-left" viewBox="0 0 24 24">
17
+ <path d="M19 4v7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879h-9.586l3.293-3.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5 5c-0.092 0.092-0.166 0.202-0.217 0.324-0.15 0.362-0.078 0.795 0.217 1.090l5 5c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-3.293-3.293h9.586c1.38 0 2.632-0.561 3.536-1.464s1.464-2.156 1.464-3.536v-7c0-0.552-0.448-1-1-1s-1 0.448-1 1z"></path>
18
+ </symbol>
19
+ <symbol id="icon-more-horizontal" viewBox="0 0 24 24">
20
+ <path d="M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM21 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM7 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z"></path>
21
+ </symbol>
22
+ <symbol id="icon-refresh-cw" viewBox="0 0 24 24">
23
+ <path d="M4.453 9.334c0.737-2.083 2.247-3.669 4.096-4.552s4.032-1.059 6.114-0.322c1.186 0.42 2.206 1.088 2.983 1.88l2.83 2.66h-3.476c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.005 0 0.009 0 0.014 0 0.137-0.001 0.268-0.031 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.013 0.024-0.026 0.036-0.039 0.075-0.087 0.133-0.183 0.173-0.285s0.064-0.211 0.069-0.326c0.001-0.015 0.001-0.029 0.001-0.043v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.689l-2.926-2.749c-0.992-1.010-2.271-1.843-3.743-2.364-2.603-0.921-5.335-0.699-7.643 0.402s-4.199 3.086-5.12 5.689c-0.185 0.52 0.088 1.091 0.608 1.276s1.092-0.088 1.276-0.609zM2 16.312l2.955 2.777c1.929 1.931 4.49 2.908 7.048 2.909s5.119-0.975 7.072-2.927c1.104-1.104 1.901-2.407 2.361-3.745 0.18-0.522-0.098-1.091-0.621-1.271s-1.091 0.098-1.271 0.621c-0.361 1.050-0.993 2.091-1.883 2.981-1.563 1.562-3.609 2.342-5.657 2.342s-4.094-0.782-5.679-2.366l-2.8-2.633h3.475c0.552 0 1-0.448 1-1s-0.448-1-1-1h-5.997c-0.005 0-0.009 0-0.014 0-0.137 0.001-0.268 0.031-0.386 0.082-0.119 0.051-0.229 0.126-0.324 0.225-0.012 0.013-0.024 0.026-0.036 0.039-0.075 0.087-0.133 0.183-0.173 0.285s-0.064 0.211-0.069 0.326c-0.001 0.015-0.001 0.029-0.001 0.043v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
24
+ </symbol>
13
25
  <symbol id="icon-pause" viewBox="0 0 24 24">
14
26
  <path d="M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z"></path>
15
27
  </symbol>
@@ -157,7 +169,7 @@
157
169
  <symbol id="icon-briefcase" viewBox="0 0 24 24">
158
170
  <path d="M9 6v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 20v-12h6v12zM7 8v12h-3c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-10c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM17 6v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-3c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v10c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h16c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-10c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM17 20v-12h3c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v10c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293z"></path>
159
171
  </symbol>
160
- <symbol id="icon-calendar" viewBox="0 0 24 24">
172
+ <symbol id="icon-calendar1" viewBox="0 0 24 24">
161
173
  <path d="M7 2v1h-2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-2v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1v1h-6v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1zM20 9h-16v-3c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h2v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h6v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h2c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707zM4 11h16v9c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707z"></path>
162
174
  </symbol>
163
175
  <symbol id="icon-camera" viewBox="0 0 24 24">
@@ -510,6 +522,26 @@
510
522
  </header>
511
523
  <div class="clearfix mhl ptl">
512
524
  <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
525
+ <div class="glyph fs1">
526
+ <div class="clearfix pbs">
527
+ <svg class="icon icon-calendar"><use xlink:href="#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
528
+ </div>
529
+ </div>
530
+ <div class="glyph fs1">
531
+ <div class="clearfix pbs">
532
+ <svg class="icon icon-corner-down-left"><use xlink:href="#icon-corner-down-left"></use></svg><span class="name"> icon-corner-down-left</span>
533
+ </div>
534
+ </div>
535
+ <div class="glyph fs1">
536
+ <div class="clearfix pbs">
537
+ <svg class="icon icon-more-horizontal"><use xlink:href="#icon-more-horizontal"></use></svg><span class="name"> icon-more-horizontal</span>
538
+ </div>
539
+ </div>
540
+ <div class="glyph fs1">
541
+ <div class="clearfix pbs">
542
+ <svg class="icon icon-refresh-cw"><use xlink:href="#icon-refresh-cw"></use></svg><span class="name"> icon-refresh-cw</span>
543
+ </div>
544
+ </div>
513
545
  <div class="glyph fs1">
514
546
  <div class="clearfix pbs">
515
547
  <svg class="icon icon-pause"><use xlink:href="#icon-pause"></use></svg><span class="name"> icon-pause</span>
@@ -757,7 +789,7 @@
757
789
  </div>
758
790
  <div class="glyph fs1">
759
791
  <div class="clearfix pbs">
760
- <svg class="icon icon-calendar"><use xlink:href="#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
792
+ <svg class="icon icon-calendar1"><use xlink:href="#icon-calendar1"></use></svg><span class="name"> icon-calendar1</span>
761
793
  </div>
762
794
  </div>
763
795
  <div class="glyph fs1">