@raintonic/formaui 0.2.1 → 0.3.1

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 (171) hide show
  1. package/CHANGELOG.md +100 -3
  2. package/LICENSE +21 -0
  3. package/README.md +80 -26
  4. package/fesm2022/raintonic-formaui-components-accordion.mjs +2 -2
  5. package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
  6. package/fesm2022/raintonic-formaui-components-alert.mjs +24 -5
  7. package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
  8. package/fesm2022/raintonic-formaui-components-autocomplete.mjs +38 -9
  9. package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
  10. package/fesm2022/raintonic-formaui-components-badge.mjs +45 -31
  11. package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
  12. package/fesm2022/raintonic-formaui-components-big-menu.mjs +23 -5
  13. package/fesm2022/raintonic-formaui-components-big-menu.mjs.map +1 -1
  14. package/fesm2022/raintonic-formaui-components-breadcrumb.mjs +24 -7
  15. package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map +1 -1
  16. package/fesm2022/raintonic-formaui-components-button-group.mjs +6 -6
  17. package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
  18. package/fesm2022/raintonic-formaui-components-button.mjs +63 -17
  19. package/fesm2022/raintonic-formaui-components-button.mjs.map +1 -1
  20. package/fesm2022/raintonic-formaui-components-card.mjs +8 -8
  21. package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
  22. package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
  23. package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
  24. package/fesm2022/raintonic-formaui-components-data-table.mjs +67 -9
  25. package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
  26. package/fesm2022/raintonic-formaui-components-date-picker.mjs +63 -16
  27. package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
  28. package/fesm2022/raintonic-formaui-components-drawer.mjs +19 -4
  29. package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
  30. package/fesm2022/raintonic-formaui-components-file-upload.mjs +25 -5
  31. package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
  32. package/fesm2022/raintonic-formaui-components-form-field.mjs +21 -6
  33. package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
  34. package/fesm2022/raintonic-formaui-components-icon.mjs +2 -2
  35. package/fesm2022/raintonic-formaui-components-icon.mjs.map +1 -1
  36. package/fesm2022/raintonic-formaui-components-input.mjs +1 -1
  37. package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
  38. package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
  39. package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
  40. package/fesm2022/raintonic-formaui-components-menu.mjs +4 -4
  41. package/fesm2022/raintonic-formaui-components-menu.mjs.map +1 -1
  42. package/fesm2022/raintonic-formaui-components-number-input.mjs +20 -5
  43. package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
  44. package/fesm2022/raintonic-formaui-components-paginator.mjs +27 -7
  45. package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
  46. package/fesm2022/raintonic-formaui-components-password-input.mjs +23 -5
  47. package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
  48. package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
  49. package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
  50. package/fesm2022/raintonic-formaui-components-progressbar.mjs +32 -7
  51. package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
  52. package/fesm2022/raintonic-formaui-components-radio.mjs +6 -5
  53. package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
  54. package/fesm2022/raintonic-formaui-components-select.mjs +19 -4
  55. package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
  56. package/fesm2022/raintonic-formaui-components-side-panel.mjs +19 -4
  57. package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
  58. package/fesm2022/raintonic-formaui-components-sidebar.mjs +23 -5
  59. package/fesm2022/raintonic-formaui-components-sidebar.mjs.map +1 -1
  60. package/fesm2022/raintonic-formaui-components-skeleton.mjs +2 -2
  61. package/fesm2022/raintonic-formaui-components-skeleton.mjs.map +1 -1
  62. package/fesm2022/raintonic-formaui-components-slider.mjs +23 -5
  63. package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
  64. package/fesm2022/raintonic-formaui-components-spinner.mjs +24 -7
  65. package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
  66. package/fesm2022/raintonic-formaui-components-stepper.mjs +2 -2
  67. package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
  68. package/fesm2022/raintonic-formaui-components-tab.mjs +2 -2
  69. package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
  70. package/fesm2022/raintonic-formaui-components-tag.mjs +21 -4
  71. package/fesm2022/raintonic-formaui-components-tag.mjs.map +1 -1
  72. package/fesm2022/raintonic-formaui-components-time-picker.mjs +26 -7
  73. package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
  74. package/fesm2022/raintonic-formaui-components-toggle.mjs +2 -2
  75. package/fesm2022/raintonic-formaui-components-toggle.mjs.map +1 -1
  76. package/fesm2022/raintonic-formaui-components-toolbar.mjs +41 -7
  77. package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
  78. package/fesm2022/raintonic-formaui-components-tooltip.mjs +2 -2
  79. package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
  80. package/fesm2022/raintonic-formaui-components-tree-table.mjs +35 -6
  81. package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
  82. package/fesm2022/raintonic-formaui-components-tree.mjs +23 -5
  83. package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
  84. package/fesm2022/raintonic-formaui-core.mjs +25 -1
  85. package/fesm2022/raintonic-formaui-core.mjs.map +1 -1
  86. package/fesm2022/raintonic-formaui-services-dialog.mjs +3 -3
  87. package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
  88. package/fesm2022/raintonic-formaui-services-notification.mjs +2 -2
  89. package/fesm2022/raintonic-formaui-services-notification.mjs.map +1 -1
  90. package/fesm2022/raintonic-formaui-services-theme.mjs +3 -3
  91. package/fesm2022/raintonic-formaui-services-theme.mjs.map +1 -1
  92. package/fesm2022/raintonic-formaui-test-utils.mjs +21 -16
  93. package/fesm2022/raintonic-formaui-test-utils.mjs.map +1 -1
  94. package/fesm2022/raintonic-formaui.mjs +1 -1
  95. package/fesm2022/raintonic-formaui.mjs.map +1 -1
  96. package/llms-full.txt +34 -25
  97. package/llms.txt +1 -2
  98. package/package.json +1 -5
  99. package/styles/index.scss +2 -2
  100. package/styles/partials/_motion.scss +25 -0
  101. package/styles/partials/_theme.scss +6 -5
  102. package/styles/partials/components/_button.scss +361 -367
  103. package/styles/partials/themes/_dark.scss +14 -0
  104. package/styles/partials/themes/_light.scss +14 -0
  105. package/types/raintonic-formaui-components-alert.d.ts +11 -1
  106. package/types/raintonic-formaui-components-alert.d.ts.map +1 -1
  107. package/types/raintonic-formaui-components-autocomplete.d.ts +25 -7
  108. package/types/raintonic-formaui-components-autocomplete.d.ts.map +1 -1
  109. package/types/raintonic-formaui-components-badge.d.ts +20 -9
  110. package/types/raintonic-formaui-components-badge.d.ts.map +1 -1
  111. package/types/raintonic-formaui-components-big-menu.d.ts +12 -1
  112. package/types/raintonic-formaui-components-big-menu.d.ts.map +1 -1
  113. package/types/raintonic-formaui-components-breadcrumb.d.ts +11 -2
  114. package/types/raintonic-formaui-components-breadcrumb.d.ts.map +1 -1
  115. package/types/raintonic-formaui-components-button-group.d.ts +6 -6
  116. package/types/raintonic-formaui-components-button.d.ts +9 -7
  117. package/types/raintonic-formaui-components-button.d.ts.map +1 -1
  118. package/types/raintonic-formaui-components-card.d.ts +4 -4
  119. package/types/raintonic-formaui-components-checkbox.d.ts +1 -1
  120. package/types/raintonic-formaui-components-data-table.d.ts +56 -16
  121. package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
  122. package/types/raintonic-formaui-components-date-picker.d.ts +32 -4
  123. package/types/raintonic-formaui-components-date-picker.d.ts.map +1 -1
  124. package/types/raintonic-formaui-components-drawer.d.ts +10 -1
  125. package/types/raintonic-formaui-components-drawer.d.ts.map +1 -1
  126. package/types/raintonic-formaui-components-file-upload.d.ts +12 -1
  127. package/types/raintonic-formaui-components-file-upload.d.ts.map +1 -1
  128. package/types/raintonic-formaui-components-form-field.d.ts +12 -2
  129. package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
  130. package/types/raintonic-formaui-components-input.d.ts +1 -1
  131. package/types/raintonic-formaui-components-number-input.d.ts +11 -2
  132. package/types/raintonic-formaui-components-number-input.d.ts.map +1 -1
  133. package/types/raintonic-formaui-components-paginator.d.ts +13 -1
  134. package/types/raintonic-formaui-components-paginator.d.ts.map +1 -1
  135. package/types/raintonic-formaui-components-password-input.d.ts +12 -2
  136. package/types/raintonic-formaui-components-password-input.d.ts.map +1 -1
  137. package/types/raintonic-formaui-components-progressbar.d.ts +14 -1
  138. package/types/raintonic-formaui-components-progressbar.d.ts.map +1 -1
  139. package/types/raintonic-formaui-components-radio.d.ts +2 -1
  140. package/types/raintonic-formaui-components-radio.d.ts.map +1 -1
  141. package/types/raintonic-formaui-components-select.d.ts.map +1 -1
  142. package/types/raintonic-formaui-components-side-panel.d.ts +10 -1
  143. package/types/raintonic-formaui-components-side-panel.d.ts.map +1 -1
  144. package/types/raintonic-formaui-components-sidebar.d.ts +12 -1
  145. package/types/raintonic-formaui-components-sidebar.d.ts.map +1 -1
  146. package/types/raintonic-formaui-components-slider.d.ts +12 -1
  147. package/types/raintonic-formaui-components-slider.d.ts.map +1 -1
  148. package/types/raintonic-formaui-components-spinner.d.ts +12 -2
  149. package/types/raintonic-formaui-components-spinner.d.ts.map +1 -1
  150. package/types/raintonic-formaui-components-tag.d.ts +10 -1
  151. package/types/raintonic-formaui-components-tag.d.ts.map +1 -1
  152. package/types/raintonic-formaui-components-time-picker.d.ts +14 -2
  153. package/types/raintonic-formaui-components-time-picker.d.ts.map +1 -1
  154. package/types/raintonic-formaui-components-toggle.d.ts +1 -1
  155. package/types/raintonic-formaui-components-toolbar.d.ts +22 -4
  156. package/types/raintonic-formaui-components-toolbar.d.ts.map +1 -1
  157. package/types/raintonic-formaui-components-tree-table.d.ts +29 -4
  158. package/types/raintonic-formaui-components-tree-table.d.ts.map +1 -1
  159. package/types/raintonic-formaui-components-tree.d.ts +12 -1
  160. package/types/raintonic-formaui-components-tree.d.ts.map +1 -1
  161. package/types/raintonic-formaui-core.d.ts +19 -2
  162. package/types/raintonic-formaui-core.d.ts.map +1 -1
  163. package/types/raintonic-formaui-services-dialog.d.ts +1 -1
  164. package/types/raintonic-formaui-services-theme.d.ts +3 -3
  165. package/types/raintonic-formaui-test-utils.d.ts +15 -2
  166. package/types/raintonic-formaui-test-utils.d.ts.map +1 -1
  167. package/types/raintonic-formaui.d.ts +1 -1
  168. package/fesm2022/raintonic-formaui-components-dynamic-form.mjs +0 -266
  169. package/fesm2022/raintonic-formaui-components-dynamic-form.mjs.map +0 -1
  170. package/types/raintonic-formaui-components-dynamic-form.d.ts +0 -412
  171. package/types/raintonic-formaui-components-dynamic-form.d.ts.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,7 +1,104 @@
1
1
  # Changelog
2
2
 
3
- All notable changes to FormaUI will be documented in this file.
3
+ All notable changes to FormaUI are documented in this file.
4
4
 
5
- ## [0.1.0] - Unreleased
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
7
 
7
- - Initial standalone release
8
+ ## [Unreleased]
9
+
10
+ ### Changed
11
+
12
+ - **BREAKING** `FuiButtonDirective` variant set reduced to the Figma spec: `primary | secondary | tertiary | tertiary-violet | link | destructive`.
13
+ - `variant="ghost"` → use `variant="tertiary"`.
14
+ - `variant="outline"` → use `variant="secondary"`.
15
+ - `variant="danger"` → use `variant="destructive"`.
16
+ - `variant="icon"` → use `iconOnly` combined with a variant (typically `tertiary`).
17
+ - **BREAKING** Button `loading` behavior: text is now visible during loading; the spinner occupies a leading slot; user-supplied icons (leading and trailing) are hidden during loading. Previously the entire label was hidden via `color: transparent`.
18
+
19
+ ### Added
20
+
21
+ - Semantic alias tokens: `--fui-destructive-default`, `--fui-destructive-hover`, `--fui-destructive-text`, `--fui-tertiary-text`, `--fui-tertiary-hover-bg`, `--fui-tertiary-violet-text`, `--fui-tertiary-violet-hover-bg`.
22
+
23
+ ### Fixed
24
+
25
+ - Destructive variant now uses a saturated red (`--fui-danger-90` = `#e5484d`) instead of the pastel `--fui-danger-60` (`#fdbdbe`) that was incorrectly wired as the button's `danger` background.
26
+
27
+ ## [1.0.0] - YYYY-MM-DD (placeholder — release script will set the date)
28
+
29
+ First stable release. API is now locked under SemVer from this version forward.
30
+
31
+ ### Breaking
32
+ - Removed experimental `dynamic-form` component and its entry point (`@raintonic/formaui/components/dynamic-form`). No direct migration path — consumers should use reactive forms directly.
33
+
34
+ ### Added
35
+ - Pre-publication component audit (see `.claude/docs/reviews/`)
36
+ - Bundle size budget enforced via `size-limit`
37
+ - Coverage threshold enforced at 60% in CI
38
+ - Explicit `.browserslistrc` for library
39
+ - GitHub Pages deploy for docs at https://formaui.raintonic.com
40
+ - PR validation CI workflow
41
+ - Theming guide page in docs app
42
+ - `.meta.md` metadata for flagship components
43
+ - LICENSE, SECURITY.md, CONTRIBUTING.md
44
+ - Tests for 8 previously uncovered components: breadcrumb, empty-state, list, radio, skeleton, spinner, tag, toggle
45
+ - Auto-sync of `FORMAUI_VERSION` from `package.json` at build time
46
+ - Syntax highlighting in docs code blocks (Prism.js)
47
+ - Custom color support for badges via hex strings or explicit color pairs
48
+ - Type declaration for `AdvancedDataTableHeader.type`
49
+
50
+ ### Fixed
51
+ - README package name in install and import examples (was `formaui/*`, now `@raintonic/formaui/*`)
52
+ - Cross-entry-point import in tree-table (ng-packagr rootDir violation)
53
+ - Topbar layout on mobile viewport (< 768px)
54
+ - Nav panel position on mobile
55
+ - API viewer type-column overflow for long union types
56
+ - Select component keyboard navigation (added PageUp/PageDown)
57
+ - JSDoc examples with stale `rtButton` references
58
+ - Card header spacing handling
59
+ - Checkbox label position when set to `before`
60
+ - Toggle label position when set to `before`
61
+
62
+ ## [0.2.1] - 2026-03-31
63
+
64
+ ### Fixed
65
+ - Dialog padding on overlay and CSS compile pipeline
66
+ - README npm badge link
67
+
68
+ ## [0.2.0] - 2026-03-31
69
+
70
+ ### Added
71
+ - Initial public npm publication as `@raintonic/formaui`
72
+ - Comprehensive README for npm
73
+ - `llms.txt` generator for AI-readable component metadata
74
+ - ESLint strict + Prettier configuration
75
+ - Upgrade to Jest 30 + Angular 21.2.6
76
+ - Publish script with safety checks
77
+ - Playground code generation from knob values
78
+ - Copy-to-clipboard on code blocks
79
+ - Collapsible code panel in playground viewer
80
+
81
+ ### Fixed
82
+ - Number input behavior
83
+ - Module name mapper for publication
84
+ - Package name for publication
85
+ - Test suite alignment with new code
86
+ - Icon config exports aligned with Fui naming
87
+
88
+ ### Changed
89
+ - Standardized all class names to `Fui` prefix (internal rename — no external API was called `Rt*`)
90
+ - Replaced direct `document` access with `DOCUMENT` injection token (SSR groundwork)
91
+ - Overlay subscription cleanup (memory leak fix)
92
+ - Replaced global `@HostListener('document:click')` with conditional subscriptions (performance)
93
+ - Icon CDN made configurable with SRI support via InjectionToken
94
+ - Data table now has generic type parameter and trackBy support
95
+ - Extracted shared form control utilities (11 components simplified)
96
+ - Size tokens normalized (`sm|md|lg`), `readonly` casing normalized, ARIA attributes enriched, live announcements added
97
+
98
+ ### Removed
99
+ - Legacy `holiday`/`RainTonic` references in JSDoc
100
+ - `data-rt*` HTML attributes (renamed to `data-fui*`)
101
+
102
+ ## [0.1.0] - Pre-release (internal)
103
+
104
+ Initial standalone release.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Rain Tonic S.r.l.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,20 +1,24 @@
1
- # FormaUI
1
+ <p align="center">
2
+ <img src="https://raw.githubusercontent.com/RainTonic/formaui/main/resources/logo_black.svg" alt="FormaUI" width="360">
3
+ </p>
2
4
 
3
- A modern, standalone Angular UI component library with built-in theming, CDK primitives, and tree-shakable imports.
5
+ <h1 align="center">FormaUI</h1>
4
6
 
5
- [![npm version](https://img.shields.io/npm/v/formaui.svg)](https://www.npmjs.com/package/@raintonic/formaui)
7
+ <p align="center">A modern, standalone Angular UI component library with built-in theming, CDK primitives, and tree-shakable imports.</p>
8
+
9
+ [![npm version](https://img.shields.io/npm/v/@raintonic/formaui.svg)](https://www.npmjs.com/package/@raintonic/formaui)
6
10
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
7
11
  [![Angular](https://img.shields.io/badge/Angular-21+-dd0031.svg)](https://angular.dev)
8
12
 
9
13
  ## Features
10
14
 
11
- - **45 standalone components** — no NgModules, just import and use
15
+ - **44 standalone components** — no NgModules, just import and use
12
16
  - **Tree-shakable** — secondary entry points via ng-packagr, import only what you need
13
17
  - **Theming system** — CSS custom properties with light/dark themes out of the box
14
18
  - **CDK layer** — overlay/portal system, drag-drop, virtual-scroll, form-field primitives
15
19
  - **Signals-first** — reactive state management with Angular signals
16
20
  - **Accessible** — built-in a11y support with testing utilities (axe-core)
17
- - **Form integration** — components implement `RtFormFieldControl` for seamless `fui-form-field` integration
21
+ - **Form integration** — components implement `FuiFormFieldControl` for seamless `fui-form-field` integration
18
22
 
19
23
  ## Installation
20
24
 
@@ -32,30 +36,76 @@ npm install @raintonic/formaui
32
36
  }
33
37
  ```
34
38
 
35
- ## Setup
39
+ ## Browser support
40
+
41
+ FormaUI supports the last 2 versions of Chrome, Firefox, Safari, Edge, and iOS Safari. Internet Explorer is not supported.
42
+
43
+ Exact matrix: see `.browserslistrc`.
44
+
45
+ ## Versioning
46
+
47
+ FormaUI follows [Semantic Versioning](https://semver.org/). From v1.0.0 onwards:
48
+
49
+ - **MAJOR** — breaking API changes
50
+ - **MINOR** — new features, backwards-compatible
51
+ - **PATCH** — bug fixes, backwards-compatible
52
+
53
+ Versions prior to 1.0.0 (`0.x.x`) did not carry a stability guarantee.
54
+
55
+ ## Quick start
56
+
57
+ Install:
58
+
59
+ ```bash
60
+ npm install @raintonic/formaui
61
+ ```
36
62
 
37
- Import the base styles in your `styles.scss`:
63
+ Import base styles in `src/styles.scss`:
38
64
 
39
65
  ```scss
40
66
  @use '@raintonic/formaui/styles' as fui;
41
67
  ```
42
68
 
69
+ Use components in a standalone component:
70
+
71
+ ```typescript
72
+ import { Component } from '@angular/core';
73
+ import { FuiButtonDirective } from '@raintonic/formaui/components/button';
74
+ import { FuiFormFieldComponent, FuiLabelComponent } from '@raintonic/formaui/components/form-field';
75
+ import { FuiInputDirective } from '@raintonic/formaui/components/input';
76
+
77
+ @Component({
78
+ standalone: true,
79
+ imports: [FuiButtonDirective, FuiFormFieldComponent, FuiLabelComponent, FuiInputDirective],
80
+ template: `
81
+ <fui-form-field>
82
+ <fui-label>Email</fui-label>
83
+ <input fuiInput type="email" />
84
+ </fui-form-field>
85
+ <button fuiButton variant="primary">Save</button>
86
+ `,
87
+ })
88
+ export class MyFormComponent {}
89
+ ```
90
+
91
+ See the full docs at [formaui.raintonic.com](https://formaui.raintonic.com).
92
+
43
93
  ## Usage
44
94
 
45
95
  All imports use secondary entry points:
46
96
 
47
97
  ```typescript
48
- import { ButtonDirective } from '@raintonic/formaui/components/button';
49
- import { RtFormFieldComponent } from '@raintonic/formaui/components/form-field';
50
- import { InputDirective } from '@raintonic/formaui/components/input';
51
- import { ThemeService } from '@raintonic/formaui/services/theme';
98
+ import { FuiButtonDirective } from '@raintonic/formaui/components/button';
99
+ import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';
100
+ import { FuiInputDirective } from '@raintonic/formaui/components/input';
101
+ import { FuiThemeService } from '@raintonic/formaui/services/theme';
52
102
  ```
53
103
 
54
104
  ### Button
55
105
 
56
106
  ```html
57
- <button fui-button variant="primary">Save</button>
58
- <button fui-button variant="outlined">Cancel</button>
107
+ <button fuiButton variant="primary">Save</button>
108
+ <button fuiButton variant="secondary">Cancel</button>
59
109
  ```
60
110
 
61
111
  ### Form Field
@@ -70,10 +120,10 @@ import { ThemeService } from '@raintonic/formaui/services/theme';
70
120
  ### Theme Switching
71
121
 
72
122
  ```typescript
73
- import { ThemeService } from '@raintonic/formaui/services/theme';
123
+ import { FuiThemeService } from '@raintonic/formaui/services/theme';
74
124
 
75
125
  export class AppComponent {
76
- private theme = inject(ThemeService);
126
+ private theme = inject(FuiThemeService);
77
127
 
78
128
  toggleDark() {
79
129
  this.theme.toggleTheme();
@@ -87,7 +137,7 @@ All components use the `fui` prefix and are standalone.
87
137
 
88
138
  | Category | Components |
89
139
  |---|---|
90
- | **Forms** | `autocomplete` `checkbox` `date-picker` `dynamic-form` `file-upload` `form-field` `input` `number-input` `password-input` `radio` `select` `slider` `time-picker` `toggle` `tree-select` |
140
+ | **Forms** | `autocomplete` `checkbox` `date-picker` `file-upload` `form-field` `input` `number-input` `password-input` `radio` `select` `slider` `time-picker` `toggle` `tree-select` |
91
141
  | **Data** | `data-table` `list` `paginator` `tree` `tree-table` |
92
142
  | **Layout** | `accordion` `card` `divider` `sidebar` `side-panel` `tab` `toolbar` |
93
143
  | **Navigation** | `breadcrumb` `menu` `big-menu` `stepper` |
@@ -98,7 +148,7 @@ All components use the `fui` prefix and are standalone.
98
148
  ### Import Pattern
99
149
 
100
150
  ```typescript
101
- import { <Component> } from '@raintonic/formaui/components/<name>';
151
+ import { Fui<Component> } from '@raintonic/formaui/components/<name>';
102
152
  ```
103
153
 
104
154
  ## CDK
@@ -107,25 +157,25 @@ Low-level primitives for building custom components.
107
157
 
108
158
  | Module | Description |
109
159
  |---|---|
110
- | `formaui/cdk/overlay` | Overlay and portal positioning system |
111
- | `formaui/cdk/drag-drop` | Drag and drop functionality |
112
- | `formaui/cdk/virtual-scroll` | Virtual scrolling for large lists |
113
- | `formaui/cdk/form-field` | Form field infrastructure and control interface |
160
+ | `@raintonic/formaui/cdk/overlay` | Overlay and portal positioning system |
161
+ | `@raintonic/formaui/cdk/drag-drop` | Drag and drop functionality |
162
+ | `@raintonic/formaui/cdk/virtual-scroll` | Virtual scrolling for large lists |
163
+ | `@raintonic/formaui/cdk/form-field` | Form field infrastructure and control interface |
114
164
 
115
165
  ## Services
116
166
 
117
167
  | Service | Import | Description |
118
168
  |---|---|---|
119
- | **Dialog** | `formaui/services/dialog` | Modal dialog management |
120
- | **Notification** | `formaui/services/notification` | Toast notifications |
121
- | **Theme** | `formaui/services/theme` | Runtime theme switching |
169
+ | **Dialog** | `@raintonic/formaui/services/dialog` | Modal dialog management |
170
+ | **Notification** | `@raintonic/formaui/services/notification` | Toast notifications |
171
+ | **Theme** | `@raintonic/formaui/services/theme` | Runtime theme switching |
122
172
 
123
173
  ## Theming
124
174
 
125
175
  FormaUI uses CSS custom properties (`--fui-*`) for all design tokens. Two themes are included:
126
176
 
127
177
  - **Light** (default) — applied to `:root`
128
- - **Dark** — toggled via `ThemeService`
178
+ - **Dark** — toggled via `FuiThemeService`
129
179
 
130
180
  Tokens cover spacing, typography, colors, motion, and elevation. Override any `--fui-*` variable to customize.
131
181
 
@@ -140,6 +190,10 @@ npm run serve:docs # Serve docs app locally
140
190
 
141
191
  Requires Node >= 22.16.0.
142
192
 
193
+ ## Documentation
194
+
195
+ Full documentation and live component demos at [formaui.raintonic.com](https://formaui.raintonic.com).
196
+
143
197
  ## License
144
198
 
145
- [MIT](https://opensource.org/licenses/MIT)
199
+ [MIT](https://opensource.org/licenses/MIT) — Copyright © Rain Tonic S.r.l.
@@ -117,7 +117,7 @@ class FuiExpansionPanelComponent {
117
117
  }
118
118
  }
119
119
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
120
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiExpansionPanelComponent, isStandalone: true, selector: "fui-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.fui-expansion-panel--expanded": "_expanded()", "class.fui-expansion-panel--disabled": "disabled()", "class.fui-expansion-panel--animating": "_animating()" }, classAttribute: "fui-expansion-panel" }, ngImport: i0, template: "<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() || _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\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)}.fui-expansion-panel{display:block;background-color:var(--fui-surface-card, var(--fui-surface-01));border-bottom:1px solid var(--fui-border-color)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-border-radius-sm);border-top-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-border-radius-sm);border-bottom-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-padding-16, 1rem) var(--fui-padding-24, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-surface-hover, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-gap-4, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-gap-16, 1rem);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{max-height:0;overflow:hidden;transition:max-height var(--fui-duration-moderate-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__body--expanded{max-height:1000px}.fui-expansion-panel__body-inner{padding:0 var(--fui-padding-24, 1.5rem) var(--fui-padding-16, 1rem);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-font-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:0}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
120
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiExpansionPanelComponent, isStandalone: true, selector: "fui-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", expandedChange: "expandedChange", afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.fui-expansion-panel--expanded": "_expanded()", "class.fui-expansion-panel--disabled": "disabled()", "class.fui-expansion-panel--animating": "_animating()" }, classAttribute: "fui-expansion-panel" }, ngImport: i0, template: "<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() || _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\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-expansion-panel{display:block;background-color:var(--fui-surface-card, var(--fui-surface-01));border-bottom:1px solid var(--fui-border-color)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-border-radius-sm);border-top-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-border-radius-sm);border-bottom-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-padding-16, 1rem) var(--fui-padding-24, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-surface-hover, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-gap-4, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-gap-16, 1rem);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{max-height:0;overflow:hidden;transition:max-height var(--fui-duration-moderate-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__body--expanded{max-height:1000px}.fui-expansion-panel__body-inner{padding:0 var(--fui-padding-24, 1.5rem) var(--fui-padding-16, 1rem);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-font-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:0}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
121
121
  }
122
122
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiExpansionPanelComponent, decorators: [{
123
123
  type: Component,
@@ -126,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
126
126
  '[class.fui-expansion-panel--expanded]': '_expanded()',
127
127
  '[class.fui-expansion-panel--disabled]': 'disabled()',
128
128
  '[class.fui-expansion-panel--animating]': '_animating()',
129
- }, template: "<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() || _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\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)}.fui-expansion-panel{display:block;background-color:var(--fui-surface-card, var(--fui-surface-01));border-bottom:1px solid var(--fui-border-color)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-border-radius-sm);border-top-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-border-radius-sm);border-bottom-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-padding-16, 1rem) var(--fui-padding-24, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-surface-hover, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-gap-4, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-gap-16, 1rem);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{max-height:0;overflow:hidden;transition:max-height var(--fui-duration-moderate-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__body--expanded{max-height:1000px}.fui-expansion-panel__body-inner{padding:0 var(--fui-padding-24, 1.5rem) var(--fui-padding-16, 1rem);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-font-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:0}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{transition:none}}\n"] }]
129
+ }, template: "<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() || _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\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-expansion-panel{display:block;background-color:var(--fui-surface-card, var(--fui-surface-01));border-bottom:1px solid var(--fui-border-color)}.fui-expansion-panel:first-child{border-top-left-radius:var(--fui-border-radius-sm);border-top-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel:last-child{border-bottom:none;border-bottom-left-radius:var(--fui-border-radius-sm);border-bottom-right-radius:var(--fui-border-radius-sm)}.fui-expansion-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-padding-16, 1rem) var(--fui-padding-24, 1.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);background:transparent;border:none;outline:none;transition:background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__header:hover{background-color:var(--fui-surface-hover, rgba(0, 0, 0, .04))}.fui-expansion-panel__header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:0px}.fui-expansion-panel__header-content{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--fui-gap-4, .25rem)}.fui-expansion-panel__header-content [panelTitle]{font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary)}.fui-expansion-panel__header-content [panelDescription]{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular, 400);color:var(--fui-text-secondary)}.fui-expansion-panel__toggle-icon{flex-shrink:0;margin-left:var(--fui-gap-16, 1rem);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__toggle-icon--expanded{transform:rotate(180deg)}.fui-expansion-panel__body{max-height:0;overflow:hidden;transition:max-height var(--fui-duration-moderate-02) var(--fui-ease-standard) 0ms}.fui-expansion-panel__body--expanded{max-height:1000px}.fui-expansion-panel__body-inner{padding:0 var(--fui-padding-24, 1.5rem) var(--fui-padding-16, 1rem);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-primary)}.fui-expansion-panel--expanded .fui-expansion-panel__header{font-weight:var(--fui-font-weight-semibold, 600)}.fui-expansion-panel--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-expansion-panel--disabled .fui-expansion-panel__header{cursor:not-allowed;pointer-events:none}.fui-accordion--flat .fui-expansion-panel{border-bottom:none;background-color:transparent;border-radius:0}.fui-accordion--flat .fui-expansion-panel__header,.fui-accordion--flat .fui-expansion-panel__body-inner{padding-left:0;padding-right:0}@media(prefers-reduced-motion:reduce){.fui-expansion-panel__toggle-icon,.fui-expansion-panel__body,.fui-expansion-panel__header{transition:none}}\n"] }]
130
130
  }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], afterExpand: [{ type: i0.Output, args: ["afterExpand"] }], afterCollapse: [{ type: i0.Output, args: ["afterCollapse"] }] } });
131
131
 
132
132
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"raintonic-formaui-components-accordion.mjs","sources":["../../../lib/components/accordion/accordion.types.ts","../../../lib/components/accordion/expansion-panel.component.ts","../../../lib/components/accordion/expansion-panel.component.html","../../../lib/components/accordion/accordion.component.ts","../../../lib/components/accordion/raintonic-formaui-components-accordion.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport type AccordionDisplayMode = 'default' | 'flat';\r\n\r\nexport interface AccordionExpandedChange {\r\n source: unknown;\r\n expanded: boolean;\r\n}\r\n\r\nexport const FUI_ACCORDION = new InjectionToken<unknown>('FUI_ACCORDION');\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n signal,\r\n effect,\r\n inject,\r\n booleanAttribute,\r\n WritableSignal,\r\n ElementRef,\r\n} from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FUI_ACCORDION, AccordionDisplayMode } from './accordion.types';\r\n\r\nlet nextPanelId = 0;\r\n\r\n/**\r\n * # ExpansionPanel Component\r\n *\r\n * A collapsible panel that can be used standalone or within an `fui-accordion`.\r\n * Supports lazy rendering of content (only rendered after first open).\r\n *\r\n * ## Usage\r\n *\r\n * ### Standalone\r\n * ```html\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel Title</span>\r\n * <p>Panel content here</p>\r\n * </fui-expansion-panel>\r\n * ```\r\n *\r\n * ### Inside Accordion\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>First</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Second</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-expansion-panel',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-expansion-panel',\r\n '[class.fui-expansion-panel--expanded]': '_expanded()',\r\n '[class.fui-expansion-panel--disabled]': 'disabled()',\r\n '[class.fui-expansion-panel--animating]': '_animating()',\r\n },\r\n})\r\nexport class FuiExpansionPanelComponent {\r\n // Inputs\r\n readonly expanded = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly hideToggle = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly opened = output();\r\n readonly closed = output();\r\n readonly expandedChange = output<boolean>();\r\n readonly afterExpand = output();\r\n readonly afterCollapse = output();\r\n\r\n // Internal state\r\n readonly _expanded: WritableSignal<boolean> = signal(false);\r\n readonly _animating: WritableSignal<boolean> = signal(false);\r\n readonly _hasBeenOpened: WritableSignal<boolean> = signal(false);\r\n\r\n // ARIA IDs\r\n private readonly _panelId = nextPanelId++;\r\n readonly _headerId = `fui-expansion-panel-header-${this._panelId}`;\r\n readonly _contentId = `fui-expansion-panel-content-${this._panelId}`;\r\n\r\n // Parent accordion (optional)\r\n private readonly _accordion = inject(FUI_ACCORDION, { optional: true }) as {\r\n multi: () => boolean;\r\n displayMode: () => AccordionDisplayMode;\r\n _closeOtherPanels: (panel: FuiExpansionPanelComponent) => void;\r\n } | null;\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n // Sync expanded input to internal state\r\n effect(() => {\r\n const inputExpanded = this.expanded();\r\n this._expanded.set(inputExpanded);\r\n if (inputExpanded) {\r\n this._hasBeenOpened.set(true);\r\n }\r\n });\r\n }\r\n\r\n /** Toggles the expanded state of the panel. */\r\n toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n if (this._expanded()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n /** Opens the panel. */\r\n open(): void {\r\n if (this.disabled() || this._expanded()) {\r\n return;\r\n }\r\n\r\n this._hasBeenOpened.set(true);\r\n this._animating.set(true);\r\n this._expanded.set(true);\r\n this.expandedChange.emit(true);\r\n this.opened.emit();\r\n\r\n // Notify parent accordion to close other panels if in single mode\r\n if (this._accordion) {\r\n this._accordion._closeOtherPanels(this);\r\n }\r\n }\r\n\r\n /** Closes the panel. */\r\n close(): void {\r\n if (this.disabled() || !this._expanded()) {\r\n return;\r\n }\r\n\r\n this._animating.set(true);\r\n this._expanded.set(false);\r\n this.expandedChange.emit(false);\r\n this.closed.emit();\r\n }\r\n\r\n /** Called when the body transition ends. */\r\n _onBodyTransitionEnd(event: TransitionEvent): void {\r\n if (event.propertyName === 'max-height') {\r\n this._animating.set(false);\r\n if (this._expanded()) {\r\n this.afterExpand.emit();\r\n } else {\r\n this.afterCollapse.emit();\r\n }\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() || _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n contentChildren,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { FuiExpansionPanelComponent } from './expansion-panel.component';\r\nimport { AccordionDisplayMode, FUI_ACCORDION } from './accordion.types';\r\n\r\n/**\r\n * # Accordion Component\r\n *\r\n * Groups multiple `fui-expansion-panel` components.\r\n * In single mode (default), only one panel can be expanded at a time.\r\n * In multi mode, multiple panels can be expanded simultaneously.\r\n *\r\n * ## Usage\r\n *\r\n * ### Single mode (default)\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 1</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 2</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n *\r\n * ### Multi mode\r\n * ```html\r\n * <fui-accordion [multi]=\"true\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n *\r\n * ### Flat display mode\r\n * ```html\r\n * <fui-accordion displayMode=\"flat\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-accordion',\r\n standalone: true,\r\n template: '<ng-content></ng-content>',\r\n styleUrls: ['./accordion.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-accordion',\r\n '[class.fui-accordion--flat]': 'displayMode() === \"flat\"',\r\n },\r\n providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }],\r\n})\r\nexport class FuiAccordionComponent {\r\n // Inputs\r\n readonly multi = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly displayMode = input<AccordionDisplayMode>('default');\r\n\r\n // Content children\r\n readonly panels = contentChildren(FuiExpansionPanelComponent);\r\n\r\n /** Opens all panels. Only effective in multi mode. */\r\n openAll(): void {\r\n if (!this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n panel.open();\r\n });\r\n }\r\n\r\n /** Closes all panels. */\r\n closeAll(): void {\r\n this.panels().forEach((panel) => {\r\n panel.close();\r\n });\r\n }\r\n\r\n /** Closes all panels except the specified one. Used internally by panels. */\r\n _closeOtherPanels(openedPanel: FuiExpansionPanelComponent): void {\r\n if (this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n if (panel !== openedPanel) {\r\n panel.close();\r\n }\r\n });\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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"}
1
+ {"version":3,"file":"raintonic-formaui-components-accordion.mjs","sources":["../../../lib/components/accordion/accordion.types.ts","../../../lib/components/accordion/expansion-panel.component.ts","../../../lib/components/accordion/expansion-panel.component.html","../../../lib/components/accordion/accordion.component.ts","../../../lib/components/accordion/raintonic-formaui-components-accordion.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport type AccordionDisplayMode = 'default' | 'flat';\r\n\r\nexport interface AccordionExpandedChange {\r\n source: unknown;\r\n expanded: boolean;\r\n}\r\n\r\nexport const FUI_ACCORDION = new InjectionToken<unknown>('FUI_ACCORDION');\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n signal,\r\n effect,\r\n inject,\r\n booleanAttribute,\r\n WritableSignal,\r\n ElementRef,\r\n} from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FUI_ACCORDION, AccordionDisplayMode } from './accordion.types';\r\n\r\nlet nextPanelId = 0;\r\n\r\n/**\r\n * # ExpansionPanel Component\r\n *\r\n * A collapsible panel that can be used standalone or within an `fui-accordion`.\r\n * Supports lazy rendering of content (only rendered after first open).\r\n *\r\n * ## Usage\r\n *\r\n * ### Standalone\r\n * ```html\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel Title</span>\r\n * <p>Panel content here</p>\r\n * </fui-expansion-panel>\r\n * ```\r\n *\r\n * ### Inside Accordion\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>First</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Second</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-expansion-panel',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './expansion-panel.component.html',\r\n styleUrls: ['./expansion-panel.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-expansion-panel',\r\n '[class.fui-expansion-panel--expanded]': '_expanded()',\r\n '[class.fui-expansion-panel--disabled]': 'disabled()',\r\n '[class.fui-expansion-panel--animating]': '_animating()',\r\n },\r\n})\r\nexport class FuiExpansionPanelComponent {\r\n // Inputs\r\n readonly expanded = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly hideToggle = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly opened = output();\r\n readonly closed = output();\r\n readonly expandedChange = output<boolean>();\r\n readonly afterExpand = output();\r\n readonly afterCollapse = output();\r\n\r\n // Internal state\r\n readonly _expanded: WritableSignal<boolean> = signal(false);\r\n readonly _animating: WritableSignal<boolean> = signal(false);\r\n readonly _hasBeenOpened: WritableSignal<boolean> = signal(false);\r\n\r\n // ARIA IDs\r\n private readonly _panelId = nextPanelId++;\r\n readonly _headerId = `fui-expansion-panel-header-${this._panelId}`;\r\n readonly _contentId = `fui-expansion-panel-content-${this._panelId}`;\r\n\r\n // Parent accordion (optional)\r\n private readonly _accordion = inject(FUI_ACCORDION, { optional: true }) as {\r\n multi: () => boolean;\r\n displayMode: () => AccordionDisplayMode;\r\n _closeOtherPanels: (panel: FuiExpansionPanelComponent) => void;\r\n } | null;\r\n\r\n private readonly _elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n // Sync expanded input to internal state\r\n effect(() => {\r\n const inputExpanded = this.expanded();\r\n this._expanded.set(inputExpanded);\r\n if (inputExpanded) {\r\n this._hasBeenOpened.set(true);\r\n }\r\n });\r\n }\r\n\r\n /** Toggles the expanded state of the panel. */\r\n toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n if (this._expanded()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n /** Opens the panel. */\r\n open(): void {\r\n if (this.disabled() || this._expanded()) {\r\n return;\r\n }\r\n\r\n this._hasBeenOpened.set(true);\r\n this._animating.set(true);\r\n this._expanded.set(true);\r\n this.expandedChange.emit(true);\r\n this.opened.emit();\r\n\r\n // Notify parent accordion to close other panels if in single mode\r\n if (this._accordion) {\r\n this._accordion._closeOtherPanels(this);\r\n }\r\n }\r\n\r\n /** Closes the panel. */\r\n close(): void {\r\n if (this.disabled() || !this._expanded()) {\r\n return;\r\n }\r\n\r\n this._animating.set(true);\r\n this._expanded.set(false);\r\n this.expandedChange.emit(false);\r\n this.closed.emit();\r\n }\r\n\r\n /** Called when the body transition ends. */\r\n _onBodyTransitionEnd(event: TransitionEvent): void {\r\n if (event.propertyName === 'max-height') {\r\n this._animating.set(false);\r\n if (this._expanded()) {\r\n this.afterExpand.emit();\r\n } else {\r\n this.afterCollapse.emit();\r\n }\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"fui-expansion-panel__header\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n role=\"button\"\r\n [attr.aria-expanded]=\"_expanded()\"\r\n [attr.aria-controls]=\"_contentId\"\r\n [attr.id]=\"_headerId\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n>\r\n <div class=\"fui-expansion-panel__header-content\">\r\n <ng-content select=\"[panelTitle]\"></ng-content>\r\n <ng-content select=\"[panelDescription]\"></ng-content>\r\n </div>\r\n @if (!hideToggle()) {\r\n <fui-icon\r\n class=\"fui-expansion-panel__toggle-icon\"\r\n [class.fui-expansion-panel__toggle-icon--expanded]=\"_expanded()\"\r\n name=\"caret-down\"\r\n size=\"sm\"\r\n ></fui-icon>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"fui-expansion-panel__body\"\r\n [attr.id]=\"_contentId\"\r\n [attr.aria-labelledby]=\"_headerId\"\r\n role=\"region\"\r\n [class.fui-expansion-panel__body--expanded]=\"_expanded()\"\r\n (transitionend)=\"_onBodyTransitionEnd($event)\"\r\n>\r\n <div class=\"fui-expansion-panel__body-inner\">\r\n @if (_expanded() || _hasBeenOpened()) {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n</div>\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n contentChildren,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { FuiExpansionPanelComponent } from './expansion-panel.component';\r\nimport { AccordionDisplayMode, FUI_ACCORDION } from './accordion.types';\r\n\r\n/**\r\n * # Accordion Component\r\n *\r\n * Groups multiple `fui-expansion-panel` components.\r\n * In single mode (default), only one panel can be expanded at a time.\r\n * In multi mode, multiple panels can be expanded simultaneously.\r\n *\r\n * ## Usage\r\n *\r\n * ### Single mode (default)\r\n * ```html\r\n * <fui-accordion>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 1</span>\r\n * Content 1\r\n * </fui-expansion-panel>\r\n * <fui-expansion-panel>\r\n * <span panelTitle>Panel 2</span>\r\n * Content 2\r\n * </fui-expansion-panel>\r\n * </fui-accordion>\r\n * ```\r\n *\r\n * ### Multi mode\r\n * ```html\r\n * <fui-accordion [multi]=\"true\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n *\r\n * ### Flat display mode\r\n * ```html\r\n * <fui-accordion displayMode=\"flat\">\r\n * ...\r\n * </fui-accordion>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-accordion',\r\n standalone: true,\r\n template: '<ng-content></ng-content>',\r\n styleUrls: ['./accordion.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-accordion',\r\n '[class.fui-accordion--flat]': 'displayMode() === \"flat\"',\r\n },\r\n providers: [{ provide: FUI_ACCORDION, useExisting: FuiAccordionComponent }],\r\n})\r\nexport class FuiAccordionComponent {\r\n // Inputs\r\n readonly multi = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly displayMode = input<AccordionDisplayMode>('default');\r\n\r\n // Content children\r\n readonly panels = contentChildren(FuiExpansionPanelComponent);\r\n\r\n /** Opens all panels. Only effective in multi mode. */\r\n openAll(): void {\r\n if (!this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n panel.open();\r\n });\r\n }\r\n\r\n /** Closes all panels. */\r\n closeAll(): void {\r\n this.panels().forEach((panel) => {\r\n panel.close();\r\n });\r\n }\r\n\r\n /** Closes all panels except the specified one. Used internally by panels. */\r\n _closeOtherPanels(openedPanel: FuiExpansionPanelComponent): void {\r\n if (this.multi()) {\r\n return;\r\n }\r\n this.panels().forEach((panel) => {\r\n if (panel !== openedPanel) {\r\n panel.close();\r\n }\r\n });\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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"}
@@ -1,7 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
2
+ import { Injectable, inject, ChangeDetectorRef, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
3
4
  import { FuiIconComponent } from '@raintonic/formaui/components/icon';
4
5
  import { FuiProgressbarComponent } from '@raintonic/formaui/components/progressbar';
6
+ import { FuiIntlBase } from '@raintonic/formaui/core';
5
7
 
6
8
  const FUI_ALERT_VARIANTS = [
7
9
  'primary',
@@ -20,6 +22,16 @@ const FUI_NOTIFICATION_POSITIONS = [
20
22
  'bottom-right',
21
23
  ];
22
24
 
25
+ class FuiAlertIntl extends FuiIntlBase {
26
+ closeAriaLabel = 'Close alert';
27
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
28
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertIntl, providedIn: 'root' });
29
+ }
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertIntl, decorators: [{
31
+ type: Injectable,
32
+ args: [{ providedIn: 'root' }]
33
+ }] });
34
+
23
35
  /**
24
36
  * # FuiAlertComponent
25
37
  *
@@ -65,6 +77,13 @@ const FUI_NOTIFICATION_POSITIONS = [
65
77
  * ```
66
78
  */
67
79
  class FuiAlertComponent {
80
+ intl = inject(FuiAlertIntl);
81
+ _cdr = inject(ChangeDetectorRef);
82
+ constructor() {
83
+ this.intl.changes
84
+ .pipe(takeUntilDestroyed())
85
+ .subscribe(() => { this._cdr.markForCheck(); });
86
+ }
68
87
  /**
69
88
  * Alert variant (determines color scheme and default icon)
70
89
  */
@@ -141,7 +160,7 @@ class FuiAlertComponent {
141
160
  this.closed.emit();
142
161
  }
143
162
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
144
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAlertComponent, isStandalone: true, selector: "fui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "computedClasses()", "attr.role": "computedRole()", "attr.aria-live": "computedAriaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"\r\n variant() === 'success'\r\n ? 'success'\r\n : variant() === 'warning'\r\n ? 'warn'\r\n : variant() === 'error'\r\n ? 'warn'\r\n : 'primary'\r\n \"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" aria-label=\"Close alert\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\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)}fui-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-border-radius-sm);--fui-alert-padding: var(--fui-spacing-04);--fui-alert-gap: var(--fui-spacing-04);--fui-alert-close-padding: var(--fui-spacing-02);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-family-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:1px solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0}:host.fui-alert .fui-alert__title{margin:0}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-02);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__close:hover{background-color:var(--fui-black-10)}:host.fui-alert .fui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-danger-20);--fui-alert-color: var(--fui-danger-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-danger-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-secondary-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiProgressbarComponent, selector: "fui-progressbar", inputs: ["mode", "value", "bufferValue", "color", "aria-label", "aria-labelledby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
163
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAlertComponent, isStandalone: true, selector: "fui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "computedClasses()", "attr.role": "computedRole()", "attr.aria-live": "computedAriaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"\r\n variant() === 'success'\r\n ? 'success'\r\n : variant() === 'warning'\r\n ? 'warn'\r\n : variant() === 'error'\r\n ? 'warn'\r\n : 'primary'\r\n \"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\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-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-border-radius-sm);--fui-alert-padding: var(--fui-spacing-04);--fui-alert-gap: var(--fui-spacing-04);--fui-alert-close-padding: var(--fui-spacing-02);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-family-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:1px solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0}:host.fui-alert .fui-alert__title{margin:0}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-02);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__close:hover{background-color:var(--fui-black-10)}:host.fui-alert .fui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-danger-20);--fui-alert-color: var(--fui-danger-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-danger-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-secondary-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiProgressbarComponent, selector: "fui-progressbar", inputs: ["mode", "value", "bufferValue", "color", "aria-label", "aria-labelledby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
145
164
  }
146
165
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAlertComponent, decorators: [{
147
166
  type: Component,
@@ -150,12 +169,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
150
169
  '[attr.role]': 'computedRole()',
151
170
  '[attr.aria-live]': 'computedAriaLive()',
152
171
  '[attr.aria-atomic]': '"true"',
153
- }, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"\r\n variant() === 'success'\r\n ? 'success'\r\n : variant() === 'warning'\r\n ? 'warn'\r\n : variant() === 'error'\r\n ? 'warn'\r\n : 'primary'\r\n \"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" aria-label=\"Close alert\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\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)}fui-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-border-radius-sm);--fui-alert-padding: var(--fui-spacing-04);--fui-alert-gap: var(--fui-spacing-04);--fui-alert-close-padding: var(--fui-spacing-02);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-family-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:1px solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0}:host.fui-alert .fui-alert__title{margin:0}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-02);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__close:hover{background-color:var(--fui-black-10)}:host.fui-alert .fui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-danger-20);--fui-alert-color: var(--fui-danger-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-danger-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-secondary-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"] }]
154
- }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
172
+ }, template: "@if (progress() !== 0) {\r\n <fui-progressbar\r\n [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n [value]=\"progress() > 0 ? progress() : undefined\"\r\n [color]=\"\r\n variant() === 'success'\r\n ? 'success'\r\n : variant() === 'warning'\r\n ? 'warn'\r\n : variant() === 'error'\r\n ? 'warn'\r\n : 'primary'\r\n \"\r\n ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n <div class=\"fui-alert__content\">\r\n <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n @if (description()) {\r\n <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n }\r\n </div>\r\n\r\n @if (closeable()) {\r\n <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\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-progressbar{position:absolute;top:0;left:0}:host.fui-alert{--fui-alert-bg: transparent;--fui-alert-color: inherit;--fui-alert-border-color: transparent;--fui-alert-border-radius: var(--fui-border-radius-sm);--fui-alert-padding: var(--fui-spacing-04);--fui-alert-gap: var(--fui-spacing-04);--fui-alert-close-padding: var(--fui-spacing-02);contain:layout style;position:relative;overflow:hidden;display:flex;font-family:var(--fui-font-family-sans);background-color:var(--fui-alert-bg);color:var(--fui-alert-color);border:1px solid var(--fui-alert-border-color);border-radius:var(--fui-alert-border-radius);padding:var(--fui-alert-padding);transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__container{display:flex;align-items:flex-start;gap:var(--fui-alert-gap);width:100%}:host.fui-alert .fui-alert__content{flex:1;min-width:0}:host.fui-alert .fui-alert__title{margin:0}:host.fui-alert .fui-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;padding:var(--fui-spacing-02);margin:-2px -2px 0 0;cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}:host.fui-alert .fui-alert__close:hover{background-color:var(--fui-black-10)}:host.fui-alert .fui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host.fui-alert .fui-alert__close:active{transform:scale(.95)}:host.fui-alert--primary{--fui-alert-bg: var(--fui-primary-20);--fui-alert-color: var(--fui-primary-70)}:host.fui-alert--primary .fui-alert__icon{color:var(--fui-primary-70)}:host.fui-alert--success{--fui-alert-bg: var(--fui-success-20);--fui-alert-color: var(--fui-success-100)}:host.fui-alert--success .fui-alert__icon{color:var(--fui-success-100)}:host.fui-alert--info{--fui-alert-bg: var(--fui-info-10);--fui-alert-color: var(--fui-info-100)}:host.fui-alert--info .fui-alert__icon{color:var(--fui-info-100)}:host.fui-alert--warning{--fui-alert-bg: var(--fui-warning-20);--fui-alert-color: var(--fui-warning-100)}:host.fui-alert--warning .fui-alert__icon{color:var(--fui-warning-100)}:host.fui-alert--error{--fui-alert-bg: var(--fui-danger-20);--fui-alert-color: var(--fui-danger-100)}:host.fui-alert--error .fui-alert__icon{color:var(--fui-danger-100)}:host.fui-alert--generic{--fui-alert-bg: var(--fui-secondary-20);--fui-alert-color: var(--fui-text-primary)}:host.fui-alert--generic .fui-alert__icon{color:var(--fui-primary-70)}@media(prefers-reduced-motion:reduce){:host.fui-alert{transition:none}:host.fui-alert .fui-alert__close{transition:none}}\n"] }]
173
+ }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
155
174
 
156
175
  /**
157
176
  * Generated bundle index. Do not edit.
158
177
  */
159
178
 
160
- export { FUI_ALERT_VARIANTS, FUI_NOTIFICATION_POSITIONS, FuiAlertComponent };
179
+ export { FUI_ALERT_VARIANTS, FUI_NOTIFICATION_POSITIONS, FuiAlertComponent, FuiAlertIntl };
161
180
  //# sourceMappingURL=raintonic-formaui-components-alert.mjs.map