@radix-ng/primitives 0.12.1 → 0.13.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 (497) hide show
  1. package/README.md +3 -1
  2. package/accordion/index.d.ts +16 -0
  3. package/accordion/src/accordion-content.directive.d.ts +11 -0
  4. package/accordion/src/accordion-header.directive.d.ts +7 -0
  5. package/accordion/src/accordion-item.directive.d.ts +82 -0
  6. package/accordion/src/accordion-root.directive.d.ts +93 -0
  7. package/accordion/src/accordion-trigger.directive.d.ts +15 -0
  8. package/alert-dialog/{index.ts → index.d.ts} +0 -1
  9. package/alert-dialog/src/alert-dialog-cancel.directive.d.ts +7 -0
  10. package/alert-dialog/src/alert-dialog-content.directive.d.ts +9 -0
  11. package/alert-dialog/src/alert-dialog-root.directive.d.ts +9 -0
  12. package/alert-dialog/src/alert-dialog-title.directive.d.ts +5 -0
  13. package/alert-dialog/src/alert-dialog-trigger.directive.d.ts +7 -0
  14. package/alert-dialog/src/alert-dialog.service.d.ts +14 -0
  15. package/avatar/src/avatar-fallback.directive.d.ts +28 -0
  16. package/avatar/src/avatar-image.directive.d.ts +21 -0
  17. package/avatar/src/avatar-root.directive.d.ts +21 -0
  18. package/avatar/src/avatar.config.d.ts +13 -0
  19. package/checkbox/src/checkbox-button.directive.d.ts +8 -0
  20. package/checkbox/src/checkbox-indicator.directive.d.ts +6 -0
  21. package/checkbox/src/checkbox-input.directive.d.ts +9 -0
  22. package/checkbox/src/checkbox.directive.d.ts +75 -0
  23. package/checkbox/src/checkbox.token.d.ts +4 -0
  24. package/collapsible/src/collapsible-content.directive.d.ts +17 -0
  25. package/collapsible/src/collapsible-content.token.d.ts +3 -0
  26. package/collapsible/src/collapsible-root.directive.d.ts +55 -0
  27. package/collapsible/src/collapsible-trigger.directive.d.ts +26 -0
  28. package/compodoc/documentation.json +14249 -0
  29. package/context-menu/index.d.ts +26 -0
  30. package/context-menu/src/context-menu-content.directive.d.ts +15 -0
  31. package/context-menu/src/context-menu-item-checkbox.directive.d.ts +9 -0
  32. package/context-menu/src/context-menu-item-indicator.directive.d.ts +7 -0
  33. package/context-menu/src/context-menu-item-radio-group.directive.d.ts +12 -0
  34. package/context-menu/src/context-menu-item-radio.directive.d.ts +19 -0
  35. package/context-menu/src/context-menu-item-selectable.d.ts +12 -0
  36. package/context-menu/src/context-menu-item.directive.d.ts +17 -0
  37. package/context-menu/src/context-menu-label.directive.d.ts +5 -0
  38. package/context-menu/src/context-menu-separator.directive.d.ts +6 -0
  39. package/context-menu/src/context-menu-trigger.directive.d.ts +31 -0
  40. package/dialog/index.d.ts +23 -0
  41. package/dialog/src/dialog-close.directive.d.ts +7 -0
  42. package/dialog/src/dialog-content.directive.d.ts +21 -0
  43. package/dialog/src/dialog-description.directive.d.ts +5 -0
  44. package/dialog/src/dialog-dismiss.directive.d.ts +7 -0
  45. package/dialog/src/dialog-ref.d.ts +37 -0
  46. package/dialog/src/dialog-title.directive.d.ts +5 -0
  47. package/dialog/src/dialog-trigger.directive.d.ts +16 -0
  48. package/dialog/src/dialog.config.d.ts +39 -0
  49. package/dialog/src/dialog.injectors.d.ts +4 -0
  50. package/dialog/src/{dialog.providers.ts → dialog.providers.d.ts} +3 -11
  51. package/dialog/src/dialog.service.d.ts +26 -0
  52. package/dropdown-menu/index.d.ts +26 -0
  53. package/dropdown-menu/src/dropdown-menu-content.directive.d.ts +15 -0
  54. package/dropdown-menu/src/dropdown-menu-item-checkbox.directive.d.ts +9 -0
  55. package/dropdown-menu/src/dropdown-menu-item-indicator.directive.d.ts +7 -0
  56. package/dropdown-menu/src/dropdown-menu-item-radio-group.directive.d.ts +12 -0
  57. package/dropdown-menu/src/dropdown-menu-item-radio.directive.d.ts +19 -0
  58. package/dropdown-menu/src/dropdown-menu-item-selectable.d.ts +12 -0
  59. package/dropdown-menu/src/dropdown-menu-item.directive.d.ts +17 -0
  60. package/dropdown-menu/src/dropdown-menu-label.directive.d.ts +5 -0
  61. package/dropdown-menu/src/dropdown-menu-separator.directive.d.ts +6 -0
  62. package/dropdown-menu/src/dropdown-menu-trigger.directive.d.ts +46 -0
  63. package/esm2022/accordion/index.mjs +40 -0
  64. package/esm2022/accordion/radix-ng-primitives-accordion.mjs +5 -0
  65. package/esm2022/accordion/src/accordion-content.directive.mjs +42 -0
  66. package/esm2022/accordion/src/accordion-header.directive.mjs +23 -0
  67. package/esm2022/accordion/src/accordion-item.directive.mjs +187 -0
  68. package/esm2022/accordion/src/accordion-root.directive.mjs +172 -0
  69. package/esm2022/accordion/src/accordion-trigger.directive.mjs +42 -0
  70. package/esm2022/alert-dialog/index.mjs +7 -0
  71. package/esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs +5 -0
  72. package/esm2022/alert-dialog/src/alert-dialog-cancel.directive.mjs +24 -0
  73. package/esm2022/alert-dialog/src/alert-dialog-content.directive.mjs +34 -0
  74. package/esm2022/alert-dialog/src/alert-dialog-root.directive.mjs +24 -0
  75. package/esm2022/alert-dialog/src/alert-dialog-title.directive.mjs +14 -0
  76. package/esm2022/alert-dialog/src/alert-dialog-trigger.directive.mjs +24 -0
  77. package/esm2022/alert-dialog/src/alert-dialog.service.mjs +46 -0
  78. package/esm2022/avatar/index.mjs +5 -0
  79. package/esm2022/avatar/radix-ng-primitives-avatar.mjs +5 -0
  80. package/esm2022/avatar/src/avatar-fallback.directive.mjs +60 -0
  81. package/esm2022/avatar/src/avatar-image.directive.mjs +52 -0
  82. package/esm2022/avatar/src/avatar-root.directive.mjs +38 -0
  83. package/esm2022/avatar/src/avatar.config.mjs +17 -0
  84. package/esm2022/checkbox/index.mjs +6 -0
  85. package/esm2022/checkbox/radix-ng-primitives-checkbox.mjs +5 -0
  86. package/esm2022/checkbox/src/checkbox-button.directive.mjs +33 -0
  87. package/esm2022/checkbox/src/checkbox-indicator.directive.mjs +24 -0
  88. package/esm2022/checkbox/src/checkbox-input.directive.mjs +41 -0
  89. package/esm2022/checkbox/src/checkbox.directive.mjs +141 -0
  90. package/esm2022/checkbox/src/checkbox.token.mjs +6 -0
  91. package/esm2022/collapsible/index.mjs +4 -0
  92. package/esm2022/collapsible/radix-ng-primitives-collapsible.mjs +5 -0
  93. package/esm2022/collapsible/src/collapsible-content.directive.mjs +45 -0
  94. package/esm2022/collapsible/src/collapsible-content.token.mjs +3 -0
  95. package/esm2022/collapsible/src/collapsible-root.directive.mjs +118 -0
  96. package/esm2022/collapsible/src/collapsible-trigger.directive.mjs +49 -0
  97. package/esm2022/context-menu/index.mjs +65 -0
  98. package/esm2022/context-menu/radix-ng-primitives-context-menu.mjs +5 -0
  99. package/esm2022/context-menu/src/context-menu-content.directive.mjs +56 -0
  100. package/esm2022/context-menu/src/context-menu-item-checkbox.directive.mjs +39 -0
  101. package/esm2022/context-menu/src/context-menu-item-indicator.directive.mjs +22 -0
  102. package/esm2022/context-menu/src/context-menu-item-radio-group.directive.mjs +37 -0
  103. package/esm2022/context-menu/src/context-menu-item-radio.directive.mjs +67 -0
  104. package/esm2022/context-menu/src/context-menu-item-selectable.mjs +31 -0
  105. package/esm2022/context-menu/src/context-menu-item.directive.mjs +70 -0
  106. package/esm2022/context-menu/src/context-menu-label.directive.mjs +14 -0
  107. package/esm2022/context-menu/src/context-menu-separator.directive.mjs +21 -0
  108. package/esm2022/context-menu/src/context-menu-trigger.directive.mjs +92 -0
  109. package/esm2022/dialog/index.mjs +50 -0
  110. package/esm2022/dialog/radix-ng-primitives-dialog.mjs +5 -0
  111. package/esm2022/dialog/src/dialog-close.directive.mjs +25 -0
  112. package/esm2022/dialog/src/dialog-content.directive.mjs +46 -0
  113. package/esm2022/dialog/src/dialog-description.directive.mjs +14 -0
  114. package/esm2022/dialog/src/dialog-dismiss.directive.mjs +25 -0
  115. package/esm2022/dialog/src/dialog-ref.mjs +46 -0
  116. package/esm2022/dialog/src/dialog-title.directive.mjs +14 -0
  117. package/esm2022/dialog/src/dialog-trigger.directive.mjs +54 -0
  118. package/esm2022/dialog/src/dialog.config.mjs +6 -0
  119. package/esm2022/dialog/src/dialog.injectors.mjs +10 -0
  120. package/esm2022/dialog/src/dialog.providers.mjs +26 -0
  121. package/esm2022/dialog/src/dialog.service.mjs +96 -0
  122. package/esm2022/dropdown-menu/index.mjs +68 -0
  123. package/esm2022/dropdown-menu/radix-ng-primitives-dropdown-menu.mjs +5 -0
  124. package/esm2022/dropdown-menu/src/dropdown-menu-content.directive.mjs +56 -0
  125. package/esm2022/dropdown-menu/src/dropdown-menu-item-checkbox.directive.mjs +39 -0
  126. package/esm2022/dropdown-menu/src/dropdown-menu-item-indicator.directive.mjs +22 -0
  127. package/esm2022/dropdown-menu/src/dropdown-menu-item-radio-group.directive.mjs +37 -0
  128. package/esm2022/dropdown-menu/src/dropdown-menu-item-radio.directive.mjs +67 -0
  129. package/esm2022/dropdown-menu/src/dropdown-menu-item-selectable.mjs +31 -0
  130. package/esm2022/dropdown-menu/src/dropdown-menu-item.directive.mjs +71 -0
  131. package/esm2022/dropdown-menu/src/dropdown-menu-label.directive.mjs +14 -0
  132. package/esm2022/dropdown-menu/src/dropdown-menu-separator.directive.mjs +21 -0
  133. package/esm2022/dropdown-menu/src/dropdown-menu-trigger.directive.mjs +179 -0
  134. package/esm2022/index.mjs +2 -0
  135. package/esm2022/label/index.mjs +2 -0
  136. package/esm2022/label/radix-ng-primitives-label.mjs +5 -0
  137. package/esm2022/label/src/label.directive.mjs +59 -0
  138. package/esm2022/menu/index.mjs +45 -0
  139. package/esm2022/menu/radix-ng-primitives-menu.mjs +5 -0
  140. package/esm2022/menu/src/menu-content.directive.mjs +17 -0
  141. package/esm2022/menu/src/menu-directive.mjs +18 -0
  142. package/esm2022/menu/src/menu-group.directive.mjs +20 -0
  143. package/esm2022/menu/src/menu-item.directive.mjs +46 -0
  144. package/esm2022/menu/src/menu-label.directive.mjs +14 -0
  145. package/esm2022/menu/src/menu-separator.directive.mjs +21 -0
  146. package/esm2022/menubar/index.mjs +60 -0
  147. package/esm2022/menubar/radix-ng-primitives-menubar.mjs +5 -0
  148. package/esm2022/menubar/src/menubar-content.directive.mjs +17 -0
  149. package/esm2022/menubar/src/menubar-item-checkbox.directive.mjs +34 -0
  150. package/esm2022/menubar/src/menubar-item-indicator.directive.mjs +17 -0
  151. package/esm2022/menubar/src/menubar-item-radio.directive.mjs +35 -0
  152. package/esm2022/menubar/src/menubar-item.directive.mjs +20 -0
  153. package/esm2022/menubar/src/menubar-radio-group.directive.mjs +17 -0
  154. package/esm2022/menubar/src/menubar-root.directive.mjs +24 -0
  155. package/esm2022/menubar/src/menubar-separator.directive.mjs +17 -0
  156. package/esm2022/menubar/src/menubar-trigger.directive.mjs +45 -0
  157. package/esm2022/progress/index.mjs +25 -0
  158. package/esm2022/progress/radix-ng-primitives-progress.mjs +5 -0
  159. package/esm2022/progress/src/progress-indicator.directive.mjs +34 -0
  160. package/esm2022/progress/src/progress-root.directive.mjs +127 -0
  161. package/esm2022/radio/index.mjs +4 -0
  162. package/esm2022/radio/radix-ng-primitives-radio.mjs +5 -0
  163. package/esm2022/radio/src/radio-indicator.directive.mjs +25 -0
  164. package/esm2022/radio/src/radio-item.directive.mjs +70 -0
  165. package/esm2022/radio/src/radio-root.directive.mjs +194 -0
  166. package/esm2022/radio/src/radio-tokens.mjs +3 -0
  167. package/esm2022/radix-ng-primitives.mjs +5 -0
  168. package/esm2022/separator/index.mjs +2 -0
  169. package/esm2022/separator/radix-ng-primitives-separator.mjs +5 -0
  170. package/esm2022/separator/src/separator.directive.mjs +32 -0
  171. package/esm2022/switch/index.mjs +30 -0
  172. package/esm2022/switch/radix-ng-primitives-switch.mjs +5 -0
  173. package/esm2022/switch/src/switch-input.directive.mjs +32 -0
  174. package/esm2022/switch/src/switch-root.directive.mjs +95 -0
  175. package/esm2022/switch/src/switch-thumb.directive.mjs +23 -0
  176. package/esm2022/tabs/index.mjs +38 -0
  177. package/esm2022/tabs/radix-ng-primitives-tabs.mjs +5 -0
  178. package/esm2022/tabs/src/tabs-content.directive.mjs +29 -0
  179. package/esm2022/tabs/src/tabs-context.service.mjs +43 -0
  180. package/esm2022/tabs/src/tabs-list.directive.mjs +23 -0
  181. package/esm2022/tabs/src/tabs-root.directive.mjs +54 -0
  182. package/esm2022/tabs/src/tabs-trigger.directive.mjs +52 -0
  183. package/esm2022/toggle/index.mjs +2 -0
  184. package/esm2022/toggle/radix-ng-primitives-toggle.mjs +5 -0
  185. package/esm2022/toggle/src/toggle.directive.mjs +39 -0
  186. package/esm2022/toggle-group/index.mjs +6 -0
  187. package/esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs +5 -0
  188. package/esm2022/toggle-group/src/toggle-group-button.directive.mjs +75 -0
  189. package/esm2022/toggle-group/src/toggle-group-button.token.mjs +6 -0
  190. package/esm2022/toggle-group/src/toggle-group-multi.directive.mjs +143 -0
  191. package/esm2022/toggle-group/src/toggle-group.directive.mjs +134 -0
  192. package/esm2022/toggle-group/src/toggle-group.token.mjs +6 -0
  193. package/fesm2022/radix-ng-primitives-accordion.mjs +483 -0
  194. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -0
  195. package/fesm2022/radix-ng-primitives-alert-dialog.mjs +159 -0
  196. package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -0
  197. package/fesm2022/radix-ng-primitives-avatar.mjs +166 -0
  198. package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -0
  199. package/fesm2022/radix-ng-primitives-checkbox.mjs +241 -0
  200. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -0
  201. package/fesm2022/radix-ng-primitives-collapsible.mjs +213 -0
  202. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -0
  203. package/fesm2022/radix-ng-primitives-context-menu.mjs +463 -0
  204. package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -0
  205. package/fesm2022/radix-ng-primitives-dialog.mjs +373 -0
  206. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -0
  207. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +555 -0
  208. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +1 -0
  209. package/fesm2022/radix-ng-primitives-label.mjs +66 -0
  210. package/fesm2022/radix-ng-primitives-label.mjs.map +1 -0
  211. package/fesm2022/radix-ng-primitives-menu.mjs +158 -0
  212. package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -0
  213. package/fesm2022/radix-ng-primitives-menubar.mjs +245 -0
  214. package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -0
  215. package/fesm2022/radix-ng-primitives-progress.mjs +184 -0
  216. package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -0
  217. package/fesm2022/radix-ng-primitives-radio.mjs +289 -0
  218. package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -0
  219. package/fesm2022/radix-ng-primitives-separator.mjs +39 -0
  220. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -0
  221. package/fesm2022/radix-ng-primitives-switch.mjs +173 -0
  222. package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -0
  223. package/fesm2022/radix-ng-primitives-tabs.mjs +222 -0
  224. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -0
  225. package/fesm2022/radix-ng-primitives-toggle-group.mjs +358 -0
  226. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -0
  227. package/fesm2022/radix-ng-primitives-toggle.mjs +46 -0
  228. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -0
  229. package/fesm2022/radix-ng-primitives.mjs +4 -0
  230. package/fesm2022/radix-ng-primitives.mjs.map +1 -0
  231. package/label/src/label.directive.d.ts +29 -0
  232. package/menu/index.d.ts +18 -0
  233. package/menu/src/menu-content.directive.d.ts +6 -0
  234. package/menu/src/menu-directive.d.ts +6 -0
  235. package/menu/src/menu-group.directive.d.ts +6 -0
  236. package/menu/src/menu-item.directive.d.ts +12 -0
  237. package/menu/src/menu-label.directive.d.ts +5 -0
  238. package/menu/src/menu-separator.directive.d.ts +6 -0
  239. package/menubar/index.d.ts +24 -0
  240. package/menubar/src/menubar-content.directive.d.ts +6 -0
  241. package/menubar/src/menubar-item-checkbox.directive.d.ts +14 -0
  242. package/menubar/src/menubar-item-indicator.directive.d.ts +5 -0
  243. package/menubar/src/menubar-item-radio.directive.d.ts +14 -0
  244. package/menubar/src/menubar-item.directive.d.ts +8 -0
  245. package/menubar/src/menubar-radio-group.directive.d.ts +6 -0
  246. package/menubar/src/menubar-root.directive.d.ts +7 -0
  247. package/menubar/src/menubar-separator.directive.d.ts +6 -0
  248. package/menubar/src/menubar-trigger.directive.d.ts +11 -0
  249. package/package.json +124 -4
  250. package/progress/index.d.ts +11 -0
  251. package/progress/src/progress-indicator.directive.d.ts +16 -0
  252. package/progress/src/progress-root.directive.d.ts +63 -0
  253. package/radio/{index.ts → index.d.ts} +0 -1
  254. package/radio/src/radio-indicator.directive.d.ts +9 -0
  255. package/radio/src/radio-item.directive.d.ts +21 -0
  256. package/radio/src/radio-root.directive.d.ts +72 -0
  257. package/radio/src/{radio-tokens.ts → radio-tokens.d.ts} +1 -5
  258. package/separator/src/separator.directive.d.ts +22 -0
  259. package/switch/index.d.ts +13 -0
  260. package/switch/src/switch-input.directive.d.ts +6 -0
  261. package/switch/src/switch-root.directive.d.ts +51 -0
  262. package/switch/src/switch-thumb.directive.d.ts +6 -0
  263. package/tabs/index.d.ts +15 -0
  264. package/tabs/src/tabs-content.directive.d.ts +8 -0
  265. package/tabs/src/tabs-context.service.d.ts +22 -0
  266. package/tabs/src/tabs-list.directive.d.ts +6 -0
  267. package/tabs/src/tabs-root.directive.d.ts +37 -0
  268. package/tabs/src/tabs-trigger.directive.d.ts +19 -0
  269. package/toggle/src/toggle.directive.d.ts +30 -0
  270. package/toggle-group/src/toggle-group-button.directive.d.ts +39 -0
  271. package/toggle-group/src/toggle-group-button.token.d.ts +4 -0
  272. package/toggle-group/src/toggle-group-multi.directive.d.ts +93 -0
  273. package/toggle-group/src/toggle-group.directive.d.ts +84 -0
  274. package/toggle-group/src/toggle-group.token.d.ts +5 -0
  275. package/.compodocrc.json +0 -12
  276. package/CHANGELOG.md +0 -189
  277. package/accordion/__tests__/accordion-content.directive.spec.ts +0 -8
  278. package/accordion/__tests__/accordion-header.directive.spec.ts +0 -8
  279. package/accordion/__tests__/accordion-item.directive.spec.ts +0 -8
  280. package/accordion/__tests__/accordion-root.directive.spec.ts +0 -8
  281. package/accordion/__tests__/accordion-trigger.directive.spec.ts +0 -8
  282. package/accordion/index.ts +0 -5
  283. package/accordion/ng-package.json +0 -5
  284. package/accordion/src/accordion-content.directive.ts +0 -46
  285. package/accordion/src/accordion-header.directive.ts +0 -15
  286. package/accordion/src/accordion-item.directive.ts +0 -216
  287. package/accordion/src/accordion-root.directive.ts +0 -205
  288. package/accordion/src/accordion-trigger.directive.ts +0 -37
  289. package/accordion/stories/accordion.docs.mdx +0 -77
  290. package/accordion/stories/accordion.stories.ts +0 -340
  291. package/alert-dialog/ng-package.json +0 -5
  292. package/alert-dialog/src/alert-dialog-cancel.directive.ts +0 -17
  293. package/alert-dialog/src/alert-dialog-content.directive.ts +0 -24
  294. package/alert-dialog/src/alert-dialog-root.directive.ts +0 -15
  295. package/alert-dialog/src/alert-dialog-title.directive.ts +0 -7
  296. package/alert-dialog/src/alert-dialog-trigger.directive.ts +0 -17
  297. package/alert-dialog/src/alert-dialog.service.ts +0 -51
  298. package/alert-dialog/stories/alert-dialog.stories.ts +0 -139
  299. package/avatar/__tests__/avatar-fallback.directive.spec.ts +0 -31
  300. package/avatar/__tests__/avatar-image.directive.spec.ts +0 -36
  301. package/avatar/ng-package.json +0 -5
  302. package/avatar/src/avatar-fallback.directive.ts +0 -62
  303. package/avatar/src/avatar-image.directive.ts +0 -55
  304. package/avatar/src/avatar-root.directive.ts +0 -35
  305. package/avatar/src/avatar.config.ts +0 -29
  306. package/avatar/stories/avatar.docs.mdx +0 -37
  307. package/avatar/stories/avatar.stories.ts +0 -87
  308. package/button/__tests__/.gitkeep +0 -0
  309. package/button/src/button-abstract.directive.ts +0 -46
  310. package/checkbox/ng-package.json +0 -5
  311. package/checkbox/src/checkbox-button.directive.ts +0 -26
  312. package/checkbox/src/checkbox-indicator.directive.ts +0 -16
  313. package/checkbox/src/checkbox-input.directive.ts +0 -36
  314. package/checkbox/src/checkbox.directive.ts +0 -146
  315. package/checkbox/src/checkbox.token.ts +0 -8
  316. package/checkbox/stories/checkbox-group.component.ts +0 -87
  317. package/checkbox/stories/checkbox-group.styles.scss +0 -49
  318. package/checkbox/stories/checkbox-indeterminate.component.ts +0 -52
  319. package/checkbox/stories/checkbox.docs.mdx +0 -58
  320. package/checkbox/stories/checkbox.stories.ts +0 -105
  321. package/collapsible/__tests__/collapsible-content.directive.spec.ts +0 -30
  322. package/collapsible/__tests__/collapsible-root.directive.spec.ts +0 -27
  323. package/collapsible/__tests__/collapsible-trigger.directive.spec.ts +0 -30
  324. package/collapsible/ng-package.json +0 -5
  325. package/collapsible/src/collapsible-content.directive.ts +0 -34
  326. package/collapsible/src/collapsible-content.token.ts +0 -6
  327. package/collapsible/src/collapsible-root.directive.ts +0 -120
  328. package/collapsible/src/collapsible-trigger.directive.ts +0 -44
  329. package/collapsible/stories/collapsible-animation.component.ts +0 -116
  330. package/collapsible/stories/collapsible-external-triggering.component.ts +0 -86
  331. package/collapsible/stories/collapsible.docs.mdx +0 -53
  332. package/collapsible/stories/collapsible.stories.ts +0 -151
  333. package/context-menu/index.ts +0 -10
  334. package/context-menu/ng-package.json +0 -5
  335. package/context-menu/src/context-menu-content.directive.ts +0 -47
  336. package/context-menu/src/context-menu-item-checkbox.directive.ts +0 -30
  337. package/context-menu/src/context-menu-item-indicator.directive.ts +0 -14
  338. package/context-menu/src/context-menu-item-radio-group.directive.ts +0 -31
  339. package/context-menu/src/context-menu-item-radio.directive.ts +0 -69
  340. package/context-menu/src/context-menu-item-selectable.ts +0 -18
  341. package/context-menu/src/context-menu-item.directive.ts +0 -65
  342. package/context-menu/src/context-menu-label.directive.ts +0 -7
  343. package/context-menu/src/context-menu-separator.directive.ts +0 -13
  344. package/context-menu/src/context-menu-trigger.directive.ts +0 -82
  345. package/context-menu/stories/context-menu.docs.mdx +0 -23
  346. package/context-menu/stories/context-menu.stories.ts +0 -253
  347. package/core/index.ts +0 -3
  348. package/core/src/accessor/provide-value-accessor.ts +0 -20
  349. package/core/src/auto-focus.directive.ts +0 -81
  350. package/core/src/inject-ng-control.ts +0 -28
  351. package/core/src/mount.ts +0 -27
  352. package/dialog/__tests__/dialog-content.directive.spec.ts +0 -77
  353. package/dialog/__tests__/dialog-trigger.directive.spec.ts +0 -85
  354. package/dialog/index.ts +0 -31
  355. package/dialog/ng-package.json +0 -5
  356. package/dialog/src/dialog-close.directive.ts +0 -18
  357. package/dialog/src/dialog-content.directive.ts +0 -45
  358. package/dialog/src/dialog-description.directive.ts +0 -7
  359. package/dialog/src/dialog-dismiss.directive.ts +0 -18
  360. package/dialog/src/dialog-ref.ts +0 -70
  361. package/dialog/src/dialog-title.directive.ts +0 -7
  362. package/dialog/src/dialog-trigger.directive.ts +0 -52
  363. package/dialog/src/dialog.config.ts +0 -55
  364. package/dialog/src/dialog.injectors.ts +0 -12
  365. package/dialog/src/dialog.service.ts +0 -94
  366. package/dialog/stories/dialog.docs.mdx +0 -32
  367. package/dialog/stories/dialog.stories.ts +0 -233
  368. package/dropdown-menu/index.ts +0 -10
  369. package/dropdown-menu/ng-package.json +0 -5
  370. package/dropdown-menu/src/dropdown-menu-content.directive.ts +0 -47
  371. package/dropdown-menu/src/dropdown-menu-item-checkbox.directive.ts +0 -30
  372. package/dropdown-menu/src/dropdown-menu-item-indicator.directive.ts +0 -14
  373. package/dropdown-menu/src/dropdown-menu-item-radio-group.directive.ts +0 -31
  374. package/dropdown-menu/src/dropdown-menu-item-radio.directive.ts +0 -72
  375. package/dropdown-menu/src/dropdown-menu-item-selectable.ts +0 -18
  376. package/dropdown-menu/src/dropdown-menu-item.directive.ts +0 -66
  377. package/dropdown-menu/src/dropdown-menu-label.directive.ts +0 -7
  378. package/dropdown-menu/src/dropdown-menu-separator.directive.ts +0 -13
  379. package/dropdown-menu/src/dropdown-menu-trigger.directive.ts +0 -185
  380. package/dropdown-menu/stories/dropdown-menu-item-checkbox.component.ts +0 -104
  381. package/dropdown-menu/stories/dropdown-menu-item-checkbox.styles.scss +0 -106
  382. package/dropdown-menu/stories/dropdown-menu-item-radio.component.ts +0 -95
  383. package/dropdown-menu/stories/dropdown-menu-item-radio.styles.scss +0 -106
  384. package/dropdown-menu/stories/dropdown.docs.mdx +0 -27
  385. package/dropdown-menu/stories/dropdown.stories.ts +0 -212
  386. package/form-field/index.ts +0 -1
  387. package/form-field/src/.gitkeep +0 -0
  388. package/jest.config.ts +0 -21
  389. package/label/__tests__/label-root.directive.spec.ts +0 -99
  390. package/label/ng-package.json +0 -5
  391. package/label/src/label.directive.ts +0 -58
  392. package/label/stories/label.docs.mdx +0 -40
  393. package/label/stories/label.stories.ts +0 -76
  394. package/menu/index.ts +0 -29
  395. package/menu/ng-package.json +0 -5
  396. package/menu/src/menu-content.directive.ts +0 -9
  397. package/menu/src/menu-directive.ts +0 -10
  398. package/menu/src/menu-group.directive.ts +0 -12
  399. package/menu/src/menu-item.directive.ts +0 -44
  400. package/menu/src/menu-label.directive.ts +0 -7
  401. package/menu/src/menu-separator.directive.ts +0 -13
  402. package/menubar/index.ts +0 -38
  403. package/menubar/ng-package.json +0 -5
  404. package/menubar/src/menubar-content.directive.ts +0 -9
  405. package/menubar/src/menubar-item-checkbox.directive.ts +0 -32
  406. package/menubar/src/menubar-item-indicator.directive.ts +0 -10
  407. package/menubar/src/menubar-item-radio.directive.ts +0 -33
  408. package/menubar/src/menubar-item.directive.ts +0 -12
  409. package/menubar/src/menubar-radio-group.directive.ts +0 -9
  410. package/menubar/src/menubar-root.directive.ts +0 -15
  411. package/menubar/src/menubar-separator.directive.ts +0 -9
  412. package/menubar/src/menubar-trigger.directive.ts +0 -40
  413. package/menubar/stories/menubar.stories.ts +0 -229
  414. package/ng-package.json +0 -8
  415. package/portal/stories/portal.docs.mdx +0 -85
  416. package/presence/__test__/presence-test.component.ts +0 -51
  417. package/presence/__test__/presence.spec.ts +0 -50
  418. package/presence/index.ts +0 -4
  419. package/presence/src/presence.ts +0 -119
  420. package/presence/src/transitions/transition.collapse.ts +0 -99
  421. package/presence/src/transitions/transition.toast.ts +0 -27
  422. package/presence/src/types.ts +0 -20
  423. package/presence/src/utils.ts +0 -63
  424. package/presence/stories/presence-story.componen.ts +0 -69
  425. package/presence/stories/presence.docs.mdx +0 -40
  426. package/presence/stories/presence.stories.ts +0 -29
  427. package/progress/__test__/progress.spec.ts +0 -55
  428. package/progress/index.ts +0 -4
  429. package/progress/ng-package.json +0 -5
  430. package/progress/src/progress-indicator.directive.ts +0 -26
  431. package/progress/src/progress-root.directive.ts +0 -134
  432. package/progress/stories/progress.docs.mdx +0 -65
  433. package/progress/stories/progress.stories.ts +0 -66
  434. package/project.json +0 -39
  435. package/radio/ng-package.json +0 -5
  436. package/radio/src/radio-indicator.directive.ts +0 -17
  437. package/radio/src/radio-item.directive.ts +0 -68
  438. package/radio/src/radio-root.directive.ts +0 -207
  439. package/radio/stories/radio-group.component.ts +0 -39
  440. package/radio/stories/radio-group.styles.scss +0 -70
  441. package/radio/stories/radio.docs.mdx +0 -68
  442. package/radio/stories/radio.stories.ts +0 -155
  443. package/separator/__tests__/separator.directive.spec.ts +0 -58
  444. package/separator/ng-package.json +0 -5
  445. package/separator/src/separator.directive.ts +0 -35
  446. package/separator/stories/separator.docs.mdx +0 -37
  447. package/separator/stories/separator.stories.ts +0 -82
  448. package/slider/src/slider-input.directive.ts +0 -0
  449. package/slider/src/slider-thumb.directives.ts +0 -60
  450. package/slider/src/slider-track.directive.ts +0 -11
  451. package/slider/src/slider.directive.ts +0 -59
  452. package/slider/src/slider.types.ts +0 -4
  453. package/switch/index.ts +0 -22
  454. package/switch/ng-package.json +0 -5
  455. package/switch/src/switch-input.directive.ts +0 -24
  456. package/switch/src/switch-root.directive.ts +0 -127
  457. package/switch/src/switch-thumb.directive.ts +0 -15
  458. package/switch/stories/switch.docs.mdx +0 -83
  459. package/switch/stories/switch.stories.ts +0 -149
  460. package/tabs/__tests__/tabs-context.service.spec.ts +0 -35
  461. package/tabs/index.ts +0 -26
  462. package/tabs/ng-package.json +0 -5
  463. package/tabs/src/tabs-content.directive.ts +0 -23
  464. package/tabs/src/tabs-context.service.ts +0 -43
  465. package/tabs/src/tabs-list.directive.ts +0 -21
  466. package/tabs/src/tabs-root.directive.ts +0 -70
  467. package/tabs/src/tabs-trigger.directive.ts +0 -55
  468. package/tabs/stories/tabs.stories.ts +0 -213
  469. package/test-setup.ts +0 -1
  470. package/toggle/__tests__/toggle.directive.spec.ts +0 -87
  471. package/toggle/ng-package.json +0 -5
  472. package/toggle/src/toggle.directive.ts +0 -49
  473. package/toggle/stories/toggle.docs.mdx +0 -60
  474. package/toggle/stories/toggle.stories.ts +0 -84
  475. package/toggle-group/ng-package.json +0 -5
  476. package/toggle-group/src/toggle-group-button.directive.ts +0 -73
  477. package/toggle-group/src/toggle-group-button.token.ts +0 -8
  478. package/toggle-group/src/toggle-group-multi.directive.ts +0 -158
  479. package/toggle-group/src/toggle-group.directive.ts +0 -148
  480. package/toggle-group/src/toggle-group.token.ts +0 -11
  481. package/toggle-group/stories/toggle-group.docs.mdx +0 -87
  482. package/toggle-group/stories/toggle-group.stories.ts +0 -95
  483. package/tsconfig.doc.json +0 -11
  484. package/tsconfig.json +0 -29
  485. package/tsconfig.lib.json +0 -19
  486. package/tsconfig.lib.prod.json +0 -12
  487. package/tsconfig.spec.json +0 -11
  488. package/visually-hidden/README.md +0 -3
  489. package/visually-hidden/stories/visually-hidden.docs.mdx +0 -36
  490. /package/avatar/{index.ts → index.d.ts} +0 -0
  491. /package/checkbox/{index.ts → index.d.ts} +0 -0
  492. /package/collapsible/{index.ts → index.d.ts} +0 -0
  493. /package/{index.ts → index.d.ts} +0 -0
  494. /package/label/{index.ts → index.d.ts} +0 -0
  495. /package/separator/{index.ts → index.d.ts} +0 -0
  496. /package/toggle/{index.ts → index.d.ts} +0 -0
  497. /package/toggle-group/{index.ts → index.d.ts} +0 -0
@@ -1,24 +0,0 @@
1
- import { Directive } from '@angular/core';
2
- import { injectSwitch } from './switch-root.directive';
3
-
4
- @Directive({
5
- selector: 'input[rdxSwitchInput]',
6
- exportAs: 'rdxSwitchInput',
7
- standalone: true,
8
- host: {
9
- type: 'checkbox',
10
- tabindex: '-1',
11
- '[attr.defaultChecked]': 'switchRoot.checked()',
12
- '[attr.aria-checked]': 'switchRoot.checked()',
13
- '[attr.aria-hidden]': 'true',
14
- '[attr.aria-required]': 'switchRoot.required()',
15
- '[attr.data-state]': 'switchRoot.checked() ? "checked" : "unchecked"',
16
- '[attr.data-disabled]': 'switchRoot.disabledState() ? "true" : null',
17
- '[attr.disabled]': 'switchRoot.disabledState() ? switchRoot.disabledState() : null',
18
- '[attr.value]': 'switchRoot.checked() ? "on" : "off"',
19
- style: 'transform: translateX(-100%); position: absolute; overflow: hidden; pointerEvents: none; opacity: 0; margin: 0;'
20
- }
21
- })
22
- export class RdxSwitchInputDirective {
23
- protected readonly switchRoot = injectSwitch();
24
- }
@@ -1,127 +0,0 @@
1
- import { BooleanInput } from '@angular/cdk/coercion';
2
- import {
3
- booleanAttribute,
4
- computed,
5
- Directive,
6
- EventEmitter,
7
- inject,
8
- InjectionToken,
9
- input,
10
- InputSignalWithTransform,
11
- model,
12
- ModelSignal,
13
- Output
14
- } from '@angular/core';
15
- import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
16
-
17
- export const RdxSwitchToken = new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken');
18
-
19
- export function injectSwitch(): RdxSwitchRootDirective {
20
- return inject(RdxSwitchToken);
21
- }
22
-
23
- export interface SwitchProps {
24
- checked?: ModelSignal<boolean>;
25
- defaultChecked?: boolean;
26
- required?: InputSignalWithTransform<boolean, BooleanInput>;
27
- onCheckedChange?: EventEmitter<boolean>;
28
- }
29
-
30
- let idIterator = 0;
31
-
32
- @Directive({
33
- selector: 'button[rdxSwitchRoot]',
34
- exportAs: 'rdxSwitchRoot',
35
- standalone: true,
36
- providers: [
37
- { provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective },
38
- { provide: NG_VALUE_ACCESSOR, useExisting: RdxSwitchRootDirective, multi: true }
39
- ],
40
- host: {
41
- role: 'switch',
42
- type: 'button',
43
- '[id]': 'elementId()',
44
- '[attr.aria-checked]': 'checked()',
45
- '[attr.aria-required]': 'required',
46
- '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
47
- '[attr.data-disabled]': 'disabledState() ? "true" : null',
48
- '[attr.disabled]': 'disabledState() ? disabledState() : null',
49
-
50
- '(focus)': '_onTouched?.()',
51
- '(click)': 'toggle()'
52
- }
53
- })
54
- export class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {
55
- readonly id = input<string>(`rdx-switch-${idIterator++}`);
56
- protected readonly elementId = computed(() => (this.id() ? this.id() : null));
57
-
58
- // When true, indicates that the user must check
59
- // the switch before the owning form can be submitted.
60
- readonly required = input<boolean, BooleanInput>(false, {
61
- transform: booleanAttribute
62
- });
63
-
64
- // The controlled state of the switch
65
- readonly checked = model<boolean>(false);
66
-
67
- // When true, prevents the user from interacting with the switch.
68
- readonly disabled = input<boolean, BooleanInput>(false, {
69
- transform: booleanAttribute
70
- });
71
-
72
- /*
73
- * @ignore
74
- */
75
- readonly disabledState = computed(() => this.disabled());
76
-
77
- @Output() onCheckedChange = new EventEmitter<boolean>();
78
-
79
- /**
80
- * The method to be called in order to update ngModel.
81
- */
82
- _onChange?: (checked: boolean) => void;
83
-
84
- /**
85
- * onTouch function registered via registerOnTouch (ControlValueAccessor).
86
- */
87
- _onTouched?: () => void;
88
-
89
- /**
90
- * Registers a function to call when the checked state changes.
91
- * @param fn Function to call on change.
92
- */
93
- registerOnChange(fn: (checked: boolean) => void): void {
94
- this._onChange = fn;
95
- }
96
-
97
- /**
98
- * Registers a function to call when the component is touched.
99
- * @param fn Function to call on touch.
100
- */
101
- registerOnTouched(fn: () => void): void {
102
- this._onTouched = fn;
103
- }
104
-
105
- /**
106
- * Writes a new value to the model.
107
- * @param checked The new checked value.
108
- */
109
- writeValue(checked: boolean): void {
110
- this.checked.set(checked);
111
- }
112
-
113
- /**
114
- * Toggles the checked state of the switch.
115
- * If the switch is disabled, the function returns early.
116
- */
117
- protected toggle(): void {
118
- if (this.disabledState()) {
119
- return;
120
- }
121
-
122
- this.checked.set(!this.checked());
123
- this._onChange?.(this.checked());
124
-
125
- this.onCheckedChange.emit(this.checked());
126
- }
127
- }
@@ -1,15 +0,0 @@
1
- import { Directive } from '@angular/core';
2
- import { injectSwitch } from './switch-root.directive';
3
-
4
- @Directive({
5
- selector: 'span[rdxSwitchThumb]',
6
- exportAs: 'rdxSwitchThumb',
7
- standalone: true,
8
- host: {
9
- '[attr.data-disabled]': 'switchRoot.disabledState() ? "true" : null',
10
- '[attr.data-state]': 'switchRoot.checked() ? "checked" : "unchecked"'
11
- }
12
- })
13
- export class RdxSwitchThumbDirective {
14
- protected readonly switchRoot = injectSwitch();
15
- }
@@ -1,83 +0,0 @@
1
- import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
2
- import { switchExclude } from '../../../../apps/storybook-radix/docs/utils/storybook';
3
- import { RdxSwitchRootDirective } from '../src/switch-root.directive';
4
- import * as SwitchDirectiveStories from './switch.stories';
5
-
6
- <Meta title="Primitives/Switch" />
7
-
8
- # Switch
9
-
10
- #### A control that allows the user to toggle between checked and not checked.
11
-
12
- <Canvas sourceState="hidden" of={SwitchDirectiveStories.Default} />
13
-
14
- ## Features
15
-
16
- - ✅ Full keyboard navigation.
17
- - ✅ Can be controlled or uncontrolled.
18
-
19
- ## Import
20
-
21
- Get started with importing the directives:
22
-
23
- ```typescript
24
- import { RdxSwitchRootDirective, RdxSwitchThumbDirective, RdxSwitchInputDirective } from '@radix-ng/primitives/switch';
25
- ```
26
-
27
- ## Examples
28
-
29
- ```html
30
- <label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
31
- <button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
32
- <span rdxSwitchThumb></span>
33
- </button>
34
- ```
35
-
36
- ```html
37
- <label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
38
- <button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
39
- <input rdxSwitchInput />
40
- <span rdxSwitchThumb></span>
41
- </button>
42
- ```
43
-
44
- ## API Reference
45
-
46
- ### RdxSwitchRootDirective
47
-
48
- <ArgTypes exclude={switchExclude} of={RdxSwitchRootDirective} />
49
-
50
- <Markdown>
51
- {`
52
- | Data Attribute | Value |
53
- | ----------- | --------- |
54
- | [data-state] | "checked" or "unchecked" |
55
- | [data-disabled] | Present when disabled |
56
- `}
57
- </Markdown>
58
-
59
- ### ThumbDirective
60
-
61
- <Markdown>
62
- {`
63
- | Data Attribute | Value |
64
- | ----------- | --------- |
65
- | [data-state] | "checked" or "unchecked" |
66
- | [data-disabled] | Present when disabled |
67
- `}
68
- </Markdown>
69
-
70
- ## Accessibility
71
-
72
- Adheres to the [`switch` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/switch).
73
-
74
- ### Keyboard Interactions
75
-
76
- <Markdown>
77
- {`
78
- | Key | Description |
79
- | ----------- | --------- |
80
- | Space | Toggles the component's state. |
81
- | Enter | Toggles the component's state. |
82
- `}
83
- </Markdown>
@@ -1,149 +0,0 @@
1
- import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
2
- import { RdxLabelDirective } from '../../label';
3
- import { RdxSwitchInputDirective } from '../src/switch-input.directive';
4
- import { RdxSwitchRootDirective } from '../src/switch-root.directive';
5
- import { RdxSwitchThumbDirective } from '../src/switch-thumb.directive';
6
-
7
- export default {
8
- title: 'Primitives/Switch',
9
- decorators: [
10
- moduleMetadata({
11
- imports: [
12
- RdxLabelDirective,
13
- RdxSwitchRootDirective,
14
- RdxSwitchInputDirective,
15
- RdxSwitchThumbDirective
16
- ]
17
- }),
18
- componentWrapperDecorator(
19
- (story) =>
20
- `<div class="radix-themes light light-theme"
21
- data-radius="medium"
22
- data-scaling="100%">${story}</div>`
23
- )
24
- ]
25
- } as Meta;
26
-
27
- type Story = StoryObj;
28
-
29
- export const Default: Story = {
30
- render: () => ({
31
- template: `
32
- <style>
33
- button {
34
- all: unset;
35
- }
36
-
37
- .SwitchRoot {
38
- width: 42px;
39
- height: 25px;
40
- background-color: var(--black-a9);
41
- border-radius: 9999px;
42
- margin-left: 15px;
43
- position: relative;
44
- box-shadow: 0 2px 10px var(--black-a7);
45
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
46
- }
47
- .SwitchRoot:focus {
48
- box-shadow: 0 0 0 2px black;
49
- }
50
- .SwitchRoot[data-state='checked'] {
51
- background-color: black;
52
- }
53
-
54
- .SwitchThumb {
55
- display: block;
56
- width: 21px;
57
- height: 21px;
58
- background-color: white;
59
- border-radius: 9999px;
60
- box-shadow: 0 2px 2px var(--black-a7);
61
- transition: transform 100ms;
62
- transform: translateX(2px);
63
- will-change: transform;
64
- }
65
- .SwitchThumb[data-state='checked'] {
66
- transform: translateX(19px);
67
- }
68
-
69
- .Label {
70
- color: white;
71
- font-size: 15px;
72
- line-height: 1;
73
- display: flex;
74
- align-items: center;
75
- }
76
-
77
- </style>
78
-
79
- <label rdxLabel htmlFor="airplane-mode" class="Label">
80
- Airplane mode
81
- <button rdxSwitchRoot [(checked)]="checked" id="airplane-mode" class="SwitchRoot">
82
- <span rdxSwitchThumb class="SwitchThumb"></span>
83
- </button>
84
- </label>
85
- `
86
- })
87
- };
88
-
89
- export const DefaultInput: Story = {
90
- name: 'With Input',
91
- render: () => ({
92
- template: `
93
- <style>
94
- button {
95
- all: unset;
96
- }
97
-
98
- .SwitchRoot {
99
- width: 42px;
100
- height: 25px;
101
- background-color: var(--black-a9);
102
- border-radius: 9999px;
103
- margin-left: 15px;
104
- position: relative;
105
- box-shadow: 0 2px 10px var(--black-a7);
106
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
107
- }
108
- .SwitchRoot:focus {
109
- box-shadow: 0 0 0 2px black;
110
- }
111
- .SwitchRoot[data-state='checked'] {
112
- background-color: black;
113
- }
114
-
115
- .SwitchThumb {
116
- display: block;
117
- width: 21px;
118
- height: 21px;
119
- background-color: white;
120
- border-radius: 9999px;
121
- box-shadow: 0 2px 2px var(--black-a7);
122
- transition: transform 100ms;
123
- transform: translateX(2px);
124
- will-change: transform;
125
- }
126
- .SwitchThumb[data-state='checked'] {
127
- transform: translateX(19px);
128
- }
129
-
130
- .Label {
131
- color: white;
132
- font-size: 15px;
133
- line-height: 1;
134
- display: flex;
135
- align-items: center;
136
- }
137
-
138
- </style>
139
-
140
- <label rdxLabel htmlFor="airplane-mode" class="Label">
141
- Airplane mode
142
- <button rdxSwitchRoot [(checked)]="checked" id="airplane-mode" class="SwitchRoot">
143
- <input rdxSwitchInput />
144
- <span rdxSwitchThumb class="SwitchThumb"></span>
145
- </button>
146
- </label>
147
- `
148
- })
149
- };
@@ -1,35 +0,0 @@
1
- import { TestBed } from '@angular/core/testing';
2
- import { RdxTabsContextService } from '../src/tabs-context.service';
3
-
4
- describe('TabsContextService', () => {
5
- let service: RdxTabsContextService;
6
-
7
- beforeEach(() => {
8
- TestBed.configureTestingModule({});
9
- service = TestBed.inject(RdxTabsContextService);
10
- });
11
-
12
- it('should be created', () => {
13
- expect(service).toBeTruthy();
14
- });
15
-
16
- it('should generate a base ID', () => {
17
- const baseId = service.getBaseId();
18
- expect(baseId).toMatch(/^tabs-/);
19
- });
20
-
21
- it('should set and get the value correctly', () => {
22
- service.setValue('test');
23
- expect(service.value$()).toBe('test');
24
- });
25
-
26
- it('should set and get the orientation correctly', () => {
27
- service.setOrientation('vertical');
28
- expect(service.orientation$()).toBe('vertical');
29
- });
30
-
31
- it('should set and get the direction correctly', () => {
32
- service.setDir('rtl');
33
- expect(service.dir$()).toBe('rtl');
34
- });
35
- });
package/tabs/index.ts DELETED
@@ -1,26 +0,0 @@
1
- import { NgModule } from '@angular/core';
2
- import { RdxTabsContentDirective } from './src/tabs-content.directive';
3
- import { RdxTabsContextService } from './src/tabs-context.service';
4
- import { RdxTabsListDirective } from './src/tabs-list.directive';
5
- import { RdxTabsRootDirective } from './src/tabs-root.directive';
6
- import { RdxTabsTriggerDirective } from './src/tabs-trigger.directive';
7
-
8
- export * from './src/tabs-content.directive';
9
- export * from './src/tabs-context.service';
10
- export * from './src/tabs-list.directive';
11
- export * from './src/tabs-root.directive';
12
- export * from './src/tabs-trigger.directive';
13
-
14
- const tabsImports = [
15
- RdxTabsRootDirective,
16
- RdxTabsContentDirective,
17
- RdxTabsListDirective,
18
- RdxTabsTriggerDirective
19
- ];
20
-
21
- @NgModule({
22
- imports: [...tabsImports],
23
- exports: [...tabsImports],
24
- providers: [RdxTabsContextService]
25
- })
26
- export class RdxTabsModule {}
@@ -1,5 +0,0 @@
1
- {
2
- "lib": {
3
- "entryFile": "index.ts"
4
- }
5
- }
@@ -1,23 +0,0 @@
1
- import { computed, Directive, inject, input } from '@angular/core';
2
- import { TABS_CONTEXT_TOKEN } from './tabs-context.service';
3
-
4
- @Directive({
5
- selector: '[rdxTabsContent]',
6
- standalone: true,
7
- host: {
8
- role: 'tabpanel',
9
- tabindex: '0',
10
- '[id]': 'tabsContext.getBaseId()',
11
- '[attr.aria-labelledby]': 'tabsContext.getBaseId()',
12
- '[attr.data-state]': 'selected() ? "active" : "inactive"',
13
- '[attr.data-orientation]': 'tabsContext.orientation$()',
14
- '[hidden]': '!selected()'
15
- }
16
- })
17
- export class RdxTabsContentDirective {
18
- protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
19
-
20
- readonly value = input.required<string>();
21
-
22
- protected readonly selected = computed(() => this.tabsContext.value$() === this.value());
23
- }
@@ -1,43 +0,0 @@
1
- import { computed, Injectable, InjectionToken, signal } from '@angular/core';
2
-
3
- export const TABS_CONTEXT_TOKEN = new InjectionToken<RdxTabsContextService>('TabsContext');
4
-
5
- @Injectable({
6
- providedIn: 'root'
7
- })
8
- export class RdxTabsContextService {
9
- private baseId = this.generateId();
10
- private value = signal<string | undefined>(undefined);
11
- private orientation = signal<string>('horizontal');
12
- private dir = signal<string | undefined>(undefined);
13
- private activationMode = signal<string>('automatic');
14
-
15
- readonly value$ = computed(() => this.value());
16
- readonly orientation$ = computed(() => this.orientation());
17
- readonly dir$ = computed(() => this.dir());
18
- readonly activationMode$ = computed(() => this.activationMode());
19
-
20
- setValue(value: string) {
21
- this.value.set(value);
22
- }
23
-
24
- setOrientation(orientation: string) {
25
- this.orientation.set(orientation);
26
- }
27
-
28
- setDir(dir: string) {
29
- this.dir.set(dir);
30
- }
31
-
32
- setActivationMode(mode: string) {
33
- this.activationMode.set(mode);
34
- }
35
-
36
- getBaseId() {
37
- return this.baseId;
38
- }
39
-
40
- private generateId() {
41
- return `tabs-${Math.random().toString(36).substr(2, 9)}`;
42
- }
43
- }
@@ -1,21 +0,0 @@
1
- import { Directive, inject } from '@angular/core';
2
- import { TABS_CONTEXT_TOKEN } from './tabs-context.service';
3
-
4
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
- interface TabsListProps {
6
- // When true, keyboard navigation will loop from last tab to first, and vice versa.
7
- loop?: boolean;
8
- }
9
-
10
- @Directive({
11
- selector: '[rdxTabsList]',
12
- standalone: true,
13
- host: {
14
- role: 'tablist',
15
- '[attr.aria-orientation]': 'tabsContext.orientation$()',
16
- '[attr.data-orientation]': 'tabsContext.orientation$()'
17
- }
18
- })
19
- export class RdxTabsListDirective {
20
- protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
21
- }
@@ -1,70 +0,0 @@
1
- import { Directive, effect, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
2
- import { RdxTabsContextService, TABS_CONTEXT_TOKEN } from './tabs-context.service';
3
-
4
- export interface TabsProps {
5
- /** The value for the selected tab, if controlled */
6
- value?: string;
7
- /** The value of the tab to select by default, if uncontrolled */
8
- defaultValue?: string;
9
- /** A function called when a new tab is selected */
10
- onValueChange?: (value: string) => void;
11
- /**
12
- * The orientation the tabs are layed out.
13
- * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
14
- * @defaultValue horizontal
15
- */
16
- orientation?: string;
17
- /**
18
- * The direction of navigation between toolbar items.
19
- */
20
- dir?: string;
21
- /**
22
- * Whether a tab is activated automatically or manually.
23
- * @defaultValue automatic
24
- * */
25
- activationMode?: 'automatic' | 'manual';
26
- }
27
-
28
- @Directive({
29
- selector: '[rdxTabsRoot]',
30
- standalone: true,
31
- providers: [{ provide: TABS_CONTEXT_TOKEN, useExisting: RdxTabsContextService }],
32
- host: {
33
- '[attr.data-orientation]': 'orientation',
34
- '[attr.dir]': 'dir'
35
- }
36
- })
37
- export class RdxTabsRootDirective implements OnInit {
38
- private readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
39
-
40
- @Input() value?: string;
41
- @Input() defaultValue?: string;
42
- @Input() orientation = 'horizontal';
43
- @Input() dir?: string;
44
-
45
- // Event handler called when the value changes.
46
- @Output() onValueChange = new EventEmitter<string>();
47
-
48
- constructor() {
49
- effect(() => {
50
- const value = this.tabsContext.value$();
51
- if (value !== undefined) {
52
- this.onValueChange.emit(value);
53
- }
54
- });
55
- }
56
-
57
- ngOnInit() {
58
- this.tabsContext.setOrientation(this.orientation);
59
-
60
- if (this.dir) {
61
- this.tabsContext.setDir(this.dir);
62
- }
63
-
64
- if (this.value) {
65
- this.tabsContext.setValue(this.value);
66
- } else if (this.defaultValue) {
67
- this.tabsContext.setValue(this.defaultValue);
68
- }
69
- }
70
- }
@@ -1,55 +0,0 @@
1
- import { BooleanInput } from '@angular/cdk/coercion';
2
- import { booleanAttribute, computed, Directive, inject, input, InputSignalWithTransform } from '@angular/core';
3
- import { TABS_CONTEXT_TOKEN } from './tabs-context.service';
4
-
5
- interface TabsTriggerProps {
6
- // When true, prevents the user from interacting with the tab.
7
- disabled: InputSignalWithTransform<boolean, BooleanInput>;
8
- }
9
-
10
- @Directive({
11
- selector: '[rdxTabsTrigger]',
12
- standalone: true,
13
- host: {
14
- type: 'button',
15
- role: 'tab',
16
- '[id]': 'triggerId',
17
- '[attr.aria-selected]': 'selected()',
18
- '[attr.aria-controls]': 'contentId()',
19
- '[attr.data-disabled]': "disabled() ? '' : undefined",
20
- '[attr.data-state]': "selected() ? 'active' : 'inactive'",
21
- '(mousedown)': 'onMouseDown($event)',
22
- '(keydown)': 'onKeyDown($event)'
23
- }
24
- })
25
- export class RdxTabsTriggerDirective implements TabsTriggerProps {
26
- protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
27
-
28
- // A unique value that associates the trigger with a content.
29
- readonly value = input.required<string>();
30
-
31
- // When true, prevents the user from interacting with the tab.
32
- readonly disabled = input<boolean, BooleanInput>(false, {
33
- transform: booleanAttribute
34
- });
35
-
36
- protected readonly contentId = computed(() => `${this.tabsContext.getBaseId()}-content-${this.value()}`);
37
- protected readonly triggerId = computed(() => `${this.tabsContext.getBaseId()}-trigger-${this.value}`);
38
-
39
- protected readonly selected = computed(() => this.tabsContext.value$() === this.value());
40
-
41
- protected onMouseDown(event: MouseEvent) {
42
- if (!this.disabled() && event.button === 0 && !event.ctrlKey) {
43
- this.tabsContext?.setValue(this.value());
44
- } else {
45
- // prevent focus to avoid accidental activation
46
- event.preventDefault();
47
- }
48
- }
49
-
50
- protected onKeyDown(event: KeyboardEvent) {
51
- if ([' ', 'Enter'].includes(event.key)) {
52
- this.tabsContext?.setValue(this.value());
53
- }
54
- }
55
- }