kelt-ui-kit-react 2.0.8 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (319) hide show
  1. package/.github/workflows/publish.yml +40 -31
  2. package/README.md +124 -72
  3. package/dist/App.d.ts +2 -3
  4. package/dist/App.menu.d.ts +10 -10
  5. package/dist/App.routes.d.ts +1 -1
  6. package/dist/_core/hooks/HistoryProvider.d.ts +5 -5
  7. package/dist/_core/hooks/ImageChecker.d.ts +5 -6
  8. package/dist/_core/hooks/imageExist.d.ts +5 -6
  9. package/dist/_core/hooks/isEAN13.d.ts +1 -1
  10. package/dist/_core/hooks/objectToQueryParams.d.ts +1 -1
  11. package/dist/_core/hooks/useCurrency.d.ts +3 -3
  12. package/dist/_core/hooks/useDateutils.d.ts +4 -4
  13. package/dist/_core/hooks/useIsMobile.d.ts +1 -1
  14. package/dist/_core/hooks/useToken.d.ts +3 -3
  15. package/dist/_core/hooks/useValidate.d.ts +5 -5
  16. package/dist/_core/hooks/widgetSupport.d.ts +1 -1
  17. package/dist/_core/type/generiqueType.d.ts +4 -0
  18. package/dist/action/Action.view.d.ts +1 -1
  19. package/dist/action/ButtonAction.d.ts +8 -9
  20. package/dist/addressSearch/AddressSearch.d.ts +18 -19
  21. package/dist/addressSearch/AddressSearch.view.d.ts +1 -1
  22. package/dist/badge/Badge.d.ts +10 -9
  23. package/dist/badge/Badge.view.d.ts +1 -1
  24. package/dist/button/Button.d.ts +1 -2
  25. package/dist/button/Button.view.d.ts +1 -1
  26. package/dist/button/button.interface.d.ts +19 -20
  27. package/dist/button/buttonActions/ButtonActions.d.ts +11 -12
  28. package/dist/button/buttonFile/ButtonFile.d.ts +9 -9
  29. package/dist/button/buttonFile/ButtonFile.view.d.ts +1 -1
  30. package/dist/button/buttonFilters/ButtonFilters.d.ts +16 -17
  31. package/dist/card/Card.d.ts +14 -15
  32. package/dist/card/Card.view.d.ts +1 -1
  33. package/dist/card/card.interface.d.ts +10 -10
  34. package/dist/card/cardAction/CardAction.d.ts +13 -14
  35. package/dist/card/cardAction.interface.d.ts +8 -9
  36. package/dist/card/hook/useCardInteractions.d.ts +8 -8
  37. package/dist/carousel/Carousel.d.ts +14 -15
  38. package/dist/carousel/Carousel.view.d.ts +1 -1
  39. package/dist/damier/Damier.d.ts +9 -10
  40. package/dist/damier/Damier.view.d.ts +1 -1
  41. package/dist/damier/damierCell/DamierCell.d.ts +6 -7
  42. package/dist/damier/damierCell/damierCell.interface.d.ts +6 -6
  43. package/dist/dataTable/DataTable.d.ts +37 -33
  44. package/dist/dataTable/DataTable.view.d.ts +1 -1
  45. package/dist/dataTable/dataTable.interface.d.ts +70 -47
  46. package/dist/dataTable/dataTable.utils.d.ts +17 -0
  47. package/dist/dataTable/dataTableActions/DataTableAction.d.ts +9 -10
  48. package/dist/dataTable/dataTableColumn/DataTableColumn.d.ts +14 -8
  49. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.d.ts +9 -0
  50. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.d.ts +9 -0
  51. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.d.ts +9 -0
  52. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.d.ts +12 -0
  53. package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.d.ts +9 -0
  54. package/dist/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.d.ts +10 -0
  55. package/dist/dataTable/dataTableFilters/DataTableFilters.d.ts +6 -0
  56. package/dist/dataTable/dataTableLoading/DataTableLoading.d.ts +8 -7
  57. package/dist/dataTable/dataTableRow/DataTableRow.d.ts +12 -11
  58. package/dist/dataTable/useDataTableState.d.ts +13 -0
  59. package/dist/datePicker/DatePicker.d.ts +7 -8
  60. package/dist/datePicker/DatePicker.view.d.ts +1 -1
  61. package/dist/docs/ComponentDocs.d.ts +6 -0
  62. package/dist/docs/catalog.d.ts +8 -0
  63. package/dist/docs/documentation.types.d.ts +21 -0
  64. package/dist/expands/Expands.d.ts +11 -12
  65. package/dist/expands/Expands.view.d.ts +1 -1
  66. package/dist/expands/expand/expand.d.ts +10 -11
  67. package/dist/expands/expand/expand.interface.d.ts +9 -9
  68. package/dist/filAriane/FilAriane.d.ts +8 -9
  69. package/dist/filAriane/FilAriane.view.d.ts +1 -1
  70. package/dist/filAriane/filAriane.interface.d.ts +6 -6
  71. package/dist/form/Form.d.ts +35 -36
  72. package/dist/form/Form.view.d.ts +1 -1
  73. package/dist/form/form.enum.d.ts +16 -15
  74. package/dist/form/form.interface.d.ts +53 -54
  75. package/dist/form/input/Input.d.ts +27 -25
  76. package/dist/form/inputNumber/InputNumber.d.ts +21 -22
  77. package/dist/form/inputNumber/InputNumber.view.d.ts +1 -1
  78. package/dist/form/inputPrice/InputPrice.d.ts +14 -15
  79. package/dist/form/inputPrice/InputPrice.view.d.ts +1 -1
  80. package/dist/form/textArea/TextArea.d.ts +14 -15
  81. package/dist/form/textArea/TextArea.view.d.ts +1 -1
  82. package/dist/geocoding/GeocodingService.d.ts +11 -12
  83. package/dist/geocoding/geocoding.interface.d.ts +20 -20
  84. package/dist/grid/Grid.d.ts +9 -10
  85. package/dist/grid/Grid.view.d.ts +1 -1
  86. package/dist/grid/col/Col.d.ts +5 -6
  87. package/dist/grid/col/colStyled/ColStyled.d.ts +10 -11
  88. package/dist/grid/container/Container.d.ts +5 -6
  89. package/dist/grid/grid.interface.d.ts +23 -23
  90. package/dist/grid/row/Row.d.ts +13 -14
  91. package/dist/header/Header.d.ts +1 -2
  92. package/dist/header/Header.view.d.ts +1 -1
  93. package/dist/header/header.interface.d.ts +12 -12
  94. package/dist/home/Home.d.ts +1 -1
  95. package/dist/icon/Icon.d.ts +1 -2
  96. package/dist/icon/Icons.view.d.ts +1 -1
  97. package/dist/icon/icon.interface.d.ts +5 -5
  98. package/dist/icon/iconSize.enum.d.ts +7 -7
  99. package/dist/index.d.ts +56 -54
  100. package/dist/index.html +18 -18
  101. package/dist/index.js +4001 -3510
  102. package/dist/loader/Loader.d.ts +7 -8
  103. package/dist/loader/Loader.view.d.ts +1 -1
  104. package/dist/main.d.ts +0 -1
  105. package/dist/manifest.json +25 -25
  106. package/dist/menus/Menus.d.ts +5 -6
  107. package/dist/menus/Menus.view.d.ts +1 -1
  108. package/dist/menus/menu/Menu.d.ts +7 -8
  109. package/dist/menus/menu/menu.interface.d.ts +10 -10
  110. package/dist/message/Message.d.ts +6 -7
  111. package/dist/message/Message.view.d.ts +1 -1
  112. package/dist/modal/Modal.d.ts +13 -14
  113. package/dist/modal/Modal.view.d.ts +1 -1
  114. package/dist/notFound/NotFound.d.ts +1 -1
  115. package/dist/overlayPanel/OverlayPanel.d.ts +22 -23
  116. package/dist/overlayPanel/OverlayPanel.view.d.ts +1 -1
  117. package/dist/overlayPanel/overlay.context.d.ts +9 -10
  118. package/dist/overlayPanel/overlayPanelStyled/OverlayPanelStyled.d.ts +9 -9
  119. package/dist/pdfViewer/PdfViewer.d.ts +12 -12
  120. package/dist/pdfViewer/PdfViewer.view.d.ts +1 -1
  121. package/dist/quantity/Quantity.d.ts +10 -11
  122. package/dist/robots.txt +3 -3
  123. package/dist/search/Search.d.ts +21 -22
  124. package/dist/search/Search.view.d.ts +1 -1
  125. package/dist/select/Select.d.ts +23 -24
  126. package/dist/select/Select.view.d.ts +1 -1
  127. package/dist/select/selectOption.interface.d.ts +5 -5
  128. package/dist/sidebar/Sidebar.d.ts +12 -13
  129. package/dist/sidebar/Sidebar.view.d.ts +1 -1
  130. package/dist/sidebarData/SidebarData.d.ts +6 -7
  131. package/dist/sidebarData/SidebarData.view.d.ts +1 -1
  132. package/dist/style.css +1 -1
  133. package/dist/tabs/Tabs.d.ts +17 -17
  134. package/dist/tabs/Tabs.view.d.ts +1 -1
  135. package/dist/toaster/Toaster.d.ts +1 -2
  136. package/dist/toaster/Toaster.view.d.ts +1 -1
  137. package/dist/toaster/store/useToasterStore.d.ts +24 -24
  138. package/docs.plugin.ts +223 -0
  139. package/index.html +20 -18
  140. package/package.json +64 -56
  141. package/public/index.html +18 -18
  142. package/public/manifest.json +25 -25
  143. package/public/robots.txt +3 -3
  144. package/src/App.css +178 -11
  145. package/src/App.menu.tsx +277 -257
  146. package/src/App.routes.tsx +21 -16
  147. package/src/App.tsx +31 -30
  148. package/src/_core/hooks/HistoryProvider.tsx +25 -25
  149. package/src/_core/hooks/ImageChecker.tsx +26 -26
  150. package/src/_core/hooks/imageExist.tsx +9 -9
  151. package/src/_core/hooks/isEAN13.tsx +16 -16
  152. package/src/_core/hooks/objectToQueryParams.tsx +32 -32
  153. package/src/_core/hooks/useCurrency.tsx +18 -18
  154. package/src/_core/hooks/useDateutils.ts +64 -64
  155. package/src/_core/hooks/useIsMobile.ts +18 -18
  156. package/src/_core/hooks/useToken.tsx +19 -19
  157. package/src/_core/hooks/useValidate.tsx +18 -18
  158. package/src/_core/hooks/widgetSupport.tsx +39 -39
  159. package/src/_core/type/generiqueType.tsx +4 -0
  160. package/src/action/Action.view.tsx +21 -21
  161. package/src/action/ButtonAction.tsx +32 -32
  162. package/src/action/action.css +20 -20
  163. package/src/addressSearch/AddressSearch.tsx +246 -246
  164. package/src/addressSearch/AddressSearch.view.tsx +52 -52
  165. package/src/addressSearch/addressSearch.css +132 -132
  166. package/src/badge/Badge.tsx +41 -34
  167. package/src/badge/Badge.view.tsx +15 -15
  168. package/src/badge/badge.css +63 -55
  169. package/src/button/Button.tsx +48 -48
  170. package/src/button/Button.view.tsx +85 -85
  171. package/src/button/button.css +53 -53
  172. package/src/button/button.interface.tsx +22 -22
  173. package/src/button/buttonActions/ButtonActions.tsx +104 -104
  174. package/src/button/buttonFile/ButtonFile.tsx +59 -59
  175. package/src/button/buttonFile/ButtonFile.view.tsx +70 -70
  176. package/src/button/buttonFilters/ButtonFilters.tsx +102 -102
  177. package/src/button/buttonFilters/buttonFilters.css +22 -22
  178. package/src/card/Card.tsx +151 -151
  179. package/src/card/Card.view.tsx +73 -73
  180. package/src/card/card.css +144 -144
  181. package/src/card/card.interface.tsx +9 -9
  182. package/src/card/cardAction/CardAction.tsx +135 -135
  183. package/src/card/cardAction/cardAction.css +10 -10
  184. package/src/card/cardAction.interface.tsx +10 -10
  185. package/src/card/hook/useCardInteractions.tsx +30 -30
  186. package/src/carousel/Carousel.css +44 -44
  187. package/src/carousel/Carousel.tsx +115 -115
  188. package/src/carousel/Carousel.view.tsx +13 -13
  189. package/src/damier/Damier.tsx +64 -64
  190. package/src/damier/Damier.view.tsx +31 -31
  191. package/src/damier/damier.css +50 -50
  192. package/src/damier/damierCell/DamierCell.tsx +18 -18
  193. package/src/damier/damierCell/damierCell.interface.tsx +5 -5
  194. package/src/dataTable/DataTable.tsx +840 -746
  195. package/src/dataTable/DataTable.view.tsx +105 -71
  196. package/src/dataTable/dataTable.css +233 -208
  197. package/src/dataTable/dataTable.interface.ts +66 -45
  198. package/src/dataTable/dataTable.utils.ts +45 -0
  199. package/src/dataTable/dataTableActions/DataTableAction.tsx +82 -65
  200. package/src/dataTable/dataTableColumn/DataTableColumn.tsx +48 -27
  201. package/src/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.tsx +36 -0
  202. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilter.css +0 -0
  203. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.tsx +39 -0
  204. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.tsx +80 -0
  205. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.tsx +89 -0
  206. package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.tsx +37 -0
  207. package/src/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.tsx +42 -0
  208. package/src/dataTable/dataTableFilters/DataTableFilters.tsx +91 -0
  209. package/src/dataTable/dataTableFilters/dataTableFilters.css +16 -0
  210. package/src/dataTable/dataTableLoading/DataTableLoading.tsx +23 -21
  211. package/src/dataTable/dataTableRow/DataTableRow.tsx +155 -208
  212. package/src/dataTable/useDataTableState.tsx +89 -0
  213. package/src/datePicker/DatePicker.tsx +110 -110
  214. package/src/datePicker/DatePicker.view.tsx +9 -9
  215. package/src/datePicker/datePicker.css +77 -77
  216. package/src/docs/ComponentDocs.tsx +156 -0
  217. package/src/docs/catalog.ts +40 -0
  218. package/src/docs/documentation.types.ts +20 -0
  219. package/src/docs/virtual.d.ts +7 -0
  220. package/src/expands/Expands.tsx +46 -46
  221. package/src/expands/Expands.view.tsx +90 -90
  222. package/src/expands/expand/expand.interface.tsx +8 -8
  223. package/src/expands/expand/expand.tsx +191 -191
  224. package/src/expands/expands.css +101 -101
  225. package/src/filAriane/FilAriane.tsx +57 -57
  226. package/src/filAriane/FilAriane.view.tsx +28 -28
  227. package/src/filAriane/filAriane.css +23 -23
  228. package/src/filAriane/filAriane.interface.tsx +6 -6
  229. package/src/form/Form.tsx +477 -477
  230. package/src/form/Form.view.tsx +67 -67
  231. package/src/form/form.css +135 -135
  232. package/src/form/form.enum.ts +16 -15
  233. package/src/form/form.interface.tsx +67 -67
  234. package/src/form/input/Input.tsx +146 -106
  235. package/src/form/input/input.css +39 -29
  236. package/src/form/inputNumber/InputNumber.tsx +132 -132
  237. package/src/form/inputNumber/InputNumber.view.tsx +15 -15
  238. package/src/form/inputPrice/InputPrice.tsx +42 -42
  239. package/src/form/inputPrice/InputPrice.view.tsx +15 -15
  240. package/src/form/textArea/TextArea.tsx +59 -59
  241. package/src/form/textArea/TextArea.view.tsx +34 -34
  242. package/src/form/textArea/textArea.css +9 -9
  243. package/src/geocoding/GeocodingService.ts +89 -89
  244. package/src/geocoding/geocoding.interface.ts +25 -25
  245. package/src/grid/Grid.tsx +34 -34
  246. package/src/grid/Grid.view.tsx +24 -24
  247. package/src/grid/col/Col.tsx +24 -24
  248. package/src/grid/col/col.css +3 -3
  249. package/src/grid/col/colStyled/ColStyled.tsx +59 -59
  250. package/src/grid/container/Container.tsx +8 -8
  251. package/src/grid/container/container.css +4 -4
  252. package/src/grid/grid.interface.tsx +27 -27
  253. package/src/grid/row/Row.tsx +49 -49
  254. package/src/grid/row/row.css +25 -25
  255. package/src/header/Header.tsx +64 -64
  256. package/src/header/Header.view.tsx +5 -5
  257. package/src/header/header.css +43 -43
  258. package/src/header/header.interface.tsx +11 -11
  259. package/src/home/Home.tsx +40 -3
  260. package/src/icon/Icon.tsx +6 -6
  261. package/src/icon/Icons.view.tsx +29 -29
  262. package/src/icon/icon.css +20 -20
  263. package/src/icon/icon.interface.tsx +7 -6
  264. package/src/icon/iconSize.enum.ts +7 -7
  265. package/src/index.css +547 -547
  266. package/src/index.ts +76 -70
  267. package/src/loader/Loader.tsx +37 -37
  268. package/src/loader/Loader.view.tsx +20 -20
  269. package/src/loader/loader.css +30 -30
  270. package/src/main.tsx +10 -10
  271. package/src/menus/Menus.tsx +43 -43
  272. package/src/menus/Menus.view.tsx +39 -39
  273. package/src/menus/menu/Menu.tsx +18 -18
  274. package/src/menus/menu/menu.interface.tsx +9 -9
  275. package/src/menus/menus.css +47 -47
  276. package/src/message/Message.tsx +30 -30
  277. package/src/message/Message.view.tsx +22 -22
  278. package/src/message/message.css +29 -29
  279. package/src/modal/Modal.tsx +59 -59
  280. package/src/modal/Modal.view.tsx +26 -26
  281. package/src/modal/modal.css +71 -71
  282. package/src/notFound/NotFound.tsx +3 -3
  283. package/src/overlayPanel/OverlayPanel.tsx +260 -255
  284. package/src/overlayPanel/OverlayPanel.view.tsx +25 -25
  285. package/src/overlayPanel/overlay.context.tsx +30 -30
  286. package/src/overlayPanel/overlayPanel.css +43 -43
  287. package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx +23 -23
  288. package/src/pdfViewer/PdfViewer.tsx +73 -73
  289. package/src/pdfViewer/PdfViewer.view.tsx +5 -5
  290. package/src/quantity/Quantity.tsx +103 -103
  291. package/src/quantity/quantity.css +26 -26
  292. package/src/search/Search.tsx +161 -161
  293. package/src/search/Search.view.tsx +14 -14
  294. package/src/search/search.css +59 -59
  295. package/src/select/Select.tsx +245 -245
  296. package/src/select/Select.view.tsx +71 -71
  297. package/src/select/select.css +150 -150
  298. package/src/select/selectOption.interface.ts +5 -5
  299. package/src/sidebar/Sidebar.tsx +213 -213
  300. package/src/sidebar/Sidebar.view.tsx +17 -17
  301. package/src/sidebar/sidebar.css +103 -103
  302. package/src/sidebarData/SidebarData.tsx +19 -19
  303. package/src/sidebarData/SidebarData.view.tsx +19 -19
  304. package/src/sidebarData/sidebarData.css +27 -27
  305. package/src/tabs/Tabs.tsx +101 -90
  306. package/src/tabs/Tabs.view.tsx +20 -20
  307. package/src/tabs/tabs.css +29 -29
  308. package/src/toaster/Toaster.tsx +61 -61
  309. package/src/toaster/Toaster.view.tsx +25 -25
  310. package/src/toaster/store/useToasterStore.tsx +54 -54
  311. package/src/toaster/toaster.css +105 -105
  312. package/tests/dataTable.test.mjs +93 -0
  313. package/tests/documentation.test.mjs +75 -0
  314. package/tsconfig.docs.json +10 -0
  315. package/tsconfig.json +28 -28
  316. package/vite.config.ts +26 -20
  317. package/vite.config.ts.timestamp-1733262892554-a13dfef6e8a29.mjs +24 -24
  318. package/vite.config.ts.timestamp-1757847121745-e5a5bf54b81b.mjs +28 -28
  319. package/vite.config.ts.timestamp-1759742478362-4ac5c5a7db34b.mjs +28 -28
package/src/select/select.css CHANGED
@@ -1,150 +1,150 @@
1
- .select-container {
2
- position: relative;
3
-
4
- &::after,
5
- &::before {
6
- --size: 0.3rem;
7
- content: "";
8
- position: absolute;
9
- right: 1rem;
10
- pointer-events: none;
11
- }
12
-
13
- .clear-btn {
14
- position: absolute;
15
- top: 50%;
16
- transform: translateY(-50%);
17
- display: flex;
18
- align-items: center;
19
- z-index: 2;
20
- justify-content: center;
21
- right: 10px;
22
- cursor: pointer;
23
- }
24
-
25
- &::before {
26
- border-left: var(--size) solid transparent;
27
- border-right: var(--size) solid transparent;
28
- border-bottom: var(--size) solid black;
29
- top: 40%;
30
- }
31
-
32
- &::after {
33
- border-left: var(--size) solid transparent;
34
- border-right: var(--size) solid transparent;
35
- border-top: var(--size) solid black;
36
- top: 55%;
37
- }
38
-
39
- .select-container-label {
40
- font-weight: bold;
41
- color: #333;
42
- margin-bottom: 2px;
43
- display: block;
44
- }
45
-
46
- .select-container-button {
47
- appearance: none;
48
- width: 100%;
49
- font-size: 0.8rem;
50
- padding: 0.5rem 1rem;
51
- margin: 0.25rem 0;
52
- background-color: #fff;
53
- border: 1px solid #b2a1a1;
54
- border-radius: 0.25rem;
55
- color: #000;
56
- cursor: pointer;
57
- text-align: left;
58
- display: flex;
59
- align-items: center;
60
- justify-content: space-between;
61
- padding-right: 2rem;
62
-
63
- .select-container-value {
64
- flex: 1;
65
- min-width: 0;
66
- overflow: hidden;
67
- white-space: nowrap;
68
- text-overflow: ellipsis;
69
-
70
- .placeholder {
71
- color: gray;
72
- }
73
- }
74
-
75
- &:disabled {
76
- background-color: #e9ecef;
77
- color: #6c757d;
78
- cursor: not-allowed;
79
- }
80
-
81
- &:focus {
82
- outline: none;
83
- background-color: #fff;
84
- }
85
-
86
-
87
- }
88
- }
89
-
90
- .select-overlay-options {
91
- display: flex;
92
- flex-direction: column;
93
- max-height: 300px;
94
- overflow-y: auto;
95
- padding: 0.5rem 0;
96
- background-color: #fff;
97
- border: 1px solid #b2a1a1;
98
- border-radius: 0.25rem;
99
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
100
-
101
- .select-overlay-option {
102
- padding: 0.5rem 1rem;
103
- cursor: pointer;
104
- display: flex;
105
- align-items: center;
106
- gap: 0.5rem;
107
- user-select: none;
108
-
109
- .select-overlay-checkbox {
110
- min-width: 20px;
111
- width: 20px;
112
- cursor: pointer;
113
- }
114
-
115
- &:hover {
116
- background-color: #f0f0f0;
117
- }
118
-
119
- &.selected {
120
- background-color: #e7f3ff;
121
- color: #007bff;
122
- }
123
- }
124
- }
125
-
126
- .select-overlay-search {
127
- padding-bottom: 0.5rem;
128
- /* laisse la place à la croix de fermeture de l'overlay (.toggle-btn) */
129
- padding-right: 1.5rem;
130
-
131
- input {
132
- width: 100%;
133
- box-sizing: border-box;
134
- font-size: 0.8rem;
135
- padding: 0.4rem 0.75rem;
136
- border: 1px solid #b2a1a1;
137
- border-radius: 0.25rem;
138
-
139
- &:focus {
140
- outline: none;
141
- border-color: #888;
142
- }
143
- }
144
- }
145
-
146
- .select-overlay-empty {
147
- padding: 0.5rem 1rem;
148
- color: gray;
149
- font-size: 0.8rem;
150
- }
1
+ .select-container {
2
+ position: relative;
3
+
4
+ &::after,
5
+ &::before {
6
+ --size: 0.3rem;
7
+ content: "";
8
+ position: absolute;
9
+ right: 1rem;
10
+ pointer-events: none;
11
+ }
12
+
13
+ .clear-btn {
14
+ position: absolute;
15
+ top: 50%;
16
+ transform: translateY(-50%);
17
+ display: flex;
18
+ align-items: center;
19
+ z-index: 2;
20
+ justify-content: center;
21
+ right: 10px;
22
+ cursor: pointer;
23
+ }
24
+
25
+ &::before {
26
+ border-left: var(--size) solid transparent;
27
+ border-right: var(--size) solid transparent;
28
+ border-bottom: var(--size) solid black;
29
+ top: 40%;
30
+ }
31
+
32
+ &::after {
33
+ border-left: var(--size) solid transparent;
34
+ border-right: var(--size) solid transparent;
35
+ border-top: var(--size) solid black;
36
+ top: 55%;
37
+ }
38
+
39
+ .select-container-label {
40
+ font-weight: bold;
41
+ color: #333;
42
+ margin-bottom: 2px;
43
+ display: block;
44
+ }
45
+
46
+ .select-container-button {
47
+ appearance: none;
48
+ width: 100%;
49
+ font-size: 0.8rem;
50
+ padding: 0.5rem 1rem;
51
+ margin: 0.25rem 0;
52
+ background-color: #fff;
53
+ border: 1px solid #b2a1a1;
54
+ border-radius: 0.25rem;
55
+ color: #000;
56
+ cursor: pointer;
57
+ text-align: left;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: space-between;
61
+ padding-right: 2rem;
62
+
63
+ .select-container-value {
64
+ flex: 1;
65
+ min-width: 0;
66
+ overflow: hidden;
67
+ white-space: nowrap;
68
+ text-overflow: ellipsis;
69
+
70
+ .placeholder {
71
+ color: gray;
72
+ }
73
+ }
74
+
75
+ &:disabled {
76
+ background-color: #e9ecef;
77
+ color: #6c757d;
78
+ cursor: not-allowed;
79
+ }
80
+
81
+ &:focus {
82
+ outline: none;
83
+ background-color: #fff;
84
+ }
85
+
86
+
87
+ }
88
+ }
89
+
90
+ .select-overlay-options {
91
+ display: flex;
92
+ flex-direction: column;
93
+ max-height: 300px;
94
+ overflow-y: auto;
95
+ padding: 0.5rem 0;
96
+ background-color: #fff;
97
+ border: 1px solid #b2a1a1;
98
+ border-radius: 0.25rem;
99
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
100
+
101
+ .select-overlay-option {
102
+ padding: 0.5rem 1rem;
103
+ cursor: pointer;
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 0.5rem;
107
+ user-select: none;
108
+
109
+ .select-overlay-checkbox {
110
+ min-width: 20px;
111
+ width: 20px;
112
+ cursor: pointer;
113
+ }
114
+
115
+ &:hover {
116
+ background-color: #f0f0f0;
117
+ }
118
+
119
+ &.selected {
120
+ background-color: #e7f3ff;
121
+ color: #007bff;
122
+ }
123
+ }
124
+ }
125
+
126
+ .select-overlay-search {
127
+ padding-bottom: 0.5rem;
128
+ /* laisse la place à la croix de fermeture de l'overlay (.toggle-btn) */
129
+ padding-right: 1.5rem;
130
+
131
+ input {
132
+ width: 100%;
133
+ box-sizing: border-box;
134
+ font-size: 0.8rem;
135
+ padding: 0.4rem 0.75rem;
136
+ border: 1px solid #b2a1a1;
137
+ border-radius: 0.25rem;
138
+
139
+ &:focus {
140
+ outline: none;
141
+ border-color: #888;
142
+ }
143
+ }
144
+ }
145
+
146
+ .select-overlay-empty {
147
+ padding: 0.5rem 1rem;
148
+ color: gray;
149
+ font-size: 0.8rem;
150
+ }
package/src/select/selectOption.interface.ts CHANGED
@@ -1,5 +1,5 @@
1
- export interface SelectOptionInterface {
2
- value: string;
3
- label: string;
4
- disabled?: boolean;
5
- }
1
+ export interface SelectOptionInterface {
2
+ value: string;
3
+ label: string;
4
+ disabled?: boolean;
5
+ }