@radix-ng/primitives 0.18.2 → 0.20.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 (96) hide show
  1. package/avatar/index.d.ts +1 -2
  2. package/avatar/src/avatar-fallback.directive.d.ts +11 -23
  3. package/avatar/src/avatar-image.directive.d.ts +10 -14
  4. package/avatar/src/avatar-root.directive.d.ts +5 -15
  5. package/checkbox/index.d.ts +11 -0
  6. package/checkbox/src/checkbox-button.directive.d.ts +1 -1
  7. package/checkbox/src/checkbox-indicator.directive.d.ts +1 -1
  8. package/checkbox/src/checkbox-input.directive.d.ts +1 -1
  9. package/checkbox/src/checkbox.directive.d.ts +1 -1
  10. package/compodoc/documentation.json +9385 -4858
  11. package/core/index.d.ts +2 -0
  12. package/core/src/control-value-accessor/index.d.ts +75 -0
  13. package/core/src/create-inject-context/assert-injector.d.ts +51 -0
  14. package/core/src/create-inject-context/index.d.ts +68 -0
  15. package/core/src/types.d.ts +23 -0
  16. package/esm2022/avatar/index.mjs +1 -1
  17. package/esm2022/avatar/src/avatar-fallback.directive.mjs +38 -40
  18. package/esm2022/avatar/src/avatar-image.directive.mjs +25 -26
  19. package/esm2022/avatar/src/avatar-root.directive.mjs +13 -25
  20. package/esm2022/checkbox/index.mjs +31 -1
  21. package/esm2022/checkbox/src/checkbox-button.directive.mjs +3 -3
  22. package/esm2022/checkbox/src/checkbox-indicator.directive.mjs +3 -3
  23. package/esm2022/checkbox/src/checkbox-input.directive.mjs +3 -3
  24. package/esm2022/checkbox/src/checkbox.directive.mjs +3 -3
  25. package/esm2022/core/index.mjs +3 -1
  26. package/esm2022/core/src/control-value-accessor/index.mjs +103 -0
  27. package/esm2022/core/src/create-inject-context/assert-injector.mjs +15 -0
  28. package/esm2022/core/src/create-inject-context/index.mjs +116 -0
  29. package/esm2022/core/src/types.mjs +2 -0
  30. package/esm2022/popover/index.mjs +41 -0
  31. package/esm2022/popover/radix-ng-primitives-popover.mjs +5 -0
  32. package/esm2022/popover/src/popover-arrow.directive.mjs +112 -0
  33. package/esm2022/popover/src/popover-arrow.token.mjs +3 -0
  34. package/esm2022/popover/src/popover-close.directive.mjs +37 -0
  35. package/esm2022/popover/src/popover-content.directive.mjs +227 -0
  36. package/esm2022/popover/src/popover-root.directive.mjs +142 -0
  37. package/esm2022/popover/src/popover-root.inject.mjs +7 -0
  38. package/esm2022/popover/src/popover-root.token.mjs +3 -0
  39. package/esm2022/popover/src/popover-trigger.directive.mjs +42 -0
  40. package/esm2022/popover/src/popover.constants.mjs +90 -0
  41. package/esm2022/popover/src/popover.types.mjs +14 -0
  42. package/esm2022/popover/src/popover.utils.mjs +115 -0
  43. package/esm2022/radio/index.mjs +2 -1
  44. package/esm2022/radio/src/radio-item-input.directive.mjs +37 -0
  45. package/esm2022/radio/src/radio-item.directive.mjs +55 -39
  46. package/esm2022/radio/src/radio-root.directive.mjs +30 -120
  47. package/esm2022/radio/src/radio-tokens.mjs +1 -1
  48. package/esm2022/roving-focus/index.mjs +3 -0
  49. package/esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs +5 -0
  50. package/esm2022/roving-focus/src/roving-focus-group.directive.mjs +138 -0
  51. package/esm2022/roving-focus/src/roving-focus-item.directive.mjs +133 -0
  52. package/esm2022/roving-focus/src/utils.mjs +47 -0
  53. package/esm2022/select/src/select-item.directive.mjs +8 -2
  54. package/esm2022/toggle/src/toggle-input.directive.mjs +4 -3
  55. package/fesm2022/radix-ng-primitives-avatar.mjs +70 -85
  56. package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
  57. package/fesm2022/radix-ng-primitives-checkbox.mjs +35 -10
  58. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
  59. package/fesm2022/radix-ng-primitives-core.mjs +230 -3
  60. package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
  61. package/fesm2022/radix-ng-primitives-popover.mjs +796 -0
  62. package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -0
  63. package/fesm2022/radix-ng-primitives-radio.mjs +145 -186
  64. package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
  65. package/fesm2022/radix-ng-primitives-roving-focus.mjs +320 -0
  66. package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -0
  67. package/fesm2022/radix-ng-primitives-select.mjs +7 -1
  68. package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
  69. package/fesm2022/radix-ng-primitives-toggle.mjs +3 -2
  70. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  71. package/package.json +18 -6
  72. package/popover/README.md +3 -0
  73. package/popover/index.d.ts +17 -0
  74. package/popover/src/popover-arrow.directive.d.ts +37 -0
  75. package/popover/src/popover-arrow.token.d.ts +3 -0
  76. package/popover/src/popover-close.directive.d.ts +15 -0
  77. package/popover/src/popover-content.directive.d.ts +84 -0
  78. package/popover/src/popover-root.directive.d.ts +58 -0
  79. package/popover/src/popover-root.inject.d.ts +2 -0
  80. package/popover/src/popover-root.token.d.ts +3 -0
  81. package/popover/src/popover-trigger.directive.d.ts +18 -0
  82. package/popover/src/popover.constants.d.ts +8 -0
  83. package/popover/src/popover.types.d.ts +34 -0
  84. package/popover/src/popover.utils.d.ts +12 -0
  85. package/radio/index.d.ts +1 -0
  86. package/radio/src/radio-item-input.directive.d.ts +12 -0
  87. package/radio/src/radio-item.directive.d.ts +23 -14
  88. package/radio/src/radio-root.directive.d.ts +19 -34
  89. package/radio/src/radio-tokens.d.ts +6 -4
  90. package/roving-focus/README.md +3 -0
  91. package/roving-focus/index.d.ts +3 -0
  92. package/roving-focus/src/roving-focus-group.directive.d.ts +50 -0
  93. package/roving-focus/src/roving-focus-item.directive.d.ts +50 -0
  94. package/roving-focus/src/utils.d.ts +19 -0
  95. package/select/src/select-item.directive.d.ts +7 -1
  96. package/toggle/src/toggle-input.directive.d.ts +1 -1
package/avatar/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export * from './src/avatar-fallback.directive';
2
- export type { RdxAvatarFallbackProps } from './src/avatar-fallback.directive';
3
2
  export * from './src/avatar-image.directive';
4
- export type { RdxAvatarImageProps } from './src/avatar-image.directive';
5
3
  export * from './src/avatar-root.directive';
4
+ export type { RdxImageLoadingStatus } from './src/avatar-root.directive';
6
5
  export * from './src/avatar.config';
@@ -1,29 +1,17 @@
1
- import { OnDestroy, OnInit } from '@angular/core';
1
+ import { OnDestroy } from '@angular/core';
2
+ import { RdxAvatarRootContext } from './avatar-root.directive';
2
3
  import * as i0 from "@angular/core";
3
- export interface RdxAvatarFallbackProps {
4
- delayMs?: number;
5
- }
6
- export declare class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {
7
- private readonly avatar;
4
+ export declare class RdxAvatarFallbackDirective implements OnDestroy {
5
+ protected readonly avatarRoot: RdxAvatarRootContext;
8
6
  private readonly config;
9
- private readonly ngZone;
10
- private readonly platformId;
11
- /**
12
- * Define a delay before the fallback is shown.
13
- * This is useful to only show the fallback for those with slower connections.
14
- * @default 0
15
- */
16
- delayMs: number;
17
- readonly visible: import("@angular/core").WritableSignal<boolean>;
18
- /**
19
- * Determine the delay has elapsed, and we can show the fallback.
20
- */
21
- private delayElapsed;
7
+ readonly delayMs: import("@angular/core").InputSignal<number>;
8
+ protected readonly canRender: import("@angular/core").WritableSignal<boolean>;
22
9
  private timeoutId;
23
- ngOnInit(): void;
10
+ constructor();
11
+ get shouldRender(): boolean;
12
+ private startDelayTimer;
13
+ private clearDelayTimer;
24
14
  ngOnDestroy(): void;
25
- private updateVisibility;
26
15
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarFallbackDirective, never>;
27
- static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarFallbackDirective, "span[rdxAvatarFallback]", ["rdxAvatarFallback"], { "delayMs": { "alias": "rdxDelayMs"; "required": false; }; }, {}, never, never, true, never>;
28
- static ngAcceptInputType_delayMs: unknown;
16
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarFallbackDirective, "span[rdxAvatarFallback]", ["rdxAvatarFallback"], { "delayMs": { "alias": "delayMs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
29
17
  }
@@ -1,21 +1,17 @@
1
- import { EventEmitter, OnInit } from '@angular/core';
1
+ import { OnInit } from '@angular/core';
2
2
  import { RdxImageLoadingStatus } from './avatar-root.directive';
3
3
  import * as i0 from "@angular/core";
4
- export interface RdxAvatarImageProps {
5
- onLoadingStatusChange?: EventEmitter<RdxImageLoadingStatus>;
6
- }
7
- export declare class RdxAvatarImageDirective implements RdxAvatarImageProps, OnInit {
8
- private readonly avatar;
4
+ export declare class RdxAvatarImageDirective implements OnInit {
5
+ private readonly avatarRoot;
9
6
  private readonly elementRef;
10
- /**
11
- * By default, it will only render when it has loaded.
12
- * You can use the `onLoadingStatusChange` handler if you need more control.
13
- */
14
- onLoadingStatusChange: EventEmitter<RdxImageLoadingStatus>;
7
+ readonly src: (opts?: import("@angular/core").InputOptionsWithoutTransform<string> | undefined) => import("@angular/core").InputSignal<string>;
8
+ readonly onLoadingStatusChange: import("@angular/core").OutputEmitterRef<RdxImageLoadingStatus>;
9
+ readonly imageLoadingStatus: import("@angular/core").Signal<RdxImageLoadingStatus>;
15
10
  ngOnInit(): void;
16
- protected onLoad(): void;
17
- protected onError(): void;
18
- get nativeElement(): HTMLImageElement;
11
+ onLoad(): void;
12
+ onError(): void;
13
+ private setImageStatus;
14
+ get nativeElement(): any;
19
15
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarImageDirective, never>;
20
16
  static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarImageDirective, "img[rdxAvatarImage]", ["rdxAvatarImage"], {}, { "onLoadingStatusChange": "onLoadingStatusChange"; }, never, never, true, never>;
21
17
  }
@@ -1,21 +1,11 @@
1
1
  import * as i0 from "@angular/core";
2
- export declare function injectAvatar(): RdxAvatarRootDirective;
3
2
  export type RdxImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
3
+ export declare class RdxAvatarRootContext {
4
+ readonly imageLoadingStatus: import("@angular/core").WritableSignal<RdxImageLoadingStatus>;
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarRootContext, never>;
6
+ static ɵprov: i0.ɵɵInjectableDeclaration<RdxAvatarRootContext>;
7
+ }
4
8
  export declare class RdxAvatarRootDirective {
5
- /**
6
- * A readonly signal property that holds the current state of image loading.
7
- * To set a new status, use the `setState` method of the component.
8
- * @internal
9
- */
10
- readonly _state: import("@angular/core").WritableSignal<RdxImageLoadingStatus>;
11
- /**
12
- * Set the avatar state.
13
- * @param state The new image loading status to set. This value should be one of the predefined states
14
- * in the `ImageLoadingStatus`
15
- * @returns void This method does not return a value.
16
- * @internal
17
- */
18
- _setState(state: RdxImageLoadingStatus): void;
19
9
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarRootDirective, never>;
20
10
  static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarRootDirective, "span[rdxAvatarRoot]", ["rdxAvatarRoot"], {}, {}, never, never, true, never>;
21
11
  }
@@ -1,5 +1,16 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./src/checkbox-input.directive";
3
+ import * as i2 from "./src/checkbox.directive";
4
+ import * as i3 from "./src/checkbox-button.directive";
5
+ import * as i4 from "./src/checkbox-indicator.directive";
1
6
  export * from './src/checkbox-button.directive';
2
7
  export * from './src/checkbox-indicator.directive';
3
8
  export * from './src/checkbox-input.directive';
4
9
  export * from './src/checkbox.directive';
10
+ export type { CheckboxState } from './src/checkbox.directive';
5
11
  export * from './src/checkbox.token';
12
+ export declare class RdxCheckboxModule {
13
+ static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxModule, never>;
14
+ static ɵmod: i0.ɵɵNgModuleDeclaration<RdxCheckboxModule, never, [typeof i1.RdxCheckboxInputDirective, typeof i2.RdxCheckboxDirective, typeof i3.RdxCheckboxButtonDirective, typeof i4.RdxCheckboxIndicatorDirective], [typeof i1.RdxCheckboxInputDirective, typeof i2.RdxCheckboxDirective, typeof i3.RdxCheckboxButtonDirective, typeof i4.RdxCheckboxIndicatorDirective]>;
15
+ static ɵinj: i0.ɵɵInjectorDeclaration<RdxCheckboxModule>;
16
+ }
@@ -4,5 +4,5 @@ export declare class RdxCheckboxButtonDirective {
4
4
  readonly id: import("@angular/core").InputSignal<string | null>;
5
5
  protected readonly elementId: import("@angular/core").Signal<string | null>;
6
6
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxButtonDirective, never>;
7
- static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxButtonDirective, "button[CheckboxButton]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
7
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxButtonDirective, "button[rdxCheckboxButton]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
8
8
  }
@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
2
2
  export declare class RdxCheckboxIndicatorDirective {
3
3
  protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxDirective;
4
4
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxIndicatorDirective, never>;
5
- static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxIndicatorDirective, "[CheckboxIndicator]", never, {}, {}, never, never, true, never>;
5
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxIndicatorDirective, "[rdxCheckboxIndicator]", never, {}, {}, never, never, true, never>;
6
6
  }
@@ -6,5 +6,5 @@ export declare class RdxCheckboxInputDirective {
6
6
  protected readonly elementId: import("@angular/core").Signal<string | undefined>;
7
7
  protected readonly value: import("@angular/core").Signal<"" | "on" | "off">;
8
8
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxInputDirective, never>;
9
- static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxInputDirective, "input[CheckboxInput]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxVisuallyHiddenInputDirective; inputs: { "feature": "\"fully-hidden\""; }; outputs: {}; }]>;
9
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxInputDirective, "input[rdxCheckboxInput]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxVisuallyHiddenInputDirective; inputs: { "feature": "\"fully-hidden\""; }; outputs: {}; }]>;
10
10
  }
@@ -67,7 +67,7 @@ export declare class RdxCheckboxDirective implements ControlValueAccessor, OnCha
67
67
  */
68
68
  setDisabledState(isDisabled: boolean): void;
69
69
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxDirective, never>;
70
- static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxDirective, "[CheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "checkedChange": "checkedChange"; "indeterminateChange": "indeterminateChange"; }, never, never, true, never>;
70
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxDirective, "[rdxCheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "checkedChange": "checkedChange"; "indeterminateChange": "indeterminateChange"; }, never, never, true, never>;
71
71
  static ngAcceptInputType_checked: unknown;
72
72
  static ngAcceptInputType_indeterminate: unknown;
73
73
  static ngAcceptInputType_disabled: unknown;