@limetech/lime-elements 38.31.1 → 38.32.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 (225) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +1 -1
  3. package/dist/cjs/lime-elements.cjs.js +1 -1
  4. package/dist/cjs/limel-action-bar_2.cjs.entry.js +1 -1
  5. package/dist/cjs/limel-ai-avatar.cjs.entry.js +1 -1
  6. package/dist/cjs/limel-callout.cjs.entry.js +1 -1
  7. package/dist/cjs/limel-chart.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-checkbox.cjs.entry.js.map +1 -1
  9. package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
  10. package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
  11. package/dist/cjs/limel-color-picker.cjs.entry.js.map +1 -1
  12. package/dist/cjs/limel-drag-handle.cjs.entry.js +34 -0
  13. package/dist/cjs/limel-drag-handle.cjs.entry.js.map +1 -0
  14. package/dist/cjs/limel-file-viewer.cjs.entry.js +1 -1
  15. package/dist/cjs/limel-file.cjs.entry.js +1 -1
  16. package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +1 -1
  17. package/dist/cjs/limel-form.cjs.entry.js +3227 -307
  18. package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
  19. package/dist/cjs/limel-info-tile.cjs.entry.js +1 -1
  20. package/dist/cjs/limel-info-tile.cjs.entry.js.map +1 -1
  21. package/dist/cjs/limel-linear-progress.cjs.entry.js +1 -1
  22. package/dist/cjs/limel-list-item.cjs.entry.js +1 -1
  23. package/dist/cjs/limel-portal_3.cjs.entry.js.map +1 -1
  24. package/dist/cjs/limel-profile-picture.cjs.entry.js +1 -1
  25. package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
  26. package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
  27. package/dist/cjs/limel-snackbar.cjs.entry.js.map +1 -1
  28. package/dist/cjs/limel-switch.cjs.entry.js.map +1 -1
  29. package/dist/cjs/limel-table.cjs.entry.js +1 -1
  30. package/dist/cjs/loader.cjs.js +1 -1
  31. package/dist/cjs/{translations-d2be6dd7.js → translations-a42886f2.js} +17 -1
  32. package/dist/cjs/translations-a42886f2.js.map +1 -0
  33. package/dist/collection/collection-manifest.json +1 -0
  34. package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css +3 -0
  35. package/dist/collection/components/action-bar/action-bar.css +3 -0
  36. package/dist/collection/components/badge/badge.css +3 -0
  37. package/dist/collection/components/breadcrumbs/breadcrumbs.css +3 -0
  38. package/dist/collection/components/button/button.css +3 -0
  39. package/dist/collection/components/button-group/button-group.css +3 -0
  40. package/dist/collection/components/card/card.css +3 -0
  41. package/dist/collection/components/chart/chart.css +6 -0
  42. package/dist/collection/components/checkbox/checkbox.css +3 -0
  43. package/dist/collection/components/checkbox/checkbox.js +1 -1
  44. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  45. package/dist/collection/components/chip/chip.css +3 -0
  46. package/dist/collection/components/chip-set/chip-set.css +6 -0
  47. package/dist/collection/components/circular-progress/circular-progress.css +3 -0
  48. package/dist/collection/components/code-editor/code-editor.css +3 -0
  49. package/dist/collection/components/collapsible-section/collapsible-section.css +3 -0
  50. package/dist/collection/components/color-picker/color-picker-palette.css +3 -0
  51. package/dist/collection/components/color-picker/color-picker.css +3 -0
  52. package/dist/collection/components/color-picker/color-picker.js +1 -1
  53. package/dist/collection/components/color-picker/color-picker.js.map +1 -1
  54. package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css +3 -0
  55. package/dist/collection/components/dialog/dialog.css +3 -0
  56. package/dist/collection/components/dock/dock-button/dock-button.css +3 -0
  57. package/dist/collection/components/dock/dock.css +3 -0
  58. package/dist/collection/components/drag-handle/drag-handle.css +174 -0
  59. package/dist/collection/components/drag-handle/drag-handle.js +125 -0
  60. package/dist/collection/components/drag-handle/drag-handle.js.map +1 -0
  61. package/dist/collection/components/file/file.css +3 -0
  62. package/dist/collection/components/file-viewer/file-viewer.css +3 -0
  63. package/dist/collection/components/form/form.css +147 -20
  64. package/dist/collection/components/form/row/row.js +4 -1
  65. package/dist/collection/components/form/row/row.js.map +1 -1
  66. package/dist/collection/components/form/templates/array-field-collapsible-item.js +13 -16
  67. package/dist/collection/components/form/templates/array-field-collapsible-item.js.map +1 -1
  68. package/dist/collection/components/form/templates/array-field-simple-item.js +16 -49
  69. package/dist/collection/components/form/templates/array-field-simple-item.js.map +1 -1
  70. package/dist/collection/components/form/templates/array-field.js +306 -19
  71. package/dist/collection/components/form/templates/array-field.js.map +1 -1
  72. package/dist/collection/components/form/templates/common.js +3 -1
  73. package/dist/collection/components/form/templates/common.js.map +1 -1
  74. package/dist/collection/components/header/header.css +3 -0
  75. package/dist/collection/components/help/help.css +3 -0
  76. package/dist/collection/components/help/limel-help-content.css +3 -0
  77. package/dist/collection/components/icon-button/icon-button.css +3 -0
  78. package/dist/collection/components/info-tile/info-tile.css +3 -0
  79. package/dist/collection/components/input-field/input-field.css +3 -0
  80. package/dist/collection/components/list/list.css +6 -0
  81. package/dist/collection/components/list-item/list-item.css +3 -0
  82. package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.css +3 -0
  83. package/dist/collection/components/markdown/markdown.css +3 -0
  84. package/dist/collection/components/menu-list/menu-list.css +6 -0
  85. package/dist/collection/components/notched-outline/notched-outline.css +3 -0
  86. package/dist/collection/components/popover-surface/popover-surface.css +3 -0
  87. package/dist/collection/components/profile-picture/profile-picture.css +3 -0
  88. package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css +3 -0
  89. package/dist/collection/components/radio-button-group/radio-button.css +3 -0
  90. package/dist/collection/components/select/select.css +6 -0
  91. package/dist/collection/components/shortcut/shortcut.css +3 -0
  92. package/dist/collection/components/slider/slider.css +3 -0
  93. package/dist/collection/components/snackbar/snackbar.js +2 -2
  94. package/dist/collection/components/snackbar/snackbar.js.map +1 -1
  95. package/dist/collection/components/split-button/split-button.css +3 -0
  96. package/dist/collection/components/switch/switch.css +3 -0
  97. package/dist/collection/components/switch/switch.js +1 -1
  98. package/dist/collection/components/switch/switch.js.map +1 -1
  99. package/dist/collection/components/tab-bar/tab-bar.css +3 -0
  100. package/dist/collection/components/table/table.css +12 -0
  101. package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css +3 -0
  102. package/dist/collection/components/text-editor/text-editor.css +3 -0
  103. package/dist/collection/components/tooltip/tooltip.js +2 -2
  104. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  105. package/dist/collection/style/mixins.scss +53 -0
  106. package/dist/collection/translations/da.js +2 -0
  107. package/dist/collection/translations/da.js.map +1 -1
  108. package/dist/collection/translations/de.js +2 -0
  109. package/dist/collection/translations/de.js.map +1 -1
  110. package/dist/collection/translations/en.js +2 -0
  111. package/dist/collection/translations/en.js.map +1 -1
  112. package/dist/collection/translations/fi.js +2 -0
  113. package/dist/collection/translations/fi.js.map +1 -1
  114. package/dist/collection/translations/fr.js +2 -0
  115. package/dist/collection/translations/fr.js.map +1 -1
  116. package/dist/collection/translations/nl.js +2 -0
  117. package/dist/collection/translations/nl.js.map +1 -1
  118. package/dist/collection/translations/no.js +2 -0
  119. package/dist/collection/translations/no.js.map +1 -1
  120. package/dist/collection/translations/sv.js +2 -0
  121. package/dist/collection/translations/sv.js.map +1 -1
  122. package/dist/esm/lime-elements.js +1 -1
  123. package/dist/esm/limel-action-bar_2.entry.js +1 -1
  124. package/dist/esm/limel-ai-avatar.entry.js +1 -1
  125. package/dist/esm/limel-callout.entry.js +1 -1
  126. package/dist/esm/limel-chart.entry.js +1 -1
  127. package/dist/esm/limel-checkbox.entry.js.map +1 -1
  128. package/dist/esm/limel-chip_2.entry.js +1 -1
  129. package/dist/esm/limel-collapsible-section.entry.js +1 -1
  130. package/dist/esm/limel-color-picker.entry.js.map +1 -1
  131. package/dist/esm/limel-drag-handle.entry.js +30 -0
  132. package/dist/esm/limel-drag-handle.entry.js.map +1 -0
  133. package/dist/esm/limel-file-viewer.entry.js +1 -1
  134. package/dist/esm/limel-file.entry.js +1 -1
  135. package/dist/esm/limel-flatpickr-adapter.entry.js +1 -1
  136. package/dist/esm/limel-form.entry.js +3221 -301
  137. package/dist/esm/limel-form.entry.js.map +1 -1
  138. package/dist/esm/limel-info-tile.entry.js +1 -1
  139. package/dist/esm/limel-info-tile.entry.js.map +1 -1
  140. package/dist/esm/limel-linear-progress.entry.js +1 -1
  141. package/dist/esm/limel-list-item.entry.js +1 -1
  142. package/dist/esm/limel-portal_3.entry.js.map +1 -1
  143. package/dist/esm/limel-profile-picture.entry.js +1 -1
  144. package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
  145. package/dist/esm/limel-snackbar.entry.js +1 -1
  146. package/dist/esm/limel-snackbar.entry.js.map +1 -1
  147. package/dist/esm/limel-switch.entry.js.map +1 -1
  148. package/dist/esm/limel-table.entry.js +1 -1
  149. package/dist/esm/loader.js +1 -1
  150. package/dist/esm/{translations-91c611da.js → translations-9bfde9f4.js} +17 -1
  151. package/dist/esm/translations-9bfde9f4.js.map +1 -0
  152. package/dist/lime-elements/lime-elements.esm.js +1 -1
  153. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  154. package/dist/lime-elements/p-309d0652.entry.js +2 -0
  155. package/dist/lime-elements/{p-e6245ef7.entry.js.map → p-309d0652.entry.js.map} +1 -1
  156. package/dist/lime-elements/{p-f507000e.entry.js → p-31f1cb08.entry.js} +2 -2
  157. package/dist/lime-elements/{p-cc7f4c81.entry.js → p-3311eaf3.entry.js} +2 -2
  158. package/dist/lime-elements/{p-aeba4aa4.entry.js → p-40542ccc.entry.js} +2 -2
  159. package/dist/lime-elements/p-40542ccc.entry.js.map +1 -0
  160. package/dist/lime-elements/{p-d349e355.entry.js → p-42e889d8.entry.js} +2 -2
  161. package/dist/lime-elements/p-489d7f63.entry.js.map +1 -1
  162. package/dist/lime-elements/p-51d475d8.entry.js.map +1 -1
  163. package/dist/lime-elements/p-5df2361b.js +2 -0
  164. package/dist/lime-elements/p-5df2361b.js.map +1 -0
  165. package/dist/lime-elements/{p-b5abf284.entry.js → p-5e976a59.entry.js} +2 -2
  166. package/dist/lime-elements/{p-6c60172e.entry.js → p-787be044.entry.js} +2 -2
  167. package/dist/lime-elements/p-8539647d.entry.js.map +1 -1
  168. package/dist/lime-elements/p-8ea3b80a.entry.js +2 -0
  169. package/dist/lime-elements/p-8ea3b80a.entry.js.map +1 -0
  170. package/dist/lime-elements/{p-d1aa44e1.entry.js → p-92aa9610.entry.js} +2 -2
  171. package/dist/lime-elements/p-a1a32893.entry.js +27 -0
  172. package/dist/lime-elements/p-a1a32893.entry.js.map +1 -0
  173. package/dist/lime-elements/{p-8e3c4418.entry.js → p-aa1e7319.entry.js} +2 -2
  174. package/dist/lime-elements/{p-ed04acfc.entry.js → p-b0acf522.entry.js} +2 -2
  175. package/dist/lime-elements/p-b5a96409.entry.js.map +1 -1
  176. package/dist/lime-elements/{p-f83ebd28.entry.js → p-b7bbb6a5.entry.js} +2 -2
  177. package/dist/lime-elements/{p-eb396630.entry.js → p-cd2f780a.entry.js} +2 -2
  178. package/dist/lime-elements/{p-aae161ef.entry.js → p-d79c85e2.entry.js} +2 -2
  179. package/dist/lime-elements/{p-1b036add.entry.js → p-e00465fa.entry.js} +2 -2
  180. package/dist/lime-elements/{p-29c2cdc6.entry.js → p-ee5c4112.entry.js} +2 -2
  181. package/dist/lime-elements/{p-e6bb4d1a.entry.js → p-fbac230b.entry.js} +2 -2
  182. package/dist/lime-elements/style/mixins.scss +53 -0
  183. package/dist/scss/mixins.scss +53 -0
  184. package/dist/types/components/checkbox/checkbox.d.ts +1 -1
  185. package/dist/types/components/color-picker/color-picker.d.ts +1 -1
  186. package/dist/types/components/drag-handle/drag-handle.d.ts +46 -0
  187. package/dist/types/components/form/templates/array-field-collapsible-item.d.ts +3 -1
  188. package/dist/types/components/form/templates/array-field-simple-item.d.ts +5 -9
  189. package/dist/types/components/form/templates/array-field.d.ts +35 -4
  190. package/dist/types/components/form/templates/common.d.ts +3 -3
  191. package/dist/types/components/snackbar/snackbar.d.ts +2 -2
  192. package/dist/types/components/switch/switch.d.ts +1 -1
  193. package/dist/types/components/tooltip/tooltip.d.ts +2 -2
  194. package/dist/types/components.d.ts +141 -28
  195. package/dist/types/translations/da.d.ts +2 -0
  196. package/dist/types/translations/de.d.ts +2 -0
  197. package/dist/types/translations/en.d.ts +2 -0
  198. package/dist/types/translations/fi.d.ts +2 -0
  199. package/dist/types/translations/fr.d.ts +2 -0
  200. package/dist/types/translations/nl.d.ts +2 -0
  201. package/dist/types/translations/no.d.ts +2 -0
  202. package/dist/types/translations/sv.d.ts +2 -0
  203. package/package.json +5 -2
  204. package/dist/cjs/translations-d2be6dd7.js.map +0 -1
  205. package/dist/esm/translations-91c611da.js.map +0 -1
  206. package/dist/lime-elements/p-4c88e5d3.js +0 -2
  207. package/dist/lime-elements/p-4c88e5d3.js.map +0 -1
  208. package/dist/lime-elements/p-aeba4aa4.entry.js.map +0 -1
  209. package/dist/lime-elements/p-d6d66daa.entry.js +0 -21
  210. package/dist/lime-elements/p-d6d66daa.entry.js.map +0 -1
  211. package/dist/lime-elements/p-e6245ef7.entry.js +0 -2
  212. /package/dist/lime-elements/{p-f507000e.entry.js.map → p-31f1cb08.entry.js.map} +0 -0
  213. /package/dist/lime-elements/{p-cc7f4c81.entry.js.map → p-3311eaf3.entry.js.map} +0 -0
  214. /package/dist/lime-elements/{p-d349e355.entry.js.map → p-42e889d8.entry.js.map} +0 -0
  215. /package/dist/lime-elements/{p-b5abf284.entry.js.map → p-5e976a59.entry.js.map} +0 -0
  216. /package/dist/lime-elements/{p-6c60172e.entry.js.map → p-787be044.entry.js.map} +0 -0
  217. /package/dist/lime-elements/{p-d1aa44e1.entry.js.map → p-92aa9610.entry.js.map} +0 -0
  218. /package/dist/lime-elements/{p-8e3c4418.entry.js.map → p-aa1e7319.entry.js.map} +0 -0
  219. /package/dist/lime-elements/{p-ed04acfc.entry.js.map → p-b0acf522.entry.js.map} +0 -0
  220. /package/dist/lime-elements/{p-f83ebd28.entry.js.map → p-b7bbb6a5.entry.js.map} +0 -0
  221. /package/dist/lime-elements/{p-eb396630.entry.js.map → p-cd2f780a.entry.js.map} +0 -0
  222. /package/dist/lime-elements/{p-aae161ef.entry.js.map → p-d79c85e2.entry.js.map} +0 -0
  223. /package/dist/lime-elements/{p-1b036add.entry.js.map → p-e00465fa.entry.js.map} +0 -0
  224. /package/dist/lime-elements/{p-29c2cdc6.entry.js.map → p-ee5c4112.entry.js.map} +0 -0
  225. /package/dist/lime-elements/{p-e6bb4d1a.entry.js.map → p-fbac230b.entry.js.map} +0 -0
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -73,6 +73,9 @@
73
73
  * of some components, to demonstrate how the component
74
74
  * behaves in a resizable container.
75
75
  */
76
+ /**
77
+ * Drag to reorder mixins
78
+ */
76
79
  /**
77
80
  * The breakpoints below are used to create responsive designs
78
81
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -208,6 +211,9 @@ ul {
208
211
  * of some components, to demonstrate how the component
209
212
  * behaves in a resizable container.
210
213
  */
214
+ /**
215
+ * Drag to reorder mixins
216
+ */
211
217
  /**
212
218
  * The breakpoints below are used to create responsive designs
213
219
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -208,6 +211,9 @@ ul {
208
211
  * of some components, to demonstrate how the component
209
212
  * behaves in a resizable container.
210
213
  */
214
+ /**
215
+ * Drag to reorder mixins
216
+ */
211
217
  /**
212
218
  * The breakpoints below are used to create responsive designs
213
219
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -73,6 +73,9 @@
73
73
  * of some components, to demonstrate how the component
74
74
  * behaves in a resizable container.
75
75
  */
76
+ /**
77
+ * Drag to reorder mixins
78
+ */
76
79
  /**
77
80
  * The breakpoints below are used to create responsive designs
78
81
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -73,6 +73,9 @@
73
73
  * of some components, to demonstrate how the component
74
74
  * behaves in a resizable container.
75
75
  */
76
+ /**
77
+ * Drag to reorder mixins
78
+ */
76
79
  /**
77
80
  * The breakpoints below are used to create responsive designs
78
81
  * in Lime's products. Therefore, they are here to get distributed
@@ -1820,6 +1823,9 @@ select.limel-select__native-control {
1820
1823
  * of some components, to demonstrate how the component
1821
1824
  * behaves in a resizable container.
1822
1825
  */
1826
+ /**
1827
+ * Drag to reorder mixins
1828
+ */
1823
1829
  /**
1824
1830
  * The breakpoints below are used to create responsive designs
1825
1831
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -782,6 +782,9 @@ div[slot=content] {
782
782
  * of some components, to demonstrate how the component
783
783
  * behaves in a resizable container.
784
784
  */
785
+ /**
786
+ * Drag to reorder mixins
787
+ */
785
788
  /**
786
789
  * The breakpoints below are used to create responsive designs
787
790
  * in Lime's products. Therefore, they are here to get distributed
@@ -21,9 +21,9 @@ const hideAnimationDuration = 300;
21
21
  * :::note
22
22
  * If the information you want to display has a higher importance or priority,
23
23
  * and you need to make sure that the user takes an action to dismiss it,
24
- * consider using the [Banner](/#/component/limel-banner/) component instead.
24
+ * consider using the [Banner](#/component/limel-banner/) component instead.
25
25
  * For more complex interactions and for delivering more detailed information,
26
- * [Dialog](/#/component/limel-dialog/) is a better choice.
26
+ * [Dialog](#/component/limel-dialog/) is a better choice.
27
27
  * :::
28
28
  *
29
29
  * @exampleComponent limel-example-snackbar
@@ -1 +1 @@
1
- {"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from '../../util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n */\n@Component({\n tag: 'limel-snackbar',\n shadow: true,\n styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n /**\n * `true` if the snackbar is open, `false` otherwise.\n */\n @Prop({ reflect: true })\n public open: boolean = false;\n\n /**\n * The text message to display.\n */\n @Prop()\n public message: string;\n\n /**\n * The amount of time in milliseconds to show the snackbar.\n * If set to `-1`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close it manually,\n * which requires the `dismissible` property to be set to `true`.\n * - or the snackbar needs to be closed programmatically.\n */\n @Prop({ reflect: true })\n public timeout?: number = 5000;\n\n /**\n * The text to display for the action button.\n */\n @Prop()\n public actionText: string;\n\n /**\n * When `true` displays a dismiss button on the snackbar,\n * allowing users to close it.\n */\n @Prop()\n public dismissible: boolean = true;\n\n /**\n * Whether to show the snackbar with space for multiple lines of text\n * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n */\n @Prop()\n public multiline: boolean;\n\n /**\n * Defines the language for translations.\n */\n @Prop()\n public language: Languages = 'en';\n\n @Element()\n private readonly host: HTMLLimelSnackbarElement;\n\n /**\n * Emitted when the action button is pressed\n */\n @Event()\n private readonly action: EventEmitter<void>;\n\n /**\n * Emitted when the snackbar hides itself\n */\n @Event()\n private readonly hide: EventEmitter<void>;\n\n @State()\n private offset: number = 0;\n\n @State()\n private isOpen: boolean = false;\n\n @State()\n private closing: boolean = true;\n\n private readonly snackbarId: string;\n private timeoutId?: number;\n\n public constructor() {\n this.snackbarId = createRandomString();\n }\n\n public componentDidLoad() {\n if (this.open) {\n requestAnimationFrame(this.handleOpen);\n }\n }\n\n @Listen('changeOffset')\n protected onChangeIndex(event: CustomEvent<number>) {\n event.stopPropagation();\n this.offset = event.detail;\n }\n\n @Watch('open')\n protected watchOpen() {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n\n this.isOpen = this.open;\n }\n\n /**\n * Show the snackbar\n * @deprecated Use the `open` property instead.\n */\n @Method()\n public async show() {\n console.warn(\n 'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.'\n );\n if (!this.open) {\n this.handleOpen();\n }\n }\n\n public handleOpen = () => {\n if (this.isOpen) {\n return;\n }\n\n this.isOpen = true;\n this.closing = false;\n container.add(this.host);\n\n if (this.timeout && this.timeout !== -1) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(\n this.timeout - hideAnimationDuration,\n hideAnimationDuration\n )\n );\n }\n };\n\n private readonly handleClose = () => {\n if (!this.isOpen) {\n return;\n }\n\n this.closing = true;\n\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = undefined;\n }\n\n setTimeout(() => {\n this.isOpen = false;\n container.remove(this.host);\n this.hide.emit();\n this.offset = 0;\n }, hideAnimationDuration);\n };\n\n public render() {\n return (\n <aside\n popover=\"manual\"\n style={{\n '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,\n '--snackbar-distance-to-top-edge': `${this.offset}px`,\n }}\n class={{\n open: this.open,\n 'is-closing': this.closing,\n 'limel-portal--parent': true,\n }}\n id={this.snackbarId}\n role={this.setAriaRoles()}\n aria-relevant={this.open ? 'additions' : undefined}\n >\n <div class=\"surface\" aria-atomic=\"false\">\n <div class=\"label\">{this.message}</div>\n {this.renderActions(this.actionText)}\n {this.renderDismissButton(this.dismissible)}\n </div>\n </aside>\n );\n }\n\n private setAriaRoles() {\n if (!this.open) {\n return;\n }\n\n if (!this.timeout || this.timeout === -1) {\n return 'alertdialog';\n }\n\n return 'status';\n }\n\n private readonly handleClickAction = () => {\n this.action.emit();\n };\n\n private renderActions(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <div class=\"actions\" aria-atomic=\"true\">\n {this.renderActionButton(actionText)}\n </div>\n );\n }\n\n private renderActionButton(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <limel-button label={actionText} onClick={this.handleClickAction} />\n );\n }\n\n private renderDismissButton(dismissible: boolean) {\n if (!dismissible) {\n return;\n }\n\n const label = translate.get('snackbar.dismiss', this.language);\n\n return (\n <div class=\"dismiss\">\n {this.renderTimeoutVisualization()}\n <limel-icon-button\n class=\"dismiss-button\"\n icon=\"multiply\"\n label={label}\n onClick={this.handleClose}\n aria-controls={this.snackbarId}\n />\n </div>\n );\n }\n\n private renderTimeoutVisualization() {\n if (!this.timeout || this.timeout === -1) {\n return;\n }\n\n return (\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n <path\n class=\"track\"\n d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n stroke=\"var(--fill-color)\"\n />\n </svg>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from '../../util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n */\n@Component({\n tag: 'limel-snackbar',\n shadow: true,\n styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n /**\n * `true` if the snackbar is open, `false` otherwise.\n */\n @Prop({ reflect: true })\n public open: boolean = false;\n\n /**\n * The text message to display.\n */\n @Prop()\n public message: string;\n\n /**\n * The amount of time in milliseconds to show the snackbar.\n * If set to `-1`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close it manually,\n * which requires the `dismissible` property to be set to `true`.\n * - or the snackbar needs to be closed programmatically.\n */\n @Prop({ reflect: true })\n public timeout?: number = 5000;\n\n /**\n * The text to display for the action button.\n */\n @Prop()\n public actionText: string;\n\n /**\n * When `true` displays a dismiss button on the snackbar,\n * allowing users to close it.\n */\n @Prop()\n public dismissible: boolean = true;\n\n /**\n * Whether to show the snackbar with space for multiple lines of text\n * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n */\n @Prop()\n public multiline: boolean;\n\n /**\n * Defines the language for translations.\n */\n @Prop()\n public language: Languages = 'en';\n\n @Element()\n private readonly host: HTMLLimelSnackbarElement;\n\n /**\n * Emitted when the action button is pressed\n */\n @Event()\n private readonly action: EventEmitter<void>;\n\n /**\n * Emitted when the snackbar hides itself\n */\n @Event()\n private readonly hide: EventEmitter<void>;\n\n @State()\n private offset: number = 0;\n\n @State()\n private isOpen: boolean = false;\n\n @State()\n private closing: boolean = true;\n\n private readonly snackbarId: string;\n private timeoutId?: number;\n\n public constructor() {\n this.snackbarId = createRandomString();\n }\n\n public componentDidLoad() {\n if (this.open) {\n requestAnimationFrame(this.handleOpen);\n }\n }\n\n @Listen('changeOffset')\n protected onChangeIndex(event: CustomEvent<number>) {\n event.stopPropagation();\n this.offset = event.detail;\n }\n\n @Watch('open')\n protected watchOpen() {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n\n this.isOpen = this.open;\n }\n\n /**\n * Show the snackbar\n * @deprecated Use the `open` property instead.\n */\n @Method()\n public async show() {\n console.warn(\n 'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.'\n );\n if (!this.open) {\n this.handleOpen();\n }\n }\n\n public handleOpen = () => {\n if (this.isOpen) {\n return;\n }\n\n this.isOpen = true;\n this.closing = false;\n container.add(this.host);\n\n if (this.timeout && this.timeout !== -1) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(\n this.timeout - hideAnimationDuration,\n hideAnimationDuration\n )\n );\n }\n };\n\n private readonly handleClose = () => {\n if (!this.isOpen) {\n return;\n }\n\n this.closing = true;\n\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = undefined;\n }\n\n setTimeout(() => {\n this.isOpen = false;\n container.remove(this.host);\n this.hide.emit();\n this.offset = 0;\n }, hideAnimationDuration);\n };\n\n public render() {\n return (\n <aside\n popover=\"manual\"\n style={{\n '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,\n '--snackbar-distance-to-top-edge': `${this.offset}px`,\n }}\n class={{\n open: this.open,\n 'is-closing': this.closing,\n 'limel-portal--parent': true,\n }}\n id={this.snackbarId}\n role={this.setAriaRoles()}\n aria-relevant={this.open ? 'additions' : undefined}\n >\n <div class=\"surface\" aria-atomic=\"false\">\n <div class=\"label\">{this.message}</div>\n {this.renderActions(this.actionText)}\n {this.renderDismissButton(this.dismissible)}\n </div>\n </aside>\n );\n }\n\n private setAriaRoles() {\n if (!this.open) {\n return;\n }\n\n if (!this.timeout || this.timeout === -1) {\n return 'alertdialog';\n }\n\n return 'status';\n }\n\n private readonly handleClickAction = () => {\n this.action.emit();\n };\n\n private renderActions(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <div class=\"actions\" aria-atomic=\"true\">\n {this.renderActionButton(actionText)}\n </div>\n );\n }\n\n private renderActionButton(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <limel-button label={actionText} onClick={this.handleClickAction} />\n );\n }\n\n private renderDismissButton(dismissible: boolean) {\n if (!dismissible) {\n return;\n }\n\n const label = translate.get('snackbar.dismiss', this.language);\n\n return (\n <div class=\"dismiss\">\n {this.renderTimeoutVisualization()}\n <limel-icon-button\n class=\"dismiss-button\"\n icon=\"multiply\"\n label={label}\n onClick={this.handleClose}\n aria-controls={this.snackbarId}\n />\n </div>\n );\n }\n\n private renderTimeoutVisualization() {\n if (!this.timeout || this.timeout === -1) {\n return;\n }\n\n return (\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n <path\n class=\"track\"\n d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n stroke=\"var(--fill-color)\"\n />\n </svg>\n );\n }\n}\n"]}
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -850,6 +850,9 @@ label {
850
850
  * of some components, to demonstrate how the component
851
851
  * behaves in a resizable container.
852
852
  */
853
+ /**
854
+ * Drag to reorder mixins
855
+ */
853
856
  /**
854
857
  * The breakpoints below are used to create responsive designs
855
858
  * in Lime's products. Therefore, they are here to get distributed
@@ -14,7 +14,7 @@ import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter
14
14
  * :::important
15
15
  * Checkboxes are sometimes used interchangeably with switches in user interfaces.
16
16
  * But there is an important difference between the two! Please read our guidelines about
17
- * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
17
+ * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
18
18
  *
19
19
  * @exampleComponent limel-example-switch
20
20
  * @exampleComponent limel-example-switch-helper-text
@@ -1 +1 @@
1
- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AAIzC;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,MAAM;;IAyDP,iBAAY,GAAW,kBAAkB,EAAE,CAAC;IAoH5C,qBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;QACvB,OAAO;OACV;MAED,OAAO,CACH,yBACI,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,GACvB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC;IACrE,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;;oBApLgB,KAAK;oBAQL,KAAK;;iBAYR,KAAK;;0BAa4B,EAAE;mBAahC,kBAAkB,EAAE;;EAI/B,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,aAAa,CACK,CAAC;IACvB,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5C,CAAC;EAEM,oBAAoB;;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;EAC9B,CAAC;EAEM,MAAM;IACT,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,IAAI,GAAkB,OAAO,CAAC;MAClC,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,GAAG;UACH,IAAI,EAAE,IAAI;UACV,KAAK,EAAE,6DAA6D;SACvE,CAAC;OACL;MAED,OAAO;QACH,2BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBAEb,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAEnD,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC9C,MAAM,EAAE,IAAI,CAAC,cAAc,GAC7B;QACF,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACH,cACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE;UACH,YAAY,EAAE,IAAI;UAClB,wBAAwB,EAAE,CAAC,IAAI,CAAC,KAAK;UACrC,sBAAsB,EAAE,IAAI,CAAC,KAAK;SACrC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,mBACV,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;QAE9D,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,oBAAoB;YAC3B,WAAK,KAAK,EAAC,oBAAoB;cAC3B,WAAK,KAAK,EAAC,uBAAuB,GAAO,CACvC;YACN,WAAK,KAAK,EAAC,oBAAoB,GAAO;YACtC,WAAK,KAAK,EAAC,mBAAmB;cAC1B,WACI,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,qEAAqE,GAAG,CAC9E;cACN,WACI,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,mBAAmB,GAAG,CAC5B,CACJ,CACJ,CACJ,CACD;MACT,aACI,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACP;MACR,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB;IACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;EACvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBJ","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n */\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /**\n * Label to display next to the switch\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value is invalid.\n */\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /**\n * The value of the switch\n */\n @Prop({ reflect: true })\n public value = false;\n\n /**\n * Optional helper text to display below the switch\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * The labels to use to clarify what kind of data is being visualized,\n * when the component is `readonly`.\n */\n @Prop()\n public readonlyLabels?: Array<Label<boolean>> = [];\n\n /**\n * Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n if (this.readonly) {\n let icon: string | Icon = 'minus';\n if (this.value) {\n icon = {\n name: 'ok',\n color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n };\n }\n\n return [\n <limel-dynamic-label\n value={this.value}\n aria-controls={\n this.helperText ? this.helperTextId : undefined\n }\n defaultLabel={{ text: this.label, icon: icon }}\n labels={this.readonlyLabels}\n />,\n this.renderHelperLine(),\n ];\n }\n\n return [\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled}\n onClick={this.handleClick}\n aria-controls={this.helperText ? this.helperTextId : undefined}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>,\n <label\n class={`${this.disabled ? 'disabled' : ''}`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>,\n this.renderHelperLine(),\n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n invalid={this.invalid}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}
1
+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n */\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /**\n * Label to display next to the switch\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value is invalid.\n */\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /**\n * The value of the switch\n */\n @Prop({ reflect: true })\n public value = false;\n\n /**\n * Optional helper text to display below the switch\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * The labels to use to clarify what kind of data is being visualized,\n * when the component is `readonly`.\n */\n @Prop()\n public readonlyLabels?: Array<Label<boolean>> = [];\n\n /**\n * Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n if (this.readonly) {\n let icon: string | Icon = 'minus';\n if (this.value) {\n icon = {\n name: 'ok',\n color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n };\n }\n\n return [\n <limel-dynamic-label\n value={this.value}\n aria-controls={\n this.helperText ? this.helperTextId : undefined\n }\n defaultLabel={{ text: this.label, icon: icon }}\n labels={this.readonlyLabels}\n />,\n this.renderHelperLine(),\n ];\n }\n\n return [\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled}\n onClick={this.handleClick}\n aria-controls={this.helperText ? this.helperTextId : undefined}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>,\n <label\n class={`${this.disabled ? 'disabled' : ''}`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>,\n this.renderHelperLine(),\n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n invalid={this.invalid}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}
@@ -532,6 +532,9 @@
532
532
  * of some components, to demonstrate how the component
533
533
  * behaves in a resizable container.
534
534
  */
535
+ /**
536
+ * Drag to reorder mixins
537
+ */
535
538
  /**
536
539
  * The breakpoints below are used to create responsive designs
537
540
  * in Lime's products. Therefore, they are here to get distributed
@@ -67,6 +67,9 @@
67
67
  * of some components, to demonstrate how the component
68
68
  * behaves in a resizable container.
69
69
  */
70
+ /**
71
+ * Drag to reorder mixins
72
+ */
70
73
  /**
71
74
  * The breakpoints below are used to create responsive designs
72
75
  * in Lime's products. Therefore, they are here to get distributed
@@ -1332,6 +1335,9 @@ limel-chip {
1332
1335
  * of some components, to demonstrate how the component
1333
1336
  * behaves in a resizable container.
1334
1337
  */
1338
+ /**
1339
+ * Drag to reorder mixins
1340
+ */
1335
1341
  /**
1336
1342
  * The breakpoints below are used to create responsive designs
1337
1343
  * in Lime's products. Therefore, they are here to get distributed
@@ -1573,6 +1579,9 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
1573
1579
  * of some components, to demonstrate how the component
1574
1580
  * behaves in a resizable container.
1575
1581
  */
1582
+ /**
1583
+ * Drag to reorder mixins
1584
+ */
1576
1585
  /**
1577
1586
  * The breakpoints below are used to create responsive designs
1578
1587
  * in Lime's products. Therefore, they are here to get distributed
@@ -1781,6 +1790,9 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
1781
1790
  * of some components, to demonstrate how the component
1782
1791
  * behaves in a resizable container.
1783
1792
  */
1793
+ /**
1794
+ * Drag to reorder mixins
1795
+ */
1784
1796
  /**
1785
1797
  * The breakpoints below are used to create responsive designs
1786
1798
  * in Lime's products. Therefore, they are here to get distributed
@@ -297,6 +297,9 @@ li {
297
297
  * of some components, to demonstrate how the component
298
298
  * behaves in a resizable container.
299
299
  */
300
+ /**
301
+ * Drag to reorder mixins
302
+ */
300
303
  /**
301
304
  * The breakpoints below are used to create responsive designs
302
305
  * in Lime's products. Therefore, they are here to get distributed
@@ -73,6 +73,9 @@
73
73
  * of some components, to demonstrate how the component
74
74
  * behaves in a resizable container.
75
75
  */
76
+ /**
77
+ * Drag to reorder mixins
78
+ */
76
79
  /**
77
80
  * The breakpoints below are used to create responsive designs
78
81
  * in Lime's products. Therefore, they are here to get distributed
@@ -34,11 +34,11 @@ const DEFAULT_MAX_LENGTH = 50;
34
34
  * Use them only when they add significant value.
35
35
  * - A good tip is concise, helpful, and informative.
36
36
  * Don't explain the obvious or simply repeat what is already on the screen.
37
- * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
37
+ * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
38
38
  * - If the tip is essential to the primary tasks that the user is performing,
39
39
  * such as warnings or important notes, include the information directly in the
40
40
  * interface instead.
41
- * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
41
+ * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
42
42
  * use that, not a tooltip.
43
43
  * - Make sure to use the tooltip on an element that users naturally and
44
44
  * effortlessly recognize can be hovered.
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './get-owner-element';\nimport { TooltipTimer } from './tooltip-timer';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /**\n * ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n */\n @Prop({ reflect: true })\n public elementId!: string;\n\n /**\n * Short descriptive text of the owner element.\n */\n @Prop({ reflect: true })\n public label!: string;\n\n /**\n * Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n */\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /**\n * The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n /**\n * Decides the tooltip's location in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top';\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n @State()\n private open: boolean;\n\n private portalId: string;\n private tooltipId: string;\n private ownerElement: HTMLElement;\n private tooltipTimer: TooltipTimer;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n this.tooltipTimer = new TooltipTimer(\n () => (this.open = true),\n () => (this.open = false)\n );\n }\n\n public connectedCallback() {\n this.ownerElement = getOwnerElement(this.elementId, this.host);\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render(): JSX.Element {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection={this.openDirection}\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n anchor={this.ownerElement}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.addEventListener('focus', this.showTooltip);\n this.ownerElement?.addEventListener('blur', this.hideTooltip);\n }\n\n private removeListeners() {\n this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.removeEventListener('focus', this.showTooltip);\n this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n }\n\n private showTooltip = () => {\n this.tooltipTimer.showAfterDelay();\n };\n\n private hideTooltip = () => {\n this.tooltipTimer.hide();\n };\n}\n"]}
1
+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './get-owner-element';\nimport { TooltipTimer } from './tooltip-timer';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /**\n * ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n */\n @Prop({ reflect: true })\n public elementId!: string;\n\n /**\n * Short descriptive text of the owner element.\n */\n @Prop({ reflect: true })\n public label!: string;\n\n /**\n * Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n */\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /**\n * The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n /**\n * Decides the tooltip's location in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top';\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n @State()\n private open: boolean;\n\n private portalId: string;\n private tooltipId: string;\n private ownerElement: HTMLElement;\n private tooltipTimer: TooltipTimer;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n this.tooltipTimer = new TooltipTimer(\n () => (this.open = true),\n () => (this.open = false)\n );\n }\n\n public connectedCallback() {\n this.ownerElement = getOwnerElement(this.elementId, this.host);\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render(): JSX.Element {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection={this.openDirection}\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n anchor={this.ownerElement}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.addEventListener('focus', this.showTooltip);\n this.ownerElement?.addEventListener('blur', this.hideTooltip);\n }\n\n private removeListeners() {\n this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.removeEventListener('focus', this.showTooltip);\n this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n }\n\n private showTooltip = () => {\n this.tooltipTimer.showAfterDelay();\n };\n\n private hideTooltip = () => {\n this.tooltipTimer.hide();\n };\n}\n"]}
@@ -608,6 +608,59 @@ $clickable-normal-state-transitions: (
608
608
  }
609
609
  }
610
610
 
611
+ /**
612
+ * Drag to reorder mixins
613
+ */
614
+ @mixin is-draggable-item(
615
+ $border-radius-while-being-dragged: 0.5rem,
616
+ $transform-scale-while-being-dragged: 1.01
617
+ ) {
618
+ // Note: Since SortableJS add `transitions`s in real-time as styles,
619
+ // we cannot define `transition` properties here,
620
+
621
+ &:has(limel-drag-handle:hover),
622
+ &:has(limel-drag-handle:focus-within),
623
+ &.is-elevated,
624
+ &.sortable-chosen // this class is added by SortableJS, when item is being dragged
625
+ {
626
+ will-change: transform, box-shadow, border-radius, background-color;
627
+ }
628
+
629
+ &.sortable-ghost {
630
+ border-radius: $border-radius-while-being-dragged;
631
+ box-shadow:
632
+ var(--shadow-depth-64),
633
+ 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
634
+ }
635
+
636
+ &.sortable-chosen {
637
+ border-radius: $border-radius-while-being-dragged;
638
+ background-color: var(--lime-elevated-surface-background-color);
639
+ }
640
+
641
+ &.is-elevated[draggable='false'] {
642
+ // Components must add this `is-elevated` class on their own,
643
+ // the moment the item is dropped and keep it around briefly
644
+ // so visual transitions (box-shadow, etc.) can fade
645
+ // out without being clipped by neighboring content.
646
+ animation: sit-here 0.8s forwards;
647
+ }
648
+
649
+ @keyframes sit-here {
650
+ 0% {
651
+ border-radius: $border-radius-while-being-dragged;
652
+ background-color: var(--lime-elevated-surface-background-color);
653
+ box-shadow:
654
+ var(--shadow-depth-64),
655
+ 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
656
+ }
657
+
658
+ 100% {
659
+ box-shadow: none;
660
+ }
661
+ }
662
+ }
663
+
611
664
  /**
612
665
  * The breakpoints below are used to create responsive designs
613
666
  * in Lime's products. Therefore, they are here to get distributed
@@ -18,6 +18,8 @@ export default {
18
18
  'date-picker.month.heading': 'Måned',
19
19
  'date-picker.quarter.heading': 'Kvartal',
20
20
  'date-picker.year.heading': 'År',
21
+ 'drag-handle.drag-handle': 'Trækgreb',
22
+ 'drag-handle.drag-to-reorder': 'Træk for at omarrangere',
21
23
  'chip-set.clear-all': 'Ryd alle',
22
24
  'snackbar.dismiss': 'Luk',
23
25
  'file.drag-and-drop-tips': 'Træk & slip filen her, eller klik for at gennemse.',
@@ -1 +1 @@
1
- {"version":3,"file":"da.js","sourceRoot":"","sources":["../../src/translations/da.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,MAAM,EAAE,OAAO;EACf,IAAI,EAAE,KAAK;EACX,MAAM,EAAE,UAAU;EAClB,OAAO,EAAE,WAAW;EACpB,KAAK,EAAE,OAAO;EACd,qBAAqB,EAAE,OAAO;EAC9B,mBAAmB,EAAE,KAAK;EAC1B,oBAAoB,EAAE,YAAY;EAClC,cAAc,EAAE,QAAQ;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,UAAU;EAC7B,iBAAiB,EAAE,UAAU;EAC7B,0BAA0B,EAAE,wBAAwB;EACpD,2BAA2B,EAAE,wBAAwB;EACrD,mBAAmB,EAAE,MAAM;EAC3B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,SAAS;EACxC,0BAA0B,EAAE,IAAI;EAChC,oBAAoB,EAAE,UAAU;EAChC,kBAAkB,EAAE,KAAK;EACzB,yBAAyB,EACrB,oDAAoD;EACxD,0CAA0C,EACtC,oDAAoD;EACxD,uCAAuC,EACnC,wCAAwC;EAC5C,sBAAsB,EAAE,MAAM;EAC9B,6BAA6B,EAAE,kBAAkB;EACjD,gCAAgC,EAAE,kBAAkB;EACpD,6BAA6B,EAAE,kBAAkB;EACjD,0BAA0B,EAAE,OAAO;EACnC,kBAAkB,EAAE,KAAK;EACzB,oBAAoB,EAAE,QAAQ;EAC9B,2BAA2B,EAAE,eAAe;EAC5C,gBAAgB,EAAE,cAAc;EAChC,gBAAgB,EAAE,cAAc;EAChC,gBAAgB,EAAE,cAAc;EAChC,2BAA2B,EAAE,YAAY;EACzC,2BAA2B,EAAE,kBAAkB;EAC/C,wBAAwB,EAAE,WAAW;EACrC,kBAAkB,EAAE,aAAa;EACjC,uBAAuB,EAAE,OAAO;EAChC,uBAAuB,EAAE,MAAM;EAC/B,wBAAwB,EAAE,UAAU;EACpC,kBAAkB,EAAE,MAAM;EAC1B,2BAA2B,EAAE,mCAAmC;EAChE,0BAA0B,EAAE,0CAA0C;EACtE,2BAA2B,EAAE,+BAA+B;EAC5D,iCAAiC,EAC7B,kEAAkE;EACtE,cAAc,EAAE,sBAAsB;EACtC,iBAAiB,EAAE,WAAW;EAC9B,oBAAoB,EAAE,QAAQ;EAC9B,kBAAkB,EAAE,kBAAkB;EACtC,kBAAkB,EAAE,kBAAkB;EACtC,wBAAwB,EAAE,qBAAqB;EAC/C,2CAA2C,EACvC,gCAAgC;EACpC,iDAAiD,EAC7C,wFAAwF;CAC/F,CAAC","sourcesContent":["export default {\n remove: 'Fjern',\n save: 'Gem',\n cancel: 'Annullér',\n loading: 'Indlæser…',\n value: 'Værdi',\n 'action-bar.collapse': 'Skjul',\n 'action-bar.expand': 'Vis',\n 'action-bar.actions': 'Handlinger',\n 'callout.note': 'Bemærk',\n 'callout.important': 'Vigtig',\n 'callout.tip': 'Tip',\n 'callout.caution': 'Advarsel',\n 'callout.warning': 'Advarsel',\n 'collapsible-section.open': 'Åbn { header } sektion',\n 'collapsible-section.close': 'Luk { header } sektion',\n 'date-picker.today': 'Idag',\n 'date-picker.month.heading': 'Måned',\n 'date-picker.quarter.heading': 'Kvartal',\n 'date-picker.year.heading': 'År',\n 'chip-set.clear-all': 'Ryd alle',\n 'snackbar.dismiss': 'Luk',\n 'file.drag-and-drop-tips':\n 'Træk & slip filen her, eller klik for at gennemse.',\n 'file-viewer.message.unsupported-filetype':\n 'Kan ikke vise en forhåndsvisning af denne filtype.',\n 'file-viewer.message.try-other-options':\n 'Hent filen eller åbn den i en ny fane.',\n 'file-viewer.download': 'Hent',\n 'file-viewer.exit-fullscreen': 'Afslut fuldskærm',\n 'file-viewer.open-in-fullscreen': 'Åbn i fuld skærm',\n 'file-viewer.open-in-new-tab': 'Åbn i en ny fane',\n 'file-viewer.more-actions': 'Mere…',\n 'editor-menu.bold': 'Fed',\n 'editor-menu.italic': 'Kursiv',\n 'editor-menu.strikethrough': 'Gennemstreget',\n 'editor-menu.h1': 'Overskrift 1',\n 'editor-menu.h2': 'Overskrift 2',\n 'editor-menu.h3': 'Overskrift 3',\n 'editor-menu.bulleted-list': 'Punktliste',\n 'editor-menu.numbered-list': 'Nummereret liste',\n 'editor-menu.blockquote': 'Blokcitat',\n 'editor-menu.link': 'Tilføj link',\n 'editor-link-menu.text': 'Tekst',\n 'editor-link-menu.link': 'Link',\n 'editor-menu.code-block': 'Kodeblok',\n 'editor-menu.code': 'Kode',\n 'editor-image-view.loading': 'Indlæser billede: { filename }...',\n 'editor-image-view.failed': 'Noget gik galt med billede: { filename }',\n 'editor-image-view.success': 'Billede: { filename } er klar',\n 'editor-image-view.resize-handle':\n 'Træk til højre eller venstre for at ændre størrelsen på billedet',\n 'progress-bar': 'Fremskridtsindikator',\n 'ai-avatar.label': 'AI-avatar',\n 'ai-avatar.thinking': 'tænker',\n 'table.select-all': 'Vælg alle rækker',\n 'table.select-row': 'Vælg denne række',\n 'profile-picture.remove': 'Fjern valgt billede',\n 'profile-picture.unsupported-preview.title':\n 'Ikke-understøttet billedformat',\n 'profile-picture.unsupported-preview.description':\n 'Vi kan ikke vise det valgte billede i denne browser. Vælg venligst en anden billedfil.',\n};\n"]}
1
+ {"version":3,"file":"da.js","sourceRoot":"","sources":["../../src/translations/da.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,MAAM,EAAE,OAAO;EACf,IAAI,EAAE,KAAK;EACX,MAAM,EAAE,UAAU;EAClB,OAAO,EAAE,WAAW;EACpB,KAAK,EAAE,OAAO;EACd,qBAAqB,EAAE,OAAO;EAC9B,mBAAmB,EAAE,KAAK;EAC1B,oBAAoB,EAAE,YAAY;EAClC,cAAc,EAAE,QAAQ;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,UAAU;EAC7B,iBAAiB,EAAE,UAAU;EAC7B,0BAA0B,EAAE,wBAAwB;EACpD,2BAA2B,EAAE,wBAAwB;EACrD,mBAAmB,EAAE,MAAM;EAC3B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,SAAS;EACxC,0BAA0B,EAAE,IAAI;EAChC,yBAAyB,EAAE,UAAU;EACrC,6BAA6B,EAAE,yBAAyB;EACxD,oBAAoB,EAAE,UAAU;EAChC,kBAAkB,EAAE,KAAK;EACzB,yBAAyB,EACrB,oDAAoD;EACxD,0CAA0C,EACtC,oDAAoD;EACxD,uCAAuC,EACnC,wCAAwC;EAC5C,sBAAsB,EAAE,MAAM;EAC9B,6BAA6B,EAAE,kBAAkB;EACjD,gCAAgC,EAAE,kBAAkB;EACpD,6BAA6B,EAAE,kBAAkB;EACjD,0BAA0B,EAAE,OAAO;EACnC,kBAAkB,EAAE,KAAK;EACzB,oBAAoB,EAAE,QAAQ;EAC9B,2BAA2B,EAAE,eAAe;EAC5C,gBAAgB,EAAE,cAAc;EAChC,gBAAgB,EAAE,cAAc;EAChC,gBAAgB,EAAE,cAAc;EAChC,2BAA2B,EAAE,YAAY;EACzC,2BAA2B,EAAE,kBAAkB;EAC/C,wBAAwB,EAAE,WAAW;EACrC,kBAAkB,EAAE,aAAa;EACjC,uBAAuB,EAAE,OAAO;EAChC,uBAAuB,EAAE,MAAM;EAC/B,wBAAwB,EAAE,UAAU;EACpC,kBAAkB,EAAE,MAAM;EAC1B,2BAA2B,EAAE,mCAAmC;EAChE,0BAA0B,EAAE,0CAA0C;EACtE,2BAA2B,EAAE,+BAA+B;EAC5D,iCAAiC,EAC7B,kEAAkE;EACtE,cAAc,EAAE,sBAAsB;EACtC,iBAAiB,EAAE,WAAW;EAC9B,oBAAoB,EAAE,QAAQ;EAC9B,kBAAkB,EAAE,kBAAkB;EACtC,kBAAkB,EAAE,kBAAkB;EACtC,wBAAwB,EAAE,qBAAqB;EAC/C,2CAA2C,EACvC,gCAAgC;EACpC,iDAAiD,EAC7C,wFAAwF;CAC/F,CAAC","sourcesContent":["export default {\n remove: 'Fjern',\n save: 'Gem',\n cancel: 'Annullér',\n loading: 'Indlæser…',\n value: 'Værdi',\n 'action-bar.collapse': 'Skjul',\n 'action-bar.expand': 'Vis',\n 'action-bar.actions': 'Handlinger',\n 'callout.note': 'Bemærk',\n 'callout.important': 'Vigtig',\n 'callout.tip': 'Tip',\n 'callout.caution': 'Advarsel',\n 'callout.warning': 'Advarsel',\n 'collapsible-section.open': 'Åbn { header } sektion',\n 'collapsible-section.close': 'Luk { header } sektion',\n 'date-picker.today': 'Idag',\n 'date-picker.month.heading': 'Måned',\n 'date-picker.quarter.heading': 'Kvartal',\n 'date-picker.year.heading': 'År',\n 'drag-handle.drag-handle': 'Trækgreb',\n 'drag-handle.drag-to-reorder': 'Træk for at omarrangere',\n 'chip-set.clear-all': 'Ryd alle',\n 'snackbar.dismiss': 'Luk',\n 'file.drag-and-drop-tips':\n 'Træk & slip filen her, eller klik for at gennemse.',\n 'file-viewer.message.unsupported-filetype':\n 'Kan ikke vise en forhåndsvisning af denne filtype.',\n 'file-viewer.message.try-other-options':\n 'Hent filen eller åbn den i en ny fane.',\n 'file-viewer.download': 'Hent',\n 'file-viewer.exit-fullscreen': 'Afslut fuldskærm',\n 'file-viewer.open-in-fullscreen': 'Åbn i fuld skærm',\n 'file-viewer.open-in-new-tab': 'Åbn i en ny fane',\n 'file-viewer.more-actions': 'Mere…',\n 'editor-menu.bold': 'Fed',\n 'editor-menu.italic': 'Kursiv',\n 'editor-menu.strikethrough': 'Gennemstreget',\n 'editor-menu.h1': 'Overskrift 1',\n 'editor-menu.h2': 'Overskrift 2',\n 'editor-menu.h3': 'Overskrift 3',\n 'editor-menu.bulleted-list': 'Punktliste',\n 'editor-menu.numbered-list': 'Nummereret liste',\n 'editor-menu.blockquote': 'Blokcitat',\n 'editor-menu.link': 'Tilføj link',\n 'editor-link-menu.text': 'Tekst',\n 'editor-link-menu.link': 'Link',\n 'editor-menu.code-block': 'Kodeblok',\n 'editor-menu.code': 'Kode',\n 'editor-image-view.loading': 'Indlæser billede: { filename }...',\n 'editor-image-view.failed': 'Noget gik galt med billede: { filename }',\n 'editor-image-view.success': 'Billede: { filename } er klar',\n 'editor-image-view.resize-handle':\n 'Træk til højre eller venstre for at ændre størrelsen på billedet',\n 'progress-bar': 'Fremskridtsindikator',\n 'ai-avatar.label': 'AI-avatar',\n 'ai-avatar.thinking': 'tænker',\n 'table.select-all': 'Vælg alle rækker',\n 'table.select-row': 'Vælg denne række',\n 'profile-picture.remove': 'Fjern valgt billede',\n 'profile-picture.unsupported-preview.title':\n 'Ikke-understøttet billedformat',\n 'profile-picture.unsupported-preview.description':\n 'Vi kan ikke vise det valgte billede i denne browser. Vælg venligst en anden billedfil.',\n};\n"]}
@@ -18,6 +18,8 @@ export default {
18
18
  'date-picker.month.heading': 'Monat',
19
19
  'date-picker.quarter.heading': 'Quartal',
20
20
  'date-picker.year.heading': 'Jahr',
21
+ 'drag-handle.drag-handle': 'Ziehgriff',
22
+ 'drag-handle.drag-to-reorder': 'Zum Neuordnen ziehen',
21
23
  'chip-set.clear-all': 'Alles löschen',
22
24
  'snackbar.dismiss': 'Schließen',
23
25
  'file.drag-and-drop-tips': 'Ziehen Sie Ihre Datei hierher oder klicken Sie, um zu durchsuchen.',