@radix-ng/primitives 0.21.0 → 0.23.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 (78) hide show
  1. package/accordion/src/accordion-item.directive.d.ts +22 -13
  2. package/accordion/src/accordion-root.directive.d.ts +22 -3
  3. package/aspect-ratio/src/aspect-ratio.directive.d.ts +5 -3
  4. package/avatar/index.d.ts +9 -0
  5. package/avatar/src/avatar-fallback.directive.d.ts +9 -0
  6. package/avatar/src/avatar-image.directive.d.ts +12 -0
  7. package/collapsible/src/collapsible-content.directive.d.ts +0 -3
  8. package/collapsible/src/collapsible-root.directive.d.ts +11 -4
  9. package/compodoc/documentation.json +2174 -3063
  10. package/dropdown-menu/src/dropdown-menu-trigger.directive.d.ts +30 -3
  11. package/esm2022/accordion/src/accordion-item.directive.mjs +23 -14
  12. package/esm2022/accordion/src/accordion-root.directive.mjs +19 -3
  13. package/esm2022/aspect-ratio/src/aspect-ratio.directive.mjs +4 -2
  14. package/esm2022/avatar/index.mjs +27 -1
  15. package/esm2022/avatar/src/avatar-fallback.directive.mjs +10 -1
  16. package/esm2022/avatar/src/avatar-image.directive.mjs +13 -1
  17. package/esm2022/collapsible/src/collapsible-content.directive.mjs +1 -4
  18. package/esm2022/collapsible/src/collapsible-root.directive.mjs +17 -8
  19. package/esm2022/dropdown-menu/src/dropdown-menu-trigger.directive.mjs +35 -4
  20. package/esm2022/label/src/label.directive.mjs +6 -8
  21. package/esm2022/popover/src/popover.utils.mjs +17 -23
  22. package/esm2022/progress/src/progress-indicator.directive.mjs +1 -2
  23. package/esm2022/progress/src/progress-root.directive.mjs +8 -3
  24. package/esm2022/separator/src/separator.directive.mjs +9 -2
  25. package/esm2022/switch/src/switch-input.directive.mjs +4 -1
  26. package/esm2022/switch/src/switch-root.directive.mjs +28 -3
  27. package/esm2022/switch/src/switch-thumb.directive.mjs +4 -1
  28. package/esm2022/tabs/index.mjs +3 -6
  29. package/esm2022/tabs/src/tabs-content.directive.mjs +14 -8
  30. package/esm2022/tabs/src/tabs-list.directive.mjs +9 -6
  31. package/esm2022/tabs/src/tabs-root.directive.mjs +40 -37
  32. package/esm2022/tabs/src/tabs-trigger.directive.mjs +43 -17
  33. package/esm2022/tabs/src/utils.mjs +7 -0
  34. package/esm2022/toggle/src/toggle.directive.mjs +3 -1
  35. package/esm2022/toggle-group/src/toggle-group-item.directive.mjs +4 -3
  36. package/fesm2022/radix-ng-primitives-accordion.mjs +40 -15
  37. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
  38. package/fesm2022/radix-ng-primitives-aspect-ratio.mjs +3 -1
  39. package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
  40. package/fesm2022/radix-ng-primitives-avatar.mjs +45 -2
  41. package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
  42. package/fesm2022/radix-ng-primitives-collapsible.mjs +16 -10
  43. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  44. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +34 -3
  45. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +1 -1
  46. package/fesm2022/radix-ng-primitives-label.mjs +5 -7
  47. package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
  48. package/fesm2022/radix-ng-primitives-popover.mjs +16 -22
  49. package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
  50. package/fesm2022/radix-ng-primitives-progress.mjs +7 -3
  51. package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
  52. package/fesm2022/radix-ng-primitives-separator.mjs +8 -1
  53. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  54. package/fesm2022/radix-ng-primitives-switch.mjs +33 -2
  55. package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
  56. package/fesm2022/radix-ng-primitives-tabs.mjs +109 -109
  57. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
  58. package/fesm2022/radix-ng-primitives-toggle-group.mjs +3 -2
  59. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  60. package/fesm2022/radix-ng-primitives-toggle.mjs +2 -0
  61. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  62. package/label/src/label.directive.d.ts +5 -7
  63. package/package.json +1 -1
  64. package/progress/src/progress-indicator.directive.d.ts +0 -1
  65. package/progress/src/progress-root.directive.d.ts +7 -2
  66. package/separator/src/separator.directive.d.ts +8 -1
  67. package/switch/src/switch-input.directive.d.ts +3 -0
  68. package/switch/src/switch-root.directive.d.ts +27 -2
  69. package/switch/src/switch-thumb.directive.d.ts +3 -0
  70. package/tabs/index.d.ts +0 -1
  71. package/tabs/src/tabs-content.directive.d.ts +6 -1
  72. package/tabs/src/tabs-list.directive.d.ts +6 -2
  73. package/tabs/src/tabs-root.directive.d.ts +25 -9
  74. package/tabs/src/tabs-trigger.directive.d.ts +13 -3
  75. package/tabs/src/utils.d.ts +2 -0
  76. package/toggle/src/toggle.directive.d.ts +2 -1
  77. package/esm2022/tabs/src/tabs-context.service.mjs +0 -43
  78. package/tabs/src/tabs-context.service.d.ts +0 -22
@@ -6,18 +6,12 @@ import { RdxAccordionOrientation } from './accordion-root.directive';
6
6
  import { RdxAccordionTriggerDirective } from './accordion-trigger.directive';
7
7
  import * as i0 from "@angular/core";
8
8
  export type RdxAccordionItemState = 'open' | 'closed';
9
+ /**
10
+ * @group Components
11
+ */
9
12
  export declare class RdxAccordionItemDirective implements FocusableOption, OnDestroy {
10
- /**
11
- * @ignore
12
- */
13
13
  protected readonly accordion: import("./accordion-root.directive").RdxAccordionRootDirective;
14
- /**
15
- * @ignore
16
- */
17
14
  protected readonly changeDetectorRef: ChangeDetectorRef;
18
- /**
19
- * @ignore
20
- */
21
15
  protected readonly expansionDispatcher: UniqueSelectionDispatcher;
22
16
  /**
23
17
  * @ignore
@@ -34,18 +28,33 @@ export declare class RdxAccordionItemDirective implements FocusableOption, OnDes
34
28
  */
35
29
  readonly id: string;
36
30
  get orientation(): RdxAccordionOrientation;
37
- /** Whether the AccordionItem is expanded. */
31
+ /**
32
+ * @defaultValue false
33
+ * @group Props
34
+ */
38
35
  set expanded(expanded: boolean);
39
36
  get expanded(): boolean;
40
37
  private _expanded;
38
+ /**
39
+ * Accordion value.
40
+ *
41
+ * @group Props
42
+ */
41
43
  set value(value: string);
42
44
  get value(): string;
43
45
  private _value?;
44
- /** Whether the AccordionItem is disabled. */
46
+ /**
47
+ * Whether the AccordionItem is disabled.
48
+ *
49
+ * @defaultValue false
50
+ * @group Props
51
+ */
45
52
  set disabled(value: boolean);
46
53
  get disabled(): boolean;
47
54
  private _disabled;
48
- /** Event emitted every time the AccordionItem is closed. */
55
+ /**
56
+ * Event emitted every time the AccordionItem is closed.
57
+ */
49
58
  readonly closed: EventEmitter<void>;
50
59
  /** Event emitted every time the AccordionItem is opened. */
51
60
  readonly opened: EventEmitter<void>;
@@ -57,7 +66,7 @@ export declare class RdxAccordionItemDirective implements FocusableOption, OnDes
57
66
  /**
58
67
  * Emits whenever the expanded state of the accordion changes.
59
68
  * Primarily used to facilitate two-way binding.
60
- * @docs-private
69
+ * @group Emits
61
70
  */
62
71
  readonly expandedChange: EventEmitter<boolean>;
63
72
  /** Unregister function for expansionDispatcher. */
@@ -8,6 +8,9 @@ import * as i0 from "@angular/core";
8
8
  export type RdxAccordionType = 'single' | 'multiple';
9
9
  export type RdxAccordionOrientation = 'horizontal' | 'vertical';
10
10
  export declare const RdxAccordionRootToken: InjectionToken<RdxAccordionRootDirective>;
11
+ /**
12
+ * @group Components
13
+ */
11
14
  export declare class RdxAccordionRootDirective implements AfterContentInit, OnDestroy {
12
15
  /**
13
16
  * @ignore
@@ -30,10 +33,16 @@ export declare class RdxAccordionRootDirective implements AfterContentInit, OnDe
30
33
  */
31
34
  readonly openCloseAllActions: Subject<boolean>;
32
35
  get isMultiple(): boolean;
33
- /** Whether the Accordion is disabled. */
36
+ /** Whether the Accordion is disabled.
37
+ * @defaultValue false
38
+ * @group Props
39
+ */
34
40
  disabled: boolean;
35
41
  /**
36
42
  * The orientation of the accordion.
43
+ *
44
+ * @defaultValue 'vertical'
45
+ * @group Props
37
46
  */
38
47
  orientation: RdxAccordionOrientation;
39
48
  /**
@@ -42,12 +51,16 @@ export declare class RdxAccordionRootDirective implements AfterContentInit, OnDe
42
51
  */
43
52
  items: QueryList<RdxAccordionItemDirective>;
44
53
  /**
45
- * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
54
+ * The value of the item to expand when initially rendered and type is "single".
55
+ * Use when you do not need to control the state of the items.
56
+ * @group Props
46
57
  */
47
58
  set defaultValue(value: string[] | string);
48
59
  get defaultValue(): string[] | string;
49
60
  /**
50
61
  * Determines whether one or multiple items can be opened at the same time.
62
+ * @group Props
63
+ * @defaultValue 'single'
51
64
  */
52
65
  type: RdxAccordionType;
53
66
  /**
@@ -55,10 +68,16 @@ export declare class RdxAccordionRootDirective implements AfterContentInit, OnDe
55
68
  */
56
69
  collapsible: boolean;
57
70
  /**
58
- * The controlled value of the item to expand
71
+ * The controlled value of the item to expand.
72
+ *
73
+ * @group Props
59
74
  */
60
75
  set value(value: string[] | string);
61
76
  get value(): string[] | string;
77
+ /**
78
+ * Event handler called when the expanded state of an item changes and type is "multiple".
79
+ * @group Emits
80
+ */
62
81
  readonly onValueChange: EventEmitter<void>;
63
82
  private _value?;
64
83
  private _defaultValue;
@@ -6,13 +6,16 @@ import * as i0 from "@angular/core";
6
6
  * The element will have its `padding-bottom` dynamically calculated
7
7
  * based on the provided aspect ratio to maintain the desired ratio.
8
8
  * The content inside the element will be positioned absolutely.
9
+ * @group Components
9
10
  */
10
11
  export declare class RdxAspectRatioDirective implements AfterViewInit {
11
- private element;
12
- private renderer;
12
+ private readonly element;
13
+ private readonly renderer;
13
14
  /**
14
15
  * The desired aspect ratio (e.g., 16/9).
15
16
  * By default, it is set to 1 (which results in a square, 1:1).
17
+ * @group Props
18
+ * @defaultValue 1
16
19
  */
17
20
  readonly ratio: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
18
21
  /**
@@ -21,7 +24,6 @@ export declare class RdxAspectRatioDirective implements AfterViewInit {
21
24
  *
22
25
  * If the ratio is zero, it defaults to `0%` to avoid division by zero.
23
26
  *
24
- * @ignore
25
27
  */
26
28
  protected readonly paddingBottom: import("@angular/core").Signal<string>;
27
29
  ngAfterViewInit(): void;
package/avatar/index.d.ts CHANGED
@@ -1,5 +1,14 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./src/avatar-root.directive";
3
+ import * as i2 from "./src/avatar-fallback.directive";
4
+ import * as i3 from "./src/avatar-image.directive";
1
5
  export * from './src/avatar-fallback.directive';
2
6
  export * from './src/avatar-image.directive';
3
7
  export * from './src/avatar-root.directive';
4
8
  export type { RdxImageLoadingStatus } from './src/avatar-root.directive';
5
9
  export * from './src/avatar.config';
10
+ export declare class RdxCheckboxModule {
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxModule, never>;
12
+ static ɵmod: i0.ɵɵNgModuleDeclaration<RdxCheckboxModule, never, [typeof i1.RdxAvatarRootDirective, typeof i2.RdxAvatarFallbackDirective, typeof i3.RdxAvatarImageDirective], [typeof i1.RdxAvatarRootDirective, typeof i2.RdxAvatarFallbackDirective, typeof i3.RdxAvatarImageDirective]>;
13
+ static ɵinj: i0.ɵɵInjectorDeclaration<RdxCheckboxModule>;
14
+ }
@@ -1,9 +1,18 @@
1
1
  import { OnDestroy } from '@angular/core';
2
2
  import { RdxAvatarRootContext } from './avatar-root.directive';
3
3
  import * as i0 from "@angular/core";
4
+ /**
5
+ * @group Components
6
+ */
4
7
  export declare class RdxAvatarFallbackDirective implements OnDestroy {
5
8
  protected readonly avatarRoot: RdxAvatarRootContext;
6
9
  private readonly config;
10
+ /**
11
+ * Useful for delaying rendering so it only appears for those with slower connections.
12
+ *
13
+ * @group Props
14
+ * @defaultValue 0
15
+ */
7
16
  readonly delayMs: import("@angular/core").InputSignal<number>;
8
17
  protected readonly shouldRender: import("@angular/core").Signal<boolean>;
9
18
  protected readonly canRender: import("@angular/core").WritableSignal<boolean>;
@@ -1,10 +1,22 @@
1
1
  import { OnInit } from '@angular/core';
2
2
  import { RdxImageLoadingStatus } from './avatar-root.directive';
3
3
  import * as i0 from "@angular/core";
4
+ /**
5
+ * @group Components
6
+ */
4
7
  export declare class RdxAvatarImageDirective implements OnInit {
5
8
  private readonly avatarRoot;
6
9
  private readonly elementRef;
10
+ /**
11
+ * @group Props
12
+ */
7
13
  readonly src: import("@angular/core").InputSignal<string | undefined>;
14
+ /**
15
+ * A callback providing information about the loading status of the image.
16
+ * This is useful in case you want to control more precisely what to render as the image is loading.
17
+ *
18
+ * @group Emits
19
+ */
8
20
  readonly onLoadingStatusChange: import("@angular/core").OutputEmitterRef<RdxImageLoadingStatus>;
9
21
  protected readonly imageLoadingStatus: import("@angular/core").Signal<RdxImageLoadingStatus>;
10
22
  ngOnInit(): void;
@@ -2,9 +2,6 @@ import { ElementRef } from '@angular/core';
2
2
  import { RdxCollapsibleRootDirective } from './collapsible-root.directive';
3
3
  import * as i0 from "@angular/core";
4
4
  export declare class RdxCollapsibleContentDirective {
5
- /**
6
- * @ignore
7
- */
8
5
  protected readonly collapsible: RdxCollapsibleRootDirective;
9
6
  /**
10
7
  * Reference to CollapsibleContent host element
@@ -2,33 +2,40 @@ import { EventEmitter } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  export declare function injectCollapsible(): RdxCollapsibleRootDirective;
4
4
  export type RdxCollapsibleState = 'open' | 'closed';
5
+ /**
6
+ * @group Components
7
+ */
5
8
  export declare class RdxCollapsibleRootDirective {
6
9
  /**
7
10
  * Reference to RdxCollapsibleContent directive
8
11
  * @private
9
- * @ignore
10
12
  */
11
13
  private readonly contentDirective;
12
14
  /**
13
15
  * Stores collapsible state
14
- * @private
15
- * @ignore
16
16
  */
17
17
  private _open;
18
18
  /**
19
19
  * Determines whether a directive is available for interaction.
20
20
  * When true, prevents the user from interacting with the collapsible.
21
+ *
22
+ * @group Props
21
23
  */
22
24
  disabled: boolean;
23
25
  /**
24
26
  * The controlled open state of the collapsible.
25
27
  * Sets the state of the directive. `true` - expanded, `false` - collapsed
26
- * @param {boolean} value
28
+ *
29
+ * @group Props
30
+ * @defaultValue false
27
31
  */
28
32
  set open(value: boolean);
33
+ get open(): boolean;
29
34
  /**
30
35
  * Emitted with new value when directive state changed.
31
36
  * Event handler called when the open state of the collapsible changes.
37
+ *
38
+ * @group Emits
32
39
  */
33
40
  onOpenChange: EventEmitter<boolean>;
34
41
  /**