@radix-ng/primitives 0.50.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 (207) hide show
  1. package/collection/README.md +1 -0
  2. package/fesm2022/radix-ng-primitives-accordion.mjs +134 -66
  3. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
  4. package/fesm2022/radix-ng-primitives-alert-dialog.mjs +224 -132
  5. package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
  6. package/fesm2022/radix-ng-primitives-arrow.mjs +26 -10
  7. package/fesm2022/radix-ng-primitives-arrow.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-aspect-ratio.mjs +6 -6
  9. package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
  10. package/fesm2022/radix-ng-primitives-avatar.mjs +68 -75
  11. package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
  12. package/fesm2022/radix-ng-primitives-button.mjs +123 -0
  13. package/fesm2022/radix-ng-primitives-button.mjs.map +1 -0
  14. package/fesm2022/radix-ng-primitives-calendar.mjs +104 -103
  15. package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
  16. package/fesm2022/radix-ng-primitives-checkbox.mjs +414 -80
  17. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
  18. package/fesm2022/radix-ng-primitives-collapsible.mjs +193 -92
  19. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  20. package/fesm2022/radix-ng-primitives-collection.mjs +72 -0
  21. package/fesm2022/radix-ng-primitives-collection.mjs.map +1 -0
  22. package/fesm2022/radix-ng-primitives-config.mjs +5 -5
  23. package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
  24. package/fesm2022/radix-ng-primitives-context-menu.mjs +143 -427
  25. package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
  26. package/fesm2022/radix-ng-primitives-core.mjs +757 -757
  27. package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
  28. package/fesm2022/radix-ng-primitives-cropper.mjs +55 -53
  29. package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
  30. package/fesm2022/radix-ng-primitives-date-field.mjs +93 -86
  31. package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
  32. package/fesm2022/radix-ng-primitives-dialog.mjs +658 -330
  33. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  34. package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +98 -76
  35. package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
  36. package/fesm2022/radix-ng-primitives-drawer.mjs +1059 -0
  37. package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -0
  38. package/fesm2022/radix-ng-primitives-editable.mjs +20 -20
  39. package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
  40. package/fesm2022/radix-ng-primitives-field.mjs +363 -0
  41. package/fesm2022/radix-ng-primitives-field.mjs.map +1 -0
  42. package/fesm2022/radix-ng-primitives-fieldset.mjs +79 -0
  43. package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -0
  44. package/fesm2022/radix-ng-primitives-focus-guards.mjs +3 -3
  45. package/fesm2022/radix-ng-primitives-focus-guards.mjs.map +1 -1
  46. package/fesm2022/radix-ng-primitives-focus-scope.mjs +29 -14
  47. package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
  48. package/fesm2022/radix-ng-primitives-input.mjs +172 -0
  49. package/fesm2022/radix-ng-primitives-input.mjs.map +1 -0
  50. package/fesm2022/radix-ng-primitives-label.mjs +11 -11
  51. package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
  52. package/fesm2022/radix-ng-primitives-menu.mjs +1484 -353
  53. package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
  54. package/fesm2022/radix-ng-primitives-menubar.mjs +290 -162
  55. package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
  56. package/fesm2022/radix-ng-primitives-meter.mjs +271 -0
  57. package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -0
  58. package/fesm2022/radix-ng-primitives-navigation-menu.mjs +1060 -1553
  59. package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
  60. package/fesm2022/radix-ng-primitives-number-field.mjs +1102 -366
  61. package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
  62. package/fesm2022/radix-ng-primitives-pagination.mjs +51 -51
  63. package/fesm2022/radix-ng-primitives-pagination.mjs.map +1 -1
  64. package/fesm2022/radix-ng-primitives-popover.mjs +980 -995
  65. package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
  66. package/fesm2022/radix-ng-primitives-popper.mjs +137 -82
  67. package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
  68. package/fesm2022/radix-ng-primitives-portal.mjs +40 -16
  69. package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
  70. package/fesm2022/radix-ng-primitives-presence.mjs +134 -246
  71. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
  72. package/fesm2022/radix-ng-primitives-preview-card.mjs +997 -0
  73. package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -0
  74. package/fesm2022/radix-ng-primitives-progress.mjs +231 -92
  75. package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
  76. package/fesm2022/radix-ng-primitives-radio.mjs +211 -70
  77. package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
  78. package/fesm2022/radix-ng-primitives-roving-focus.mjs +127 -77
  79. package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
  80. package/fesm2022/radix-ng-primitives-select.mjs +791 -511
  81. package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
  82. package/fesm2022/radix-ng-primitives-separator.mjs +16 -45
  83. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  84. package/fesm2022/radix-ng-primitives-slider.mjs +976 -720
  85. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  86. package/fesm2022/radix-ng-primitives-stepper.mjs +69 -71
  87. package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
  88. package/fesm2022/radix-ng-primitives-switch.mjs +128 -124
  89. package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
  90. package/fesm2022/radix-ng-primitives-tabs.mjs +388 -115
  91. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
  92. package/fesm2022/radix-ng-primitives-time-field.mjs +111 -117
  93. package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
  94. package/fesm2022/radix-ng-primitives-toggle-group.mjs +122 -248
  95. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  96. package/fesm2022/radix-ng-primitives-toggle.mjs +99 -62
  97. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  98. package/fesm2022/radix-ng-primitives-toolbar.mjs +307 -94
  99. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
  100. package/fesm2022/radix-ng-primitives-tooltip.mjs +690 -1079
  101. package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
  102. package/fesm2022/radix-ng-primitives-visually-hidden.mjs +46 -87
  103. package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
  104. package/fesm2022/radix-ng-primitives.mjs.map +1 -1
  105. package/meter/README.md +3 -0
  106. package/navigation-menu/README.md +2 -1
  107. package/package.json +85 -63
  108. package/portal/README.md +2 -0
  109. package/preview-card/README.md +3 -0
  110. package/schematics/collection.json +1 -0
  111. package/schematics/ng-add/index.d.ts +3 -2
  112. package/schematics/ng-add/index.js +62 -31
  113. package/schematics/ng-add/index.js.map +1 -1
  114. package/schematics/ng-add/package-config.d.ts +4 -2
  115. package/schematics/ng-add/package-config.js +10 -2
  116. package/schematics/ng-add/package-config.js.map +1 -1
  117. package/schematics/ng-add/schema.d.ts +3 -0
  118. package/schematics/ng-add/schema.js +3 -0
  119. package/schematics/ng-add/schema.js.map +1 -0
  120. package/schematics/ng-add/schema.json +14 -0
  121. package/select/README.md +2 -0
  122. package/{accordion/index.d.ts → types/radix-ng-primitives-accordion.d.ts} +102 -67
  123. package/types/radix-ng-primitives-alert-dialog.d.ts +114 -0
  124. package/{arrow/index.d.ts → types/radix-ng-primitives-arrow.d.ts} +1 -1
  125. package/{aspect-ratio/index.d.ts → types/radix-ng-primitives-aspect-ratio.d.ts} +1 -1
  126. package/{avatar/index.d.ts → types/radix-ng-primitives-avatar.d.ts} +7 -11
  127. package/types/radix-ng-primitives-button.d.ts +73 -0
  128. package/{calendar/index.d.ts → types/radix-ng-primitives-calendar.d.ts} +2 -3
  129. package/types/radix-ng-primitives-checkbox.d.ts +337 -0
  130. package/types/radix-ng-primitives-collapsible.d.ts +159 -0
  131. package/types/radix-ng-primitives-collection.d.ts +44 -0
  132. package/{config/index.d.ts → types/radix-ng-primitives-config.d.ts} +1 -1
  133. package/types/radix-ng-primitives-context-menu.d.ts +73 -0
  134. package/{core/index.d.ts → types/radix-ng-primitives-core.d.ts} +311 -236
  135. package/{cropper/index.d.ts → types/radix-ng-primitives-cropper.d.ts} +6 -5
  136. package/{date-field/index.d.ts → types/radix-ng-primitives-date-field.d.ts} +42 -27
  137. package/types/radix-ng-primitives-dialog.d.ts +323 -0
  138. package/{dismissable-layer/index.d.ts → types/radix-ng-primitives-dismissable-layer.d.ts} +15 -7
  139. package/types/radix-ng-primitives-drawer.d.ts +448 -0
  140. package/{editable/index.d.ts → types/radix-ng-primitives-editable.d.ts} +1 -1
  141. package/types/radix-ng-primitives-field.d.ts +373 -0
  142. package/types/radix-ng-primitives-fieldset.d.ts +48 -0
  143. package/{focus-scope/index.d.ts → types/radix-ng-primitives-focus-scope.d.ts} +13 -5
  144. package/types/radix-ng-primitives-input.d.ts +87 -0
  145. package/{label/index.d.ts → types/radix-ng-primitives-label.d.ts} +0 -1
  146. package/types/radix-ng-primitives-menu.d.ts +612 -0
  147. package/types/radix-ng-primitives-menubar.d.ts +66 -0
  148. package/types/radix-ng-primitives-meter.d.ts +193 -0
  149. package/types/radix-ng-primitives-navigation-menu.d.ts +488 -0
  150. package/types/radix-ng-primitives-number-field.d.ts +464 -0
  151. package/{pagination/index.d.ts → types/radix-ng-primitives-pagination.d.ts} +2 -2
  152. package/types/radix-ng-primitives-popover.d.ts +416 -0
  153. package/{popper/index.d.ts → types/radix-ng-primitives-popper.d.ts} +50 -9
  154. package/types/radix-ng-primitives-portal.d.ts +30 -0
  155. package/types/radix-ng-primitives-presence.d.ts +55 -0
  156. package/types/radix-ng-primitives-preview-card.d.ts +359 -0
  157. package/types/radix-ng-primitives-progress.d.ts +206 -0
  158. package/{radio/index.d.ts → types/radix-ng-primitives-radio.d.ts} +56 -26
  159. package/{roving-focus/index.d.ts → types/radix-ng-primitives-roving-focus.d.ts} +38 -27
  160. package/types/radix-ng-primitives-select.d.ts +512 -0
  161. package/types/radix-ng-primitives-separator.d.ts +38 -0
  162. package/types/radix-ng-primitives-slider.d.ts +377 -0
  163. package/{stepper/index.d.ts → types/radix-ng-primitives-stepper.d.ts} +21 -22
  164. package/types/radix-ng-primitives-switch.d.ts +121 -0
  165. package/types/radix-ng-primitives-tabs.d.ts +247 -0
  166. package/{time-field/index.d.ts → types/radix-ng-primitives-time-field.d.ts} +46 -31
  167. package/types/radix-ng-primitives-toggle-group.d.ts +116 -0
  168. package/types/radix-ng-primitives-toggle.d.ts +65 -0
  169. package/types/radix-ng-primitives-toolbar.d.ts +180 -0
  170. package/types/radix-ng-primitives-tooltip.d.ts +395 -0
  171. package/{visually-hidden/index.d.ts → types/radix-ng-primitives-visually-hidden.d.ts} +19 -19
  172. package/alert-dialog/index.d.ts +0 -57
  173. package/checkbox/index.d.ts +0 -164
  174. package/collapsible/index.d.ts +0 -85
  175. package/context-menu/index.d.ts +0 -129
  176. package/dialog/index.d.ts +0 -205
  177. package/dropdown-menu/README.md +0 -1
  178. package/dropdown-menu/index.d.ts +0 -171
  179. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +0 -583
  180. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +0 -1
  181. package/fesm2022/radix-ng-primitives-hover-card.mjs +0 -1246
  182. package/fesm2022/radix-ng-primitives-hover-card.mjs.map +0 -1
  183. package/fesm2022/radix-ng-primitives-tooltip2.mjs +0 -740
  184. package/fesm2022/radix-ng-primitives-tooltip2.mjs.map +0 -1
  185. package/hover-card/README.md +0 -3
  186. package/hover-card/index.d.ts +0 -472
  187. package/menu/index.d.ts +0 -139
  188. package/menubar/index.d.ts +0 -56
  189. package/navigation-menu/index.d.ts +0 -405
  190. package/number-field/index.d.ts +0 -203
  191. package/popover/index.d.ts +0 -403
  192. package/portal/index.d.ts +0 -22
  193. package/presence/index.d.ts +0 -103
  194. package/progress/index.d.ts +0 -79
  195. package/select/index.d.ts +0 -214
  196. package/separator/index.d.ts +0 -63
  197. package/slider/index.d.ts +0 -263
  198. package/switch/index.d.ts +0 -105
  199. package/tabs/index.d.ts +0 -112
  200. package/toggle/index.d.ts +0 -75
  201. package/toggle-group/index.d.ts +0 -194
  202. package/toolbar/index.d.ts +0 -55
  203. package/tooltip/index.d.ts +0 -433
  204. package/tooltip2/README.md +0 -3
  205. package/tooltip2/index.d.ts +0 -325
  206. /package/{focus-guards/index.d.ts → types/radix-ng-primitives-focus-guards.d.ts} +0 -0
  207. /package/{index.d.ts → types/radix-ng-primitives.d.ts} +0 -0
@@ -1,583 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { input, booleanAttribute, numberAttribute, Input, Directive, inject, ElementRef, EventEmitter, Output, NgModule } from '@angular/core';
3
- import { CdkMenuTrigger, MENU_TRIGGER, PARENT_OR_NEW_MENU_STACK_PROVIDER, CdkMenu, CdkMenuItem, CDK_MENU } from '@angular/cdk/menu';
4
- import { Subject, startWith, pairwise } from 'rxjs';
5
- import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
6
- import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
7
- import * as i1 from '@radix-ng/primitives/menu';
8
- import { RdxMenuLabelDirective, RdxMenuSeparatorDirective } from '@radix-ng/primitives/menu';
9
-
10
- var DropdownSide;
11
- (function (DropdownSide) {
12
- DropdownSide["Top"] = "top";
13
- DropdownSide["Right"] = "right";
14
- DropdownSide["Bottom"] = "bottom";
15
- DropdownSide["Left"] = "left";
16
- })(DropdownSide || (DropdownSide = {}));
17
- var DropdownAlign;
18
- (function (DropdownAlign) {
19
- DropdownAlign["Start"] = "start";
20
- DropdownAlign["Center"] = "center";
21
- DropdownAlign["End"] = "end";
22
- })(DropdownAlign || (DropdownAlign = {}));
23
- const mapRdxAlignToCdkPosition = {
24
- start: 'top',
25
- center: 'center',
26
- end: 'bottom'
27
- };
28
- const dropdownPositions = {
29
- top: {
30
- originX: 'start',
31
- originY: 'top',
32
- overlayX: 'start',
33
- overlayY: 'bottom',
34
- offsetX: 0,
35
- offsetY: 0
36
- },
37
- right: {
38
- originX: 'end',
39
- originY: 'top',
40
- overlayX: 'start',
41
- overlayY: 'top',
42
- offsetX: 0,
43
- offsetY: 0
44
- },
45
- bottom: {
46
- originX: 'start',
47
- originY: 'bottom',
48
- overlayX: 'start',
49
- overlayY: 'top',
50
- offsetX: 0,
51
- offsetY: 0
52
- },
53
- left: {
54
- originX: 'start',
55
- originY: 'top',
56
- overlayX: 'end',
57
- overlayY: 'top',
58
- offsetX: 0,
59
- offsetY: 0
60
- }
61
- };
62
- /**
63
- * @group Components
64
- */
65
- class RdxDropdownMenuTriggerDirective extends CdkMenuTrigger {
66
- set rdxDropdownMenuTrigger(value) {
67
- this.menuTemplateRef = value;
68
- }
69
- /**
70
- * The preferred side of the trigger to render against when open.
71
- * Will be reversed when collisions occur and `avoidCollisions` is enabled.
72
- *
73
- * @group Props
74
- * @defaultValue 'bottom'
75
- */
76
- set side(value) {
77
- if (!Object.values(DropdownSide).includes(value)) {
78
- throw new Error(`Unknown side: ${value}`);
79
- }
80
- this._side = value;
81
- this.menuPosition[0] = dropdownPositions[value];
82
- }
83
- get side() {
84
- return this._side;
85
- }
86
- /**
87
- * The preferred alignment against the trigger. May change when collisions occur.
88
- *
89
- * @group Props
90
- * @defaultValue 'center'
91
- */
92
- set align(value) {
93
- if (!Object.values(DropdownAlign).includes(value)) {
94
- throw new Error(`Unknown align: ${value}`);
95
- }
96
- this._align = value;
97
- if (this.isVertical) {
98
- this.defaultPosition.overlayX = this.defaultPosition.originX = value;
99
- }
100
- else {
101
- this.defaultPosition.overlayY = this.defaultPosition.originY = mapRdxAlignToCdkPosition[value];
102
- }
103
- }
104
- get align() {
105
- return this._align;
106
- }
107
- /**
108
- * The distance in pixels from the trigger.
109
- * @group Props
110
- * @defaultValue 0
111
- */
112
- set sideOffset(value) {
113
- // todo need invert value for top and left
114
- if (this.isVertical) {
115
- this.defaultPosition.offsetY = value;
116
- }
117
- else {
118
- this.defaultPosition.offsetX = value;
119
- }
120
- }
121
- get sideOffset() {
122
- return this._sideOffset;
123
- }
124
- /**
125
- * An offset in pixels from the "start" or "end" alignment options.
126
- * @group Props
127
- * @defaultValue 0
128
- */
129
- set alignOffset(value) {
130
- // todo need invert value for top and left
131
- if (this.isVertical) {
132
- this.defaultPosition.offsetX = value;
133
- }
134
- else {
135
- this.defaultPosition.offsetY = value;
136
- }
137
- }
138
- get alignOffset() {
139
- return this._alignOffset;
140
- }
141
- get isVertical() {
142
- return this._side === DropdownSide.Top || this._side === DropdownSide.Bottom;
143
- }
144
- get defaultPosition() {
145
- return this.menuPosition[0];
146
- }
147
- constructor() {
148
- super();
149
- this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
150
- transform: booleanAttribute
151
- }]));
152
- this._side = DropdownSide.Bottom;
153
- this._align = DropdownAlign.Start;
154
- this._sideOffset = 0;
155
- this._alignOffset = 0;
156
- this.onOpenChange = outputFromObservable(this.opened);
157
- // todo priority
158
- this.menuPosition = [{ ...dropdownPositions[DropdownSide.Bottom] }];
159
- }
160
- onPointerDown($event) {
161
- // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
162
- // but not when the control key is pressed (avoiding MacOS right click)
163
- if (!this.disabled() && $event.button === 0 && !$event.ctrlKey) {
164
- /* empty */
165
- if (!this.isOpen()) {
166
- // prevent trigger focusing when opening
167
- // this allows the content to be given focus without competition
168
- $event.preventDefault();
169
- }
170
- }
171
- }
172
- getOverlayRef() {
173
- return this.overlayRef;
174
- }
175
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
176
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxDropdownMenuTriggerDirective, isStandalone: true, selector: "[rdxDropdownMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rdxDropdownMenuTrigger: { classPropertyName: "rdxDropdownMenuTrigger", publicName: "rdxDropdownMenuTrigger", isSignal: false, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: false, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: false, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute } }, outputs: { onOpenChange: "onOpenChange" }, host: { attributes: { "type": "button" }, listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.aria-haspopup": "'menu'", "attr.aria-expanded": "isOpen()", "attr.data-state": "isOpen() ? 'open': 'closed'", "attr.data-disabled": "disabled() ? '' : undefined", "disabled": "disabled()" } }, providers: [
177
- { provide: CdkMenuTrigger, useExisting: RdxDropdownMenuTriggerDirective },
178
- { provide: MENU_TRIGGER, useExisting: CdkMenuTrigger },
179
- PARENT_OR_NEW_MENU_STACK_PROVIDER
180
- ], usesInheritance: true, ngImport: i0 }); }
181
- }
182
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuTriggerDirective, decorators: [{
183
- type: Directive,
184
- args: [{
185
- selector: '[rdxDropdownMenuTrigger]',
186
- standalone: true,
187
- host: {
188
- type: 'button',
189
- '[attr.aria-haspopup]': "'menu'",
190
- '[attr.aria-expanded]': 'isOpen()',
191
- '[attr.data-state]': "isOpen() ? 'open': 'closed'",
192
- '[attr.data-disabled]': "disabled() ? '' : undefined",
193
- '[disabled]': 'disabled()',
194
- '(pointerdown)': 'onPointerDown($event)'
195
- },
196
- providers: [
197
- { provide: CdkMenuTrigger, useExisting: RdxDropdownMenuTriggerDirective },
198
- { provide: MENU_TRIGGER, useExisting: CdkMenuTrigger },
199
- PARENT_OR_NEW_MENU_STACK_PROVIDER
200
- ]
201
- }]
202
- }], ctorParameters: () => [], propDecorators: { rdxDropdownMenuTrigger: [{
203
- type: Input
204
- }], side: [{
205
- type: Input
206
- }], align: [{
207
- type: Input
208
- }], sideOffset: [{
209
- type: Input,
210
- args: [{ transform: numberAttribute }]
211
- }], alignOffset: [{
212
- type: Input,
213
- args: [{ transform: numberAttribute }]
214
- }] } });
215
-
216
- class RdxDropdownMenuContentDirective extends CdkMenu {
217
- constructor() {
218
- super();
219
- this.highlighted = new Subject();
220
- this.menuTrigger = inject(RdxDropdownMenuTriggerDirective, { optional: true });
221
- this.onEscapeKeyDown = () => undefined;
222
- this.closeOnEscape = true;
223
- this.highlighted.pipe(startWith(null), pairwise()).subscribe(([prev, item]) => {
224
- if (prev) {
225
- prev.highlighted = false;
226
- }
227
- if (item) {
228
- item.highlighted = true;
229
- }
230
- });
231
- }
232
- updateActiveItem(item) {
233
- this.keyManager.updateActiveItem(item);
234
- }
235
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
236
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuContentDirective, isStandalone: true, selector: "[rdxDropdownMenuContent]", inputs: { onEscapeKeyDown: "onEscapeKeyDown", closeOnEscape: "closeOnEscape" }, host: { properties: { "attr.data-state": "menuTrigger.isOpen() ? 'open': 'closed'", "attr.data-align": "menuTrigger!.align", "attr.data-side": "menuTrigger!.side", "attr.data-orientation": "orientation" } }, providers: [
237
- {
238
- provide: CdkMenu,
239
- useExisting: RdxDropdownMenuContentDirective
240
- }
241
- ], usesInheritance: true, ngImport: i0 }); }
242
- }
243
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuContentDirective, decorators: [{
244
- type: Directive,
245
- args: [{
246
- selector: '[rdxDropdownMenuContent]',
247
- standalone: true,
248
- host: {
249
- '[attr.data-state]': "menuTrigger.isOpen() ? 'open': 'closed'",
250
- '[attr.data-align]': 'menuTrigger!.align',
251
- '[attr.data-side]': 'menuTrigger!.side',
252
- '[attr.data-orientation]': 'orientation'
253
- },
254
- providers: [
255
- {
256
- provide: CdkMenu,
257
- useExisting: RdxDropdownMenuContentDirective
258
- }
259
- ]
260
- }]
261
- }], ctorParameters: () => [], propDecorators: { onEscapeKeyDown: [{
262
- type: Input
263
- }], closeOnEscape: [{
264
- type: Input
265
- }] } });
266
-
267
- class RdxDropdownMenuItemDirective extends CdkMenuItem {
268
- constructor() {
269
- super();
270
- this.menu = inject(RdxDropdownMenuContentDirective);
271
- this.nativeElement = inject(ElementRef).nativeElement;
272
- this.highlighted = false;
273
- this.disabled = false;
274
- this.onSelect = new EventEmitter();
275
- this.menu.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {
276
- if (value !== this) {
277
- this.highlighted = false;
278
- }
279
- });
280
- this.triggered.subscribe(this.onSelect);
281
- }
282
- onPointerMove() {
283
- if (!this.highlighted) {
284
- this.nativeElement.focus({ preventScroll: true });
285
- this.menu.updateActiveItem(this);
286
- }
287
- }
288
- onKeydown(event) {
289
- if (this.nativeElement.tagName !== 'BUTTON' && ['Enter', ' '].includes(event.key)) {
290
- event.preventDefault();
291
- }
292
- if (event.key === 'Escape') {
293
- if (!this.menu.closeOnEscape) {
294
- event.stopPropagation();
295
- }
296
- else {
297
- this.menu.onEscapeKeyDown(event);
298
- }
299
- }
300
- }
301
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
302
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.3", type: RdxDropdownMenuItemDirective, isStandalone: true, selector: "[rdxDropdownMenuItem]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onSelect: "onSelect" }, host: { attributes: { "type": "button" }, listeners: { "pointermove": "onPointerMove()", "focus": "menu.highlighted.next(this)", "keydown": "onKeydown($event)" }, properties: { "attr.data-orientation": "\"vertical\"", "attr.data-highlighted": "highlighted ? \"\" : null", "attr.data-disabled": "disabled ? \"\" : null", "attr.disabled": "disabled ? \"\" : null" } }, providers: [
303
- { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
304
- { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
305
- ], usesInheritance: true, ngImport: i0 }); }
306
- }
307
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemDirective, decorators: [{
308
- type: Directive,
309
- args: [{
310
- selector: '[rdxDropdownMenuItem]',
311
- standalone: true,
312
- host: {
313
- type: 'button',
314
- // todo horizontal ?
315
- '[attr.data-orientation]': '"vertical"',
316
- '[attr.data-highlighted]': 'highlighted ? "" : null',
317
- '[attr.data-disabled]': 'disabled ? "" : null',
318
- '[attr.disabled]': 'disabled ? "" : null',
319
- '(pointermove)': 'onPointerMove()',
320
- '(focus)': 'menu.highlighted.next(this)',
321
- '(keydown)': 'onKeydown($event)'
322
- },
323
- providers: [
324
- { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
325
- { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
326
- ]
327
- }]
328
- }], ctorParameters: () => [], propDecorators: { disabled: [{
329
- type: Input,
330
- args: [{ transform: booleanAttribute }]
331
- }], onSelect: [{
332
- type: Output
333
- }] } });
334
-
335
- /** Base class providing checked state for selectable DropdownMenuItems. */
336
- class RdxDropdownMenuSelectable extends RdxDropdownMenuItemDirective {
337
- constructor() {
338
- super(...arguments);
339
- /** Whether the element is checked */
340
- this.checked = false;
341
- this.checkedChange = new EventEmitter();
342
- }
343
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
344
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.3", type: RdxDropdownMenuSelectable, isStandalone: true, inputs: { checked: ["checked", "checked", booleanAttribute] }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.aria-checked": "!!checked", "attr.aria-disabled": "disabled || null", "attr.data-state": "checked ? \"checked\" : \"unchecked\"" } }, usesInheritance: true, ngImport: i0 }); }
345
- }
346
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuSelectable, decorators: [{
347
- type: Directive,
348
- args: [{
349
- standalone: true,
350
- host: {
351
- '[attr.aria-checked]': '!!checked',
352
- '[attr.aria-disabled]': 'disabled || null',
353
- '[attr.data-state]': 'checked ? "checked" : "unchecked"'
354
- }
355
- }]
356
- }], propDecorators: { checked: [{
357
- type: Input,
358
- args: [{ transform: booleanAttribute }]
359
- }], checkedChange: [{
360
- type: Output
361
- }] } });
362
-
363
- class RdxDropdownMenuItemCheckboxDirective extends RdxDropdownMenuSelectable {
364
- trigger(options) {
365
- if (!this.disabled) {
366
- this.checked = !this.checked;
367
- this.checkedChange.emit(this.checked);
368
- }
369
- super.trigger(options);
370
- }
371
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
372
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuItemCheckboxDirective, isStandalone: true, selector: "[rdxDropdownMenuItemCheckbox]", host: { attributes: { "role": "menuitemcheckbox" } }, providers: [
373
- { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemCheckboxDirective },
374
- { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
375
- { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
376
- { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
377
- ], usesInheritance: true, ngImport: i0 }); }
378
- }
379
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemCheckboxDirective, decorators: [{
380
- type: Directive,
381
- args: [{
382
- selector: '[rdxDropdownMenuItemCheckbox]',
383
- standalone: true,
384
- host: {
385
- role: 'menuitemcheckbox'
386
- },
387
- providers: [
388
- { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemCheckboxDirective },
389
- { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
390
- { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
391
- { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
392
- ]
393
- }]
394
- }] });
395
-
396
- class RdxDropdownMenuItemIndicatorDirective {
397
- constructor() {
398
- this.item = inject(RdxDropdownMenuSelectable);
399
- }
400
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
401
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuItemIndicatorDirective, isStandalone: true, selector: "[rdxDropdownMenuItemIndicator]", host: { properties: { "style.display": "item.checked ? 'block' : 'none'", "attr.data-state": "item.checked ? 'checked' : 'unchecked'" } }, ngImport: i0 }); }
402
- }
403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemIndicatorDirective, decorators: [{
404
- type: Directive,
405
- args: [{
406
- selector: '[rdxDropdownMenuItemIndicator]',
407
- standalone: true,
408
- host: {
409
- '[style.display]': "item.checked ? 'block' : 'none'",
410
- '[attr.data-state]': "item.checked ? 'checked' : 'unchecked'"
411
- }
412
- }]
413
- }] });
414
-
415
- class RdxDropdownMenuItemRadioGroupDirective {
416
- constructor() {
417
- this.selectionDispatcher = inject(UniqueSelectionDispatcher);
418
- this._value = null;
419
- this.valueChange = new EventEmitter();
420
- }
421
- set value(id) {
422
- this._value = id;
423
- }
424
- get value() {
425
- return this._value;
426
- }
427
- ngAfterContentInit() {
428
- this.selectionDispatcher.notify(this.value, '');
429
- }
430
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
431
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuItemRadioGroupDirective, isStandalone: true, selector: "[rdxDropdownMenuItemRadioGroup]", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "group" } }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], ngImport: i0 }); }
432
- }
433
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemRadioGroupDirective, decorators: [{
434
- type: Directive,
435
- args: [{
436
- selector: '[rdxDropdownMenuItemRadioGroup]',
437
- standalone: true,
438
- host: {
439
- role: 'group'
440
- },
441
- providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }]
442
- }]
443
- }], propDecorators: { value: [{
444
- type: Input
445
- }], valueChange: [{
446
- type: Output
447
- }] } });
448
-
449
- /** Counter used to set a unique id and name for a selectable item */
450
- let nextId = 0;
451
- class RdxDropdownMenuItemRadioDirective extends RdxDropdownMenuSelectable {
452
- get value() {
453
- return this._value || this.id;
454
- }
455
- set value(value) {
456
- this._value = value;
457
- }
458
- constructor() {
459
- super();
460
- /** The unique selection dispatcher for this radio's `RdxDropdownMenuItemRadioGroupDirective`. */
461
- this.selectionDispatcher = inject(UniqueSelectionDispatcher);
462
- this.group = inject(RdxDropdownMenuItemRadioGroupDirective);
463
- /** An ID to identify this radio item to the `UniqueSelectionDispatcher`. */
464
- this.id = `${nextId++}`;
465
- this.triggered.subscribe(() => {
466
- if (!this.disabled) {
467
- this.selectionDispatcher.notify(this.value, '');
468
- this.group.valueChange.emit(this.value);
469
- }
470
- });
471
- }
472
- ngAfterContentInit() {
473
- this.removeDispatcherListener = this.selectionDispatcher.listen((id) => {
474
- this.checked = this.value === id;
475
- });
476
- }
477
- ngOnDestroy() {
478
- super.ngOnDestroy();
479
- this.removeDispatcherListener();
480
- }
481
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
482
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuItemRadioDirective, isStandalone: true, selector: "[rdxDropdownMenuItemRadio]", inputs: { value: "value" }, host: { attributes: { "role": "menuitemradio" } }, providers: [
483
- { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemRadioDirective },
484
- { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
485
- { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
486
- { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
487
- ], usesInheritance: true, ngImport: i0 }); }
488
- }
489
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuItemRadioDirective, decorators: [{
490
- type: Directive,
491
- args: [{
492
- selector: '[rdxDropdownMenuItemRadio]',
493
- standalone: true,
494
- host: {
495
- role: 'menuitemradio'
496
- },
497
- providers: [
498
- { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemRadioDirective },
499
- { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
500
- { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
501
- { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
502
- ]
503
- }]
504
- }], ctorParameters: () => [], propDecorators: { value: [{
505
- type: Input
506
- }] } });
507
-
508
- class RdxDropdownMenuLabelDirective {
509
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
510
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuLabelDirective, isStandalone: true, selector: "[rdxDropdownMenuLabel]", hostDirectives: [{ directive: i1.RdxMenuLabelDirective }], ngImport: i0 }); }
511
- }
512
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuLabelDirective, decorators: [{
513
- type: Directive,
514
- args: [{
515
- selector: '[rdxDropdownMenuLabel]',
516
- hostDirectives: [RdxMenuLabelDirective]
517
- }]
518
- }] });
519
-
520
- class RdxDropdownMenuSeparatorDirective {
521
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
522
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDropdownMenuSeparatorDirective, isStandalone: true, selector: "[rdxDropdownMenuSeparator]", hostDirectives: [{ directive: i1.RdxMenuSeparatorDirective }], ngImport: i0 }); }
523
- }
524
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDropdownMenuSeparatorDirective, decorators: [{
525
- type: Directive,
526
- args: [{
527
- selector: '[rdxDropdownMenuSeparator]',
528
- hostDirectives: [RdxMenuSeparatorDirective]
529
- }]
530
- }] });
531
-
532
- const _imports = [
533
- RdxDropdownMenuTriggerDirective,
534
- RdxDropdownMenuContentDirective,
535
- RdxDropdownMenuItemCheckboxDirective,
536
- RdxDropdownMenuItemIndicatorDirective,
537
- RdxDropdownMenuItemRadioGroupDirective,
538
- RdxDropdownMenuItemRadioDirective,
539
- RdxDropdownMenuSelectable,
540
- RdxDropdownMenuItemDirective,
541
- RdxDropdownMenuLabelDirective,
542
- RdxDropdownMenuSeparatorDirective,
543
- RdxDropdownMenuTriggerDirective
544
- ];
545
- class Rdx {
546
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: Rdx, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
547
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: Rdx, imports: [RdxDropdownMenuTriggerDirective,
548
- RdxDropdownMenuContentDirective,
549
- RdxDropdownMenuItemCheckboxDirective,
550
- RdxDropdownMenuItemIndicatorDirective,
551
- RdxDropdownMenuItemRadioGroupDirective,
552
- RdxDropdownMenuItemRadioDirective,
553
- RdxDropdownMenuSelectable,
554
- RdxDropdownMenuItemDirective,
555
- RdxDropdownMenuLabelDirective,
556
- RdxDropdownMenuSeparatorDirective,
557
- RdxDropdownMenuTriggerDirective], exports: [RdxDropdownMenuTriggerDirective,
558
- RdxDropdownMenuContentDirective,
559
- RdxDropdownMenuItemCheckboxDirective,
560
- RdxDropdownMenuItemIndicatorDirective,
561
- RdxDropdownMenuItemRadioGroupDirective,
562
- RdxDropdownMenuItemRadioDirective,
563
- RdxDropdownMenuSelectable,
564
- RdxDropdownMenuItemDirective,
565
- RdxDropdownMenuLabelDirective,
566
- RdxDropdownMenuSeparatorDirective,
567
- RdxDropdownMenuTriggerDirective] }); }
568
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: Rdx }); }
569
- }
570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: Rdx, decorators: [{
571
- type: NgModule,
572
- args: [{
573
- imports: [..._imports],
574
- exports: [..._imports]
575
- }]
576
- }] });
577
-
578
- /**
579
- * Generated bundle index. Do not edit.
580
- */
581
-
582
- export { DropdownAlign, DropdownSide, Rdx, RdxDropdownMenuContentDirective, RdxDropdownMenuItemCheckboxDirective, RdxDropdownMenuItemDirective, RdxDropdownMenuItemIndicatorDirective, RdxDropdownMenuItemRadioDirective, RdxDropdownMenuItemRadioGroupDirective, RdxDropdownMenuLabelDirective, RdxDropdownMenuSelectable, RdxDropdownMenuSeparatorDirective, RdxDropdownMenuTriggerDirective, mapRdxAlignToCdkPosition };
583
- //# sourceMappingURL=radix-ng-primitives-dropdown-menu.mjs.map