@radix-ng/primitives 0.34.0 → 0.36.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.
- package/calendar/src/calendar-root.directive.d.ts +3 -3
- package/core/index.d.ts +3 -0
- package/core/src/accessor/provide-value-accessor.d.ts +1 -1
- package/core/src/clamp.d.ts +38 -0
- package/core/src/date-time/index.d.ts +3 -0
- package/core/src/date-time/parser.d.ts +37 -0
- package/core/src/date-time/parts.d.ts +12 -0
- package/core/src/date-time/segment.d.ts +4 -0
- package/core/src/date-time/types.d.ts +18 -1
- package/core/src/date-time/useDateField.d.ts +141 -0
- package/core/src/date-time/utils.d.ts +3 -0
- package/core/src/getActiveElement.d.ts +1 -0
- package/core/src/provide-token.d.ts +22 -0
- package/date-field/README.md +1 -0
- package/date-field/index.d.ts +11 -0
- package/date-field/src/date-field-context.token.d.ts +18 -0
- package/date-field/src/date-field-input.directive.d.ts +53 -0
- package/date-field/src/date-field-root.directive.d.ts +126 -0
- package/dialog/src/dialog-ref.d.ts +3 -0
- package/dialog/src/dialog.config.d.ts +1 -0
- package/fesm2022/radix-ng-primitives-calendar.mjs +6 -15
- package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs +3 -4
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +1097 -8
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +334 -0
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-dialog.mjs +54 -4
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs +0 -2
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-number-field.mjs +502 -0
- package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-progress.mjs +3 -3
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +7 -7
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs +7 -15
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tabs.mjs +3 -6
- package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +8 -10
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +5 -12
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/hover-card/src/hover-card-root.directive.d.ts +4 -4
- package/number-field/README.md +1 -0
- package/number-field/index.d.ts +17 -0
- package/number-field/src/number-field-context.token.d.ts +24 -0
- package/number-field/src/number-field-decrement.directive.d.ts +23 -0
- package/number-field/src/number-field-increment.directive.d.ts +23 -0
- package/number-field/src/number-field-input.directive.d.ts +22 -0
- package/number-field/src/number-field-root.directive.d.ts +86 -0
- package/number-field/src/types.d.ts +1 -0
- package/number-field/src/utils.d.ts +18 -0
- package/package.json +9 -1
- package/popover/src/popover-root.directive.d.ts +4 -4
- package/switch/src/switch-root.directive.d.ts +0 -1
- package/toggle/src/toggle.directive.d.ts +0 -1
- package/tooltip/src/tooltip-root.directive.d.ts +4 -4
@@ -85,9 +85,9 @@ export declare class RdxCalendarRootDirective implements AfterViewInit {
|
|
85
85
|
* The days of the week
|
86
86
|
*/
|
87
87
|
readonly weekDays: import("@angular/core").ModelSignal<string[] | undefined>;
|
88
|
-
protected readonly
|
89
|
-
protected readonly
|
90
|
-
protected readonly
|
88
|
+
protected readonly _fixedWeeks: import("@angular/core").WritableSignal<boolean>;
|
89
|
+
protected readonly _disabled: import("@angular/core").WritableSignal<boolean>;
|
90
|
+
protected readonly _pagedNavigation: import("@angular/core").WritableSignal<boolean>;
|
91
91
|
/**
|
92
92
|
* @ignore
|
93
93
|
*/
|
package/core/index.d.ts
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
export * from './src/accessor/provide-value-accessor';
|
2
2
|
export * from './src/auto-focus.directive';
|
3
|
+
export * from './src/clamp';
|
3
4
|
export * from './src/document';
|
4
5
|
export * from './src/focus-initial.directive';
|
6
|
+
export * from './src/getActiveElement';
|
5
7
|
export * from './src/id-generator';
|
6
8
|
export * from './src/inject-ng-control';
|
7
9
|
export * from './src/is-client';
|
@@ -9,6 +11,7 @@ export * from './src/is-inside-form';
|
|
9
11
|
export * from './src/is-nullish';
|
10
12
|
export * from './src/is-number';
|
11
13
|
export * from './src/kbd-constants';
|
14
|
+
export * from './src/provide-token';
|
12
15
|
export * from './src/window';
|
13
16
|
export * from './src/date-time';
|
14
17
|
export * from './src/positioning/constants';
|
@@ -0,0 +1,38 @@
|
|
1
|
+
/**
|
2
|
+
* The `clamp` function restricts a number within a specified range by returning the value itself if it
|
3
|
+
* falls within the range, or the closest boundary value if it exceeds the range.
|
4
|
+
* @param {number} value - The `value` parameter represents the number that you want to clamp within
|
5
|
+
* the specified range defined by `min` and `max` values.
|
6
|
+
* @param {number} min - If the `value` parameter is less than the `min` value, the
|
7
|
+
* function will return the `min` value.
|
8
|
+
* @param {number} max - If the `value` parameter is greater than the `max` value,
|
9
|
+
* the function will return `max`.
|
10
|
+
* @returns The `clamp` function returns the value of `value` constrained within the range defined by
|
11
|
+
* `min` and `max`.
|
12
|
+
*/
|
13
|
+
export declare function clamp(value: number, min?: number, max?: number): number;
|
14
|
+
/**
|
15
|
+
* The function `roundToStepPrecision` rounds a number to a specified precision step.
|
16
|
+
* @param {number} value - The `value` parameter is the number that you want to round to a specific
|
17
|
+
* precision based on the `step` parameter.
|
18
|
+
* @param {number} step - The `step` parameter in the `roundToStepPrecision` function represents the
|
19
|
+
* interval at which you want to round the `value`. For example, if `step` is 0.5, the `value` will be
|
20
|
+
* rounded to the nearest half.
|
21
|
+
* @returns the `roundedValue` after rounding it to the precision specified by the `step`.
|
22
|
+
*/
|
23
|
+
export declare function roundToStepPrecision(value: number, step: number): number;
|
24
|
+
/**
|
25
|
+
* The function `snapValueToStep` snaps a given value to the nearest step within a specified range.
|
26
|
+
* @param {number} value - The `value` parameter represents the number that you want to snap to the
|
27
|
+
* nearest step value.
|
28
|
+
* @param {number | undefined} min - The `min` parameter represents the minimum value that the `value`
|
29
|
+
* should be snapped to. If `value` is less than `min`, it will be snapped to `min`. If `min` is not
|
30
|
+
* provided (undefined), then the snapping will not consider a minimum value.
|
31
|
+
* @param {number | undefined} max - The `max` parameter represents the maximum value that the `value`
|
32
|
+
* should be snapped to. It ensures that the snapped value does not exceed this maximum value.
|
33
|
+
* @param {number} step - The `step` parameter in the `snapValueToStep` function represents the
|
34
|
+
* interval at which the `value` should be snapped to. It determines the granularity of the snapping
|
35
|
+
* operation. For example, if `step` is 5, the `value` will be snapped to the nearest multiple of
|
36
|
+
* @returns a number that has been snapped to the nearest step value within the specified range of minimum and maximum values.
|
37
|
+
*/
|
38
|
+
export declare function snapValueToStep(value: number, min: number | undefined, max: number | undefined, step: number): number;
|
@@ -1,6 +1,9 @@
|
|
1
1
|
export * from './calendar';
|
2
2
|
export * from './comparators';
|
3
3
|
export * from './formatter';
|
4
|
+
export * from './parser';
|
4
5
|
export * from './placeholders';
|
6
|
+
export * from './segment';
|
5
7
|
export * from './types';
|
8
|
+
export * from './useDateField';
|
6
9
|
export * from './utils';
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import { InputSignal } from '@angular/core';
|
2
|
+
import { DateValue } from '@internationalized/date';
|
3
|
+
import { Granularity } from './comparators';
|
4
|
+
import { Formatter } from './formatter';
|
5
|
+
import { HourCycle, SegmentContentObj, SegmentPart, SegmentValueObj } from './types';
|
6
|
+
type SyncDateSegmentValuesProps = {
|
7
|
+
value: DateValue;
|
8
|
+
formatter: Formatter;
|
9
|
+
};
|
10
|
+
type SyncTimeSegmentValuesProps = {
|
11
|
+
value: DateValue;
|
12
|
+
formatter: Formatter;
|
13
|
+
};
|
14
|
+
export declare function syncTimeSegmentValues(props: SyncTimeSegmentValuesProps): SegmentValueObj;
|
15
|
+
export declare function initializeSegmentValues(granularity: Granularity): SegmentValueObj;
|
16
|
+
type SharedContentProps = {
|
17
|
+
granularity: Granularity;
|
18
|
+
dateRef: DateValue;
|
19
|
+
formatter: Formatter;
|
20
|
+
hideTimeZone: boolean;
|
21
|
+
hourCycle: HourCycle;
|
22
|
+
isTimeValue?: boolean;
|
23
|
+
};
|
24
|
+
type CreateContentObjProps = SharedContentProps & {
|
25
|
+
segmentValues: SegmentValueObj;
|
26
|
+
locale: InputSignal<string>;
|
27
|
+
};
|
28
|
+
export declare function syncSegmentValues(props: SyncDateSegmentValuesProps): SegmentValueObj;
|
29
|
+
type CreateContentProps = CreateContentObjProps;
|
30
|
+
export declare function createContent(props: CreateContentProps): {
|
31
|
+
obj: SegmentContentObj;
|
32
|
+
arr: {
|
33
|
+
part: SegmentPart;
|
34
|
+
value: string;
|
35
|
+
}[];
|
36
|
+
};
|
37
|
+
export {};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import type { DateSegmentPart, EditableSegmentPart, SegmentPart, TimeSegmentPart } from './types';
|
2
|
+
export declare const DATE_SEGMENT_PARTS: readonly ["day", "month", "year"];
|
3
|
+
export declare const TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
|
4
|
+
export declare const NON_EDITABLE_SEGMENT_PARTS: readonly ["literal", "timeZoneName"];
|
5
|
+
export declare const EDITABLE_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod"];
|
6
|
+
export declare const EDITABLE_TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
|
7
|
+
export declare const ALL_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod", "literal", "timeZoneName"];
|
8
|
+
export declare const ALL_EXCEPT_LITERAL_PARTS: ("day" | "month" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName")[];
|
9
|
+
export declare function isDateSegmentPart(part: unknown): part is DateSegmentPart;
|
10
|
+
export declare function isTimeSegmentPart(part: unknown): part is TimeSegmentPart;
|
11
|
+
export declare function isSegmentPart(part: string): part is EditableSegmentPart;
|
12
|
+
export declare function isAnySegmentPart(part: unknown): part is SegmentPart;
|
@@ -0,0 +1,4 @@
|
|
1
|
+
export declare function isSegmentNavigationKey(key: string): boolean;
|
2
|
+
export declare function isNumberString(value: string): boolean;
|
3
|
+
export declare function isAcceptableSegmentKey(key: string): boolean;
|
4
|
+
export declare function getSegmentElements(parentElement: HTMLElement): Element[];
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { DateValue } from '@internationalized/date';
|
2
|
+
import { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from './parts';
|
2
3
|
export type DateMatcher = (date: DateValue) => boolean;
|
3
|
-
export type HourCycle = 12 | 24;
|
4
|
+
export type HourCycle = 12 | 24 | undefined;
|
4
5
|
export type Month<T> = {
|
5
6
|
/**
|
6
7
|
* A `DateValue` used to represent the month. Since days
|
@@ -26,3 +27,19 @@ export type Month<T> = {
|
|
26
27
|
*/
|
27
28
|
dates: T[];
|
28
29
|
};
|
30
|
+
export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
|
31
|
+
export type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number];
|
32
|
+
export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
|
33
|
+
export type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
|
34
|
+
export type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;
|
35
|
+
export type AnyExceptLiteral = Exclude<SegmentPart, 'literal'>;
|
36
|
+
export type DayPeriod = 'AM' | 'PM' | null;
|
37
|
+
export type DateSegmentObj = {
|
38
|
+
[K in DateSegmentPart]: number | null;
|
39
|
+
};
|
40
|
+
export type TimeSegmentObj = {
|
41
|
+
[K in TimeSegmentPart]: K extends 'dayPeriod' ? DayPeriod : number | null;
|
42
|
+
};
|
43
|
+
export type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
|
44
|
+
export type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj;
|
45
|
+
export type SegmentContentObj = Record<EditableSegmentPart, string>;
|
@@ -0,0 +1,141 @@
|
|
1
|
+
import { InputSignal, ModelSignal, WritableSignal } from '@angular/core';
|
2
|
+
import { DateValue } from '@internationalized/date';
|
3
|
+
import { Formatter } from './formatter';
|
4
|
+
import { HourCycle, SegmentPart, SegmentValueObj } from './types';
|
5
|
+
export type UseDateFieldProps = {
|
6
|
+
hasLeftFocus: WritableSignal<boolean>;
|
7
|
+
lastKeyZero: WritableSignal<boolean>;
|
8
|
+
placeholder: ModelSignal<DateValue>;
|
9
|
+
hourCycle: HourCycle;
|
10
|
+
formatter: Formatter;
|
11
|
+
segmentValues: WritableSignal<SegmentValueObj>;
|
12
|
+
disabled: InputSignal<boolean>;
|
13
|
+
readonly: InputSignal<boolean>;
|
14
|
+
part: SegmentPart;
|
15
|
+
modelValue: ModelSignal<DateValue | undefined>;
|
16
|
+
focusNext: () => void;
|
17
|
+
};
|
18
|
+
type SegmentAttrProps = {
|
19
|
+
disabled: boolean;
|
20
|
+
segmentValues: SegmentValueObj;
|
21
|
+
hourCycle: HourCycle;
|
22
|
+
placeholder: DateValue;
|
23
|
+
formatter: Formatter;
|
24
|
+
};
|
25
|
+
declare function daySegmentAttrs(props: SegmentAttrProps): {
|
26
|
+
'aria-label': string;
|
27
|
+
'aria-valuemin': number;
|
28
|
+
'aria-valuemax': number;
|
29
|
+
'aria-valuenow': number;
|
30
|
+
'aria-valuetext': string;
|
31
|
+
'data-placeholder': string | undefined;
|
32
|
+
role: string;
|
33
|
+
contenteditable: boolean;
|
34
|
+
tabindex: number | undefined;
|
35
|
+
spellcheck: boolean;
|
36
|
+
inputmode: string;
|
37
|
+
autocorrect: string;
|
38
|
+
enterkeyhint: string;
|
39
|
+
style: string;
|
40
|
+
};
|
41
|
+
declare function monthSegmentAttrs(props: SegmentAttrProps): {
|
42
|
+
'aria-label': string;
|
43
|
+
contenteditable: boolean;
|
44
|
+
'aria-valuemin': number;
|
45
|
+
'aria-valuemax': number;
|
46
|
+
'aria-valuenow': number;
|
47
|
+
'aria-valuetext': string;
|
48
|
+
'data-placeholder': string | undefined;
|
49
|
+
role: string;
|
50
|
+
tabindex: number | undefined;
|
51
|
+
spellcheck: boolean;
|
52
|
+
inputmode: string;
|
53
|
+
autocorrect: string;
|
54
|
+
enterkeyhint: string;
|
55
|
+
style: string;
|
56
|
+
};
|
57
|
+
declare function yearSegmentAttrs(props: SegmentAttrProps): {
|
58
|
+
'aria-label': string;
|
59
|
+
'aria-valuemin': number;
|
60
|
+
'aria-valuemax': number;
|
61
|
+
'aria-valuenow': number;
|
62
|
+
'aria-valuetext': string;
|
63
|
+
'data-placeholder': string | undefined;
|
64
|
+
role: string;
|
65
|
+
contenteditable: boolean;
|
66
|
+
tabindex: number | undefined;
|
67
|
+
spellcheck: boolean;
|
68
|
+
inputmode: string;
|
69
|
+
autocorrect: string;
|
70
|
+
enterkeyhint: string;
|
71
|
+
style: string;
|
72
|
+
};
|
73
|
+
declare function hourSegmentAttrs(props: SegmentAttrProps): {};
|
74
|
+
declare function minuteSegmentAttrs(props: SegmentAttrProps): {};
|
75
|
+
declare function secondSegmentAttrs(props: SegmentAttrProps): {};
|
76
|
+
declare function dayPeriodSegmentAttrs(props: SegmentAttrProps): {};
|
77
|
+
declare function literalSegmentAttrs(_props: SegmentAttrProps): {
|
78
|
+
'aria-hidden': boolean;
|
79
|
+
'data-segment': string;
|
80
|
+
};
|
81
|
+
declare function timeZoneSegmentAttrs(props: SegmentAttrProps): {
|
82
|
+
role: string;
|
83
|
+
'aria-label': string;
|
84
|
+
'data-readonly': boolean;
|
85
|
+
'data-segment': string;
|
86
|
+
tabindex: number | undefined;
|
87
|
+
style: string;
|
88
|
+
};
|
89
|
+
declare function eraSegmentAttrs(props: SegmentAttrProps): {
|
90
|
+
'aria-label': string;
|
91
|
+
'aria-valuemin': number;
|
92
|
+
'aria-valuemax': number;
|
93
|
+
'aria-valuenow': number;
|
94
|
+
'aria-valuetext': unknown;
|
95
|
+
role: string;
|
96
|
+
contenteditable: boolean;
|
97
|
+
tabindex: number | undefined;
|
98
|
+
spellcheck: boolean;
|
99
|
+
inputmode: string;
|
100
|
+
autocorrect: string;
|
101
|
+
enterkeyhint: string;
|
102
|
+
style: string;
|
103
|
+
};
|
104
|
+
export declare const segmentBuilders: {
|
105
|
+
day: {
|
106
|
+
attrs: typeof daySegmentAttrs;
|
107
|
+
};
|
108
|
+
month: {
|
109
|
+
attrs: typeof monthSegmentAttrs;
|
110
|
+
};
|
111
|
+
year: {
|
112
|
+
attrs: typeof yearSegmentAttrs;
|
113
|
+
};
|
114
|
+
hour: {
|
115
|
+
attrs: typeof hourSegmentAttrs;
|
116
|
+
};
|
117
|
+
minute: {
|
118
|
+
attrs: typeof minuteSegmentAttrs;
|
119
|
+
};
|
120
|
+
second: {
|
121
|
+
attrs: typeof secondSegmentAttrs;
|
122
|
+
};
|
123
|
+
dayPeriod: {
|
124
|
+
attrs: typeof dayPeriodSegmentAttrs;
|
125
|
+
};
|
126
|
+
literal: {
|
127
|
+
attrs: typeof literalSegmentAttrs;
|
128
|
+
};
|
129
|
+
timeZoneName: {
|
130
|
+
attrs: typeof timeZoneSegmentAttrs;
|
131
|
+
};
|
132
|
+
era: {
|
133
|
+
attrs: typeof eraSegmentAttrs;
|
134
|
+
};
|
135
|
+
};
|
136
|
+
export declare function useDateField(props: UseDateFieldProps): {
|
137
|
+
handleSegmentClick: (e: MouseEvent) => void;
|
138
|
+
handleSegmentKeydown: (e: KeyboardEvent) => void;
|
139
|
+
attributes: import("@angular/core").Signal<{}>;
|
140
|
+
};
|
141
|
+
export {};
|
@@ -1 +1,4 @@
|
|
1
|
+
import { Granularity } from './comparators';
|
2
|
+
import { HourCycle } from './types';
|
3
|
+
export declare function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle, isTimeValue?: boolean): Intl.DateTimeFormatOptions;
|
1
4
|
export declare function handleCalendarInitialFocus(calendar: HTMLElement): void;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function getActiveElement(): Element | null;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { InjectionToken, Provider, Type } from '@angular/core';
|
2
|
+
/**
|
3
|
+
* Creates an Angular provider that binds the given token to the existing instance
|
4
|
+
* of the specified class. This is especially useful when you want multiple
|
5
|
+
* tokens (or interfaces) to resolve to the same directive/component instance.
|
6
|
+
*
|
7
|
+
* @template T - The type associated with the injection token.
|
8
|
+
* @param token - The InjectionToken or abstract type you want to provide.
|
9
|
+
* @param type - The class type whose existing instance will be used for this token.
|
10
|
+
* @returns A Provider configuration object for Angular's DI system.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
*
|
14
|
+
* @Directive({
|
15
|
+
* providers: [
|
16
|
+
* provideToken(RdxToggleGroupToken, RdxToggleGroupDirective),
|
17
|
+
* provideValueAccessor(RdxToggleGroupDirective)
|
18
|
+
* ]
|
19
|
+
* })
|
20
|
+
* export class RdxToggleGroupDirective {}
|
21
|
+
*/
|
22
|
+
export declare function provideToken<T>(token: InjectionToken<T>, type: Type<unknown>): Provider;
|
@@ -0,0 +1 @@
|
|
1
|
+
# @radix-ng/primitives/date-field
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
import * as i1 from "./src/date-field-root.directive";
|
3
|
+
import * as i2 from "./src/date-field-input.directive";
|
4
|
+
export * from './src/date-field-context.token';
|
5
|
+
export * from './src/date-field-input.directive';
|
6
|
+
export * from './src/date-field-root.directive';
|
7
|
+
export declare class RdxDateFieldModule {
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxDateFieldModule, never>;
|
9
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<RdxDateFieldModule, never, [typeof i1.RdxDateFieldRootDirective, typeof i2.RdxDateFieldInputDirective], [typeof i1.RdxDateFieldRootDirective, typeof i2.RdxDateFieldInputDirective]>;
|
10
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<RdxDateFieldModule>;
|
11
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { InjectionToken, InputSignal, ModelSignal, Signal, WritableSignal } from '@angular/core';
|
2
|
+
import { DateValue } from '@internationalized/date';
|
3
|
+
import { Formatter, HourCycle, SegmentValueObj } from '@radix-ng/primitives/core';
|
4
|
+
export interface DateFieldContextToken {
|
5
|
+
locale: InputSignal<string>;
|
6
|
+
value: ModelSignal<DateValue | undefined>;
|
7
|
+
disabled: InputSignal<boolean>;
|
8
|
+
readonly: InputSignal<boolean>;
|
9
|
+
isInvalid: Signal<boolean>;
|
10
|
+
placeholder: ModelSignal<DateValue>;
|
11
|
+
hourCycle: InputSignal<HourCycle>;
|
12
|
+
formatter: Formatter;
|
13
|
+
segmentValues: WritableSignal<SegmentValueObj>;
|
14
|
+
focusNext: () => void;
|
15
|
+
setFocusedElement: (el: HTMLElement) => void;
|
16
|
+
}
|
17
|
+
export declare const DATE_FIELDS_ROOT_CONTEXT: InjectionToken<DateFieldContextToken>;
|
18
|
+
export declare function injectDateFieldsRootContext(): DateFieldContextToken;
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
2
|
+
import { SegmentPart } from '@radix-ng/primitives/core';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
export declare class RdxDateFieldInputDirective {
|
5
|
+
private el;
|
6
|
+
private readonly rootContext;
|
7
|
+
/**
|
8
|
+
* The part of the date to render
|
9
|
+
* `'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName'`
|
10
|
+
*/
|
11
|
+
readonly part: import("@angular/core").InputSignal<SegmentPart | undefined>;
|
12
|
+
/**
|
13
|
+
* @ignore
|
14
|
+
*/
|
15
|
+
readonly disabled: import("@angular/core").Signal<boolean>;
|
16
|
+
/**
|
17
|
+
* @ignore
|
18
|
+
*/
|
19
|
+
readonly readonly: import("@angular/core").Signal<boolean>;
|
20
|
+
/**
|
21
|
+
* @ignore
|
22
|
+
*/
|
23
|
+
readonly isInvalid: import("@angular/core").Signal<boolean>;
|
24
|
+
/**
|
25
|
+
* @ignore
|
26
|
+
*/
|
27
|
+
readonly hasLeftFocus: import("@angular/core").WritableSignal<boolean>;
|
28
|
+
/**
|
29
|
+
* @ignore
|
30
|
+
*/
|
31
|
+
readonly lastKeyZero: import("@angular/core").WritableSignal<boolean>;
|
32
|
+
private readonly fieldData;
|
33
|
+
private readonly attributes;
|
34
|
+
/**
|
35
|
+
* @ignore
|
36
|
+
*/
|
37
|
+
handleSegmentClick: (e: MouseEvent) => void;
|
38
|
+
/**
|
39
|
+
* @ignore
|
40
|
+
*/
|
41
|
+
handleSegmentKeydown: (e: KeyboardEvent) => void;
|
42
|
+
constructor(el: ElementRef);
|
43
|
+
/**
|
44
|
+
* @ignore
|
45
|
+
*/
|
46
|
+
onFocus(e: FocusEvent): void;
|
47
|
+
/**
|
48
|
+
* @ignore
|
49
|
+
*/
|
50
|
+
onFocusOut(): void;
|
51
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxDateFieldInputDirective, never>;
|
52
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDateFieldInputDirective, "[rdxDateFieldInput]", never, { "part": { "alias": "part"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
53
|
+
}
|
@@ -0,0 +1,126 @@
|
|
1
|
+
import { Direction } from '@angular/cdk/bidi';
|
2
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
3
|
+
import { AfterViewInit, OnInit } from '@angular/core';
|
4
|
+
import { DateValue } from '@internationalized/date';
|
5
|
+
import { DateMatcher, Formatter, Granularity, HourCycle, SegmentValueObj } from '@radix-ng/primitives/core';
|
6
|
+
import * as i0 from "@angular/core";
|
7
|
+
export declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
|
8
|
+
private readonly elementRef;
|
9
|
+
/**
|
10
|
+
* The controlled checked state of the calendar.
|
11
|
+
*/
|
12
|
+
readonly value: import("@angular/core").ModelSignal<DateValue | undefined>;
|
13
|
+
/**
|
14
|
+
* A callback fired when the date field's value is invalid.
|
15
|
+
*/
|
16
|
+
readonly isDateUnavailable: import("@angular/core").InputSignal<DateMatcher | undefined>;
|
17
|
+
/**
|
18
|
+
* The hour cycle to use for formatting times. Defaults to the locale preference
|
19
|
+
*/
|
20
|
+
readonly hourCycle: import("@angular/core").InputSignal<HourCycle>;
|
21
|
+
/**
|
22
|
+
* The granularity to use for formatting the field. Defaults to 'day' if a CalendarDate is provided, otherwise defaults to 'minute'.
|
23
|
+
* The field will render segments for each part of the date up to and including the specified granularity.
|
24
|
+
*/
|
25
|
+
readonly granularity: import("@angular/core").InputSignal<Granularity | undefined>;
|
26
|
+
/**
|
27
|
+
* The locale to use for formatting dates.
|
28
|
+
*/
|
29
|
+
readonly locale: import("@angular/core").InputSignal<string>;
|
30
|
+
readonly dir: import("@angular/core").InputSignal<Direction>;
|
31
|
+
/**
|
32
|
+
* The minimum valid date that can be entered.
|
33
|
+
*/
|
34
|
+
readonly minValue: import("@angular/core").InputSignal<DateValue | undefined>;
|
35
|
+
/**
|
36
|
+
* The maximum valid date that can be entered.
|
37
|
+
*/
|
38
|
+
readonly maxValue: import("@angular/core").InputSignal<DateValue | undefined>;
|
39
|
+
/**
|
40
|
+
* Whether or not to hide the time zone segment of the field.
|
41
|
+
*/
|
42
|
+
readonly hideTimeZone: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
43
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
44
|
+
/**
|
45
|
+
* Whether or not the field is readonly.
|
46
|
+
*/
|
47
|
+
readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
48
|
+
/**
|
49
|
+
* @ignore
|
50
|
+
*/
|
51
|
+
readonly defaultDate: import("@angular/core").Signal<DateValue>;
|
52
|
+
/**
|
53
|
+
* 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
|
54
|
+
*/
|
55
|
+
readonly placeholder: import("@angular/core").ModelSignal<DateValue | undefined>;
|
56
|
+
/**
|
57
|
+
* @ignore
|
58
|
+
*/
|
59
|
+
readonly segmentElements: import("@angular/core").WritableSignal<Set<HTMLElement>>;
|
60
|
+
/**
|
61
|
+
* @ignore
|
62
|
+
*/
|
63
|
+
readonly currentFocusedElement: import("@angular/core").WritableSignal<HTMLElement | null>;
|
64
|
+
/**
|
65
|
+
* @ignore
|
66
|
+
*/
|
67
|
+
formatter: Formatter;
|
68
|
+
/**
|
69
|
+
* @ignore
|
70
|
+
*/
|
71
|
+
readonly segmentValues: import("@angular/core").WritableSignal<SegmentValueObj>;
|
72
|
+
/**
|
73
|
+
* @ignore
|
74
|
+
*/
|
75
|
+
readonly inferredGranularity: import("@angular/core").Signal<Granularity | undefined>;
|
76
|
+
/**
|
77
|
+
* @ignore
|
78
|
+
*/
|
79
|
+
readonly isInvalid: import("@angular/core").Signal<boolean>;
|
80
|
+
/**
|
81
|
+
* @ignore
|
82
|
+
*/
|
83
|
+
readonly allSegmentContent: import("@angular/core").Signal<{
|
84
|
+
obj: import("@radix-ng/primitives/core").SegmentContentObj;
|
85
|
+
arr: {
|
86
|
+
part: import("@radix-ng/primitives/core").SegmentPart;
|
87
|
+
value: string;
|
88
|
+
}[];
|
89
|
+
}>;
|
90
|
+
/**
|
91
|
+
* An array of segments that should be readonly, which prevent user input on them.
|
92
|
+
*/
|
93
|
+
readonly segmentContents: import("@angular/core").Signal<{
|
94
|
+
part: import("@radix-ng/primitives/core").SegmentPart;
|
95
|
+
value: string;
|
96
|
+
}[]>;
|
97
|
+
/**
|
98
|
+
* @ignore
|
99
|
+
*/
|
100
|
+
readonly currentSegmentIndex: import("@angular/core").Signal<number>;
|
101
|
+
/**
|
102
|
+
* @ignore
|
103
|
+
*/
|
104
|
+
readonly prevFocusableSegment: import("@angular/core").Signal<HTMLElement | null>;
|
105
|
+
/**
|
106
|
+
* @ignore
|
107
|
+
*/
|
108
|
+
readonly nextFocusableSegment: import("@angular/core").Signal<HTMLElement | null>;
|
109
|
+
/**
|
110
|
+
* @ignore
|
111
|
+
*/
|
112
|
+
readonly focusNext: () => void;
|
113
|
+
constructor();
|
114
|
+
ngOnInit(): void;
|
115
|
+
ngAfterViewInit(): void;
|
116
|
+
/**
|
117
|
+
* @ignore
|
118
|
+
*/
|
119
|
+
onKeydown(event: KeyboardEvent): void;
|
120
|
+
/**
|
121
|
+
* @ignore
|
122
|
+
*/
|
123
|
+
setFocusedElement(el: HTMLElement): void;
|
124
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxDateFieldRootDirective, never>;
|
125
|
+
static ɵdir: i0.ɵɵ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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, never, never, true, never>;
|
126
|
+
}
|
@@ -10,6 +10,9 @@ export declare const DISMISSED_VALUE: {};
|
|
10
10
|
export declare class RdxDialogRef<C = unknown> {
|
11
11
|
readonly cdkRef: DialogRef<RdxDialogResult<C> | typeof DISMISSED_VALUE, C>;
|
12
12
|
readonly config: RdxDialogConfig<C>;
|
13
|
+
private _previousTimeout;
|
14
|
+
private readonly _openSignal;
|
15
|
+
readonly state: import("@angular/core").Signal<"open" | "closed">;
|
13
16
|
closed$: Observable<RdxDialogResult<C> | undefined>;
|
14
17
|
dismissed$: Observable<void>;
|
15
18
|
result$: Observable<RdxDialogResult<C>>;
|
@@ -26,6 +26,7 @@ type RdxBaseDialogConfig<C> = {
|
|
26
26
|
autoFocus?: AutoFocusTarget | 'first-input' | string;
|
27
27
|
canClose?: (comp: C) => boolean | Observable<boolean>;
|
28
28
|
canCloseWithBackdrop?: boolean;
|
29
|
+
closeDelay?: number;
|
29
30
|
cdkConfigOverride?: Partial<DialogConfig<C>>;
|
30
31
|
mode?: RdxDialogMode;
|
31
32
|
backdropClass?: string | string[];
|
@@ -744,18 +744,9 @@ class RdxCalendarRootDirective {
|
|
744
744
|
* The days of the week
|
745
745
|
*/
|
746
746
|
this.weekDays = model();
|
747
|
-
this.
|
748
|
-
|
749
|
-
|
750
|
-
});
|
751
|
-
this.disabledRef = linkedSignal({
|
752
|
-
source: this.disabled,
|
753
|
-
computation: (value) => value
|
754
|
-
});
|
755
|
-
this.pagedNavigationRef = linkedSignal({
|
756
|
-
source: this.pagedNavigation,
|
757
|
-
computation: (value) => value
|
758
|
-
});
|
747
|
+
this._fixedWeeks = linkedSignal(this.fixedWeeks);
|
748
|
+
this._disabled = linkedSignal(this.disabled);
|
749
|
+
this._pagedNavigation = linkedSignal(this.pagedNavigation);
|
759
750
|
/**
|
760
751
|
* @ignore
|
761
752
|
*/
|
@@ -768,13 +759,13 @@ class RdxCalendarRootDirective {
|
|
768
759
|
locale: this.locale,
|
769
760
|
placeholder: this.placeholder,
|
770
761
|
weekStartsOn: this.weekStartsOn,
|
771
|
-
fixedWeeks: this.
|
762
|
+
fixedWeeks: this._fixedWeeks,
|
772
763
|
numberOfMonths: this.numberOfMonths,
|
773
764
|
minValue: this.minValue,
|
774
765
|
maxValue: this.maxValue,
|
775
|
-
disabled: this.
|
766
|
+
disabled: this._disabled,
|
776
767
|
weekdayFormat: this.weekdayFormat,
|
777
|
-
pagedNavigation: this.
|
768
|
+
pagedNavigation: this._pagedNavigation,
|
778
769
|
isDateDisabled: this.isDateDisabled,
|
779
770
|
isDateUnavailable: this.isDateUnavailable,
|
780
771
|
calendarLabel: this.calendarLabel,
|