@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

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 (293) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +4707 -2272
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/_internal/boolean-component.d.ts +13 -1
  4. package/lib/_internal/disablable-component.d.ts +2 -1
  5. package/lib/_internal/focusable-component.d.ts +2 -1
  6. package/lib/_internal/form-field-component.d.ts +3 -2
  7. package/lib/_internal/item-storages/dropdown-item-storage.d.ts +19 -19
  8. package/lib/_internal/item-storages/simple-item-storage.d.ts +15 -12
  9. package/lib/_internal/item-storages/simplest-item-storage.d.ts +1 -1
  10. package/lib/_internal/ngmodel-component.d.ts +5 -8
  11. package/lib/_internal/selectable-list-component.d.ts +6 -6
  12. package/lib/_internal/utils/date.utils.d.ts +16 -0
  13. package/lib/badge/badge.directive.d.ts +3 -2
  14. package/lib/breakpoints/breakpoint.service.d.ts +12 -0
  15. package/lib/breakpoints/breakpoint.utils.d.ts +7 -0
  16. package/lib/breakpoints/breakpoints.d.ts +13 -0
  17. package/lib/breakpoints/index.d.ts +2 -0
  18. package/lib/buttons/_button-base.d.ts +12 -8
  19. package/lib/buttons/_button-base.defaults.d.ts +3 -2
  20. package/lib/buttons/button/button.component.d.ts +5 -5
  21. package/lib/buttons/button/button.defaults.d.ts +0 -2
  22. package/lib/buttons/button/button.directive.d.ts +17 -0
  23. package/lib/buttons/button/button.module.d.ts +3 -2
  24. package/lib/buttons/button/index.d.ts +1 -0
  25. package/lib/buttons/fab/fab.component.d.ts +3 -1
  26. package/lib/buttons/icon-button/icon-button.component.d.ts +6 -4
  27. package/lib/buttons/icon-button/icon-button.defaults.d.ts +2 -1
  28. package/lib/calendar/abstract-calendar.d.ts +128 -0
  29. package/lib/calendar/calendar.component.d.ts +8 -96
  30. package/lib/calendar/calendar.defaults.d.ts +16 -1
  31. package/lib/calendar/calendar.internal-directives.d.ts +24 -8
  32. package/lib/calendar/calendar.internal-types.d.ts +1 -0
  33. package/lib/calendar/calendar.module.d.ts +4 -9
  34. package/lib/calendar/calendar.types.d.ts +21 -5
  35. package/lib/calendar/index.d.ts +3 -0
  36. package/lib/calendar/range-calendar.component.d.ts +16 -0
  37. package/lib/calendar/range-calendar.directives.d.ts +51 -0
  38. package/lib/calendar/range-calendar.module.d.ts +10 -0
  39. package/lib/calendar/views/calendar-views.module.d.ts +13 -0
  40. package/lib/calendar/views/days-view/days-view.component.d.ts +20 -2
  41. package/lib/calendar/views/days-view/days-view.helpers.d.ts +2 -2
  42. package/lib/calendar/views/months-view/months-view.component.d.ts +15 -3
  43. package/lib/calendar/views/years-view/years-view.component.d.ts +16 -3
  44. package/lib/checkbox/checkbox.component.d.ts +5 -2
  45. package/lib/checkbox/checkbox.types.d.ts +2 -0
  46. package/lib/checkbox-list/checkbox-list.component.d.ts +9 -7
  47. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  48. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  49. package/lib/chip/chip.component.d.ts +2 -1
  50. package/lib/chip/deletable-chip/deletable-chip.component.d.ts +2 -1
  51. package/lib/chip/selectable-chip/selectable-chip.component.d.ts +5 -2
  52. package/lib/dialog/dialog.component.d.ts +13 -8
  53. package/lib/dialog/dialog.types.d.ts +1 -0
  54. package/lib/divider/divider.component.d.ts +2 -3
  55. package/lib/divider/divider.defaults.d.ts +5 -0
  56. package/lib/divider/divider.directive.d.ts +18 -0
  57. package/lib/divider/divider.module.d.ts +3 -2
  58. package/lib/divider/divider.types.d.ts +5 -0
  59. package/lib/divider/index.d.ts +2 -0
  60. package/lib/dropdown-panel/dropdown-panel.component.d.ts +2 -1
  61. package/lib/dropdown-panel/dropdown-panel.types.d.ts +1 -1
  62. package/lib/file-inputs/file-input/file-input.component.d.ts +2 -1
  63. package/lib/file-inputs/file-input-base.d.ts +4 -5
  64. package/lib/form-field/auto-error/auto-error.component.d.ts +19 -0
  65. package/lib/form-field/auto-error/auto-error.provider.d.ts +7 -0
  66. package/lib/form-field/error/error.directive.d.ts +3 -2
  67. package/lib/form-field/form-field-base.d.ts +5 -2
  68. package/lib/form-field/form-field-child.token.d.ts +5 -5
  69. package/lib/form-field/form-field-native-inputs.d.ts +6 -11
  70. package/lib/form-field/form-field.component.d.ts +1 -1
  71. package/lib/form-field/form-field.defaults.d.ts +1 -0
  72. package/lib/form-field/form-field.module.d.ts +5 -4
  73. package/lib/form-field/hint/hint.directive.d.ts +3 -2
  74. package/lib/form-field/hint-error/hint-error.directive.d.ts +3 -2
  75. package/lib/form-field/horizontal-form-field.component.d.ts +1 -1
  76. package/lib/form-field/index.d.ts +4 -0
  77. package/lib/form-field/label/label.component.d.ts +3 -2
  78. package/lib/form-field-frame/form-field-frame.component.d.ts +5 -3
  79. package/lib/grid/grid.component.d.ts +51 -0
  80. package/lib/grid/grid.defaults.d.ts +16 -0
  81. package/lib/grid/grid.module.d.ts +7 -0
  82. package/lib/grid/grid.types.d.ts +38 -0
  83. package/lib/grid/grid.utils.d.ts +11 -0
  84. package/lib/grid/index.d.ts +4 -0
  85. package/lib/icon/icon.component.d.ts +2 -1
  86. package/lib/inputs/_simple-input-base.d.ts +6 -3
  87. package/lib/inputs/autocomplete-input/autocomplete-input.component.d.ts +5 -4
  88. package/lib/inputs/date-input/abstract-date-input.d.ts +112 -0
  89. package/lib/inputs/date-input/date-input.component.d.ts +19 -81
  90. package/lib/inputs/date-input/date-input.defaults.d.ts +21 -3
  91. package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts} +2 -2
  92. package/lib/inputs/date-input/date-input.module.d.ts +5 -4
  93. package/lib/inputs/date-input/date-input.serializers.d.ts +4 -2
  94. package/lib/inputs/date-input/date-input.types.d.ts +5 -4
  95. package/lib/inputs/date-input/date-range-input.component.d.ts +30 -0
  96. package/lib/inputs/date-input/date-range-input.directives.d.ts +82 -0
  97. package/lib/inputs/date-input/date-range-input.module.d.ts +17 -0
  98. package/lib/inputs/date-input/index.d.ts +7 -1
  99. package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +45 -0
  100. package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts +82 -0
  101. package/lib/inputs/date-input/multipage-date-range-input.module.d.ts +17 -0
  102. package/lib/inputs/digit-input/digit-input.component.d.ts +4 -3
  103. package/lib/inputs/hex-input/hex-input.component.d.ts +4 -3
  104. package/lib/inputs/input-utils.d.ts +13 -2
  105. package/lib/inputs/number-input/number-input.component.d.ts +20 -12
  106. package/lib/inputs/number-input/number-input.defaults.d.ts +6 -0
  107. package/lib/inputs/number-input/number-input.directives.d.ts +12 -0
  108. package/lib/inputs/number-input/number-input.module.d.ts +1 -1
  109. package/lib/inputs/number-input/number-input.types.d.ts +6 -0
  110. package/lib/inputs/password-input/password-input.component.d.ts +5 -3
  111. package/lib/kbd/kbd.component.d.ts +2 -1
  112. package/lib/kbd-shortcut/kbd-shortcut.component.d.ts +2 -1
  113. package/lib/modal/modal.component.d.ts +9 -6
  114. package/lib/modal/modal.defaults.d.ts +2 -0
  115. package/lib/option/option.component.d.ts +2 -1
  116. package/lib/progress-bar/progress-bar.component.d.ts +4 -3
  117. package/lib/progress-circle/progress-circle.component.d.ts +5 -4
  118. package/lib/search-functions.d.ts +1 -1
  119. package/lib/segment/segment.component.d.ts +6 -5
  120. package/lib/select/select.component.d.ts +40 -30
  121. package/lib/select/select.defaults.d.ts +10 -2
  122. package/lib/select/select.directive.d.ts +6 -0
  123. package/lib/select/select.module.d.ts +1 -1
  124. package/lib/select/select.types.d.ts +6 -2
  125. package/lib/select/select.utils.d.ts +2 -0
  126. package/lib/slide-toggle/slide-toggle.component.d.ts +2 -0
  127. package/lib/slider/abstract-slider.d.ts +35 -29
  128. package/lib/slider/index.d.ts +1 -0
  129. package/lib/slider/range-slider/range-slider.component.d.ts +13 -10
  130. package/lib/slider/range-slider/range-slider.types.d.ts +6 -0
  131. package/lib/slider/slider.component.d.ts +5 -4
  132. package/lib/slider/slider.types.d.ts +3 -3
  133. package/lib/star/rating-display/rating-display.component.d.ts +2 -1
  134. package/lib/star/rating-input/rating-input.component.d.ts +5 -3
  135. package/lib/star/rating-input/rating-input.defaults.d.ts +2 -2
  136. package/lib/star/star-button/star-button.component.d.ts +4 -1
  137. package/lib/star/star-button/star-button.types.d.ts +1 -0
  138. package/lib/tabber/index.d.ts +2 -1
  139. package/lib/tabber/tab/tab.component.d.ts +16 -8
  140. package/lib/tabber/tabber.component.d.ts +25 -9
  141. package/lib/tabber/tabber.defaults.d.ts +2 -0
  142. package/lib/tabber/tabber.directives.d.ts +9 -0
  143. package/lib/tabber/tabber.module.d.ts +3 -2
  144. package/lib/tabber/tabber.types.d.ts +5 -0
  145. package/lib/table/table.component.d.ts +16 -15
  146. package/lib/table-pagination/table-pagination.component.d.ts +4 -3
  147. package/lib/text-list/text-list.component.d.ts +2 -1
  148. package/lib/types/alignment.types.d.ts +7 -1
  149. package/lib/types/item-storage.types.d.ts +17 -18
  150. package/package.json +3 -2
  151. package/prebuilt-themes/default/badge.css +37 -15
  152. package/prebuilt-themes/default/badge.css.map +1 -1
  153. package/prebuilt-themes/default/buttons/button.css +74 -58
  154. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  155. package/prebuilt-themes/default/buttons/fab.css +64 -51
  156. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  157. package/prebuilt-themes/default/buttons/icon-button.css +50 -44
  158. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  159. package/prebuilt-themes/default/calendar.css +131 -55
  160. package/prebuilt-themes/default/calendar.css.map +1 -1
  161. package/prebuilt-themes/default/card.css +56 -24
  162. package/prebuilt-themes/default/card.css.map +1 -1
  163. package/prebuilt-themes/default/checkbox-list.css +48 -22
  164. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  165. package/prebuilt-themes/default/checkbox.css +31 -58
  166. package/prebuilt-themes/default/checkbox.css.map +1 -1
  167. package/prebuilt-themes/default/chips.css +75 -43
  168. package/prebuilt-themes/default/chips.css.map +1 -1
  169. package/prebuilt-themes/default/color-display.css +15 -8
  170. package/prebuilt-themes/default/color-display.css.map +1 -1
  171. package/prebuilt-themes/default/core.css +21 -1
  172. package/prebuilt-themes/default/core.css.map +1 -1
  173. package/prebuilt-themes/default/dialog.css +7 -2
  174. package/prebuilt-themes/default/dialog.css.map +1 -1
  175. package/prebuilt-themes/default/divider.css +82 -6
  176. package/prebuilt-themes/default/divider.css.map +1 -1
  177. package/prebuilt-themes/default/dropdown-panel.css +16 -8
  178. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  179. package/prebuilt-themes/default/file-drop-area.css +81 -35
  180. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  181. package/prebuilt-themes/default/form-field-frame.css +18 -14
  182. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  183. package/prebuilt-themes/default/form-field.css +62 -29
  184. package/prebuilt-themes/default/form-field.css.map +1 -1
  185. package/prebuilt-themes/default/inputs/autocomplete-input.css +79 -28
  186. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  187. package/prebuilt-themes/default/inputs/color-input.css +5 -44
  188. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  189. package/prebuilt-themes/default/inputs/date-input.css +97 -25
  190. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  191. package/prebuilt-themes/default/inputs/digit-input.css +31 -19
  192. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  193. package/prebuilt-themes/default/inputs/file-input.css +117 -62
  194. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  195. package/prebuilt-themes/default/inputs/hex-input.css +55 -23
  196. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  197. package/prebuilt-themes/default/inputs/input.css +47 -18
  198. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  199. package/prebuilt-themes/default/inputs/number-input.css +83 -33
  200. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  201. package/prebuilt-themes/default/inputs/password-input.css +74 -25
  202. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  203. package/prebuilt-themes/default/kbd-shortcut.css +8 -4
  204. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  205. package/prebuilt-themes/default/kbd.css +19 -9
  206. package/prebuilt-themes/default/kbd.css.map +1 -1
  207. package/prebuilt-themes/default/modal.css +46 -22
  208. package/prebuilt-themes/default/modal.css.map +1 -1
  209. package/prebuilt-themes/default/progress-circle.css +13 -7
  210. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  211. package/prebuilt-themes/default/radio.css +46 -28
  212. package/prebuilt-themes/default/radio.css.map +1 -1
  213. package/prebuilt-themes/default/segment.css +71 -61
  214. package/prebuilt-themes/default/segment.css.map +1 -1
  215. package/prebuilt-themes/default/select.css +78 -44
  216. package/prebuilt-themes/default/select.css.map +1 -1
  217. package/prebuilt-themes/default/slide-toggle.css +88 -37
  218. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  219. package/prebuilt-themes/default/slider.css +93 -52
  220. package/prebuilt-themes/default/slider.css.map +1 -1
  221. package/prebuilt-themes/default/snackbar.css +29 -16
  222. package/prebuilt-themes/default/snackbar.css.map +1 -1
  223. package/prebuilt-themes/default/spinner.css +9 -3
  224. package/prebuilt-themes/default/spinner.css.map +1 -1
  225. package/prebuilt-themes/default/stars.css +42 -20
  226. package/prebuilt-themes/default/stars.css.map +1 -1
  227. package/prebuilt-themes/default/tabber.css +53 -17
  228. package/prebuilt-themes/default/tabber.css.map +1 -1
  229. package/prebuilt-themes/default/table-pagination.css +21 -9
  230. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  231. package/prebuilt-themes/default/table.css +93 -69
  232. package/prebuilt-themes/default/table.css.map +1 -1
  233. package/public-api.d.ts +2 -1
  234. package/themes/_variables.scss +2 -1
  235. package/themes/default/_mixins.scss +5 -5
  236. package/themes/default/badge.scss +48 -15
  237. package/themes/default/buttons/_button-mixins.scss +43 -33
  238. package/themes/default/buttons/button.scss +54 -29
  239. package/themes/default/buttons/fab.scss +47 -26
  240. package/themes/default/buttons/icon-button.scss +40 -17
  241. package/themes/default/calendar.scss +148 -58
  242. package/themes/default/card.scss +68 -24
  243. package/themes/default/checkbox-list.scss +47 -21
  244. package/themes/default/checkbox.scss +30 -59
  245. package/themes/default/chips.scss +71 -40
  246. package/themes/default/color-display.scss +18 -8
  247. package/themes/default/core.scss +24 -1
  248. package/themes/default/dialog.scss +9 -2
  249. package/themes/default/divider.scss +106 -6
  250. package/themes/default/dropdown-panel.scss +21 -8
  251. package/themes/default/file-drop-area.scss +92 -35
  252. package/themes/default/form-field-frame.scss +23 -15
  253. package/themes/default/form-field.scss +64 -28
  254. package/themes/default/inputs/_shared.scss +52 -12
  255. package/themes/default/inputs/autocomplete-input.scss +83 -14
  256. package/themes/default/inputs/color-input.scss +2 -2
  257. package/themes/default/inputs/date-input.scss +74 -6
  258. package/themes/default/inputs/digit-input.scss +42 -20
  259. package/themes/default/inputs/file-input.scss +100 -23
  260. package/themes/default/inputs/hex-input.scss +59 -9
  261. package/themes/default/inputs/input.scss +51 -4
  262. package/themes/default/inputs/number-input.scss +94 -24
  263. package/themes/default/inputs/password-input.scss +84 -15
  264. package/themes/default/kbd-shortcut.scss +10 -4
  265. package/themes/default/kbd.scss +26 -9
  266. package/themes/default/modal.scss +56 -22
  267. package/themes/default/progress-circle.scss +16 -10
  268. package/themes/default/radio.scss +47 -26
  269. package/themes/default/segment.scss +77 -67
  270. package/themes/default/select.scss +98 -42
  271. package/themes/default/slide-toggle.scss +134 -59
  272. package/themes/default/slider.scss +102 -65
  273. package/themes/default/snackbar.scss +32 -14
  274. package/themes/default/spinner.scss +11 -3
  275. package/themes/default/stars.scss +45 -16
  276. package/themes/default/tabber.scss +54 -14
  277. package/themes/default/table-pagination.scss +24 -9
  278. package/themes/default/table.scss +104 -70
  279. package/lib/statebox/index.d.ts +0 -4
  280. package/lib/statebox/statebox.component.d.ts +0 -26
  281. package/lib/statebox/statebox.defaults.d.ts +0 -10
  282. package/lib/statebox/statebox.module.d.ts +0 -8
  283. package/lib/statebox/statebox.types.d.ts +0 -26
  284. package/lib/tabber/tab/tab.defaults.d.ts +0 -6
  285. package/prebuilt-themes/default/calendar-OLD.css +0 -294
  286. package/prebuilt-themes/default/calendar-OLD.css.map +0 -1
  287. package/prebuilt-themes/default/inputs/search-bar.css +0 -118
  288. package/prebuilt-themes/default/inputs/search-bar.css.map +0 -1
  289. package/prebuilt-themes/default/statebox.css +0 -235
  290. package/prebuilt-themes/default/statebox.css.map +0 -1
  291. package/themes/default/calendar-OLD.scss +0 -183
  292. package/themes/default/inputs/search-bar.scss +0 -19
  293. package/themes/default/statebox.scss +0 -109
package/prebuilt-themes/default/dropdown-panel.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dropdown-panel.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EACE;EACA,YCPG;EDQH;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE,YCIS;;ADAX;EACE;EACA;;AAIF;EACE;;AAEA;EACE","file":"dropdown-panel.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dropdown-panel.scss"],"names":[],"mappings":"AAIA;EAEE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAIF;EACE;;AAEA;EACE","file":"dropdown-panel.css"}
package/prebuilt-themes/default/file-drop-area.css CHANGED
@@ -1,3 +1,47 @@
1
+ :root {
2
+ --ard-file-drop-area-min-width: 15rem;
3
+ --ard-file-drop-area-min-height: 10rem;
4
+ --ard-file-drop-area-padding: 0.625rem;
5
+ --ard-file-drop-area-outline-border-width: 2px;
6
+ --ard-file-drop-area-outline-border-style: dashed;
7
+ --ard-file-drop-area-outline-padding: 0.375rem;
8
+ --ard-file-drop-area-content-gap-min: 0.2rem;
9
+ --ard-file-drop-area-content-gap-preferred: 10%;
10
+ --ard-file-drop-area-content-gap-max: 1rem;
11
+ --ard-file-drop-area-icon-font-size: 220%;
12
+ --ard-file-drop-area-drop-text-font-weight: 500;
13
+ --ard-file-drop-area-drop-text-font-size: 105%;
14
+ --ard-file-drop-area-or-text-font-weight: 400;
15
+ --ard-file-drop-area-or-text-font-size: 95%;
16
+ --ard-file-drop-area-dragover-text-font-weight: 500;
17
+ --ard-file-drop-area-dragover-text-font-size: 105%;
18
+ --ard-file-drop-area-dragover-amount-font-weight: 600;
19
+ --ard-file-drop-area-dragover-amount-font-size: 120%;
20
+ --ard-file-drop-area-uploaded-container-gap: 0.75rem;
21
+ --ard-file-drop-area-uploaded-message-font-weight: 500;
22
+ --ard-file-drop-area-uploaded-message-font-size: 105%;
23
+ --ard-file-drop-area-uploaded-amount-font-weight: 600;
24
+ --ard-file-drop-area-uploaded-amount-font-size: 100%;
25
+ --ard-file-drop-area-uploaded-files-gap: 0.45rem;
26
+ --ard-file-drop-area-file-gap: 0.75rem;
27
+ --ard-file-drop-area-file-icon-font-size: 220%;
28
+ --ard-file-drop-area-file-info-gap: 0.5ch;
29
+ --ard-file-drop-area-filename-gap: 0;
30
+ --ard-file-drop-area-filename-name-line-height: 1;
31
+ --ard-file-drop-area-filename-name-height: 1em;
32
+ --ard-file-drop-area-filesize-font-weight: 500;
33
+ --ard-file-drop-area-filesize-font-size: 83%;
34
+ --ard-file-drop-area-filesize-opacity: 60%;
35
+ --ard-file-drop-area-variant-rounded-corner-radius: 0.875rem;
36
+ --ard-file-drop-area-outline-corner-radius: 0.25rem;
37
+ --ard-file-drop-area-font-size-compact: 85%;
38
+ --ard-file-drop-area-min-width-compact: 12rem;
39
+ --ard-file-drop-area-min-height-compact: 8rem;
40
+ --ard-file-drop-area-content-gap-min-compact: 0.1667rem;
41
+ --ard-file-drop-area-content-gap-preferred-compact: 10%;
42
+ --ard-file-drop-area-content-gap-max-compact: 0.75rem;
43
+ }
44
+
1
45
  ard-file-drop-area {
2
46
  display: block;
3
47
  width: 100%;
@@ -11,9 +55,9 @@ ard-file-drop-area {
11
55
  max-width: 100%;
12
56
  height: 100%;
13
57
  max-height: 100%;
14
- min-width: 15rem;
15
- min-height: 10rem;
16
- padding: 0.625rem;
58
+ min-width: var(--ard-file-drop-area-min-width, 15rem);
59
+ min-height: var(--ard-file-drop-area-min-height, 10rem);
60
+ padding: var(--ard-file-drop-area-padding, 0.625rem);
17
61
  box-sizing: border-box;
18
62
  background: var(--ard-cmpcl--bg-colored-verylight);
19
63
  display: flex;
@@ -155,8 +199,8 @@ ard-file-drop-area {
155
199
  width: 100%;
156
200
  min-height: 100%;
157
201
  box-sizing: border-box;
158
- border: 2px dashed var(--ard-cmpcl--border);
159
- padding: 0.375rem;
202
+ border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed) var(--ard-cmpcl--border);
203
+ padding: var(--ard-file-drop-area-outline-padding, 0.375rem);
160
204
  pointer-events: none;
161
205
  }
162
206
  .ard-file-drop-area .ard-file-drop-area-outline * {
@@ -169,31 +213,32 @@ ard-file-drop-area {
169
213
  flex-direction: column;
170
214
  align-items: center;
171
215
  justify-content: center;
172
- gap: clamp(0.2rem, 10%, 1rem);
173
- padding: 0.2rem 0;
216
+ gap: clamp(var(--ard-file-drop-area-content-gap-min, 0.2rem), var(--ard-file-drop-area-content-gap-preferred, 10%), var(--ard-file-drop-area-content-gap-max, 1rem));
217
+ padding: var(--ard-file-drop-area-content-padding, 0.2rem 0);
174
218
  box-sizing: border-box;
175
219
  }
176
220
  .ard-file-drop-area .ard-file-drop-area-icon {
177
- font-size: 220%;
221
+ font-size: var(--ard-file-drop-area-icon-font-size, 220%);
178
222
  }
179
223
  .ard-file-drop-area .ard-file-drop-area-drop-text {
180
- font-weight: 500;
181
- font-size: 105%;
224
+ font-weight: var(--ard-file-drop-area-drop-text-font-weight, 500);
225
+ font-size: var(--ard-file-drop-area-drop-text-font-size, 105%);
182
226
  }
183
227
  .ard-file-drop-area .ard-file-drop-area-or-text {
184
- font-size: 95%;
228
+ font-weight: var(--ard-file-drop-area-or-text-font-weight, 400);
229
+ font-size: var(--ard-file-drop-area-or-text-font-size, 95%);
185
230
  }
186
231
  .ard-file-drop-area .ard-file-drop-area-browse-button > button {
187
232
  border: 1px solid var(--ard-cmpcl--border);
188
233
  pointer-events: all;
189
234
  }
190
235
  .ard-file-drop-area .ard-file-drop-area-dragover-text {
191
- font-weight: 500;
192
- font-size: 105%;
236
+ font-weight: var(--ard-file-drop-area-dragover-text-font-weight, 500);
237
+ font-size: var(--ard-file-drop-area-dragover-text-font-size, 105%);
193
238
  }
194
239
  .ard-file-drop-area .ard-file-drop-area-dragover-amount {
195
- font-weight: 600;
196
- font-size: 120%;
240
+ font-weight: var(--ard-file-drop-area-dragover-amount-font-weight, 600);
241
+ font-size: var(--ard-file-drop-area-dragover-amount-font-size, 120%);
197
242
  }
198
243
  .ard-file-drop-area .ard-file-drop-area-uploaded-container {
199
244
  max-height: 100%;
@@ -202,15 +247,16 @@ ard-file-drop-area {
202
247
  display: grid;
203
248
  grid-template-columns: 1fr;
204
249
  grid-template-rows: max-content 1fr;
205
- gap: 0.75rem;
250
+ gap: var(--ard-file-drop-area-uploaded-container-gap, 0.75rem);
206
251
  justify-items: center;
207
252
  }
208
253
  .ard-file-drop-area .ard-file-drop-area-uploaded-message {
209
- font-weight: 500;
210
- font-size: 105%;
254
+ font-weight: var(--ard-file-drop-area-uploaded-message-font-weight, 500);
255
+ font-size: var(--ard-file-drop-area-uploaded-message-font-size, 105%);
211
256
  }
212
257
  .ard-file-drop-area .ard-file-drop-area-uploaded-amount {
213
- font-weight: 600;
258
+ font-weight: var(--ard-file-drop-area-uploaded-amount-font-weight, 600);
259
+ font-size: var(--ard-file-drop-area-uploaded-amount-font-size, 100%);
214
260
  }
215
261
  .ard-file-drop-area .ard-file-drop-area-uploaded-files {
216
262
  max-width: 100%;
@@ -218,7 +264,7 @@ ard-file-drop-area {
218
264
  display: flex;
219
265
  flex-direction: column;
220
266
  align-items: flex-start;
221
- gap: 0.45rem;
267
+ gap: var(--ard-file-drop-area-uploaded-files-gap, 0.45rem);
222
268
  overflow: hidden auto;
223
269
  box-sizing: border-box;
224
270
  }
@@ -227,53 +273,53 @@ ard-file-drop-area {
227
273
  display: grid;
228
274
  align-items: center;
229
275
  grid-template-columns: max-content 1fr;
230
- gap: 0.75rem;
276
+ gap: var(--ard-file-drop-area-file-gap, 0.75rem);
231
277
  max-height: min-content;
232
278
  }
233
279
  .ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file ard-icon {
234
- font-size: 220%;
280
+ font-size: var(--ard-file-drop-area-file-icon-font-size, 220%);
235
281
  }
236
282
  .ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-file-info {
237
283
  display: flex;
238
284
  flex-direction: column;
239
285
  line-height: 1;
240
- gap: 0.5ch;
286
+ gap: var(--ard-file-drop-area-file-info-gap, 0.5ch);
241
287
  }
242
288
  .ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-filename {
243
289
  max-width: 100%;
244
290
  display: grid;
245
291
  grid-template-columns: 1fr max-content;
246
- gap: 0;
292
+ gap: var(--ard-file-drop-area-filename-gap, 0);
247
293
  }
248
294
  .ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-filename-name {
249
295
  max-width: 100%;
250
- line-height: 1;
296
+ line-height: var(--ard-file-drop-area-filename-name-line-height, 1);
251
297
  text-overflow: ellipsis;
252
298
  overflow: hidden;
253
299
  white-space: nowrap;
254
- height: 1em;
300
+ height: var(--ard-file-drop-area-filename-name-height, 1em);
255
301
  }
256
302
  .ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-filesize {
257
- font-weight: 500;
258
- font-size: 83%;
259
- opacity: 60%;
303
+ font-weight: var(--ard-file-drop-area-filesize-font-weight, 500);
304
+ font-size: var(--ard-file-drop-area-filesize-font-size, 83%);
305
+ opacity: var(--ard-file-drop-area-filesize-opacity, 60%);
260
306
  }
261
307
  .ard-file-drop-area.ard-variant-rounded, .ard-file-drop-area.ard-variant-pill {
262
- border-radius: 0.875rem;
308
+ border-radius: var(--ard-file-drop-area-variant-rounded-corner-radius, 0.875rem);
263
309
  }
264
310
  .ard-file-drop-area.ard-variant-rounded .ard-file-drop-area-outline, .ard-file-drop-area.ard-variant-pill .ard-file-drop-area-outline {
265
- border-radius: 0.25rem;
311
+ border-radius: var(--ard-file-drop-area-outline-corner-radius, 0.25rem);
266
312
  }
267
313
  .ard-file-drop-area.ard-variant-sharp {
268
314
  border-radius: 0;
269
315
  }
270
316
  .ard-file-drop-area.ard-compact {
271
- font-size: 85%;
272
- min-width: 12rem;
273
- min-height: 8rem;
317
+ font-size: var(--ard-file-drop-area-font-size-compact, 85%);
318
+ min-width: var(--ard-file-drop-area-min-width-compact, 12rem);
319
+ min-height: var(--ard-file-drop-area-min-height-compact, 8rem);
274
320
  }
275
321
  .ard-file-drop-area.ard-compact .ard-file-drop-area-content {
276
- gap: clamp(0.1667rem, 10%, 0.75rem);
322
+ gap: clamp(var(--ard-file-drop-area-content-gap-min-compact, 0.1667rem), var(--ard-file-drop-area-content-gap-preferred-compact, 10%), var(--ard-file-drop-area-content-gap-max-compact, 0.75rem));
277
323
  }
278
324
 
279
325
  /*# sourceMappingURL=file-drop-area.css.map */
package/prebuilt-themes/default/file-drop-area.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/file-drop-area.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD/GF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAMN;EAEE;;AAEA;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE","file":"file-drop-area.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/file-drop-area.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AChEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADjEF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;;AAKF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAMN;EAEE;;AAEA;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE","file":"file-drop-area.css"}
package/prebuilt-themes/default/form-field-frame.css CHANGED
@@ -7,13 +7,10 @@
7
7
  align-items: center;
8
8
  justify-content: stretch;
9
9
  position: relative;
10
- font-size: 1rem;
11
- line-height: 1.25em;
12
- font-family: "Roboto", sans-serif;
10
+ font-family: var(--ard-font-family);
13
11
  border-radius: var(--ard-variant-border-radius);
14
12
  background: var(--ard-appearance-background);
15
13
  border: var(--ard-appearance-border);
16
- transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
17
14
  }
18
15
  .ard-form-field-frame .ard-form-field-content-container {
19
16
  flex-grow: 1;
@@ -30,15 +27,13 @@
30
27
  align-items: center;
31
28
  }
32
29
  .ard-form-field-frame .ard-form-field-prefix-container {
33
- padding-left: 0.375em;
30
+ padding-left: var(--ard-form-field-padding-left, 0.375rem);
34
31
  }
35
32
  .ard-form-field-frame .ard-form-field-suffix-container {
36
- padding-right: 0.375em;
33
+ padding-right: var(--ard-form-field-padding-right, 0.375rem);
37
34
  }
38
35
  .ard-form-field-frame.ard-compact {
39
- min-height: var(--ard-form-field-compact-height);
40
- font-size: 0.85rem;
41
- line-height: 1;
36
+ min-height: var(--ard-form-field-height-compact);
42
37
  }
43
38
  .ard-form-field-frame.ard-appearance-outlined {
44
39
  --ard-appearance-background: var(--ard-bg);
@@ -81,21 +76,30 @@
81
76
  .ard-form-field-frame .ard-form-field-overlay {
82
77
  background: var(--ard-overlay);
83
78
  opacity: 0;
84
- transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
85
79
  }
86
80
  .ard-form-field-frame:hover .ard-form-field-overlay {
87
- opacity: 3%;
81
+ opacity: var(--ard-form-field-hover-overlay-opacity, 3%);
88
82
  }
89
83
  .ard-form-field-frame.ard-focused .ard-form-field-overlay {
90
- opacity: 6%;
84
+ opacity: var(--ard-form-field-focus-overlay-opacity, 6%);
85
+ }
86
+ .ard-form-field-frame.ard-enable-transitions {
87
+ transition: border-color var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
88
+ }
89
+ .ard-form-field-frame.ard-enable-transitions .ard-form-field-overlay {
90
+ transition: opacity var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1), background-color var(--ard-form-field-transitions-duration, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
91
91
  }
92
92
 
93
93
  .ard-disabled .ard-form-field-frame {
94
94
  pointer-events: none;
95
- opacity: 50%;
95
+ opacity: var(--ard-form-field-disabled-opacity, 50%);
96
96
  }
97
97
  .ard-disabled .ard-form-field-frame.ard-appearance-transparent .ard-form-field-overlay {
98
- opacity: 4.5%;
98
+ opacity: var(--ard-form-field-disabled-transparent-overlay-opacity, 4.5%);
99
+ }
100
+
101
+ .ard-readonly .ard-form-field-frame:hover .ard-form-field-overlay {
102
+ opacity: 0;
99
103
  }
100
104
 
101
105
  /*# sourceMappingURL=form-field-frame.css.map */
package/prebuilt-themes/default/form-field-frame.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA,YCoCkB;EDnClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE8DA;EF5BA;EACA;EACA;;AAlCA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE,YCEwB;EDDxB;EACA;;AEAF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AFlCF;EACE,YCnDM;EDoDN;EACA,YACE;;AAKF;EACE;;AAIF;EACE;;;AAIN;EACE;EACA;;AAGE;EACE","file":"form-field-frame.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA,YCqCkB;EDpClB;EACA;EACA;EACA;EACA;EACA;EACA;EEgEA;EFhCA;EACA;;AA/BA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE,YCKwB;;ACD1B;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AFvCF;EACE,YC9CM;ED+CN;;AAIA;EACE;;AAIF;EACE;;AAGJ;EACE;;AAEA;EACE,YACE;;;AAKR;EACE;EACA;;AAGE;EACE;;;AAMF;EACE","file":"form-field-frame.css"}
package/prebuilt-themes/default/form-field.css CHANGED
@@ -1,3 +1,25 @@
1
+ :root {
2
+ --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
3
+ --ard-form-field-label-font-size: 0.9375rem;
4
+ --ard-form-field-label-font-weight: 500;
5
+ --ard-form-field-label-required-font-weight: 500;
6
+ --ard-form-field-label-required-font-size: 112.5%;
7
+ --ard-form-field-label-required-color: orangered;
8
+ --ard-form-field-label-optional-font-weight: 400;
9
+ --ard-form-field-label-optional-font-size: 0.8125rem;
10
+ --ard-form-field-label-optional-font-style: italic;
11
+ --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
12
+ --ard-form-field-hint-font-size: 0.8125rem;
13
+ --ard-form-field-hint-line-height: 1.2;
14
+ --ard-form-field-hint-right-padding-left: 0.5rem;
15
+ --ard-form-field-hint-error-line-height: 1.2;
16
+ --ard-form-field-hint-error-gap: 0.375em;
17
+ --ard-form-field-label-disabled-opacity: 40%;
18
+ --ard-form-field-hint-disabled-opacity: 50%;
19
+ --ard-form-field-error-animation-duration: 0.25s;
20
+ --ard-horizontal-form-field-gap: 0.5rem;
21
+ }
22
+
1
23
  ard-form-field,
2
24
  ard-horizontal-form-field {
3
25
  display: block;
@@ -11,94 +33,101 @@ ard-horizontal-form-field {
11
33
  }
12
34
  .ard-form-field .ard-label,
13
35
  .ard-horizontal-form-field .ard-label {
14
- padding: 0.25rem 0 0.125rem 0.125rem;
15
- font-size: 0.9375rem;
16
- font-weight: 500;
36
+ padding: var(--ard-form-field-label-padding, 0.25rem 0 0.125rem 0.125rem);
37
+ font-size: var(--ard-form-field-label-font-size, 0.9375rem);
38
+ font-weight: var(--ard-form-field-label-font-weight, 500);
17
39
  }
18
40
  .ard-form-field .ard-label .ard-label__required .ard-label__required-optional-text,
19
41
  .ard-horizontal-form-field .ard-label .ard-label__required .ard-label__required-optional-text {
20
- font-weight: 500;
21
- color: orangered;
22
- font-size: 112.5%;
42
+ font-weight: var(--ard-form-field-label-required-font-weight, 500);
43
+ font-size: var(--ard-form-field-label-required-font-size, 112.5%);
44
+ color: var(--ard-form-field-label-required-color, orangered);
23
45
  line-height: 1;
24
46
  }
25
47
  .ard-form-field .ard-label .ard-label__optional .ard-label__required-optional-text,
26
48
  .ard-horizontal-form-field .ard-label .ard-label__optional .ard-label__required-optional-text {
27
- font-weight: 400;
28
- font-size: 0.8125rem;
29
- font-style: italic;
49
+ font-weight: var(--ard-form-field-label-optional-font-weight, 400);
50
+ font-size: var(--ard-form-field-label-optional-font-size, 0.8125rem);
51
+ color: var(--ard-form-field-label-optional-color, var(--ard-text2));
52
+ font-style: var(--ard-form-field-label-optional-font-style, italic);
30
53
  }
31
54
  .ard-form-field .ard-form-field__hints,
32
55
  .ard-horizontal-form-field .ard-form-field__hints {
33
- padding: 0.125rem 0 0.25rem 0.125rem;
34
- font-size: 0.8125rem;
35
- line-height: 1.1;
56
+ padding: var(--ard-form-field-hint-padding, 0.125rem 0 0.25rem 0.125rem);
57
+ font-size: var(--ard-form-field-hint-font-size, 0.8125rem);
58
+ line-height: var(--ard-form-field-hint-line-height, 1.1);
36
59
  }
37
60
  .ard-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line,
38
61
  .ard-horizontal-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line {
39
62
  box-sizing: content-box;
40
- min-height: 1.1em;
63
+ min-height: calc(var(--ard-form-field-hint-line-height, 1.1) * 1em);
41
64
  }
42
65
  .ard-form-field .ard-form-field__hints-right > *,
43
66
  .ard-form-field .ard-form-field__errors-right > *,
44
67
  .ard-horizontal-form-field .ard-form-field__hints-right > *,
45
68
  .ard-horizontal-form-field .ard-form-field__errors-right > * {
46
- padding-left: 0.5rem;
69
+ padding-left: var(--ard-form-field-hint-right-padding-left, 0.5rem);
47
70
  }
48
71
  .ard-form-field .ard-hint,
49
72
  .ard-form-field .ard-error,
50
73
  .ard-horizontal-form-field .ard-hint,
51
74
  .ard-horizontal-form-field .ard-error {
52
75
  font-size: 1em;
53
- line-height: 1.1;
76
+ line-height: var(--ard-form-field-hint-error-line-height, 1.2);
54
77
  display: inline-grid;
55
- min-height: 1.1em;
78
+ min-height: calc(var(--ard-form-field-hint-error-line-height, 1.2) * 1em);
56
79
  }
57
80
  .ard-form-field .ard-hint,
58
81
  .ard-horizontal-form-field .ard-hint {
59
- color: var(--ard-text2);
82
+ color: var(--ard-form-field-hint-color, var(--ard-text2));
60
83
  }
61
84
  .ard-form-field .ard-error:not(.ard-hint-error),
62
85
  .ard-form-field .ard-form-field__errors .ard-hint-error,
63
86
  .ard-horizontal-form-field .ard-error:not(.ard-hint-error),
64
87
  .ard-horizontal-form-field .ard-form-field__errors .ard-hint-error {
65
- color: rgb(var(--ard-danger-700));
88
+ color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
66
89
  overflow: hidden;
67
90
  }
68
91
  .ard-form-field .ard-error:not(.ard-hint-error),
69
92
  .ard-horizontal-form-field .ard-error:not(.ard-hint-error) {
70
- animation: errorAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
93
+ animation: errorAppear var(--ard-form-field-error-animation-duration, 0.25s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
71
94
  }
72
- .ard-form-field .ard-form-field__default-hint, .ard-form-field .ard-form-field__default-error,
95
+ .ard-form-field .ard-form-field__default-hint,
96
+ .ard-form-field .ard-form-field__default-error,
73
97
  .ard-horizontal-form-field .ard-form-field__default-hint,
74
98
  .ard-horizontal-form-field .ard-form-field__default-error {
75
- gap: 0.375em;
99
+ gap: var(--ard-form-field-hint-error-gap, 0.375em);
76
100
  }
77
101
  .ard-form-field.ard-form-field__with-error .ard-label,
78
- .ard-horizontal-form-field.ard-form-field__with-error .ard-label {
79
- color: rgb(var(--ard-danger-700));
102
+ .ard-form-field.ard-form-field__with-error ard-label,
103
+ .ard-horizontal-form-field.ard-form-field__with-error .ard-label,
104
+ .ard-horizontal-form-field.ard-form-field__with-error ard-label {
105
+ color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
80
106
  }
81
107
  .ard-form-field.ard-form-field__is-success .ard-label,
82
- .ard-horizontal-form-field.ard-form-field__is-success .ard-label {
83
- color: rgb(var(--ard-success-700));
108
+ .ard-form-field.ard-form-field__is-success ard-label,
109
+ .ard-horizontal-form-field.ard-form-field__is-success .ard-label,
110
+ .ard-horizontal-form-field.ard-form-field__is-success ard-label {
111
+ color: var(--ard-form-field-success-color, rgb(var(--ard-success-700)));
84
112
  }
85
113
  .ard-form-field.ard-form-field__control-disabled .ard-label,
86
114
  .ard-horizontal-form-field.ard-form-field__control-disabled .ard-label {
87
- opacity: 40%;
115
+ opacity: var(--ard-form-field-label-disabled-opacity, 40%);
88
116
  }
89
117
  .ard-form-field.ard-form-field__control-disabled .ard-form-field__hints,
90
118
  .ard-horizontal-form-field.ard-form-field__control-disabled .ard-form-field__hints {
91
- opacity: 50%;
119
+ opacity: var(--ard-form-field-hint-disabled-opacity, 50%);
92
120
  }
93
121
 
94
122
  .ard-horizontal-form-field {
95
123
  align-items: flex-start;
96
124
  justify-content: stretch;
97
125
  flex-direction: row;
98
- gap: 0.5rem;
126
+ gap: var(--ard-horizontal-form-field-gap, 0.5rem);
99
127
  }
100
128
  .ard-horizontal-form-field .ard-form-field__label-container {
101
129
  width: var(--ard-horizontal-form-field-label-width, 12rem);
130
+ min-width: var(--ard-horizontal-form-field-label-width, 12rem);
102
131
  height: var(--ard-form-field-height);
103
132
  display: flex;
104
133
  align-items: center;
@@ -108,7 +137,11 @@ ard-horizontal-form-field {
108
137
  flex-grow: 1;
109
138
  }
110
139
  .ard-horizontal-form-field:has(.ard-form-field__input .ard-compact) .ard-form-field__label-container {
111
- height: var(--ard-form-field-compact-height);
140
+ height: var(--ard-form-field-height-compact);
141
+ }
142
+
143
+ ard-label {
144
+ display: flex;
112
145
  }
113
146
 
114
147
  @keyframes errorAppear {
package/prebuilt-themes/default/form-field.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;EACE;EACA;EACA;;AAIN;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE,OClDI;;ADoDN;AAAA;AAAA;AAAA;EAEE,OCkBQ;EDjBR;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;EACE;;AAIA;AAAA;EACE,OCMM;;ADFR;AAAA;EACE,OC2BO;;ADvBT;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,QC1DgB;ED2DhB;EACA;EACA;;AAEF;EACE;;AAIA;EACE,QCpEsB;;;ADyE5B;EACE;IACE;;EAEF;IACE","file":"form-field.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;EACE;EACA;EACA;EACA;;AAIN;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAIF;AAAA;AAAA;AAAA;EAEE;;AAIF;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,QCzFgB;ED0FhB;EACA;EACA;;AAEF;EACE;;AAIA;EACE,QCnGsB;;;ADwG5B;EACE;;;AAGF;EACE;IACE;;EAEF;IACE","file":"form-field.css"}
package/prebuilt-themes/default/inputs/autocomplete-input.css CHANGED
@@ -1,49 +1,89 @@
1
1
  /**
2
2
  * Should be applied to the first element in the component's template.
3
3
  */
4
+ :root {
5
+ --ard-autocomplete-input-gap: 0.625rem;
6
+ --ard-autocomplete-input-line-height: 1.25;
7
+ --ard-autocomplete-input-line-height-compact: 1;
8
+ --ard-autocomplete-input-font-weight: 400;
9
+ --ard-autocomplete-input-placeholder-opacity: 60%;
10
+ --ard-autocomplete-input-min-width: 10rem;
11
+ --ard-autocomplete-input-max-width: 100%;
12
+ --ard-autocomplete-input-autocomplete-opacity: 37.5%;
13
+ --ard-autocomplete-input-dropdown-padding: 0;
14
+ --ard-autocomplete-input-dropdown-max-height: 15rem;
15
+ --ard-autocomplete-input-dropdown-gap: 0;
16
+ --ard-autocomplete-input-option-padding: 0.375rem 0.625rem;
17
+ --ard-autocomplete-input-option-padding-compact: 0.25rem 0.5rem;
18
+ --ard-autocomplete-input-font-size: 1rem;
19
+ --ard-autocomplete-input-font-size-compact: 0.875rem;
20
+ --ard-autocomplete-input-highlighted-font-weight: 400;
21
+ --ard-autocomplete-input-selected-font-weight: 500;
22
+ --ard-autocomplete-input-disabled-opacity: 50%;
23
+ }
24
+
4
25
  .ard-autocomplete-input {
26
+ height: var(--ard-autocomplete-input-height, var(--ard-form-field-height, 2.3125rem));
5
27
  position: relative;
6
- font-family: "Roboto", sans-serif;
28
+ font-family: var(--ard-font-family);
7
29
  display: flex;
8
30
  align-items: center;
9
31
  justify-content: stretch;
10
- gap: 0.625em;
32
+ gap: var(--ard-autocomplete-input-gap, 0.625rem);
11
33
  cursor: text;
12
34
  box-sizing: border-box;
13
- font-size: 1rem;
14
- line-height: 1.25em;
15
- padding: 0 0.375rem;
16
- min-width: 10rem;
17
- max-width: 100%;
35
+ font-size: var(--ard-autocomplete-input-font-size, var(--ard-form-field-font-size, 1rem));
36
+ line-height: var(--ard-autocomplete-input-line-height, 1.25);
37
+ font-weight: var(--ard-autocomplete-input-font-weight, 400);
38
+ padding-left: var(--ard-autocomplete-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
39
+ padding-right: var(--ard-autocomplete-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
40
+ padding-top: var(--ard-autocomplete-input-padding-top, var(--ard-form-field-padding-top, 0));
41
+ padding-bottom: var(--ard-autocomplete-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
42
+ color: var(--ard-autocomplete-input-color, var(--ard-text));
43
+ min-width: var(--ard-autocomplete-input-min-width, 10rem);
44
+ max-width: var(--ard-autocomplete-input-max-width, 100%);
18
45
  }
19
46
  .ard-autocomplete-input .ard-input-container {
20
47
  flex-grow: 1;
21
48
  text-size-adjust: 100%;
22
49
  display: flex;
23
50
  align-items: center;
51
+ height: 100%;
52
+ position: relative;
53
+ }
54
+ .ard-autocomplete-input .ard-input-container > * {
55
+ position: absolute;
56
+ inset: 0;
57
+ max-width: 100%;
58
+ padding: 0;
24
59
  }
25
60
  .ard-autocomplete-input .ard-input-container .ard-placeholder {
26
61
  font: inherit;
27
- opacity: 60%;
62
+ opacity: var(--ard-autocomplete-input-placeholder-opacity, 60%);
63
+ color: var(--ard-autocomplete-input-placeholder-color, var(--ard-text));
28
64
  white-space: nowrap;
29
65
  overflow: hidden;
30
66
  text-overflow: ellipsis;
31
- max-width: 100%;
32
67
  pointer-events: none;
68
+ display: flex;
69
+ align-items: center;
33
70
  }
34
71
  .ard-autocomplete-input .ard-input-container input {
35
72
  border: none;
36
73
  background: transparent;
37
74
  outline: none;
38
75
  font: inherit;
39
- padding: 0;
76
+ color: inherit;
40
77
  display: block;
41
- width: 100%;
42
78
  }
43
79
  .ard-autocomplete-input.ard-compact {
44
- height: 1.5625em;
45
- font-size: 0.85em;
46
- line-height: 1;
80
+ height: var(--ard-autocomplete-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
81
+ font-size: var(--ard-autocomplete-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
82
+ line-height: var(--ard-autocomplete-input-line-height-compact, 1);
83
+ padding-left: var(--ard-autocomplete-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
84
+ padding-right: var(--ard-autocomplete-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
85
+ padding-top: var(--ard-autocomplete-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
86
+ padding-bottom: var(--ard-autocomplete-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
47
87
  }
48
88
  .ard-autocomplete-input ard-clear-button {
49
89
  height: var(--ard-clear-button-size);
@@ -77,10 +117,10 @@
77
117
  }
78
118
  .ard-autocomplete-input .ard-clear-btn-wrapper .ard-focus-overlay {
79
119
  position: absolute;
80
- top: -1px;
81
- bottom: -1px;
82
- left: -1px;
83
- right: -1px;
120
+ top: calc(-1 * 1px);
121
+ bottom: calc(-1 * 1px);
122
+ left: calc(-1 * 1px);
123
+ right: calc(-1 * 1px);
84
124
  opacity: 0;
85
125
  border-radius: inherit;
86
126
  pointer-events: none;
@@ -110,29 +150,40 @@
110
150
  opacity: 15%;
111
151
  }
112
152
  .ard-autocomplete-input .ard-autocomplete {
113
- opacity: 37.5%;
153
+ display: flex;
154
+ align-items: center;
155
+ opacity: var(--ard-autocomplete-input-autocomplete-opacity, 37.5%);
114
156
  }
115
157
 
158
+ .ard-input-suggestions-panel {
159
+ padding: var(--ard-autocomplete-input-dropdown-padding, 0);
160
+ display: flex;
161
+ flex-direction: column;
162
+ gap: var(--ard-autocomplete-input-dropdown-gap, 0);
163
+ max-height: var(--ard-autocomplete-input-dropdown-max-height, 15rem);
164
+ overflow-y: auto;
165
+ }
116
166
  .ard-input-suggestions-panel .ard-option {
117
- padding: 0.375rem 0.625rem;
118
- font-size: 1rem;
119
- color: var(--ard-text2);
167
+ padding: var(--ard-autocomplete-input-option-padding, 0.375rem 0.625rem);
168
+ font-size: var(--ard-autocomplete-input-font-size, 1rem);
169
+ color: var(--ard-autocomplete-input-color, var(--ard-text2));
120
170
  cursor: pointer;
121
171
  }
122
172
  .ard-input-suggestions-panel .ard-option.ard-option-highlighted {
123
- background: var(--ard-darken-overlay-light);
173
+ background: var(--ard-autocomplete-input-highlighted-background, var(--ard-darken-overlay-light));
174
+ font-weight: var(--ard-autocomplete-input-highlighted-font-weight, 400);
124
175
  }
125
176
  .ard-input-suggestions-panel .ard-option.ard-option-selected {
126
- font-weight: 500;
127
- background: var(--ard-darken-overlay-medium);
177
+ background: var(--ard-autocomplete-input-selected-background, var(--ard-darken-overlay-medium));
178
+ font-weight: var(--ard-autocomplete-input-selected-font-weight, 500);
128
179
  }
129
180
  .ard-input-suggestions-panel .ard-option.ard-option-disabled {
130
181
  pointer-events: none;
131
- opacity: 50%;
182
+ opacity: var(--ard-autocomplete-input-disabled-opacity, 50%);
132
183
  }
133
184
  .ard-input-suggestions-panel .ard-compact .ard-option {
134
- padding: 0.25rem 0.5rem;
135
- font-size: 0.9rem;
185
+ padding: var(--ard-autocomplete-input-option-padding-compact, 0.25rem 0.5rem);
186
+ font-size: var(--ard-autocomplete-input-font-size-compact, 0.875rem);
136
187
  }
137
188
 
138
189
  /*# sourceMappingURL=autocomplete-input.css.map */
package/prebuilt-themes/default/inputs/autocomplete-input.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/autocomplete-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECRA;EACA;EACA;;ADQA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADvDN;EACE;;;AAKF;EACE;EACA;EACA,OEdI;EFeJ;;AAEA;EACE,YEEiB;;AFCnB;EACE;EACA,YEJkB;;AFOpB;EACE;EACA;;AAIF;EACE;EACA","file":"autocomplete-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/autocomplete-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAWA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;;;AAGF;EDnBE,QCqBE;EDpBF;EACA;EACA;EACA;EACA;EACA,KCiBE;EDhBF;EACA;EACA,WCeE;EDdF,aCgBE;EDfF,aCiBE;EDhBF,cCoBE;EDnBF,eCiBE;EDhBF,aCeE;EDdF,gBCgBE;EDfF,OCqBE;EAIF;EACA;;ADxBA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA,SCKF;EDJE,OCGF;EDFE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCjCA;EDkCA,WC/BA;EDgCA,aC9BA;ED+BA,cCtBA;EDuBA,eCzBA;ED0BA,aC3BA;ED4BA,gBC1BA;;ACzDF;EACE,QCmCgB;EDlChB,OCkCgB;EDjChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OC0BgB;EDzBhB,QCyBgB;EDxBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADIN;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA","file":"autocomplete-input.css"}