@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (178) hide show
  1. package/fesm2022/radix-ng-primitives-accordion.mjs +105 -38
  2. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
  3. package/fesm2022/radix-ng-primitives-alert-dialog.mjs +221 -129
  4. package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
  5. package/fesm2022/radix-ng-primitives-arrow.mjs +20 -4
  6. package/fesm2022/radix-ng-primitives-arrow.mjs.map +1 -1
  7. package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-avatar.mjs +54 -61
  9. package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
  10. package/fesm2022/radix-ng-primitives-button.mjs +123 -0
  11. package/fesm2022/radix-ng-primitives-button.mjs.map +1 -0
  12. package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
  13. package/fesm2022/radix-ng-primitives-checkbox.mjs +378 -54
  14. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
  15. package/fesm2022/radix-ng-primitives-collapsible.mjs +182 -81
  16. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  17. package/fesm2022/radix-ng-primitives-collection.mjs +40 -57
  18. package/fesm2022/radix-ng-primitives-collection.mjs.map +1 -1
  19. package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
  20. package/fesm2022/radix-ng-primitives-context-menu.mjs +140 -424
  21. package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
  22. package/fesm2022/radix-ng-primitives-core.mjs +735 -744
  23. package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
  24. package/fesm2022/radix-ng-primitives-cropper.mjs +1 -0
  25. package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
  26. package/fesm2022/radix-ng-primitives-date-field.mjs +51 -45
  27. package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
  28. package/fesm2022/radix-ng-primitives-dialog.mjs +655 -327
  29. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  30. package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +70 -46
  31. package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
  32. package/fesm2022/radix-ng-primitives-drawer.mjs +1059 -0
  33. package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -0
  34. package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
  35. package/fesm2022/radix-ng-primitives-field.mjs +363 -0
  36. package/fesm2022/radix-ng-primitives-field.mjs.map +1 -0
  37. package/fesm2022/radix-ng-primitives-fieldset.mjs +79 -0
  38. package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -0
  39. package/fesm2022/radix-ng-primitives-focus-scope.mjs +23 -8
  40. package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
  41. package/fesm2022/radix-ng-primitives-input.mjs +172 -0
  42. package/fesm2022/radix-ng-primitives-input.mjs.map +1 -0
  43. package/fesm2022/radix-ng-primitives-label.mjs +6 -6
  44. package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
  45. package/fesm2022/radix-ng-primitives-menu.mjs +1480 -344
  46. package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
  47. package/fesm2022/radix-ng-primitives-menubar.mjs +290 -162
  48. package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
  49. package/fesm2022/radix-ng-primitives-meter.mjs +271 -0
  50. package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -0
  51. package/fesm2022/radix-ng-primitives-navigation-menu.mjs +1052 -1553
  52. package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
  53. package/fesm2022/radix-ng-primitives-number-field.mjs +1102 -367
  54. package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
  55. package/fesm2022/radix-ng-primitives-pagination.mjs.map +1 -1
  56. package/fesm2022/radix-ng-primitives-popover.mjs +978 -989
  57. package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
  58. package/fesm2022/radix-ng-primitives-popper.mjs +91 -41
  59. package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
  60. package/fesm2022/radix-ng-primitives-portal.mjs +34 -10
  61. package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
  62. package/fesm2022/radix-ng-primitives-presence.mjs +134 -246
  63. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
  64. package/fesm2022/radix-ng-primitives-preview-card.mjs +997 -0
  65. package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -0
  66. package/fesm2022/radix-ng-primitives-progress.mjs +223 -84
  67. package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
  68. package/fesm2022/radix-ng-primitives-radio.mjs +191 -51
  69. package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
  70. package/fesm2022/radix-ng-primitives-roving-focus.mjs +96 -50
  71. package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
  72. package/fesm2022/radix-ng-primitives-select.mjs +791 -509
  73. package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
  74. package/fesm2022/radix-ng-primitives-separator.mjs +12 -35
  75. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  76. package/fesm2022/radix-ng-primitives-slider.mjs +969 -717
  77. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  78. package/fesm2022/radix-ng-primitives-stepper.mjs +15 -19
  79. package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
  80. package/fesm2022/radix-ng-primitives-switch.mjs +125 -113
  81. package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
  82. package/fesm2022/radix-ng-primitives-tabs.mjs +381 -108
  83. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
  84. package/fesm2022/radix-ng-primitives-time-field.mjs +55 -46
  85. package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
  86. package/fesm2022/radix-ng-primitives-toggle-group.mjs +121 -247
  87. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  88. package/fesm2022/radix-ng-primitives-toggle.mjs +98 -61
  89. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  90. package/fesm2022/radix-ng-primitives-toolbar.mjs +303 -92
  91. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
  92. package/fesm2022/radix-ng-primitives-tooltip.mjs +690 -1071
  93. package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
  94. package/fesm2022/radix-ng-primitives-visually-hidden.mjs +25 -66
  95. package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
  96. package/meter/README.md +3 -0
  97. package/navigation-menu/README.md +2 -1
  98. package/package.json +31 -18
  99. package/portal/README.md +2 -0
  100. package/preview-card/README.md +3 -0
  101. package/schematics/collection.json +1 -0
  102. package/schematics/ng-add/index.d.ts +3 -2
  103. package/schematics/ng-add/index.js +62 -31
  104. package/schematics/ng-add/index.js.map +1 -1
  105. package/schematics/ng-add/package-config.d.ts +4 -2
  106. package/schematics/ng-add/package-config.js +10 -2
  107. package/schematics/ng-add/package-config.js.map +1 -1
  108. package/schematics/ng-add/schema.d.ts +3 -0
  109. package/schematics/ng-add/schema.js +3 -0
  110. package/schematics/ng-add/schema.js.map +1 -0
  111. package/schematics/ng-add/schema.json +14 -0
  112. package/select/README.md +2 -0
  113. package/types/radix-ng-primitives-accordion.d.ts +48 -14
  114. package/types/radix-ng-primitives-alert-dialog.d.ts +95 -38
  115. package/types/radix-ng-primitives-arrow.d.ts +1 -1
  116. package/types/radix-ng-primitives-aspect-ratio.d.ts +1 -1
  117. package/types/radix-ng-primitives-avatar.d.ts +7 -11
  118. package/types/radix-ng-primitives-button.d.ts +73 -0
  119. package/types/radix-ng-primitives-calendar.d.ts +1 -2
  120. package/types/radix-ng-primitives-checkbox.d.ts +201 -32
  121. package/types/radix-ng-primitives-collapsible.d.ts +112 -39
  122. package/types/radix-ng-primitives-collection.d.ts +38 -34
  123. package/types/radix-ng-primitives-config.d.ts +1 -1
  124. package/types/radix-ng-primitives-context-menu.d.ts +60 -116
  125. package/types/radix-ng-primitives-core.d.ts +307 -236
  126. package/types/radix-ng-primitives-cropper.d.ts +2 -2
  127. package/types/radix-ng-primitives-date-field.d.ts +38 -23
  128. package/types/radix-ng-primitives-dialog.d.ts +282 -165
  129. package/types/radix-ng-primitives-dismissable-layer.d.ts +15 -7
  130. package/types/radix-ng-primitives-drawer.d.ts +448 -0
  131. package/types/radix-ng-primitives-editable.d.ts +1 -1
  132. package/types/radix-ng-primitives-field.d.ts +373 -0
  133. package/types/radix-ng-primitives-fieldset.d.ts +48 -0
  134. package/types/radix-ng-primitives-focus-scope.d.ts +13 -5
  135. package/types/radix-ng-primitives-input.d.ts +87 -0
  136. package/types/radix-ng-primitives-label.d.ts +0 -1
  137. package/types/radix-ng-primitives-menu.d.ts +572 -99
  138. package/types/radix-ng-primitives-menubar.d.ts +60 -50
  139. package/types/radix-ng-primitives-meter.d.ts +193 -0
  140. package/types/radix-ng-primitives-navigation-menu.d.ts +422 -340
  141. package/types/radix-ng-primitives-number-field.d.ts +405 -145
  142. package/types/radix-ng-primitives-pagination.d.ts +2 -2
  143. package/types/radix-ng-primitives-popover.d.ts +365 -351
  144. package/types/radix-ng-primitives-popper.d.ts +49 -9
  145. package/types/radix-ng-primitives-portal.d.ts +14 -6
  146. package/types/radix-ng-primitives-presence.d.ts +28 -76
  147. package/types/radix-ng-primitives-preview-card.d.ts +359 -0
  148. package/types/radix-ng-primitives-progress.d.ts +174 -48
  149. package/types/radix-ng-primitives-radio.d.ts +55 -25
  150. package/types/radix-ng-primitives-roving-focus.d.ts +30 -21
  151. package/types/radix-ng-primitives-select.d.ts +475 -177
  152. package/types/radix-ng-primitives-separator.d.ts +7 -32
  153. package/types/radix-ng-primitives-slider.d.ts +315 -201
  154. package/types/radix-ng-primitives-stepper.d.ts +5 -7
  155. package/types/radix-ng-primitives-switch.d.ts +86 -71
  156. package/types/radix-ng-primitives-tabs.d.ts +213 -79
  157. package/types/radix-ng-primitives-time-field.d.ts +42 -27
  158. package/types/radix-ng-primitives-toggle-group.d.ts +85 -164
  159. package/types/radix-ng-primitives-toggle.d.ts +43 -53
  160. package/types/radix-ng-primitives-toolbar.d.ts +163 -38
  161. package/types/radix-ng-primitives-tooltip.d.ts +347 -384
  162. package/types/radix-ng-primitives-visually-hidden.d.ts +19 -19
  163. package/dropdown-menu/README.md +0 -1
  164. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +0 -581
  165. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +0 -1
  166. package/fesm2022/radix-ng-primitives-hover-card.mjs +0 -1238
  167. package/fesm2022/radix-ng-primitives-hover-card.mjs.map +0 -1
  168. package/fesm2022/radix-ng-primitives-select2.mjs +0 -897
  169. package/fesm2022/radix-ng-primitives-select2.mjs.map +0 -1
  170. package/fesm2022/radix-ng-primitives-tooltip2.mjs +0 -735
  171. package/fesm2022/radix-ng-primitives-tooltip2.mjs.map +0 -1
  172. package/hover-card/README.md +0 -3
  173. package/select2/README.md +0 -3
  174. package/tooltip2/README.md +0 -3
  175. package/types/radix-ng-primitives-dropdown-menu.d.ts +0 -171
  176. package/types/radix-ng-primitives-hover-card.d.ts +0 -471
  177. package/types/radix-ng-primitives-select2.d.ts +0 -511
  178. package/types/radix-ng-primitives-tooltip2.d.ts +0 -325
@@ -1,13 +1,10 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { OnInit, AfterViewInit, InputSignal, ModelSignal, Signal, WritableSignal, InjectionToken } from '@angular/core';
2
+ import { Signal, InjectionToken, InputSignal, ModelSignal, WritableSignal } from '@angular/core';
3
3
  import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
4
- import { DateMatcher, HourCycle, Granularity, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
5
- import { Direction } from '@angular/cdk/bidi';
6
- import { BooleanInput } from '@angular/cdk/coercion';
4
+ import { DateMatcher, HourCycle, Granularity, Direction, BooleanInput, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
7
5
  import { DateValue } from '@internationalized/date';
8
6
 
9
- declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
10
- private readonly elementRef;
7
+ declare class RdxDateFieldRootDirective {
11
8
  /**
12
9
  * The controlled checked state of the calendar.
13
10
  */
@@ -51,43 +48,57 @@ declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
51
48
  * The stepping interval for the time fields. Defaults to 1
52
49
  */
53
50
  readonly step: _angular_core.InputSignal<DateStep | undefined>;
54
- readonly step$: _angular_core.Signal<DateStep>;
51
+ readonly step$: Signal<DateStep>;
52
+ /**
53
+ * Locale- and hour-cycle-aware formatter. Recomputed whenever `locale` or
54
+ * `hourCycle` change so segments always render with the current settings.
55
+ * @ignore
56
+ */
57
+ readonly formatter: Signal<Formatter>;
55
58
  /**
56
59
  * @ignore
57
60
  */
58
- readonly defaultDate: _angular_core.Signal<DateValue>;
61
+ readonly defaultDate: Signal<DateValue>;
59
62
  /**
60
63
  * The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
61
64
  */
62
65
  readonly placeholder: _angular_core.ModelSignal<DateValue | undefined>;
63
66
  /**
67
+ * Segment input parts, collected from the projected content in DOM order. This
68
+ * stays in sync with `segmentContents()` (granularity / locale / value changes
69
+ * add or remove segments) instead of being captured once after view init.
64
70
  * @ignore
65
71
  */
66
- readonly segmentElements: _angular_core.WritableSignal<Set<HTMLElement>>;
72
+ private readonly segmentInputs;
67
73
  /**
74
+ * The focusable (non-literal) segment elements, in DOM order.
68
75
  * @ignore
69
76
  */
70
- readonly currentFocusedElement: _angular_core.WritableSignal<HTMLElement | null>;
77
+ readonly segmentElements: Signal<HTMLElement[]>;
71
78
  /**
72
79
  * @ignore
73
80
  */
74
- formatter: Formatter;
81
+ readonly currentFocusedElement: _angular_core.WritableSignal<HTMLElement | null>;
75
82
  /**
76
83
  * @ignore
77
84
  */
78
- readonly segmentValues: _angular_core.WritableSignal<SegmentValueObj>;
85
+ readonly inferredGranularity: Signal<Granularity | undefined>;
79
86
  /**
87
+ * The per-segment values. Writable so segment editing (via `useDateField`) can
88
+ * update individual parts, but re-synced from the model whenever the value,
89
+ * granularity or formatter change — so a controlled `value` set after init is
90
+ * reflected, and an empty field re-initializes when granularity changes.
80
91
  * @ignore
81
92
  */
82
- readonly inferredGranularity: _angular_core.Signal<Granularity | undefined>;
93
+ readonly segmentValues: _angular_core.WritableSignal<SegmentValueObj>;
83
94
  /**
84
95
  * @ignore
85
96
  */
86
- readonly isInvalid: _angular_core.Signal<boolean>;
97
+ readonly isInvalid: Signal<boolean>;
87
98
  /**
88
99
  * @ignore
89
100
  */
90
- readonly allSegmentContent: _angular_core.Signal<{
101
+ readonly allSegmentContent: Signal<{
91
102
  obj: _radix_ng_primitives_core.SegmentContentObj;
92
103
  arr: {
93
104
  part: _radix_ng_primitives_core.SegmentPart;
@@ -97,29 +108,27 @@ declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
97
108
  /**
98
109
  * An array of segments that should be readonly, which prevent user input on them.
99
110
  */
100
- readonly segmentContents: _angular_core.Signal<{
111
+ readonly segmentContents: Signal<{
101
112
  part: _radix_ng_primitives_core.SegmentPart;
102
113
  value: string;
103
114
  }[]>;
104
115
  /**
105
116
  * @ignore
106
117
  */
107
- readonly currentSegmentIndex: _angular_core.Signal<number>;
118
+ readonly currentSegmentIndex: Signal<number>;
108
119
  /**
109
120
  * @ignore
110
121
  */
111
- readonly prevFocusableSegment: _angular_core.Signal<HTMLElement | null>;
122
+ readonly prevFocusableSegment: Signal<HTMLElement | null>;
112
123
  /**
113
124
  * @ignore
114
125
  */
115
- readonly nextFocusableSegment: _angular_core.Signal<HTMLElement | null>;
126
+ readonly nextFocusableSegment: Signal<HTMLElement | null>;
116
127
  /**
117
128
  * @ignore
118
129
  */
119
130
  readonly focusNext: () => void;
120
131
  constructor();
121
- ngOnInit(): void;
122
- ngAfterViewInit(): void;
123
132
  /**
124
133
  * @ignore
125
134
  */
@@ -129,11 +138,17 @@ declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
129
138
  */
130
139
  setFocusedElement(el: HTMLElement): void;
131
140
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDateFieldRootDirective, never>;
132
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDateFieldRootDirective, "[rdxDateFieldRoot]", ["rdxDateFieldRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "isDateUnavailable": { "alias": "isDateUnavailable"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "hideTimeZone": { "alias": "hideTimeZone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, never, never, true, never>;
141
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDateFieldRootDirective, "[rdxDateFieldRoot]", ["rdxDateFieldRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "isDateUnavailable": { "alias": "isDateUnavailable"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "hideTimeZone": { "alias": "hideTimeZone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, ["segmentInputs"], never, true, never>;
133
142
  }
134
143
 
135
144
  declare class RdxDateFieldInputDirective {
136
145
  private readonly elementRef;
146
+ /**
147
+ * The host element of this segment. Consumed by the root to collect focusable
148
+ * segments in DOM order.
149
+ * @ignore
150
+ */
151
+ readonly element: HTMLElement;
137
152
  private readonly rootContext;
138
153
  /**
139
154
  * The part of the date to render
@@ -192,7 +207,7 @@ interface DateFieldContextToken {
192
207
  placeholder: ModelSignal<DateValue>;
193
208
  hourCycle: InputSignal<HourCycle>;
194
209
  step$: Signal<DateStep>;
195
- formatter: Formatter;
210
+ formatter: Signal<Formatter>;
196
211
  segmentValues: WritableSignal<SegmentValueObj>;
197
212
  focusNext: () => void;
198
213
  setFocusedElement: (el: HTMLElement) => void;