@raintonic/formaui 0.4.0 → 0.9.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 (238) hide show
  1. package/CHANGELOG.md +80 -35
  2. package/README.md +22 -26
  3. package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs +39 -41
  4. package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs.map +1 -1
  5. package/fesm2022/raintonic-formaui-cdk-form-field.mjs +207 -3
  6. package/fesm2022/raintonic-formaui-cdk-form-field.mjs.map +1 -1
  7. package/fesm2022/raintonic-formaui-cdk-overlay.mjs +19 -1
  8. package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
  9. package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs +5 -12
  10. package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs.map +1 -1
  11. package/fesm2022/raintonic-formaui-components-accordion.mjs +8 -5
  12. package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
  13. package/fesm2022/raintonic-formaui-components-alert.mjs +16 -2
  14. package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
  15. package/fesm2022/raintonic-formaui-components-autocomplete.mjs +255 -462
  16. package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
  17. package/fesm2022/raintonic-formaui-components-avatar.mjs +34 -59
  18. package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
  19. package/fesm2022/raintonic-formaui-components-badge.mjs +2 -2
  20. package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
  21. package/fesm2022/raintonic-formaui-components-breadcrumb.mjs +4 -4
  22. package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map +1 -1
  23. package/fesm2022/raintonic-formaui-components-button-group.mjs +2 -2
  24. package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
  25. package/fesm2022/raintonic-formaui-components-button.mjs +15 -20
  26. package/fesm2022/raintonic-formaui-components-button.mjs.map +1 -1
  27. package/fesm2022/raintonic-formaui-components-card.mjs +2 -2
  28. package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
  29. package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
  30. package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
  31. package/fesm2022/raintonic-formaui-components-chip.mjs +97 -0
  32. package/fesm2022/raintonic-formaui-components-chip.mjs.map +1 -0
  33. package/fesm2022/raintonic-formaui-components-data-table.mjs +69 -29
  34. package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
  35. package/fesm2022/raintonic-formaui-components-date-picker.mjs +223 -144
  36. package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
  37. package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
  38. package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
  39. package/fesm2022/raintonic-formaui-components-drawer.mjs +2 -2
  40. package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
  41. package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs +888 -0
  42. package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs.map +1 -0
  43. package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs +774 -0
  44. package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs.map +1 -0
  45. package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
  46. package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
  47. package/fesm2022/raintonic-formaui-components-file-upload.mjs +2 -2
  48. package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
  49. package/fesm2022/raintonic-formaui-components-form-field.mjs +81 -50
  50. package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
  51. package/fesm2022/raintonic-formaui-components-icon.mjs +2 -2
  52. package/fesm2022/raintonic-formaui-components-icon.mjs.map +1 -1
  53. package/fesm2022/raintonic-formaui-components-input.mjs +47 -12
  54. package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
  55. package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
  56. package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
  57. package/fesm2022/raintonic-formaui-components-number-input.mjs +20 -12
  58. package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
  59. package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
  60. package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
  61. package/fesm2022/raintonic-formaui-components-password-input.mjs +35 -110
  62. package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
  63. package/fesm2022/raintonic-formaui-components-popover.mjs +3 -2
  64. package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
  65. package/fesm2022/raintonic-formaui-components-progressbar.mjs +3 -2
  66. package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
  67. package/fesm2022/raintonic-formaui-components-radio.mjs +5 -6
  68. package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
  69. package/fesm2022/raintonic-formaui-components-select.mjs +257 -412
  70. package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
  71. package/fesm2022/raintonic-formaui-components-side-panel.mjs +2 -2
  72. package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
  73. package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs +525 -0
  74. package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs.map +1 -0
  75. package/fesm2022/raintonic-formaui-components-skeleton.mjs +2 -2
  76. package/fesm2022/raintonic-formaui-components-skeleton.mjs.map +1 -1
  77. package/fesm2022/raintonic-formaui-components-slider.mjs +2 -2
  78. package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
  79. package/fesm2022/raintonic-formaui-components-spinner.mjs +2 -2
  80. package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
  81. package/fesm2022/raintonic-formaui-components-stepper.mjs +50 -45
  82. package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
  83. package/fesm2022/raintonic-formaui-components-strength-meter.mjs +149 -0
  84. package/fesm2022/raintonic-formaui-components-strength-meter.mjs.map +1 -0
  85. package/fesm2022/raintonic-formaui-components-tab.mjs +2 -2
  86. package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
  87. package/fesm2022/raintonic-formaui-components-time-picker.mjs +194 -154
  88. package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
  89. package/fesm2022/raintonic-formaui-components-toggle-group.mjs +302 -0
  90. package/fesm2022/raintonic-formaui-components-toggle-group.mjs.map +1 -0
  91. package/fesm2022/raintonic-formaui-components-toggle.mjs +2 -2
  92. package/fesm2022/raintonic-formaui-components-toggle.mjs.map +1 -1
  93. package/fesm2022/raintonic-formaui-components-toolbar.mjs +2 -2
  94. package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
  95. package/fesm2022/raintonic-formaui-components-tooltip.mjs +10 -4
  96. package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
  97. package/fesm2022/raintonic-formaui-components-topbar.mjs +60 -0
  98. package/fesm2022/raintonic-formaui-components-topbar.mjs.map +1 -0
  99. package/fesm2022/raintonic-formaui-components-tree-select.mjs +59 -69
  100. package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
  101. package/fesm2022/raintonic-formaui-components-tree-table.mjs +2 -2
  102. package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
  103. package/fesm2022/raintonic-formaui-components-tree.mjs +31 -5
  104. package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
  105. package/fesm2022/raintonic-formaui-core.mjs +279 -1
  106. package/fesm2022/raintonic-formaui-core.mjs.map +1 -1
  107. package/fesm2022/raintonic-formaui-services-breakpoint.mjs +93 -0
  108. package/fesm2022/raintonic-formaui-services-breakpoint.mjs.map +1 -0
  109. package/fesm2022/raintonic-formaui-services-dialog.mjs +314 -16
  110. package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
  111. package/fesm2022/raintonic-formaui-services-notification.mjs +93 -29
  112. package/fesm2022/raintonic-formaui-services-notification.mjs.map +1 -1
  113. package/fesm2022/raintonic-formaui-services-theme.mjs +46 -196
  114. package/fesm2022/raintonic-formaui-services-theme.mjs.map +1 -1
  115. package/fesm2022/raintonic-formaui.mjs +1 -1
  116. package/fesm2022/raintonic-formaui.mjs.map +1 -1
  117. package/llms-full.txt +2329 -450
  118. package/llms.txt +36 -33
  119. package/package.json +42 -19
  120. package/styles/fonts/Geist-Bold.woff2 +0 -0
  121. package/styles/fonts/Geist-Italic.woff2 +0 -0
  122. package/styles/fonts/Geist-Light.woff2 +0 -0
  123. package/styles/fonts/Geist-Medium.woff2 +0 -0
  124. package/styles/fonts/Geist-Regular.woff2 +0 -0
  125. package/styles/fonts/Geist-SemiBold.woff2 +0 -0
  126. package/styles/fonts/GeistMono-Regular.woff2 +0 -0
  127. package/styles/generated/_tokens.scss +906 -0
  128. package/styles/index.scss +11 -10
  129. package/styles/partials/_brand.scss +46 -0
  130. package/styles/partials/_constants.scss +22 -20
  131. package/styles/partials/_fonts.scss +54 -10
  132. package/styles/partials/_grid.scss +29 -18
  133. package/styles/partials/_mixins.scss +69 -27
  134. package/styles/partials/_motion.scss +28 -33
  135. package/styles/partials/_theme.scss +28 -255
  136. package/styles/partials/_type.scss +117 -0
  137. package/styles/partials/_typography.scss +45 -45
  138. package/styles/partials/_utilities.scss +198 -98
  139. package/styles/partials/components/_button.scss +144 -75
  140. package/styles/partials/components/_dialog.scss +181 -180
  141. package/styles/partials/components/_overlay.scss +87 -87
  142. package/styles/partials/themes/_dark.scss +3 -268
  143. package/styles/partials/themes/_light.scss +4 -268
  144. package/styles/styles.css +7744 -0
  145. package/styles/styles.entry.scss +3 -0
  146. package/styles/utilities.css +4802 -0
  147. package/styles/utilities.entry.scss +3 -0
  148. package/types/raintonic-formaui-cdk-drag-drop.d.ts +0 -1
  149. package/types/raintonic-formaui-cdk-drag-drop.d.ts.map +1 -1
  150. package/types/raintonic-formaui-cdk-form-field.d.ts +118 -2
  151. package/types/raintonic-formaui-cdk-form-field.d.ts.map +1 -1
  152. package/types/raintonic-formaui-cdk-overlay.d.ts +2 -0
  153. package/types/raintonic-formaui-cdk-overlay.d.ts.map +1 -1
  154. package/types/raintonic-formaui-cdk-virtual-scroll.d.ts +0 -1
  155. package/types/raintonic-formaui-cdk-virtual-scroll.d.ts.map +1 -1
  156. package/types/raintonic-formaui-components-accordion.d.ts +1 -1
  157. package/types/raintonic-formaui-components-accordion.d.ts.map +1 -1
  158. package/types/raintonic-formaui-components-alert.d.ts +6 -1
  159. package/types/raintonic-formaui-components-alert.d.ts.map +1 -1
  160. package/types/raintonic-formaui-components-autocomplete.d.ts +73 -116
  161. package/types/raintonic-formaui-components-autocomplete.d.ts.map +1 -1
  162. package/types/raintonic-formaui-components-avatar.d.ts +13 -31
  163. package/types/raintonic-formaui-components-avatar.d.ts.map +1 -1
  164. package/types/raintonic-formaui-components-button.d.ts +4 -10
  165. package/types/raintonic-formaui-components-button.d.ts.map +1 -1
  166. package/types/raintonic-formaui-components-chip.d.ts +43 -0
  167. package/types/raintonic-formaui-components-chip.d.ts.map +1 -0
  168. package/types/raintonic-formaui-components-data-table.d.ts +48 -11
  169. package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
  170. package/types/raintonic-formaui-components-date-picker.d.ts +59 -23
  171. package/types/raintonic-formaui-components-date-picker.d.ts.map +1 -1
  172. package/types/raintonic-formaui-components-dropdown-menu.d.ts +394 -0
  173. package/types/raintonic-formaui-components-dropdown-menu.d.ts.map +1 -0
  174. package/types/raintonic-formaui-components-dual-tier-navigation.d.ts +87 -0
  175. package/types/raintonic-formaui-components-dual-tier-navigation.d.ts.map +1 -0
  176. package/types/raintonic-formaui-components-form-field.d.ts +51 -21
  177. package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
  178. package/types/raintonic-formaui-components-input.d.ts +20 -11
  179. package/types/raintonic-formaui-components-input.d.ts.map +1 -1
  180. package/types/raintonic-formaui-components-number-input.d.ts +5 -3
  181. package/types/raintonic-formaui-components-number-input.d.ts.map +1 -1
  182. package/types/raintonic-formaui-components-password-input.d.ts +18 -32
  183. package/types/raintonic-formaui-components-password-input.d.ts.map +1 -1
  184. package/types/raintonic-formaui-components-popover.d.ts.map +1 -1
  185. package/types/raintonic-formaui-components-progressbar.d.ts +1 -1
  186. package/types/raintonic-formaui-components-progressbar.d.ts.map +1 -1
  187. package/types/raintonic-formaui-components-radio.d.ts +1 -2
  188. package/types/raintonic-formaui-components-radio.d.ts.map +1 -1
  189. package/types/raintonic-formaui-components-select.d.ts +107 -76
  190. package/types/raintonic-formaui-components-select.d.ts.map +1 -1
  191. package/types/raintonic-formaui-components-sidebar-nav-menu.d.ts +223 -0
  192. package/types/raintonic-formaui-components-sidebar-nav-menu.d.ts.map +1 -0
  193. package/types/raintonic-formaui-components-stepper.d.ts +4 -2
  194. package/types/raintonic-formaui-components-stepper.d.ts.map +1 -1
  195. package/types/raintonic-formaui-components-strength-meter.d.ts +78 -0
  196. package/types/raintonic-formaui-components-strength-meter.d.ts.map +1 -0
  197. package/types/raintonic-formaui-components-time-picker.d.ts +44 -24
  198. package/types/raintonic-formaui-components-time-picker.d.ts.map +1 -1
  199. package/types/raintonic-formaui-components-toggle-group.d.ts +100 -0
  200. package/types/raintonic-formaui-components-toggle-group.d.ts.map +1 -0
  201. package/types/raintonic-formaui-components-tooltip.d.ts +2 -1
  202. package/types/raintonic-formaui-components-tooltip.d.ts.map +1 -1
  203. package/types/raintonic-formaui-components-topbar.d.ts +48 -0
  204. package/types/raintonic-formaui-components-topbar.d.ts.map +1 -0
  205. package/types/raintonic-formaui-components-tree-select.d.ts +25 -9
  206. package/types/raintonic-formaui-components-tree-select.d.ts.map +1 -1
  207. package/types/raintonic-formaui-components-tree.d.ts +12 -1
  208. package/types/raintonic-formaui-components-tree.d.ts.map +1 -1
  209. package/types/raintonic-formaui-core.d.ts +243 -5
  210. package/types/raintonic-formaui-core.d.ts.map +1 -1
  211. package/types/raintonic-formaui-services-breakpoint.d.ts +44 -0
  212. package/types/raintonic-formaui-services-breakpoint.d.ts.map +1 -0
  213. package/types/raintonic-formaui-services-dialog.d.ts +141 -2
  214. package/types/raintonic-formaui-services-dialog.d.ts.map +1 -1
  215. package/types/raintonic-formaui-services-notification.d.ts +24 -2
  216. package/types/raintonic-formaui-services-notification.d.ts.map +1 -1
  217. package/types/raintonic-formaui-services-theme.d.ts +13 -103
  218. package/types/raintonic-formaui-services-theme.d.ts.map +1 -1
  219. package/types/raintonic-formaui.d.ts +1 -1
  220. package/fesm2022/raintonic-formaui-components-big-menu.mjs +0 -86
  221. package/fesm2022/raintonic-formaui-components-big-menu.mjs.map +0 -1
  222. package/fesm2022/raintonic-formaui-components-menu.mjs +0 -896
  223. package/fesm2022/raintonic-formaui-components-menu.mjs.map +0 -1
  224. package/fesm2022/raintonic-formaui-components-sidebar.mjs +0 -275
  225. package/fesm2022/raintonic-formaui-components-sidebar.mjs.map +0 -1
  226. package/fesm2022/raintonic-formaui-components-tag.mjs +0 -95
  227. package/fesm2022/raintonic-formaui-components-tag.mjs.map +0 -1
  228. package/styles/_fonts-entry.scss +0 -3
  229. package/styles/fonts/inter-tight-latin-italic.woff2 +0 -0
  230. package/styles/fonts/inter-tight-latin.woff2 +0 -0
  231. package/types/raintonic-formaui-components-big-menu.d.ts +0 -73
  232. package/types/raintonic-formaui-components-big-menu.d.ts.map +0 -1
  233. package/types/raintonic-formaui-components-menu.d.ts +0 -403
  234. package/types/raintonic-formaui-components-menu.d.ts.map +0 -1
  235. package/types/raintonic-formaui-components-sidebar.d.ts +0 -185
  236. package/types/raintonic-formaui-components-sidebar.d.ts.map +0 -1
  237. package/types/raintonic-formaui-components-tag.d.ts +0 -43
  238. package/types/raintonic-formaui-components-tag.d.ts.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"raintonic-formaui-components-toggle-group.mjs","sources":["../../../lib/components/toggle-group/toggle-group.types.ts","../../../lib/components/toggle-group/toggle-item/toggle-item.component.ts","../../../lib/components/toggle-group/toggle-item/toggle-item.component.html","../../../lib/components/toggle-group/toggle-group/toggle-group.component.ts","../../../lib/components/toggle-group/raintonic-formaui-components-toggle-group.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\nimport type { FuiToggleItemComponent } from './toggle-item/toggle-item.component';\r\n\r\nexport interface FuiToggleGroupChange<T = unknown> {\r\n source: FuiToggleItemComponent;\r\n value: T;\r\n}\r\n\r\nexport interface FuiToggleGroupHost {\r\n disabled(): boolean;\r\n selectValue(value: unknown, source: FuiToggleItemComponent): void;\r\n setFocused(focused: boolean): void;\r\n selectAdjacentButton(direction: 1 | -1): void;\r\n selectFirstButton(): void;\r\n selectLastButton(): void;\r\n}\r\n\r\nexport const FUI_TOGGLE_GROUP = new InjectionToken<FuiToggleGroupHost>('FUI_TOGGLE_GROUP');\r\n\r\nexport type FuiToggleGroupSize = 'sm' | 'md' | 'lg';\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n computed,\r\n signal,\r\n ElementRef,\r\n viewChild,\r\n inject,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { FUI_TOGGLE_GROUP } from '../toggle-group.types';\r\n\r\n@Component({\r\n selector: 'fui-toggle-item',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './toggle-item.component.html',\r\n styleUrl: './toggle-item.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n '[class]': 'computedClasses()',\r\n '[attr.id]': 'id',\r\n },\r\n})\r\nexport class FuiToggleItemComponent {\r\n static nextId = 0;\r\n\r\n readonly value = input.required<unknown>();\r\n /** @docs-private — size is controlled by the parent fui-toggle-group. Only effective when used standalone outside a group. */\r\n readonly size = input('md');\r\n readonly disabledInput = input<boolean, unknown>(false, {\r\n alias: 'disabled',\r\n transform: booleanAttribute,\r\n });\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n readonly ariaLabelledby = input<string | null>(null, {\r\n alias: 'aria-labelledby',\r\n });\r\n\r\n // Internal state (set by parent group)\r\n readonly _checked = signal(false);\r\n readonly _disabled = signal(false);\r\n readonly _focused = signal(false);\r\n readonly _name = signal('');\r\n readonly _tabIndex = signal(-1);\r\n readonly _groupSize = signal('');\r\n\r\n readonly computedClasses = computed(() => {\r\n const checkedClass = this._checked() && 'fui-toggle-item--checked';\r\n const disabledClass = this._disabled() && 'fui-toggle-item--disabled';\r\n const focusedClass = this._focused() && 'fui-toggle-item--focused';\r\n const size = this._groupSize() || this.size(); // groupSize takes precedence\r\n return ['fui-toggle-item', `fui-toggle-item-size--${size}`, checkedClass, disabledClass, focusedClass]\r\n .filter(Boolean)\r\n .join(' ');\r\n });\r\n\r\n private _uid = `fui-toggle-item-${FuiToggleItemComponent.nextId++}`;\r\n readonly id = this._uid;\r\n\r\n private _toggleGroup = inject(FUI_TOGGLE_GROUP, { optional: true });\r\n\r\n readonly buttonElement = viewChild<ElementRef<HTMLButtonElement>>('buttonElement');\r\n\r\n readonly isDisabled = computed(\r\n () => this._disabled() || this.disabledInput() || (this._toggleGroup?.disabled() ?? false),\r\n );\r\n\r\n onClick(): void {\r\n if (this.isDisabled()) return;\r\n if (this._toggleGroup) {\r\n this._toggleGroup.selectValue(this.value(), this);\r\n }\r\n }\r\n\r\n onFocus(): void {\r\n this._focused.set(true);\r\n if (this._toggleGroup) this._toggleGroup.setFocused(true);\r\n }\r\n\r\n onBlur(): void {\r\n this._focused.set(false);\r\n if (this._toggleGroup) this._toggleGroup.setFocused(false);\r\n }\r\n\r\n onKeydown(event: KeyboardEvent): void {\r\n if (this.isDisabled() || !this._toggleGroup) return;\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n case 'ArrowRight':\r\n event.preventDefault();\r\n this._toggleGroup.selectAdjacentButton(1);\r\n break;\r\n case 'ArrowUp':\r\n case 'ArrowLeft':\r\n event.preventDefault();\r\n this._toggleGroup.selectAdjacentButton(-1);\r\n break;\r\n case 'Home':\r\n event.preventDefault();\r\n this._toggleGroup.selectFirstButton();\r\n break;\r\n case 'End':\r\n event.preventDefault();\r\n this._toggleGroup.selectLastButton();\r\n break;\r\n case 'Enter':\r\n case ' ':\r\n event.preventDefault();\r\n this._toggleGroup.selectValue(this.value(), this);\r\n break;\r\n }\r\n }\r\n\r\n focus(): void {\r\n this.buttonElement()?.nativeElement.focus();\r\n }\r\n}\r\n","<button\r\n #buttonElement\r\n type=\"button\"\r\n class=\"fui-toggle-item__native\"\r\n role=\"radio\"\r\n [attr.name]=\"_name()\"\r\n [attr.value]=\"value()\"\r\n [disabled]=\"isDisabled()\"\r\n [attr.aria-checked]=\"_checked()\"\r\n [attr.aria-disabled]=\"isDisabled() || null\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.tabindex]=\"_tabIndex()\"\r\n (click)=\"onClick()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keydown)=\"onKeydown($event)\"\r\n>\r\n <span class=\"fui-toggle-item__content\">\r\n <ng-content></ng-content>\r\n </span>\r\n</button>\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n contentChildren,\r\n OutputEmitterRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport {\r\n injectNgControl,\r\n updateErrorState,\r\n syncRequiredState,\r\n syncNgControlDisabled,\r\n} from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiToggleGroupChange, FUI_TOGGLE_GROUP } from '../toggle-group.types';\r\nimport { FuiToggleGroupSize } from '../toggle-group.types';\r\nimport { FuiToggleItemComponent } from '../toggle-item/toggle-item.component';\r\n\r\n@Component({\r\n selector: 'fui-toggle-group',\r\n standalone: true,\r\n imports: [],\r\n template: `<ng-content></ng-content>`,\r\n styleUrl: './toggle-group.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toggle-group',\r\n '[class.fui-toggle-group--disabled]': 'disabled()',\r\n '[class.fui-toggle-group--error]': 'errorState()',\r\n '[attr.role]': '\"radiogroup\"',\r\n '[attr.aria-label]': 'ariaLabel()',\r\n '[attr.aria-labelledby]': 'ariaLabelledby()',\r\n },\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: FuiToggleGroupComponent,\r\n multi: true,\r\n },\r\n { provide: FUI_TOGGLE_GROUP, useExisting: FuiToggleGroupComponent },\r\n ],\r\n})\r\nexport class FuiToggleGroupComponent implements ControlValueAccessor, DoCheck, OnDestroy {\r\n private static _counter = 0;\r\n readonly controlType = 'fui-toggle-group';\r\n\r\n // Inputs\r\n readonly name = input(`fui-toggle-group-${FuiToggleGroupComponent._counter++}`);\r\n readonly disabledInput = input<boolean, unknown>(false, {\r\n alias: 'disabled',\r\n transform: booleanAttribute,\r\n });\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n readonly ariaLabelledby = input<string | null>(null, {\r\n alias: 'aria-labelledby',\r\n });\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n readonly size = input<FuiToggleGroupSize>('md');\r\n\r\n // Outputs\r\n readonly change: OutputEmitterRef<FuiToggleGroupChange> = output();\r\n\r\n // Content children\r\n readonly toggleItems = contentChildren(FuiToggleItemComponent);\r\n\r\n // Internal state\r\n private readonly _value: WritableSignal<unknown> = signal(null);\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n\r\n readonly value: Signal<unknown> = this._value.asReadonly();\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n readonly errorState = this._errorState.asReadonly();\r\n readonly required: Signal<boolean> = computed(() => this._required());\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n\r\n readonly stateChanges = new Subject<void>();\r\n readonly id = `fui-toggle-group-${FuiToggleGroupComponent._counter++}`;\r\n\r\n // Form control\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n private _onChange: (value: unknown) => void = () => {\r\n /* noop */\r\n };\r\n private _onTouched: () => void = () => {\r\n /* noop */\r\n };\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n // Sync toggle items when they change or value changes\r\n effect(() => {\r\n const items = this.toggleItems();\r\n const currentValue = this._value();\r\n const groupName = this.name();\r\n const groupDisabled = this.disabled();\r\n const groupSize = this.size();\r\n\r\n items.forEach((btn, idx) => {\r\n btn._name.set(groupName);\r\n btn._checked.set(btn.value() === currentValue);\r\n btn._disabled.set(groupDisabled);\r\n btn._groupSize.set(groupSize);\r\n // Roving tabindex: only selected (or first if none selected) gets 0\r\n if (btn.value() === currentValue) {\r\n btn._tabIndex.set(0);\r\n } else if (currentValue == null && idx === 0) {\r\n btn._tabIndex.set(0);\r\n } else {\r\n btn._tabIndex.set(-1);\r\n }\r\n });\r\n });\r\n\r\n effect(() => {\r\n this._value();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // CVA\r\n writeValue(value: unknown): void {\r\n this._value.set(value);\r\n this.stateChanges.next();\r\n }\r\n\r\n registerOnChange(fn: (value: unknown) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n // Called by toggle items when selected\r\n selectValue(value: unknown, source: FuiToggleItemComponent): void {\r\n if (this.disabled()) return;\r\n const oldValue = this._value();\r\n if (oldValue === value) return; // no-op selecting same value\r\n this._value.set(value);\r\n this._onChange(value);\r\n this.change.emit({ source, value });\r\n this.stateChanges.next();\r\n }\r\n\r\n setFocused(focused: boolean): void {\r\n this._focused.set(focused);\r\n if (!focused) this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n\r\n // Keyboard navigation - select adjacent item\r\n selectAdjacentButton(direction: 1 | -1): void {\r\n const items = this.toggleItems();\r\n if (items.length === 0) return;\r\n\r\n const enabledItems = items.filter((b) => !b.isDisabled());\r\n if (enabledItems.length === 0) return;\r\n\r\n const currentIdx = enabledItems.findIndex((b) => b._checked());\r\n let nextIdx: number;\r\n if (currentIdx === -1) {\r\n nextIdx = direction === 1 ? 0 : enabledItems.length - 1;\r\n } else {\r\n nextIdx = (currentIdx + direction + enabledItems.length) % enabledItems.length;\r\n }\r\n\r\n const nextItem = enabledItems[nextIdx];\r\n this.selectValue(nextItem.value(), nextItem);\r\n nextItem.focus();\r\n }\r\n\r\n selectFirstButton(): void {\r\n const items = this.toggleItems();\r\n if (items.length === 0) return;\r\n\r\n const enabledItems = items.filter((b) => !b.isDisabled());\r\n if (enabledItems.length === 0) return;\r\n\r\n const firstItem = enabledItems[0];\r\n this.selectValue(firstItem.value(), firstItem);\r\n firstItem.focus();\r\n }\r\n\r\n selectLastButton(): void {\r\n const items = this.toggleItems();\r\n if (items.length === 0) return;\r\n\r\n const enabledItems = items.filter((b) => !b.isDisabled());\r\n if (enabledItems.length === 0) return;\r\n\r\n const lastItem = enabledItems[enabledItems.length - 1];\r\n this.selectValue(lastItem.value(), lastItem);\r\n lastItem.focus();\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -145,7 +145,7 @@ class FuiToggleComponent {
145
145
  this.inputElement()?.nativeElement.focus();
146
146
  }
147
147
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
148
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiToggleComponent, isStandalone: true, selector: "fui-toggle", inputs: { checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.fui-toggle--checked": "checked()", "class.fui-toggle--disabled": "disabled()", "class.fui-toggle--focused": "focused()", "class.fui-toggle--sm": "size() === \"sm\"", "class.fui-toggle--md": "size() === \"md\"", "class.fui-toggle--label-before": "labelPosition() === \"before\"", "class.fui-toggle--error": "errorState()", "attr.id": "id", "attr.tabindex": "null" }, classAttribute: "fui-toggle" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FuiToggleComponent, multi: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"fui-toggle__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-toggle__track\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n class=\"fui-toggle__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <span class=\"fui-toggle__thumb\"></span>\r\n </span>\r\n\r\n <span class=\"fui-toggle__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-toggle{display:inline-flex;align-items:center}.fui-toggle__container{display:inline-flex;align-items:center;gap:var(--fui-gap-12, .75rem);cursor:pointer}.fui-toggle__track{position:relative;width:2.75rem;height:1.5rem;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-60, #94a3b8);transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-toggle__native-control{position:absolute;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.fui-toggle__track:has(.fui-toggle__native-control:focus-visible){outline:2px solid var(--fui-primary);outline-offset:2px}.fui-toggle__thumb{position:absolute;top:50%;left:3px;width:1.125rem;height:1.125rem;border-radius:50%;background-color:#fff;transform:translateY(-50%);transition:left var(--fui-duration-fast-02, .15s) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms;pointer-events:none}.fui-toggle--checked .fui-toggle__track{background-color:var(--fui-primary)}.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - 1.125rem - 3px)}.fui-toggle--sm .fui-toggle__track{width:2rem;height:1.125rem}.fui-toggle--sm .fui-toggle__thumb{width:.875rem;height:.875rem}.fui-toggle--sm.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - .875rem - 3px)}.fui-toggle--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38)}.fui-toggle--disabled .fui-toggle__container{cursor:not-allowed}.fui-toggle--error .fui-toggle__track{background-color:var(--fui-state-error)}.fui-toggle__label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary);-webkit-user-select:none;user-select:none}.fui-toggle--label-before .fui-toggle__container{flex-direction:row-reverse}@media(prefers-contrast:high){.fui-toggle__track{border:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-toggle__thumb,.fui-toggle__track{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
148
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiToggleComponent, isStandalone: true, selector: "fui-toggle", inputs: { checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.fui-toggle--checked": "checked()", "class.fui-toggle--disabled": "disabled()", "class.fui-toggle--focused": "focused()", "class.fui-toggle--sm": "size() === \"sm\"", "class.fui-toggle--md": "size() === \"md\"", "class.fui-toggle--label-before": "labelPosition() === \"before\"", "class.fui-toggle--error": "errorState()", "attr.id": "id", "attr.tabindex": "null" }, classAttribute: "fui-toggle" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FuiToggleComponent, multi: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"fui-toggle__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-toggle__track\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n class=\"fui-toggle__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <span class=\"fui-toggle__thumb\"></span>\r\n </span>\r\n\r\n <span class=\"fui-toggle__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-toggle{display:inline-flex;align-items:center}.fui-toggle__container{display:inline-flex;align-items:center;gap:var(--fui-spacing-6, .75rem);cursor:pointer}.fui-toggle__track{position:relative;width:2.75rem;height:1.5rem;border-radius:var(--fui-radius-pill, 999px);background-color:var(--fui-neutral-60, #94a3b8);transition-property:background-color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-toggle__native-control{position:absolute;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.fui-toggle__track:has(.fui-toggle__native-control:focus-visible){outline:2px solid var(--fui-primary-10)}.fui-toggle__thumb{position:absolute;top:50%;left:3px;width:1.125rem;height:1.125rem;border-radius:50%;background-color:#fff;transform:translateY(-50%);transition-property:left;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-delay:0ms;pointer-events:none}.fui-toggle--checked .fui-toggle__track{background-color:var(--fui-primary-bg)}.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - 1.125rem - 3px)}.fui-toggle--sm .fui-toggle__track{width:2rem;height:1.125rem}.fui-toggle--sm .fui-toggle__thumb{width:.875rem;height:.875rem}.fui-toggle--sm.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - .875rem - 3px)}.fui-toggle--disabled{cursor:not-allowed;opacity:var(--fui-state-disabled-opacity, .38)}.fui-toggle--disabled .fui-toggle__container{cursor:not-allowed}.fui-toggle--error .fui-toggle__track{background-color:var(--fui-fill-error)}.fui-toggle__label{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);-webkit-user-select:none;user-select:none}.fui-toggle--label-before .fui-toggle__container{flex-direction:row-reverse}@media(prefers-contrast:high){.fui-toggle__track{border:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-toggle__thumb,.fui-toggle__track{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
149
149
  }
150
150
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToggleComponent, decorators: [{
151
151
  type: Component,
@@ -160,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
160
160
  '[class.fui-toggle--error]': 'errorState()',
161
161
  '[attr.id]': 'id',
162
162
  '[attr.tabindex]': 'null',
163
- }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FuiToggleComponent, multi: true }], template: "<label class=\"fui-toggle__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-toggle__track\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n class=\"fui-toggle__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <span class=\"fui-toggle__thumb\"></span>\r\n </span>\r\n\r\n <span class=\"fui-toggle__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-toggle{display:inline-flex;align-items:center}.fui-toggle__container{display:inline-flex;align-items:center;gap:var(--fui-gap-12, .75rem);cursor:pointer}.fui-toggle__track{position:relative;width:2.75rem;height:1.5rem;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-60, #94a3b8);transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-toggle__native-control{position:absolute;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.fui-toggle__track:has(.fui-toggle__native-control:focus-visible){outline:2px solid var(--fui-primary);outline-offset:2px}.fui-toggle__thumb{position:absolute;top:50%;left:3px;width:1.125rem;height:1.125rem;border-radius:50%;background-color:#fff;transform:translateY(-50%);transition:left var(--fui-duration-fast-02, .15s) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms;pointer-events:none}.fui-toggle--checked .fui-toggle__track{background-color:var(--fui-primary)}.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - 1.125rem - 3px)}.fui-toggle--sm .fui-toggle__track{width:2rem;height:1.125rem}.fui-toggle--sm .fui-toggle__thumb{width:.875rem;height:.875rem}.fui-toggle--sm.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - .875rem - 3px)}.fui-toggle--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38)}.fui-toggle--disabled .fui-toggle__container{cursor:not-allowed}.fui-toggle--error .fui-toggle__track{background-color:var(--fui-state-error)}.fui-toggle__label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary);-webkit-user-select:none;user-select:none}.fui-toggle--label-before .fui-toggle__container{flex-direction:row-reverse}@media(prefers-contrast:high){.fui-toggle__track{border:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-toggle__thumb,.fui-toggle__track{transition:none}}\n"] }]
163
+ }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FuiToggleComponent, multi: true }], template: "<label class=\"fui-toggle__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-toggle__track\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n class=\"fui-toggle__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <span class=\"fui-toggle__thumb\"></span>\r\n </span>\r\n\r\n <span class=\"fui-toggle__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-toggle{display:inline-flex;align-items:center}.fui-toggle__container{display:inline-flex;align-items:center;gap:var(--fui-spacing-6, .75rem);cursor:pointer}.fui-toggle__track{position:relative;width:2.75rem;height:1.5rem;border-radius:var(--fui-radius-pill, 999px);background-color:var(--fui-neutral-60, #94a3b8);transition-property:background-color;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-toggle__native-control{position:absolute;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.fui-toggle__track:has(.fui-toggle__native-control:focus-visible){outline:2px solid var(--fui-primary-10)}.fui-toggle__thumb{position:absolute;top:50%;left:3px;width:1.125rem;height:1.125rem;border-radius:50%;background-color:#fff;transform:translateY(-50%);transition-property:left;transition-duration:var(--fui-duration-fast, .15s);transition-timing-function:var(--fui-ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-delay:0ms;pointer-events:none}.fui-toggle--checked .fui-toggle__track{background-color:var(--fui-primary-bg)}.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - 1.125rem - 3px)}.fui-toggle--sm .fui-toggle__track{width:2rem;height:1.125rem}.fui-toggle--sm .fui-toggle__thumb{width:.875rem;height:.875rem}.fui-toggle--sm.fui-toggle--checked .fui-toggle__thumb{left:calc(100% - .875rem - 3px)}.fui-toggle--disabled{cursor:not-allowed;opacity:var(--fui-state-disabled-opacity, .38)}.fui-toggle--disabled .fui-toggle__container{cursor:not-allowed}.fui-toggle--error .fui-toggle__track{background-color:var(--fui-fill-error)}.fui-toggle__label{font-family:var(--fui-font-sans);font-size:var(--fui-text-base);color:var(--fui-text-primary);-webkit-user-select:none;user-select:none}.fui-toggle--label-before .fui-toggle__container{flex-direction:row-reverse}@media(prefers-contrast:high){.fui-toggle__track{border:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-toggle__thumb,.fui-toggle__track{transition:none}}\n"] }]
164
164
  }], ctorParameters: () => [], propDecorators: { checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
165
165
 
166
166
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"raintonic-formaui-components-toggle.mjs","sources":["../../../lib/components/toggle/toggle.component.ts","../../../lib/components/toggle/toggle.component.html","../../../lib/components/toggle/raintonic-formaui-components-toggle.ts"],"sourcesContent":["import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n OutputEmitterRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiToggleLabelPosition, FuiToggleSize, FuiToggleChange } from './toggle.types';\r\n\r\n@Component({\r\n selector: 'fui-toggle',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './toggle.component.html',\r\n styleUrls: ['./toggle.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toggle',\r\n '[class.fui-toggle--checked]': 'checked()',\r\n '[class.fui-toggle--disabled]': 'disabled()',\r\n '[class.fui-toggle--focused]': 'focused()',\r\n '[class.fui-toggle--sm]': 'size() === \"sm\"',\r\n '[class.fui-toggle--md]': 'size() === \"md\"',\r\n '[class.fui-toggle--label-before]': 'labelPosition() === \"before\"',\r\n '[class.fui-toggle--error]': 'errorState()',\r\n '[attr.id]': 'id',\r\n '[attr.tabindex]': 'null',\r\n },\r\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FuiToggleComponent, multi: true }],\r\n})\r\nexport class FuiToggleComponent implements ControlValueAccessor, DoCheck, OnDestroy {\r\n static nextId = 0;\r\n readonly controlType = 'fui-toggle';\r\n\r\n // Inputs\r\n readonly checkedInput = input<boolean, unknown>(false, { alias: 'checked', transform: booleanAttribute });\r\n readonly disabledInput = input<boolean, unknown>(false, { alias: 'disabled', transform: booleanAttribute });\r\n readonly requiredInput = input<boolean, unknown>(false, { alias: 'required', transform: booleanAttribute });\r\n readonly labelPosition = input<FuiToggleLabelPosition>('after');\r\n readonly size = input<FuiToggleSize>('md');\r\n readonly name = input<string | null>(null);\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\r\n readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n // Outputs\r\n readonly change: OutputEmitterRef<FuiToggleChange> = output<FuiToggleChange>();\r\n\r\n // Internal state\r\n private readonly _checked: WritableSignal<boolean> = signal(false);\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n\r\n // Public readonly signals\r\n readonly checked: Signal<boolean> = this._checked.asReadonly();\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n readonly errorState = this._errorState.asReadonly();\r\n readonly required: Signal<boolean> = computed(() => this._required() || this.requiredInput());\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n\r\n readonly stateChanges = new Subject<void>();\r\n private _uid = `fui-toggle-${FuiToggleComponent.nextId++}`;\r\n readonly id = this._uid;\r\n readonly inputId = `${this._uid}-input`;\r\n\r\n // Form control\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n private _onChange: (value: boolean) => void = () => {\r\n /* noop */\r\n };\r\n private _onTouched: () => void = () => {\r\n /* noop */\r\n };\r\n private _formControlInitialized = false;\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n effect(() => {\r\n const inputChecked = this.checkedInput();\r\n if (!this._formControlInitialized) {\r\n this._checked.set(inputChecked);\r\n }\r\n });\r\n\r\n effect(() => {\r\n this.checkedInput();\r\n this.disabledInput();\r\n this.requiredInput();\r\n this.labelPosition();\r\n this.size();\r\n this.name();\r\n this._checked();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // CVA\r\n writeValue(value: boolean): void {\r\n this._formControlInitialized = true;\r\n this._checked.set(value);\r\n this.stateChanges.next();\r\n }\r\n registerOnChange(fn: (value: boolean) => void): void {\r\n this._onChange = fn;\r\n }\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n // Event handlers\r\n onInputChange(event: Event): void {\r\n event.stopPropagation();\r\n if (this.disabled()) return;\r\n const newChecked = !this._checked();\r\n this._checked.set(newChecked);\r\n this._onChange(newChecked);\r\n this.change.emit({ source: this, checked: newChecked });\r\n this.stateChanges.next();\r\n }\r\n\r\n onFocus(): void {\r\n if (!this._focused()) {\r\n this._focused.set(true);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n onBlur(): void {\r\n if (this._focused()) {\r\n this._focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n toggle(): void {\r\n if (!this.disabled()) {\r\n const newChecked = !this._checked();\r\n this._checked.set(newChecked);\r\n this._onChange(newChecked);\r\n this.change.emit({ source: this, checked: newChecked });\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n focus(): void {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n}\r\n","<label class=\"fui-toggle__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-toggle__track\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n class=\"fui-toggle__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <span class=\"fui-toggle__thumb\"></span>\r\n </span>\r\n\r\n <span class=\"fui-toggle__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"raintonic-formaui-components-toggle.mjs","sources":["../../../lib/components/toggle/toggle.component.ts","../../../lib/components/toggle/toggle.component.html","../../../lib/components/toggle/raintonic-formaui-components-toggle.ts"],"sourcesContent":["import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n OutputEmitterRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiToggleLabelPosition, FuiToggleSize, FuiToggleChange } from './toggle.types';\r\n\r\n@Component({\r\n selector: 'fui-toggle',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './toggle.component.html',\r\n styleUrls: ['./toggle.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toggle',\r\n '[class.fui-toggle--checked]': 'checked()',\r\n '[class.fui-toggle--disabled]': 'disabled()',\r\n '[class.fui-toggle--focused]': 'focused()',\r\n '[class.fui-toggle--sm]': 'size() === \"sm\"',\r\n '[class.fui-toggle--md]': 'size() === \"md\"',\r\n '[class.fui-toggle--label-before]': 'labelPosition() === \"before\"',\r\n '[class.fui-toggle--error]': 'errorState()',\r\n '[attr.id]': 'id',\r\n '[attr.tabindex]': 'null',\r\n },\r\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FuiToggleComponent, multi: true }],\r\n})\r\nexport class FuiToggleComponent implements ControlValueAccessor, DoCheck, OnDestroy {\r\n static nextId = 0;\r\n readonly controlType = 'fui-toggle';\r\n\r\n // Inputs\r\n readonly checkedInput = input<boolean, unknown>(false, { alias: 'checked', transform: booleanAttribute });\r\n readonly disabledInput = input<boolean, unknown>(false, { alias: 'disabled', transform: booleanAttribute });\r\n readonly requiredInput = input<boolean, unknown>(false, { alias: 'required', transform: booleanAttribute });\r\n readonly labelPosition = input<FuiToggleLabelPosition>('after');\r\n readonly size = input<FuiToggleSize>('md');\r\n readonly name = input<string | null>(null);\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\r\n readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n // Outputs\r\n readonly change: OutputEmitterRef<FuiToggleChange> = output<FuiToggleChange>();\r\n\r\n // Internal state\r\n private readonly _checked: WritableSignal<boolean> = signal(false);\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n\r\n // Public readonly signals\r\n readonly checked: Signal<boolean> = this._checked.asReadonly();\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n readonly errorState = this._errorState.asReadonly();\r\n readonly required: Signal<boolean> = computed(() => this._required() || this.requiredInput());\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n\r\n readonly stateChanges = new Subject<void>();\r\n private _uid = `fui-toggle-${FuiToggleComponent.nextId++}`;\r\n readonly id = this._uid;\r\n readonly inputId = `${this._uid}-input`;\r\n\r\n // Form control\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n private _onChange: (value: boolean) => void = () => {\r\n /* noop */\r\n };\r\n private _onTouched: () => void = () => {\r\n /* noop */\r\n };\r\n private _formControlInitialized = false;\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n effect(() => {\r\n const inputChecked = this.checkedInput();\r\n if (!this._formControlInitialized) {\r\n this._checked.set(inputChecked);\r\n }\r\n });\r\n\r\n effect(() => {\r\n this.checkedInput();\r\n this.disabledInput();\r\n this.requiredInput();\r\n this.labelPosition();\r\n this.size();\r\n this.name();\r\n this._checked();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // CVA\r\n writeValue(value: boolean): void {\r\n this._formControlInitialized = true;\r\n this._checked.set(value);\r\n this.stateChanges.next();\r\n }\r\n registerOnChange(fn: (value: boolean) => void): void {\r\n this._onChange = fn;\r\n }\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n // Event handlers\r\n onInputChange(event: Event): void {\r\n event.stopPropagation();\r\n if (this.disabled()) return;\r\n const newChecked = !this._checked();\r\n this._checked.set(newChecked);\r\n this._onChange(newChecked);\r\n this.change.emit({ source: this, checked: newChecked });\r\n this.stateChanges.next();\r\n }\r\n\r\n onFocus(): void {\r\n if (!this._focused()) {\r\n this._focused.set(true);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n onBlur(): void {\r\n if (this._focused()) {\r\n this._focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n toggle(): void {\r\n if (!this.disabled()) {\r\n const newChecked = !this._checked();\r\n this._checked.set(newChecked);\r\n this._onChange(newChecked);\r\n this.change.emit({ source: this, checked: newChecked });\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n focus(): void {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n}\r\n","<label class=\"fui-toggle__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-toggle__track\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n class=\"fui-toggle__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <span class=\"fui-toggle__thumb\"></span>\r\n </span>\r\n\r\n <span class=\"fui-toggle__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -155,7 +155,7 @@ class FuiToolbarComponent {
155
155
  this.sidebarToggle.emit();
156
156
  }
157
157
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
158
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiToolbarComponent, isStandalone: true, selector: "fui-toolbar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, activeMenuItemId: { classPropertyName: "activeMenuItemId", publicName: "activeMenuItemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userAriaLabel: { classPropertyName: "userAriaLabel", publicName: "userAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", userProfileClick: "userProfileClick", sidebarToggle: "sidebarToggle" }, host: { attributes: { "role": "banner" }, properties: { "class.fui-toolbar--fixed": "fixed()" }, classAttribute: "fui-toolbar" }, ngImport: i0, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" [name]=\"firstName()\" [surname]=\"lastName()\" [avatarUrl]=\"profile.avatar ?? null\">\r\n </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-05);--fui-toolbar-bg: var(--fui-surface-02);--fui-toolbar-border-color: var(--fui-border-color);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:var(--fui-toolbar-bg) CC;backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:1px solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky, 1000)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-font-size-04);font-weight:600;color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:1px solid var(--fui-border-color);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-border-radius-lg, 6px);background-color:transparent;color:var(--fui-icon-primary);cursor:pointer;transition:all var(--fui-duration-fast-02, .12s) var(--fui-ease-standard, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-surface-02);color:var(--fui-primary-hover)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-surface-05);color:var(--fui-primary)}.fui-toolbar__menu-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-toolbar__menu-button--disabled{color:var(--fui-icon-on-color-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:1px solid var(--fui-border-color);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-border-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast-02, .12s) var(--fui-ease-standard, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-surface-02)}.fui-toolbar__user-button:active{background-color:var(--fui-surface-05)}.fui-toolbar__user-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-font-size-02);font-weight:500;color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-icon-secondary);transition:transform var(--fui-duration-fast-02, .12s) var(--fui-ease-standard, ease)}@media(max-width:576px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:576px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}.fui-theme-dark .fui-toolbar{border-bottom-color:var(--fui-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiAvatarComponent, selector: "fui-avatar", inputs: ["size", "shape", "src", "avatarUrl", "srcSet", "sizesAttr", "name", "surname", "fullName", "alt", "identityKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
158
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiToolbarComponent, isStandalone: true, selector: "fui-toolbar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, activeMenuItemId: { classPropertyName: "activeMenuItemId", publicName: "activeMenuItemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userAriaLabel: { classPropertyName: "userAriaLabel", publicName: "userAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", userProfileClick: "userProfileClick", sidebarToggle: "sidebarToggle" }, host: { attributes: { "role": "banner" }, properties: { "class.fui-toolbar--fixed": "fixed()" }, classAttribute: "fui-toolbar" }, ngImport: i0, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:var(--fui-toolbar-bg) CC;backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:1px solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky, 1000)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:600;color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:1px solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-brand-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-brand-fg)}.fui-toolbar__menu-button:focus-visible{outline:2px solid var(--fui-border-primary);outline-offset:2px}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:1px solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:2px solid var(--fui-border-primary);outline-offset:2px}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:500;color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiAvatarComponent, selector: "fui-avatar", inputs: ["size", "fullName", "initials", "alt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
159
159
  }
160
160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToolbarComponent, decorators: [{
161
161
  type: Component,
@@ -163,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
163
163
  class: 'fui-toolbar',
164
164
  role: 'banner',
165
165
  '[class.fui-toolbar--fixed]': 'fixed()',
166
- }, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" [name]=\"firstName()\" [surname]=\"lastName()\" [avatarUrl]=\"profile.avatar ?? null\">\r\n </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-05);--fui-toolbar-bg: var(--fui-surface-02);--fui-toolbar-border-color: var(--fui-border-color);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:var(--fui-toolbar-bg) CC;backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:1px solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky, 1000)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-font-size-04);font-weight:600;color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:1px solid var(--fui-border-color);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-border-radius-lg, 6px);background-color:transparent;color:var(--fui-icon-primary);cursor:pointer;transition:all var(--fui-duration-fast-02, .12s) var(--fui-ease-standard, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-surface-02);color:var(--fui-primary-hover)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-surface-05);color:var(--fui-primary)}.fui-toolbar__menu-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-toolbar__menu-button--disabled{color:var(--fui-icon-on-color-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:1px solid var(--fui-border-color);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-border-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast-02, .12s) var(--fui-ease-standard, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-surface-02)}.fui-toolbar__user-button:active{background-color:var(--fui-surface-05)}.fui-toolbar__user-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-font-size-02);font-weight:500;color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-icon-secondary);transition:transform var(--fui-duration-fast-02, .12s) var(--fui-ease-standard, ease)}@media(max-width:576px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:576px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}.fui-theme-dark .fui-toolbar{border-bottom-color:var(--fui-border-color)}\n"] }]
166
+ }, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:var(--fui-toolbar-bg) CC;backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:1px solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky, 1000)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:600;color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:1px solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-brand-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-brand-fg)}.fui-toolbar__menu-button:focus-visible{outline:2px solid var(--fui-border-primary);outline-offset:2px}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:1px solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:2px solid var(--fui-border-primary);outline-offset:2px}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:500;color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"] }]
167
167
  }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], activeMenuItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuItemId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAriaLabel", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], userProfileClick: [{ type: i0.Output, args: ["userProfileClick"] }], sidebarToggle: [{ type: i0.Output, args: ["sidebarToggle"] }] } });
168
168
 
169
169
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"raintonic-formaui-components-toolbar.mjs","sources":["../../../lib/components/toolbar/toolbar.intl.ts","../../../lib/components/toolbar/toolbar.component.ts","../../../lib/components/toolbar/toolbar.component.html","../../../lib/components/toolbar/raintonic-formaui-components-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiToolbarIntl extends FuiIntlBase {\r\n navAriaLabel = 'Main navigation';\r\n userAriaLabelPrefix = 'User menu for ';\r\n toggleSidebarAriaLabel = 'Toggle sidebar';\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n InputSignal,\r\n OutputEmitterRef,\r\n Signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { RouterModule } from '@angular/router';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';\r\nimport { FuiToolbarIntl } from './toolbar.intl';\r\n\r\n/**\r\n * Toolbar menu item interface\r\n */\r\nexport interface FuiToolbarMenuItem {\r\n id: string | number;\r\n icon: string;\r\n label: string;\r\n disabled?: boolean;\r\n routerLink?: string | string[];\r\n queryParams?: Record<string, string>;\r\n fragment?: string;\r\n}\r\n\r\n/**\r\n * User profile data interface\r\n */\r\nexport interface FuiToolbarUserProfile {\r\n name: string;\r\n email: string;\r\n avatar?: string;\r\n initials?: string;\r\n}\r\n\r\n/**\r\n * # FuiToolbar Component\r\n *\r\n * A top navigation toolbar following Carbon Design System principles.\r\n * Provides space for logo, navigation menu items, and user profile area.\r\n *\r\n * ## Features\r\n * - Logo area with customizable content\r\n * - Icon-based navigation menu\r\n * - User profile area with avatar/initials\r\n * - Responsive design\r\n * - Theme integration\r\n * - Accessibility support\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Toolbar\r\n * ```html\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"logo.svg\" alt=\"Company Logo\">\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * ### With Custom Logo\r\n * ```html\r\n * <fui-toolbar [menuItems]=\"menuItems\" [userProfile]=\"userProfile\">\r\n * <div logo class=\"custom-logo\">\r\n * <h1>Holiday ERP</h1>\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiToolbarComponent, FuiToolbarMenuItem, FuiToolbarUserProfile } from '@raintonic/formaui/components/toolbar';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiToolbarComponent],\r\n * template: `\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"assets/logo.svg\" alt=\"Holiday ERP\">\r\n * </div>\r\n * </fui-toolbar>\r\n * `\r\n * })\r\n * export class AppLayoutComponent {\r\n * menuItems: FuiToolbarMenuItem[] = [\r\n * { id: 'dashboard', icon: 'house', label: 'Dashboard' },\r\n * { id: 'orders', icon: 'shopping-cart', label: 'Orders' },\r\n * { id: 'products', icon: 'package', label: 'Products' },\r\n * { id: 'customers', icon: 'users', label: 'Customers' },\r\n * ];\r\n *\r\n * userProfile: FuiToolbarUserProfile = {\r\n * name: 'John Doe',\r\n * email: 'john.doe@company.com',\r\n * initials: 'JD'\r\n * };\r\n *\r\n * onMenuItemClick(itemId: string | number): void {\r\n * console.log('Menu item clicked:', itemId);\r\n * }\r\n *\r\n * onUserProfileClick(): void {\r\n * console.log('User profile clicked');\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-toolbar',\r\n standalone: true,\r\n imports: [RouterModule, FuiIconComponent, FuiAvatarComponent],\r\n templateUrl: './toolbar.component.html',\r\n styleUrls: ['./toolbar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toolbar',\r\n role: 'banner',\r\n '[class.fui-toolbar--fixed]': 'fixed()',\r\n },\r\n})\r\nexport class FuiToolbarComponent {\r\n readonly intl = inject(FuiToolbarIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */\r\n private readonly _intlTick = signal(0);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._intlTick.update((v) => v + 1);\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n // Inputs using signal-based API\r\n readonly menuItems: InputSignal<FuiToolbarMenuItem[]> = input<FuiToolbarMenuItem[]>([]);\r\n readonly userProfile: InputSignal<FuiToolbarUserProfile | null> = input<FuiToolbarUserProfile | null>(null);\r\n readonly fixed: InputSignal<boolean> = input(true);\r\n readonly activeMenuItemId: InputSignal<string | number> = input<string | number>('');\r\n readonly ariaLabel = input<string | undefined>(undefined);\r\n readonly userAriaLabel = input<string | undefined>(undefined);\r\n // New: show a dedicated sidebar toggle button\r\n readonly showSidebarToggle: InputSignal<boolean> = input(false);\r\n\r\n /** Resolved navigation aria-label: input override → intl default. */\r\n readonly resolvedNavAriaLabel = computed(() => {\r\n this._intlTick();\r\n return this.ariaLabel() ?? this.intl.navAriaLabel;\r\n });\r\n\r\n /** Resolved user-menu aria-label prefix: input override → intl default. */\r\n readonly resolvedUserAriaLabelPrefix = computed(() => {\r\n this._intlTick();\r\n return this.userAriaLabel() ?? this.intl.userAriaLabelPrefix;\r\n });\r\n\r\n // Outputs using signal-based API\r\n readonly menuItemClick: OutputEmitterRef<string | number> = output<string | number>();\r\n readonly userProfileClick: OutputEmitterRef<void> = output();\r\n // New: emits when sidebar toggle button is clicked\r\n readonly sidebarToggle: OutputEmitterRef<void> = output();\r\n\r\n // Derived user name parts for avatar\r\n readonly firstName: Signal<string> = computed(() => this.userProfile()?.name?.trim().split(/\\s+/)[0] ?? '');\r\n readonly lastName: Signal<string> = computed(() => {\r\n const parts = this.userProfile()?.name?.trim().split(/\\s+/) ?? [];\r\n return parts.length > 1 ? parts[parts.length - 1] : '';\r\n });\r\n\r\n onMenuItemClick(item: FuiToolbarMenuItem): void {\r\n if (!item.disabled) {\r\n this.menuItemClick.emit(item.id);\r\n }\r\n }\r\n\r\n onUserProfileClick(): void {\r\n if (this.userProfile()) {\r\n this.userProfileClick.emit();\r\n }\r\n }\r\n\r\n onSidebarToggleClick(): void {\r\n this.sidebarToggle.emit();\r\n }\r\n}\r\n","<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" [name]=\"firstName()\" [surname]=\"lastName()\" [avatarUrl]=\"profile.avatar ?? null\">\r\n </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"raintonic-formaui-components-toolbar.mjs","sources":["../../../lib/components/toolbar/toolbar.intl.ts","../../../lib/components/toolbar/toolbar.component.ts","../../../lib/components/toolbar/toolbar.component.html","../../../lib/components/toolbar/raintonic-formaui-components-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiToolbarIntl extends FuiIntlBase {\r\n navAriaLabel = 'Main navigation';\r\n userAriaLabelPrefix = 'User menu for ';\r\n toggleSidebarAriaLabel = 'Toggle sidebar';\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n InputSignal,\r\n OutputEmitterRef,\r\n Signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { RouterModule } from '@angular/router';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';\r\nimport { FuiToolbarIntl } from './toolbar.intl';\r\n\r\n/**\r\n * Toolbar menu item interface\r\n */\r\nexport interface FuiToolbarMenuItem {\r\n id: string | number;\r\n icon: string;\r\n label: string;\r\n disabled?: boolean;\r\n routerLink?: string | string[];\r\n queryParams?: Record<string, string>;\r\n fragment?: string;\r\n}\r\n\r\n/**\r\n * User profile data interface\r\n */\r\nexport interface FuiToolbarUserProfile {\r\n name: string;\r\n email: string;\r\n avatar?: string;\r\n initials?: string;\r\n}\r\n\r\n/**\r\n * # FuiToolbar Component\r\n *\r\n * A top navigation toolbar following Carbon Design System principles.\r\n * Provides space for logo, navigation menu items, and user profile area.\r\n *\r\n * ## Features\r\n * - Logo area with customizable content\r\n * - Icon-based navigation menu\r\n * - User profile area with avatar/initials\r\n * - Responsive design\r\n * - Theme integration\r\n * - Accessibility support\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Toolbar\r\n * ```html\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"logo.svg\" alt=\"Company Logo\">\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * ### With Custom Logo\r\n * ```html\r\n * <fui-toolbar [menuItems]=\"menuItems\" [userProfile]=\"userProfile\">\r\n * <div logo class=\"custom-logo\">\r\n * <h1>Holiday ERP</h1>\r\n * </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiToolbarComponent, FuiToolbarMenuItem, FuiToolbarUserProfile } from '@raintonic/formaui/components/toolbar';\r\n *\r\n * @Component({\r\n * standalone: true,\r\n * imports: [FuiToolbarComponent],\r\n * template: `\r\n * <fui-toolbar\r\n * [menuItems]=\"menuItems\"\r\n * [userProfile]=\"userProfile\"\r\n * (menuItemClick)=\"onMenuItemClick($event)\"\r\n * (userProfileClick)=\"onUserProfileClick()\">\r\n * <div logo>\r\n * <img src=\"assets/logo.svg\" alt=\"Holiday ERP\">\r\n * </div>\r\n * </fui-toolbar>\r\n * `\r\n * })\r\n * export class AppLayoutComponent {\r\n * menuItems: FuiToolbarMenuItem[] = [\r\n * { id: 'dashboard', icon: 'house', label: 'Dashboard' },\r\n * { id: 'orders', icon: 'shopping-cart', label: 'Orders' },\r\n * { id: 'products', icon: 'package', label: 'Products' },\r\n * { id: 'customers', icon: 'users', label: 'Customers' },\r\n * ];\r\n *\r\n * userProfile: FuiToolbarUserProfile = {\r\n * name: 'John Doe',\r\n * email: 'john.doe@company.com',\r\n * initials: 'JD'\r\n * };\r\n *\r\n * onMenuItemClick(itemId: string | number): void {\r\n * console.log('Menu item clicked:', itemId);\r\n * }\r\n *\r\n * onUserProfileClick(): void {\r\n * console.log('User profile clicked');\r\n * }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-toolbar',\r\n standalone: true,\r\n imports: [RouterModule, FuiIconComponent, FuiAvatarComponent],\r\n templateUrl: './toolbar.component.html',\r\n styleUrls: ['./toolbar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-toolbar',\r\n role: 'banner',\r\n '[class.fui-toolbar--fixed]': 'fixed()',\r\n },\r\n})\r\nexport class FuiToolbarComponent {\r\n readonly intl = inject(FuiToolbarIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */\r\n private readonly _intlTick = signal(0);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._intlTick.update((v) => v + 1);\r\n this._cdr.markForCheck();\r\n });\r\n }\r\n\r\n // Inputs using signal-based API\r\n readonly menuItems: InputSignal<FuiToolbarMenuItem[]> = input<FuiToolbarMenuItem[]>([]);\r\n readonly userProfile: InputSignal<FuiToolbarUserProfile | null> = input<FuiToolbarUserProfile | null>(null);\r\n readonly fixed: InputSignal<boolean> = input(true);\r\n readonly activeMenuItemId: InputSignal<string | number> = input<string | number>('');\r\n readonly ariaLabel = input<string | undefined>(undefined);\r\n readonly userAriaLabel = input<string | undefined>(undefined);\r\n // New: show a dedicated sidebar toggle button\r\n readonly showSidebarToggle: InputSignal<boolean> = input(false);\r\n\r\n /** Resolved navigation aria-label: input override → intl default. */\r\n readonly resolvedNavAriaLabel = computed(() => {\r\n this._intlTick();\r\n return this.ariaLabel() ?? this.intl.navAriaLabel;\r\n });\r\n\r\n /** Resolved user-menu aria-label prefix: input override → intl default. */\r\n readonly resolvedUserAriaLabelPrefix = computed(() => {\r\n this._intlTick();\r\n return this.userAriaLabel() ?? this.intl.userAriaLabelPrefix;\r\n });\r\n\r\n // Outputs using signal-based API\r\n readonly menuItemClick: OutputEmitterRef<string | number> = output<string | number>();\r\n readonly userProfileClick: OutputEmitterRef<void> = output();\r\n // New: emits when sidebar toggle button is clicked\r\n readonly sidebarToggle: OutputEmitterRef<void> = output();\r\n\r\n // Derived user name parts for avatar\r\n readonly firstName: Signal<string> = computed(() => this.userProfile()?.name?.trim().split(/\\s+/)[0] ?? '');\r\n readonly lastName: Signal<string> = computed(() => {\r\n const parts = this.userProfile()?.name?.trim().split(/\\s+/) ?? [];\r\n return parts.length > 1 ? parts[parts.length - 1] : '';\r\n });\r\n\r\n onMenuItemClick(item: FuiToolbarMenuItem): void {\r\n if (!item.disabled) {\r\n this.menuItemClick.emit(item.id);\r\n }\r\n }\r\n\r\n onUserProfileClick(): void {\r\n if (this.userProfile()) {\r\n this.userProfileClick.emit();\r\n }\r\n }\r\n\r\n onSidebarToggleClick(): void {\r\n this.sidebarToggle.emit();\r\n }\r\n}\r\n","<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n title=\"Toggle sidebar\"\r\n (click)=\"onSidebarToggleClick()\"\r\n >\r\n <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n <ul class=\"fui-toolbar__menu\">\r\n @for (item of menuItems(); track item.id) {\r\n <li class=\"fui-toolbar__menu-item\">\r\n @if (item.routerLink) {\r\n <a\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [routerLink]=\"item.routerLink\"\r\n [queryParams]=\"item.queryParams\"\r\n [fragment]=\"item.fragment\"\r\n [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n [attr.aria-label]=\"item.label\"\r\n [title]=\"item.label\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__menu-button\"\r\n [class.active]=\"item.id === activeMenuItemId()\"\r\n [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-label]=\"item.label\"\r\n [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n [title]=\"item.label\"\r\n (click)=\"onMenuItemClick(item)\"\r\n >\r\n <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n </button>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n <div class=\"fui-toolbar__user\">\r\n <button\r\n type=\"button\"\r\n class=\"fui-toolbar__user-button\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n [title]=\"profile.name + ' - ' + profile.email\"\r\n (click)=\"onUserProfileClick()\"\r\n >\r\n <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n <div class=\"fui-toolbar__user-info\">\r\n <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n </div>\r\n\r\n <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n </button>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -97,7 +97,7 @@ class FuiTooltipComponent {
97
97
  return baseClass;
98
98
  }, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
99
99
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
100
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTooltipComponent, isStandalone: true, selector: "fui-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "computedClasses()", "id": "tooltipId()", "attr.role": "\"tooltip\"", "style.max-width": "maxWidth()" }, classAttribute: "fui-tooltip" }, ngImport: i0, template: "<div class=\"fui-tooltip__content\">\r\n {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-border-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-03);--fui-tooltip-font-size: var(--fui-font-size-02);--fui-tooltip-padding-x: var(--fui-spacing-04);--fui-tooltip-padding-y: var(--fui-spacing-03);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition:opacity var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast-02) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-01)}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-04);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-04);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-04);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-font-size-01)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-font-size-02)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-03) var(--fui-spacing-04)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-font-size-03)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-04) var(--fui-spacing-05)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
100
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTooltipComponent, isStandalone: true, selector: "fui-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "computedClasses()", "id": "tooltipId()", "attr.role": "\"tooltip\"", "style.max-width": "maxWidth()" }, classAttribute: "fui-tooltip" }, ngImport: i0, template: "<div class=\"fui-tooltip__content\">\r\n {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-md);--fui-tooltip-font-size: var(--fui-text-base);--fui-tooltip-padding-x: var(--fui-spacing-6);--fui-tooltip-padding-y: var(--fui-spacing-4);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal)}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-6);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-6);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-6);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-text-sm)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-text-base)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-4) var(--fui-spacing-6)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-text-md)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-6) var(--fui-spacing-7)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
101
101
  }
102
102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipComponent, decorators: [{
103
103
  type: Component,
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
107
107
  '[id]': 'tooltipId()',
108
108
  '[attr.role]': '"tooltip"',
109
109
  '[style.max-width]': 'maxWidth()',
110
- }, template: "<div class=\"fui-tooltip__content\">\r\n {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-border-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-03);--fui-tooltip-font-size: var(--fui-font-size-02);--fui-tooltip-padding-x: var(--fui-spacing-04);--fui-tooltip-padding-y: var(--fui-spacing-03);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition:opacity var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast-02) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-01)}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-04);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-04);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-04);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-font-size-01)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-02) var(--fui-spacing-03)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-font-size-02)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-03) var(--fui-spacing-04)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-font-size-03)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-04) var(--fui-spacing-05)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
110
+ }, template: "<div class=\"fui-tooltip__content\">\r\n {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-md);--fui-tooltip-font-size: var(--fui-text-base);--fui-tooltip-padding-x: var(--fui-spacing-6);--fui-tooltip-padding-y: var(--fui-spacing-4);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal)}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-6);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-6);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-6);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-text-sm)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-text-base)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-4) var(--fui-spacing-6)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-text-md)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-6) var(--fui-spacing-7)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
111
111
  }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: true }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: true }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: true }] }] } });
112
112
 
113
113
  /**
@@ -245,6 +245,7 @@ class FuiTooltipDirective {
245
245
  _tooltipComponent = null;
246
246
  _showTimeout = null;
247
247
  _hideTimeout = null;
248
+ _destroyed = false;
248
249
  _isHoveringTooltip = false;
249
250
  // Computed properties
250
251
  isVisible = computed(() => this._isVisible(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
@@ -275,6 +276,7 @@ class FuiTooltipDirective {
275
276
  });
276
277
  }
277
278
  ngOnDestroy() {
279
+ this._destroyed = true;
278
280
  this._clearTimeouts();
279
281
  this._destroyTooltip();
280
282
  }
@@ -340,6 +342,9 @@ class FuiTooltipDirective {
340
342
  }
341
343
  }
342
344
  _scheduleShow() {
345
+ if (this._destroyed) {
346
+ return;
347
+ }
343
348
  this._clearTimeouts();
344
349
  if (this.fuiTooltipShowDelay() > 0) {
345
350
  this._showTimeout = window.setTimeout(() => {
@@ -366,7 +371,7 @@ class FuiTooltipDirective {
366
371
  }
367
372
  }
368
373
  _showTooltip() {
369
- if (this._isVisible() || this.fuiTooltipDisabled() || !this.fuiTooltip().trim()) {
374
+ if (this._destroyed || this._isVisible() || this.fuiTooltipDisabled() || !this.fuiTooltip().trim()) {
370
375
  return;
371
376
  }
372
377
  this._createTooltip();
@@ -514,13 +519,14 @@ class FuiTooltipDirective {
514
519
  }
515
520
  };
516
521
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
517
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiTooltipDirective, isStandalone: true, selector: "[fuiTooltip]", inputs: { fuiTooltip: { classPropertyName: "fuiTooltip", publicName: "fuiTooltip", isSignal: true, isRequired: true, transformFunction: null }, fuiTooltipPosition: { classPropertyName: "fuiTooltipPosition", publicName: "fuiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipSize: { classPropertyName: "fuiTooltipSize", publicName: "fuiTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipTrigger: { classPropertyName: "fuiTooltipTrigger", publicName: "fuiTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShowDelay: { classPropertyName: "fuiTooltipShowDelay", publicName: "fuiTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipHideDelay: { classPropertyName: "fuiTooltipHideDelay", publicName: "fuiTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipDisabled: { classPropertyName: "fuiTooltipDisabled", publicName: "fuiTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipMaxWidth: { classPropertyName: "fuiTooltipMaxWidth", publicName: "fuiTooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipOffset: { classPropertyName: "fuiTooltipOffset", publicName: "fuiTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipArrow: { classPropertyName: "fuiTooltipArrow", publicName: "fuiTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShow: { classPropertyName: "fuiTooltipShow", publicName: "fuiTooltipShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-describedby": "isVisible() ? tooltipId() : null" } }, ngImport: i0 });
522
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiTooltipDirective, isStandalone: true, selector: "[fuiTooltip]", inputs: { fuiTooltip: { classPropertyName: "fuiTooltip", publicName: "fuiTooltip", isSignal: true, isRequired: true, transformFunction: null }, fuiTooltipPosition: { classPropertyName: "fuiTooltipPosition", publicName: "fuiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipSize: { classPropertyName: "fuiTooltipSize", publicName: "fuiTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipTrigger: { classPropertyName: "fuiTooltipTrigger", publicName: "fuiTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShowDelay: { classPropertyName: "fuiTooltipShowDelay", publicName: "fuiTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipHideDelay: { classPropertyName: "fuiTooltipHideDelay", publicName: "fuiTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipDisabled: { classPropertyName: "fuiTooltipDisabled", publicName: "fuiTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipMaxWidth: { classPropertyName: "fuiTooltipMaxWidth", publicName: "fuiTooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipOffset: { classPropertyName: "fuiTooltipOffset", publicName: "fuiTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipArrow: { classPropertyName: "fuiTooltipArrow", publicName: "fuiTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShow: { classPropertyName: "fuiTooltipShow", publicName: "fuiTooltipShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-describedby": "isVisible() ? tooltipId() : null" } }, exportAs: ["fuiTooltip"], ngImport: i0 });
518
523
  }
519
524
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipDirective, decorators: [{
520
525
  type: Directive,
521
526
  args: [{
522
527
  selector: '[fuiTooltip]',
523
528
  standalone: true,
529
+ exportAs: 'fuiTooltip',
524
530
  host: {
525
531
  '[attr.aria-describedby]': 'isVisible() ? tooltipId() : null',
526
532
  },